JavaScript介绍
1.1 前端三要素
- HTML 超文本标记语言 决定了网页中的视图内容
- CSS 层叠样式表 决定了网页中的视图效果
- JavaScript 赋予网页动态功能
1.2 JavaScript简介
JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言
-
基于对象:区别于Java中的面向对象,遵循对象.方法的规则,但是没有类的概念
-
事件驱动:脚本语言代码需要由网页中的事件来触发执行
-
脚本语言:JS作为寄生语言,写在HTML网页中
-
JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。
-
JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果
包含三部分:
-
ECMAScript语法:基本的语法结构,包括变量、运算符、分支、循环、函数等。
-
DOM操作:对网页上的标签操作。包含HTML标签和css相关内容。
-
BOM操作:对浏览器的操作。包括历史操作(前进、后退)、地址栏操作等。
1.3 JavaScript可以干什么?
- 可以修改HTML标签的属性
- 可以修改HTML标签的样式
- 动态修改网页中的内容
- 对用户在网页中输入的数据进行校验(格式合法性校验)
- 可以实现与服务端的异步交互
- 可以访问Cookie及localstorage等浏览器端缓存数据
1.4 JavaScript不能做什么?
- JS不能访问浏览器本地的用户文件
- JS不能访问来自于不同服务器的缓存数据(Cookie)
二、JS的使用方式
JS的使用方式,包含三种方式:
-
1、直接在html标签中写JS
-
2、在head标签中或者任意位置的标签中写代码。最好将script放在网页文件的body标签的最后面
-
3、在一个后缀名为js的文件中写代码,在页面上引用。
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/common.js" ></script>
<script type="text/javascript">
function fn1(){
alert('我是谁?我在哪里?我要干什么?');
}
</script>
</head>
<body>
<a href="" onclick="return confirm('确定要删除吗?');">删除</a>
<input type="button" value="点击" onclick="fn1()"/>
<input type="button" value="First Blood" onclick="fn2()"/>
</body>
</html>
common.js
function fn2(){
alert('我又来了');
}
注意:
-
1、type要么不写,使用默认,要写就写正确。
-
2、
<script>
标签在引入外部js时,不要直接使用自结束。 -
3、在引入外部js的
<script>
标签中,不能写代码。
三、基本语法
3.1 变量
命名规则与Java相似。
变量定义:var num = 10;
没有变量类型的声明。
在<script>
标签中写的代码,如果没有被函数包含,则表示直接执行的代码。
注意:
-
1、由于JS脚本语言的特征,不需要编译,所以即使代码有错误,仍旧会执行到有错误的地方才停止。
-
2、代码可以不需要分号结束。(不推荐)
-
3、var可以不写,但是建议还是写上。
3.2 数据类型
基本数据类型:
-
Number:js中数字类型只有一种,所以没有Java中的整数除以整数等于整数的问题。
-
String:通用的字符串类型,求长度是length属性。
-
布尔:true和false。
-
undefined:当获取某个变量的属性不存在,会返回一个undefined。即没有定义。
-
null:当获取的值为null时。
引用数据类型:数组和对象
- 数组:相当于Java中的数组和List的一个结合体。
代码演示
// 第一种定义方式:类似数组
var arr = [1,2,3];
// 第二种定义方式:类似集合,两种定义方式没有区别
var arr1 = new Array();
// 在控制台输出
console.log(arr[1]);
// 如果超出下标访问,不会出错,会显示undefined
console.log(arr[5]);
// 显示长度
console.log(arr.length);
// 给超出的下标赋值,成功
arr[10] = 10;
// 显示长度,显示11
console.log(arr.length);
// 中间的没有赋值的元素值为undefined
console.log(arr[8]);
// 把arr数组当集合操作
// 在最后添加一个新元素
arr.push(100);
// 遍历集合元素
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
// 操作数组,
/*
参数1:从哪个下标开始操作
参数2:操作几个元素
参数3...:将操作的元素替换为
例如:
arr.splice(1, 1);表示将数组中从1号下标开始的1个元素替换成没有,即删除一个元素
arr.splice(1, 5);表示将数组中从1号下标开始的5个元素替换成没有,即删除5个元素
arr.splice(1, 0, 5);表示将数组中从1号下标开始的0个元素替换成5,即在2号下标处插入一个元素5
arr.splice(1, 1, 5);表示将数组中从1号下标开始的1个元素替换成5,即将2号下标修改成元素5
*/
arr.splice(1, 1, 4,5,6,7)
// foreach循环(在js中叫for...in循环),在js中for..in循环也是循环的下标
for (var num in arr) {
console.log(arr[num]);
}
- 对象:相当于Java中的实体类或map。
// 定义一个对象或map,key可以加引号,也可以不加
var map = {name:"mary", "age":20}
// 以map的形式取值,以key作为下标访问
console.log(map["name"]);
// 以对象的形式取值
console.log(map.age);
// 赋值
map.sex = "男";
map["id"] = 1;
map.type = {id:1, name:"法师"}
console.log(map);
console.log(map.type.name);
3.3 运算符
与Java一样。
var str1 = "hello";
var str2 = "hello";
console.log(str1 == str2); // 字符串比较使用==,没有equals
var n1 = "2";
var n2 = 2;
console.log(n1 == n2); // 只是比较值是否相等,此处返回true
console.log(n1 === n2); // 比较值的同时,还要比较数据类型,此处返回false
3.4 分支和循环
-
分支中,if条件不需要使用Boolean值。
-
如果条件为一个变量,值为0、null、undefined、NaN表示false,否则为true。(NaN:not a number不是数字)
-
如果出现未定义的变量,会报错。
注意: 变量未定义和undefined的区别。
3.5 函数
函数是js中需要重点理解的内容。
// 定义一个函数,相当于Java中的方法
// 使用function关键字来声明
// fn1作为一个函数的名称
// 后面的()表示调用该函数
function fn1(){
console.log("hello, world");
return 5;
}
// 调用函数
fn1();
var n = fn1(); // 此处n等于5
var m = fn1; // 此处相当于把fn1这个函数名称赋值给m了,所以m就是fn1
m(); // 此处调用该方法
// 函数的参数, 可以给参数设置默认值,当没有传该参数时,会自动使用默认值
function fn2(n = 3, m = 5){
console.log("fn2方法被调用");
console.log(n);
console.log(m);
}
fn2(); // 调用方法时,如果不传参,也可以调用该方法,参数会为undefined,如果有默认值会使用默认值
fn2("参数1");
fn2("参数1", "参数2");
// 将函数作为方法的参数
function fn3(m){
m();
}
// 调用fn3
fn3(fn1);
// 自定义个变量,值为一个函数
var fn4 = function (){
console.log("hello, fn4");
};
// 调用fn3
fn3(fn4);
// 说明函数的定义有两种方式。
// 定义一个对象,包含属性和方法。
var stu = {"name": "Jack", age : 20, "say":function(){
console.log(this.name + ", " + this.age);
}};
// 输出属性和调用方法
console.log(stu.name);
stu.say();
// 奇葩的写法
function fn5(){
return function (){
return function (){
return function (){
console.log("hello, aaaa");
};
};
};
}
fn5()()()();
// 实例
// 计算两个数字的值
function fn6(m){
var n1 = 3;
var n2 = 5;
return m(n1, n2);
}
var re = fn6(function(n1, n2){
return n1 + n2;
});
console.log(re);
3.6 系统自带函数
系统自带的函数,例如弹窗函数alert(),可以直接使用,不需要任何对象调用。那么这些不需要使用任何对象调用的函数或者变量(包括自定义的函数和变量),都是归属于window对象的。所以可以写作window.alert()。但是一般都会省掉。
var n = 5;
window.alert(window.n);
function fn1(){
alert('我很好');
}
window.fn1();
3.6.1 弹窗函数
-
alert():弹出一个确定框。
-
confirm():弹出一个确定取消框,当点击确定时,返回true,点击取消,返回false。
-
prompt(‘提示信息’, ‘输入框默认值’):弹出一个输入框。点击确定,会返回输入的内容,点击取消,返回null。
示例代码
var r = confirm('是否确定');
if(r){
console.log('点击了确定');
}else{
console.log('点击了取消');
}
// 实际应用案例
// <a href="https://www.baidu" οnclick="return confirm('确定要删除吗?')">删除</a>
var r = prompt('请输入姓名', 'zhangsan');
console.log(r);
3.6.2 常见的其他函数
-
parseInt() :将内容转换成整数。如果是字符串,会从第一个字母开始转换,能转就转,不能转就返回NaN。也可以将小数转换成整数。
-
parseFloat():将内容转换成小数。
-
isNaN() :判断是否不是数字。
parseInt('100Hello'); // 返回100
parseInt('Hello100'); // 返回NaN
parseInt(100.5); // 返回100
3.7 事件
页面上HTML元素一些行为过程中产生的操作。
例如:按钮点击。产生点击事件
事件中一般都是调用js函数。
常见的事件如下:
鼠标相关事件:(所有事件前面都有单词on)
- mouseover:当鼠标移动到元素上。
- mouseout:当鼠标从元素上移出。
- mousemove:鼠标在元素上移动。
- mouseenter:当鼠标移动到元素上。
- mouseleave:当鼠标从元素上移出。
- mouseup:鼠标弹起。
- mousedown:鼠标按下。
- click:鼠标单击。
键盘事件:
- keydown:键按下。
- keyup:键弹起。
其他事件:
- change:元素内容改变。
- focus:元素获得焦点。
- blur:元素失去焦点。
- load:元素加载。
- submit:表单提交。
四、内置对象
内置对象,JavaScript提供的预定义对象,不同的对象提供相应的方法,每个方法可以完成特定的功能
我们可以把JS中的内置对象类别为Java中的类
- String 提供了对字符串的操作方法
- Math 提供了数学运算相关的操作方法
- Array 提供了数组的操作方法(相当于Java中数组和集合的合体)
- Date 提供了日期/时间处理的相关方法
- RegExp 用于验证数据是否满足特定的格式 (手机号规则: ^1[3,5,6,7,8,9]\d{9}$ )
- 全局对象(Functions Global)
在线参考手册:https://www.w3school/jsref/index.asp
4.1 String
- 字符串,JS中所有值为字符串的变量都是String对象
代码演示
function testString(){
//创建String对象
var s = "www.baidu";
// 常用属性(求字符串长度)
var len = s.length;
//charAt() 获取字符串中指定索引出的字符
var r1 = s.charAt(5);
//charCodeAt() 获取字符串中指定索引出的字符的ascii
var r2 = s.charCodeAt(5);
//indexOf() 返回"."在s中第一次出现的位置 (如果s中不包含"."则返回-1)
var r3 = s.indexOf(".");
//lastIndexOf() 返回"."在s中第最后一次出现的位置
var r4 = s.lastIndexOf(".");
//replace() 将s中的第一个“.”替换成@
var r5 = s.replace(".","@");
//split() 将s字符串以"."进行分割成多个字符串存放在数组中
var arr = s.split(".");
//substring(i) 从s中索引为4的位置(包含)开始截取直到字符串末尾
var r6 = s.substring(4);
//substring(i,j) 从s中索引为4开始截取(包含),到索引为6结束(不包含)
var r7 = s.substring(4,6);
//substr(4,6) 从s中索引为4开始截取(包含),共截取6个字符
var r8 = s.substr(4,6);
//match(reg) 验证当前字符串是否满足特定的规则,如果不满足则返回null
var s1 = "14030303300";
var r9 = s1.match("1[3,5,6,7,9]\\d{9}");
}
4.2 Math
- 相当于Java中的Math类,其中包含的常量和方法都是“静态”的
常量
var pi = Math.PI;
var e = Math.E;
常用方法
function testMath(){
//常量
var pi = Math.PI;
var e = Math.E;
//方法
//产生[0,1)之间的随机小数
var r1 = Math.random();
//Math.floor(m); 获取小于m的最大整数
var r2 = Math.floor(-3.672);
//Math.ceil(m); 获取大于m的最小整数
var r3 = Math.ceil(-3.00001);
//四舍五入
var r4 = Math.round(3.499);
alert(r4);
}
4.3 Array
数组,兼具Java中数组和集合的特性
- 长度可变
- 索引操作
属性和方法
function testArray(){
//定义Array对象
var arr1 = new Array();
var arr2 = new Array("aaa","bbb","ccc");
arr1[0] = "a";
arr1[1] = "c";
arr1[2] = "b";
//length属性,获取数组的长度
var len = arr1.length;
//arr2.concat(arr1) 将arr2和arr1合并成一个数组
var r1 = arr2.concat(arr1);
//join 取出当前数组中的元素拼接成字符串(默认使用,拼接;可以通过参数指定拼接符号)
var r2 = arr2.join("-");
//pop() 出栈,从数组中取出最后一个元素,并从原数组中移除
var r3 = arr2.pop();
//push(e) 入栈,在数组最后面添加一个元素
arr2.push("ddd");
//reverse() 将原数组中的元素进行反转
arr2.reverse();
//sort排序
arr1.sort();
}
4.4 Date
- 日期
常用方法
function testDate(){
//new一个Date对象表示当前系统时间
var date = new Date();
var y1 = date.getYear(); //获取年份相对于1900年的偏移值
var year = date.getFullYear();
var month = date.getMonth()+1; //0-11 表示1-12月
var d = date.getDate(); //获取到日期
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
sec = sec<10?"0"+sec:sec;
var day = date.getDay(); //获取星期
var time = year+"年"+month+"月"+d+"日 "+hour+":"+min+":"+sec+" 星期"+day;
document.getElementById("timeHeader").innerHTML = time;
setTimeout("testDate()",1000);
}
4.5 RegExp
-
正则校验,验证用户输入的数据是否满足特定的规则
-
定义的规则——正则表达式
4.5.1 正则表达式
用特定的符号来定义某种数据格式(规则)
- 元字符 定义一些符号表示特定的字符串组成
- \d 数字
- \w 字符 [a-zA-Z0-9]
- 方括号
- 0-9
- 量词 设定特定符号的循环次数
+
至少出现一次 {1,}*
0次或多次 {0,}- {5} 必须出现5次
- {5,10} 至少循环5次,最多循环10次
- {5,} 至少循环5次
- 定义一个正则表达式
var reg = "^\d{3}-\d{8}|\d{4}-\d{7}$";
4.5.2 RegExp进行正则校验
创建RegExp对象
var regExp = new RegExp("^1[3,5,7,9]\d{9}$");
var regExp = /^1[3,5,7,9]\d{9}$/;
常用方法
<input type="text" id="tel"/><label id="tips"></label>
<hr />
<button onclick="testRegExp()">测试RegExp</button>
代码演示
// 修饰符i(忽略大小写), g(全局), m(多行匹配)
// 正则表达式的创建
// 使用new创建
var r1 = new RegExp('[abc]', 'i');
var r2 = /[abc]/i;
// 正则表达式的使用
console.log(r1.test("b")); // 返回一个布尔值
console.log("c".match(r2)); // 返回一个数组,表示匹配的内容
// 说明[abc]表示一个字符,该字符需要满足是abc中的一个
console.log(r2.test("d"));
// 匹配所有的字母
var r3 = /^[^a-zA-Z]$/; // 此处^表示匹配字符串的开始,$表示匹配字符串的结束
// 中括号表示一个字符,中括号中间的^表示取反
console.log(r3.test("1"));
var r4 = /^(abc|def|hij)$/; // 此处|表示或者,小括号就表示区分
console.log(r4.test("def"));
// \w \W \d \D \s \S .这些元字符来匹配相应的内容,分别对应数字字母下划线,非数字字母下划线,数字,非数字,空格,非空格,非换行的任意字符
var r5 = /^[\w]$/; // 匹配一个字母
console.log(r5.test("_"));
// + 1到多,* 0到多,? 0到1,{5} 5次,{5,} 5到多次,{6,12}6到12次
var r6 = /^[\w]+$/; // 匹配1到多个字母
console.log(r6.test("a"));
var r7 = /^[\w]*$/; // 匹配0到多个字母
console.log(r7.test(""));
var r8 = /^[A-z][A-z0-9]{5,11}$/; // 由字母数字组成,6到12位
console.log(r8.test("2sdjfsdf"));
4.6 Functions
Functions实际上是一个虚拟的内置对象,在JS中提供了一些全局的JS方法,我们认为这些全局方法都属于这个虚拟的全局内置对象 global
var s = "123";
var m = Functions.parseInt(s);
常用方法
function testFunctions(){
//escape
var s1 = "https://www.baidu/s?kw=姜子牙";
//escape对字符串中的符号和汉字进行编码
var s2 = escape(s1);
//unescape 反编码、解码
var s3 = unescape(s2);
//对url的参数部分进行编码
var s4 = encodeURI(s1);
//对url编码后的字符串进行解码
var s5 = decodeURI(s4);
var s6 = "345";
//将字符串转换成浮点数
var s7 = parseFloat(s6);
//将字符串转换成整数
var s8 = parseInt(s6);
var s9 = '{"stuNum":"10001","stuName":"王二狗","stuAge":21}';
//对满足特定格式(JSON)的字符串进行格式化
var s10 = eval("("+s9+")");
alert(s10.stuName);
}
五、BOM
5.1 BOM介绍
BOM (Browser Object Model)浏览器对象模型,JS作为一种脚本语言寄生在HTML文档中,用于实现对HTML文档的动态操作,因为HTML文档是通过浏览器窗口进行显示的,JS为了更好的实现对HTML文档的控制,提供了一些列对象用于获取或设置当前HTML文档的显示环境。
- window(顶层对象) 打开当前HTML文档的浏览器窗口,它是HTML文档直接显示容器
- window.navigator 打开当前浏览器窗口的浏览器应用
- window.screen 打开当前浏览器的显示屏
- window.history 当前浏览器窗口浏览历史记录
- window.location 当前浏览器窗口的地址栏
5.2 window对象
常用属性
- closed
- length
- name
- self/parent/top
//login.html
<script type="text/javascript">
if(window.top != window.self){
window.top.location = window.self.location;
}
</script>
status 状态栏
//设置当前浏览器窗口的状态栏文本
window.status = "☆★☆★☆★☆★☆★☆★☆★☆★☆★";
//获取到当前浏览器窗口的状态栏文本
var v4 = window.status;
常用方法
- alert();
- confirm();
- prompt();
- open();
setTimeout/clearTimeout
<button onclick="testSetTimeout()">测试setTimeout</button>
<button onclick="testClearTimeout()">测试clearTimeout</button>
var task1;
function testSetTimeout(){
//延时调用:延迟指定时间调用指定方法(只调用一次)
task1 = setTimeout("test()",3000);
}
function testClearTimeout(){
clearTimeout(task1);
}
function test(){
alert(1);
}
setInterval/clearInterval
<button onclick="testSetInterval()">测试setInterval</button>
<button onclick="testClearInterval()">测试clearInterval</button>
var task2;
function testSetInterval(){
//循环调用:每隔指定的时间就调用一次指定的方法(不停的调用)
task2 = setInterval("test()",2000);
}
function testClearInterval(){
clearInterval(task2);
}
function test(){
alert(1);
}
5.3 navigator对象
- 浏览器对象,只读
<button onclick="testNavigator()">测试navigator</button>
<script type="text/javascript">
function testNavigator(){
//navigator 我们可以理解为只读对象,用于获取浏览器的属性
var v1 = navigator.appCodeName;
var v2 = navigator.appName;
var v3 = navigator.appVersion;
//检查浏览器是否启用cookie
var b = navigator.cookieEnabled;
//使用JS操作cookie
//写cookie
document.cookie = "key1=value1";
document.cookie = "key2=value2";
document.cookie= "key2=value3";
//读cookie
var kv = document.cookie;
alert(kv);
}
</script>
5.4 screen对象
- 客户端屏幕对象,只读
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="testScreen()">测试screen</button>
<script type="text/javascript">
function testScreen(){
//返回设备的一英寸的物理像素点
var xdpi = screen.deviceXDPI;
var ydpi = screen.deviceYDPI;
//返回屏幕的可用宽度和高度(除windows的任务栏)
var aw = screen.availWidth;
var ah = screen.availHeight;
//返回屏幕的宽度和高度
var w = screen.width;
var h = screen.height;
alert(w+"*"+h);
}
</script>
</body>
</html>
5.5 history对象
- 当前浏览器窗口的历史纪录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
This is Page C.
<hr/>
<a href="d.html">D</a>
<br/>
<button onclick="syy2()">后退2</button>
<button onclick="syy()">后退</button>
<button onclick="xyy()">前进</button>
<button onclick="xyy2()">前进2</button>
<script type="text/javascript">
function syy2(){
history.go(-2);
}
function syy(){
history.back(); //go(-1)
}
function xyy(){
history.forward();//go(1)
}
//前进2页,自行完成
</script>
</body>
</html>
5.6 location对象
- 浏览器窗口的地址栏
属性
//location.herf 表示地址栏中的地址0
//获取地址信息
var url = location.herf;
//设置当前窗口的地址信息(实现跳转)
location.href = "https://www.baidu";
**方法
//用指定的url替换当前地址栏url(实现跳转)
location.replace("https://www.baidu");
//刷新当前地址栏(刷新网页)
location.reload();
六、DOM
DOM:document object model,文档对象模型。DOM操作就是指使用js操作页面上的标签和css样式。
6.1 DOM树
- 满足XML规范的文档我们可以看作一颗数的结构
术语
- 元素 HTML标签及其属性和所有子标签的整体
- 节点 HTML文档中的标签、属性、文本统称为节点
- 层级:子节点、父节点、根节点
- 类型:标签节点、属性节点、文本节点
6.2 document对象
- document对象,表示当前HTML文档,通过document可以获取当前HTML文档中的任何一个元素。
集合属性
//all 获取当前文档中的所有元素
var arr1 = document.all;
//forms 获取当前文档中所有的表单元素
var arr2 = document.forms;
//表单元素可以执行: e.submit() 提交表单
//images 获取当前文档中所有的图片
var arr3 = document.images;
//links 获取当前文档中所有的超链接(a、area)
var arr4 = document.links;
属性
//cookie
//设置/修改cookie键值对
document.cookie = "key=value";
document.cookie = "key1=value2";
//获取cookie(字符串)
var c = document.cookie;
//返回当前文档的域名
var domain = document.domain;
//返回当前文档的url
var url = document.URL;
//获取当前文档的标题
var title = document.title;
//设置当前文档的标题
document.title="从前有座山";
方法
//write 使用指向文档的输出流输出指定的内容(会覆盖原有的内容)
document.writeln("<label style='color:orange'>从前有座山</label>");
document.writeln("<br/>");
document.write("<label style='color:red'>山里有座庙</label>");
//document.close();
//document.open();
document.write("<label style='color:red'>庙里有口井</label>");
//getElementsByTagName 根据标签名获取页面中的元素(数组)
var arr5 = document.getElementsByTagName("tr");
//getElementsByClassName 根据标签的class属性获取页面中的元素(数组)
var arr6 = document.getElementsByClassName("inputStyle");
//getElementsByName 根据标签的name属性获取页面中的元素(数组)
var arr7 = document.getElementsByName("hobby");
//getElementById 根据标签的id属性获取页面中的某一个元素
var e = document.getElementById("btn");
6.3 DOM操作
- DOM操作,指定就是对HTML文档中节点(标签、属性、文本)的操作
6.3.1 节点基本操作
<div id="div1" style="width:600px; height: 300px; background: pink;">wahaha<h4>枫桥夜泊</h4><p>-张继-</p><p>月落乌啼霜满天,</p><p>江枫渔火对愁眠;</p><p>姑苏城外寒山寺,</p><p>夜半钟声到客船。</p></div>
<button onclick="testDocument()">DOM操作</button>
<script type="text/javascript">
function testDocument(){
// nodeType nodeName nodeValue
//标签节点(元素) 1 标签名 null
//属性节点(属性) 2 属性名 属性值
//文本节点 3 #text 文本值
var tagNode = document.getElementById("div1");
//获取标签节点的属性(数组,属性节点)
var attrNodes = tagNode.attributes;
//获取标签节点的子节点(包括文本子节点、标签子节点)
var cns = tagNode.childNodes;
//获取当前节点的父节点(标签节点)
var bodyTag = tagNode.parentNode;
var node = tagNode;
var type = node.nodeType;
var name = node.nodeName;
var value = node.nodeValue;
console.log("nodeType:"+type);
console.log("nodeName:"+name);
console.log("nodeValue:"+value);
}
</script>
6.3.2 innerHTML/outerHTML属性
// innerHTML 获取/设置当前标签中的内容
// 获取
var s1 = tagNode.innerHTML;
// 设置
//tagNode.innerHTML="wahaha";
// outerHTML 获取/设置当前签内容(当前标签和其中的内容)
// 获取
var s2 = tagNode.outerHTML;
// 设置
tagNode.outerHTML = "<p>a</p>"
6.3.3 节点操作
document.createElement(tagName)
创建标签节点parent.appendChild(newNode);
将新节点拼接到parent节点中parent.insertBefore(newChild,refChild);
将newChild作为parent的子节点插入到refChild之前parent.replaceChild(newChild,oldChild);
使用newChild替换oldChildcurrentNode.replaceNode(newNode);
使用newNode替换currentNode(IE支持)currentNode.remove();
删除当前节点parent.removeChild(childNode);
从当前父节点中删除指定的子节点currentNode.removeAttribute(String attrName);
删除当前节点的属性
综合案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="width:600px; height: 400px; background: pink;">
<h4>枫桥夜泊</h4>
<p id="p0">-张继-</p>
<p id="p1">月落乌啼霜满天,</p>
<p>江枫渔火对愁眠;</p>
<p>姑苏城外寒山寺,</p>
<p>夜半钟声到客船。</p>
</div>
<button onclick="testNode()">节点操作</button>
<script type="text/javascript">
function testNode(){
//1.创建新节点
//document.createElement(tagName) 创建标签节点
var imgTag = document.createElement("img"); // <img/>
//createAttribute 创建属性节点
//var attrNode = document.createAttribute("src");
//2.给元素添加属性
imgTag.src = "img/c.jpg";
imgTag.id = "myImg";
imgTag.height="100";
//3.拼接子节点
var divTag = document.getElementById("div1");
// parent.appendChild(newChild); 将新节点拼接到parent节点中
//divTag.appendChild(imgTag);
//4.插入子节点
var p1 = document.getElementById("p1");
//parent.insertBefore(newChild,refChild); 将newChild作为parent的子节点插入到refChild之前
//divTag.insertBefore(imgTag,p1);
//5.替换子节点
var p0 = document.getElementById("p0");
//parent.replaceChild(newChild,oldChild); 使用newChild替换oldChild
//divTag.replaceChild(imgTag,p0);
//6.替换节点(浏览器兼容)
// currentNode.replaceNode(newNode); 使用newNode替换currentNode
//divTag.replaceNode(imgTag);
//7.删除节点
// currentNode.remove(); 删除当前节点
//p0.remove();
//8.删除子节点
// parent.removeChild(childNode); 从当前父节点中删除指定的子节点
//divTag.removeChild(p0);
//9.删除节点的属性
//divTag.removeAttribute("id");
}
</script>
</body>
</html>
七、JS操作HTML标签的属性和样式
7.1 JS操作HTML属性
- 获取、设置元素属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/a.jpg" width="100" id="img01"/><br />
<button onclick="changeImgSize()">改变图片大小</button>
<script type="text/javascript">
function changeImgSize(){
var img = document.getElementById("img01");
//1.获取标签属性值 var v = e.attrName;
var w = img.width;
//2.设置标签属性 e.attrName = v;
img.width = w+10;
}
</script>
</body>
</html>
7.2 JS操作HTML样式
- 获取、设置HTML标签的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1" style="border: 1px solid red;color: blue;">
床前明月光
</div>
<input type="button" value="修改样式" onclick="fn1()"/>
</body>
</html>
<script>
function fn1(){
// 得到元素
var div1 = document.getElementById('div1');
// 以修改属性的方式修改样式, 会覆盖之前的内容
// div1.style = "background-color: #ccc;";
// 如果不希望覆盖,而是想添加新的样式,可以使用两种方式:
// 1. 将原来的样式再写一次
// div1.style = "border: 1px solid red;color: blue; background-color: #ccc;";
// 2. 只修改样式的一个值,此方式样式属性名称与原本的名称可能不一致,此处是标准的命名方式
div1.style.backgroundColor = "#ccc";
// 获取行内样式值
var color = div1.style.color;
console.log(color);
// 获取非行内样式的值
// var width = div1.style.width; // 无法获取
// console.log(width);
width = window.getComputedStyle(div1)["width"]; // chrome, firefox等主流的浏览器写法
console.log(width);
// IE的写法
// width = div1.currentStyle["width"];
// console.log(width);
// 调用下面的方法
width = getStyle(div1, "width");
console.log(width);
}
// 获取样式(兼容不同的浏览器)
function getStyle(elem, attr){
// 如果该属性存在, chrome, firefox等主流的浏览器以及IE9+的写法
if(window.getComputedStyle){
return window.getComputedStyle(elem)[attr];
// 低版本的IE写法
}else if(elem.currentStyle){
return elem.currentStyle[attr];
}else{
return null;
}
}
</script>
八、JS操作文档中的标签(节点操作)
综合案例:省市区联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
省份:<select id="province" onchange="showCity(this)"></select>
城市:<select id="city" onchange="showRegion(this)"><option>请选择</option></select>
区/县:<select id="region"><option>请选择</option></select>
<script>
var info = '[{"provinceName":"湖北省","citys":[{"cityName":"武汉市","regions":[{rName:"洪山区"},{rName:"江夏区"},{rName:"硚口区"}]},{"cityName":"黄石市","regions":[{rName:"洪山区2"},{rName:"江夏区2"},{rName:"硚口区2"}]},{"cityName":"大冶市","regions":[{rName:"洪山区3"},{rName:"江夏区3"},{rName:"硚口区3"}]}]},{"provinceName":"湖南省","citys":[{"cityName":"长沙市"},{"cityName":"常德市"}]},{"provinceName":"安徽省","citys":[{"cityName":"六安市"},{"cityName":"淮北市"},{"cityName":"淮南市"}]}]';
var arr = eval("("+info+")");
showProvince();
function showProvince(){
var provinceTag = document.getElementById("province");
provinceTag.innerHTML = "<option>请选择</option>";
for (var i = 0; i < arr.length; i++) {
var pname = arr[i].provinceName;
// 将每个省份生成一个选项option
var optionTag = document.createElement("option");
optionTag.innerHTML = pname;
optionTag.value = pname;
// 显示到省份的下拉菜单中
provinceTag.appendChild(optionTag);
}
}
function showCity(province){
// 1.获取已选择的省份
var pname = province.value;
var cityTag = document.getElementById("city");
cityTag.innerHTML = "<option>请选择</option>";
//2.找到省份对应的城市数组
var cityArr;
for (var i = 0; i < arr.length; i++) {
var province = arr[i];
if(province.provinceName == pname){
cityArr = province.citys;
break;
}
}
for (var i = 0; i < cityArr.length; i++) {
var cname = cityArr[i].cityName;
// 将每个省份生成一个选项option
var optionTag = document.createElement("option");
optionTag.innerHTML = cname;
optionTag.value = cname;
// 显示到省份的下拉菜单中
cityTag.appendChild(optionTag);
}
}
function showRegion(city){
var cname = city.value;
var regionTag = document.getElementById("region");
regionTag.innerHTML = "<option>请选择</option>";
var regionArr;
// 1.获取已选择的省份
var pname = document.getElementById("province").value;
var regionArr;
for (var i = 0; i < arr.length; i++) {
var province = arr[i];
if(province.provinceName == pname){
var cityArr = province.citys;
for (var i = 0; i < cityArr.length; i++) {
var city = cityArr[i];
if(city.cityName == cname){
regionArr = city.regions;
break;
}
}
break;
}
}
for (var i = 0; i < regionArr.length; i++) {
var rname = regionArr[i].rName;
// 将每个省份生成一个选项option
var optionTag = document.createElement("option");
optionTag.innerHTML = rname;
optionTag.value = rname;
// 显示到区的下拉菜单中
regionTag.appendChild(optionTag);
}
}
</script>
</body>
</html>
九、AJAX
9.1、同步请求和异步请求
- 异步请求:在页面不刷新(不发生跳转)的前提下实现和服务端的交互
9.1.1 同步请求(登录)
9.1.2 异步请求(登录)
异步请求的应用场景
- 当页面中有大量的数据,但只需更新其中的某一部分数据时
- 对页面中的数据进行正确性校验
- 前后端分离开发的项目
9.2、异步请求的执行流程
异步请求是如何实现的?
- Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
- 流程:页面使用js的方式发送请求—》后台处理请求,并采用out.write()的方式返回JSON/xml格式的数据(不能跳转页面)—》页面接收到返回的JSON/xml数据后根据返回的数据使用js来改变页面的内容。
案列判断用户名可用
9.3、AJAX的实现
创建请求对象
//1.创建ajax请求对象(不同类型的浏览器创建ajax请求对象的方式是不一样的)
if(window.XMLHttpRequest){
ajaxReq = new XMLHttpRequest();
}else{
ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
}
封装请求数据
//2.封装请求数据(请求方式、请求路径、参数) open
//open(method, url, async),
//method指get或post
//url:请求的url
//async:是否异步,true表示异步,false同步
//如果要发送post请求,需要先设置,setRequestHeader("content-type", "application/x-//www-from-urlencoded")
var name = document.getElementById("userName").value;
ajaxReq.open("get","check?username="+name,true);
指定回调函数(处理响应结果)
//3.监听ajax请求状态变化 (回调函数)
//处理响应结果时,需要使用readyState的4状态,以及status的200状态码。
//处理响应时,应该使用responseText或者responseXML属性。
ajaxReq.onreadystatechange = test;
发送请求
//当请求方式为post时,可以通过send函数的参数实现请求体传值(body)
ajaxReq.send(null);
处理响应结果
function test(){
//5.在回调函数中,当readyState==4 同时 http状态为200 时,获取响应结果
if(ajaxReq.readyState == 4 && ajaxReq.status==200){
//6.从ajaxReq中获取servlet响应的结果
var data = ajaxReq.responseText;
//7.处理结果
var label = document.getElementById("user-name-label");
if (data=="yes"){
label.innerHTML="√ 用户名可用";
label.style.color="green";
}else{
label.innerHTML="× 用户名不可用";
label.style.color="red";
}
}
}
Servlet响应AJAX请求
@WebServlet("/check")
public class CheckUserNameServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.接收用户名
String username = request.getParameter("username");
System.out.println("----------"+username);
//2.检查用户名是否可用
String r = username.indexOf("admin")>=0?"no":"yes";
//3.在servlet中通过输出流响应ajax请求
PrintWriter out = response.getWriter();
out.print(r);
out.flush();
out.close();
}
}
9.4 ajax请求状态
- ajaxReq请求对象有一个readyState属性:标识请求进行的哪一步
- 0 ajax请求对象已经创建,但未进行初始化
- 1 ajax请求对象已经调用open完成初始化,但未调用send发送请求
- 2 ajax请求已发送
- 3 ajax请求已到达服务器,正在进行交互
- 4 ajax请求与服务器交互已结束
十、JSON
10.1.什么是JSON?
- JSON就是一种各种语言公认的数据格式
- JSON格式:javascript object notation。js对象标记。
- 特点:体积小,方便使用JavaScript操作。
10.2.JSON格式说明
10.3.如何进行JSON格式转换?
10.3.1 Java中实现JSON和对象的转换
-
阿里 fastjson
-
谷歌 jackson
-
在项目中导入所需的jar包
-
实现转换
public class TestJSON {
public static void main(String[] args) throws Exception{
js();
}
// jackson
public static void js()throws Exception{
// java对象
Users users = new Users("1", "张三丰", "200", "男");
// 集合对象
List<Users> usersList = Arrays.asList(
new Users("1", "zhangsan", "20", "男"),
new Users("2", "lisi", "21", "男"),
new Users("3", "wangwu", "22", "男"));
// java对象转json
ObjectMapper mapper = new ObjectMapper();// 用来转换格式的对象
String s = mapper.writeValueAsString(users);
System.out.println(s);
String s1 = mapper.writeValueAsString(usersList);
System.out.println(s1);
// json转换成对象
Users u1 = mapper.readValue(s, Users.class);
System.out.println(u1);
// json转换成集合对象
List<Users> list = mapper.readValue(s1, new TypeReference<List<Users>>() {});
System.out.println(list);
}
// google出品gson(了解,差不多用法)
// ali出品fastjson
// public static void fj(){
// // java对象
// Users users = new Users("1", "张三丰", "200", "男");
// // 集合对象
// List<Users> usersList = Arrays.asList(
// new Users("1", "zhangsan", "20", "男"),
// new Users("2", "lisi", "21", "男"),
// new Users("3", "wangwu", "22", "男"));
// // java对象转json
// String jsonString = JSON.toJSONString(users);
// System.out.println(jsonString);
// String string = JSON.toJSONString(usersList);
// System.out.println(string);
//
// // json转成java对象
// Users u = JSON.parseObject(jsonString, Users.class);
// System.out.println(u);
// List<Users> list = JSON.parseObject(string, new TypeReference<List<Users>>() {}.getType());
// System.out.println(list);
// }
// 手动转json
public static void sd(){
// 1. 手(sha)动(gua)解析
// java对象
Users users = new Users("1", "张三丰", "200", "男");
// 自(bie)己(ren)拼接
String jsonString = "{id:\""+users.getId()+"\", username:\""+users.getUsername()
+"\", age:\""+users.getAge()+"\", sex:\""+users.getSex()+"\"}";
System.out.println(jsonString);
// 集合对象
List<Users> usersList = Arrays.asList(
new Users("1", "zhangsan", "20", "男"),
new Users("2", "lisi", "21", "男"),
new Users("3", "wangwu", "22", "男"));
StringBuilder arrJsonString = new StringBuilder("[");
for (int i = 0; i < usersList.size(); i++) {
Users user = usersList.get(i);
arrJsonString.append("{id:\""+user.getId()+"\", username:\""+user.getUsername()
+"\", age:\""+user.getAge()+"\", sex:\""+user.getSex()+"\"}");
if (i != usersList.size() - 1){
arrJsonString.append(",");
}
}
arrJsonString.append("]");
System.out.println(arrJsonString.toString());
}
}
10.3.2 JavaScript中实现JSON转JS对象
var jsonStr = ajaxReq.responseText;
//将json转换成JS对象
var goodsList = eval("("+jsonStr+")");
console.log(goodsList);
更多推荐
JavaScript新手入门学习笔记
发布评论