JavaScript
JavaScript
JavaScript因为互联网而生，紧随着浏览器的出现而问世
1、JavaScript 的历史
https://javascript.ruanyifeng.com/introduction/history.html
| js参数 | 描述 |
|---|---|
| throw | 声明的作用是创建exception(异常或错误) |
this的四种用法
1.在一般函数方法中使用this指代全局对象
2.作为对象方法调用，this指代上级对象
3.作为构造函数调用，this指代new出的对象
4.apply调用，apply方法作用是改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象，this指代第一个参数
1.JS的引入方式
直接引入和文件引用
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ll</title>
<!--JS引入方式-->
<!--直接编写-->
<script>
console.log("hello")
</script>
<!--导入文件-->
<script src="js.js"></script>
</head>
<body>
</body>
</html>
2.ECMAscript基本语法
JS是一门弱类型的编程语言，属于基于对象和基础原型的脚本语言。
声明变量
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ll</title>
<script>
var x; //声明一个变量
x = 10; //给变量赋值
console.log("x = "+x);
var y = 20; //声明并赋值
console.log("y = "+y);
var name = "li" , age = 18; //声明多个变量并赋值，并且可以是不同类型
console.log("name="+name,"age="+age);
school = "xiuxiu"; //声明全局变量
console.log("school="+school);
var z; //一个变量只声明，未赋值，变量：undefined
console.log(z);
var q = 10; //申明一个变量
q = 40; //将上面变量重新赋值
console.log("q="+q);
var e = 88; //声明赋值一个变量
var e = 68; //声明赋值一个变量
console.log("e="+e);
</script>
</head>
<body>
</body>
</html>
1.声明变量时，可以不用var 那么它就是全局变量
2.变量命名，首字符只能是字母，下划线，$美元符，余下的字符可以是下划线，美元符号或者任何字母或者数字字符并区分大小写。
注释
// 单行注释
/*
多行注释
*/
语句分隔符
var a = 1 //分号和换行符作为语句分隔符
var b = 2;
3.ECMAScript 基本数据类型
根据数据类型不同，有的变量存在栈中，有的存储的堆中。
具体区别：
原始变量及他们的值存在栈中，当把一个原始变量传递给另一个原始变量时，是把一个栈房间的东西复制到另一个栈房间，且这两个原始变量互不影响。
应用值是把引用变量的名称存储在栈中，但是把其实际对象对出在堆中，且存在一个指针由变量名指向存储在堆中的实际对象，当把引用对象传递给另一个变量时，复制的其实是指向实际对象的指针，此时两者指向的是同一个数据，若通过方法改变其中一个变量的值，则访问另一个变量时，其值也会随之加以改变；但若不是通过方法而是通过重新赋值 此时 相当于 重新开了一个房间 该值的原指针改变，则另一个值不会随他的改变而改变。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ll</title>
<script>
//初始值类型
var a = "li";
var b =a;
a = "alvin";
console.log(a); //alvin
console.log(b); //li
//对象类型
var arr1=[1,2];
arr2 = arr1;
arr1.push(3);
console.log(arr1); //[1, 2, 3]
console.log(arr2); //[1, 2, 3]
arr1 = [4,5];
console.log(arr1); //[4, 5]
console.log(arr2); //[1, 2, 3]
</script>
</head>
<body>
</body>
</html>
基础数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var num1 = 12;
var num2 = 3.14;
var b = true;
var s = "li";
var s2 = new String("li");
console.log(num1,typeof num1);
console.log(num2,typeof num2);
console.log(b,typeof b);
console.log(s,typeof s);
console.log(s2,typeof s2);
</script>
</head>
<body>
</body>
</html>
3.1 Math对象
| 参数 | 描述 |
|---|---|
| toFixed(x) | 保留小数位 |
Math参数
| 参数 | 描述 |
|---|---|
| abs(x) | 返回数值的绝对值 |
| ceil(x) | 向上取整 |
| floor(x) | 向下取整 |
| max(x,c,v,,n) | 取最大值 |
| min(x,c,v,,n) | 取最小值 |
| pow(x,y) | 求x的y次幂 |
| random() | 生成0-1随机数 |
| round(x) | 取整，四舍五入 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//Number 对象的内置方法
//toFixed(x) 保留小数位
var num = 100.3;
var ret = num.toFixed(2);
console.log(num) ; //100.3
console.log(ret); //100.30
//Math对象的内置方法
//abs(x) 返回数值的绝对值
var num = -10;
console.log(Math.abs(num)); //10
//ceil(x) 向上取整
var num = 10.9;
console.log(Math.ceil(num)); //11
//floor(x) 向下取整
var num = 10.4;
console.log(Math.floor(num)); //10
//max(x,y,z,,,) 取最大值
console.log(Math.max(2,10,15));
//min(x,y,z,,,,) 取最小值
console.log(Math.min(2,10,5,1));
//pow(x,y) 求x的y次方
console.log(Math.pow(3,2)); //3**2 = 9
console.log(3**2); //9
//random() 生成0-1随机数
console.log(Math.random()); //0.9195357407227698
console.log(Math.random()*10); //生成0-10之间的数值 8.556297199661074
//round(x) 四舍五入
//生成0-10之间的随机整数
console.log(Math.round(Math.random()*10)) //8
</script>
</head>
<body>
</body>
</html>
练习：获取1-100的随机整数，包含1-100
var num = Math.random(); //获取随机数
num = num * 100; //获取0-100的随机数
num = Math.round(num); //取整，四舍五入
console.log(num) //打印
3.2 Date对象
创建Date对象
// 方法1：不指定参数
var newd1 = new Date();
console.log(newd1); //Wed Apr 07 2021 19:11:25 GMT+0800 (中国标准时间)
console.log(newd1.toLocaleString()); //2021/4/7下午7:11:25
//方法2：参数为时间字符串
var newd2 = new Date("2020.4.20 11:12:23");
console.log(newd2); //Mon Apr 20 2020 11:12:23 GMT+0800 (中国标准时间)
console.log(newd2.toLocaleString()); //2020/4/20上午11:12:23
console.log(newd2.getFullYear()) ; //2020
// 方法3：参数为毫秒数
var d3 = new Date(5000); //unix开始时间过了5000毫秒
console.log(d3.toLocaleString()); //1970/1/1上午8:00:05
console.log(d3.toUTCString()); //Thu, 01 Jan 1970 00:00:05 GMT
//方法4：参数为年月日小时分钟秒毫秒
var d5 = new Date(2021,2,20,11,12,0,300);
console.log(d5.toLocaleString()); //2021/3/20上午11:12:00
时间显示方式
toLocaleString() 中国时间显示，毫秒并不直接显示（中国标准时间）
toUTCString（） Unix时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月（0-11）
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
练习：以2021年03月2日 14:1:43 星期二 格式化输出当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function getCurrentDate() {
//1.创建Date对象
var date = new Date(); //没有填入任何参数那么就是当前时间
// 2.获取当前年份
var year = date.getFullYear();
//3.获取当前月份，js中月份是从0-11
var month = date.getMonth()+1;
//4.获得当前日
var day = date.getDate();
//5.获取当前小时
var hour = date.getHours();
//6.获得当前分钟
var min = date.getMinutes();
//7.获得当前秒
var sec = date.getSeconds();
//8.获得当前星期
var week = date.getDay();
return year+"年"+changeNum(month)+"月"+day+"日"+hour+":"+min+":"+sec+" "+parseweek(week)
}
//解决：月份自动补齐两位数字的方法
function changeNum(num){
if(num < 10){
return "0"+num;
}else{
return num;
}
}
//解决：将星期数据 0-6 转换成 星期日到星期六
function parseweek(week){
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
// 0 1 2 3 4 5 6
return arr[week]
}
console.log(getCurrentDate())
</script>
</head>
<body>
</body>
</html>
结果：2021年04月7日20:17:33 星期三
3.3 JSON对象
stringify() 序列化
parse() 反序列化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var info = {"name":"li","age":18,"gender":"male"}; //json对象
console.log(info);
var info = {'name':'li','age':19,'gender':'male'}; //json对象
console.log(info);
var name = "yuan";
var info = {name:name,age:18,gender:"male"}; //json对象
console.log(info);
console.log(info["name"]); //yuan
console.log(info.name); //yuan
//stringify()序列化 和 parse()反序列化
var info = {'name':'li','age':19,'gender':'male'};
console.log(JSON.stringify(info)); //{"name":"li","age":19,"gender":"male"}
var s = '{"name":"li","age":19,"gender":"male"}' ;
console.log(JSON.parse(s)); //{name: "li", age: 19, gender: "male"}
for (var i in info){
console.log(i,info[i])
}
//name li
//age 19
//gender male
</script>
</head>
<body>
</body>
</html>
3.4 数组对象
创建数组
创建方式1:
var arrname = [元素0,元素1,….]; // var arr=[1,2,3];
创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);
数组方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//获取指定下标的成员
var arr = ["yuan",123,true];
console.log(arr); //["yuan", 123, true]
// push() 给数组后面追加成员
var arr1 = [1,2,3,4];
arr1.push(5);
console.log(arr1); //[1, 2, 3, 4, 5]
//pop() 删除最后一个成员作为返回值
arr1.pop();
console.log(arr1) ; //[1, 2, 3, 4]
// unshift() 将value的值插入到数组的开始
var arr2 = [1,2,3,4];
arr2.unshift(5);
console.log(arr2); //[5, 1, 2, 3, 4]
//shift 将数组的第一个元素删除
arr2.shift();
console.log(arr2); //[1, 2, 3, 4]
//reverse() 反转排序
var arr = [1,2,3,4,5];
arr.reverse();
console.log(arr);
//slice() 切片,开区间
var arr3 = ["a","b","c"];
console.log(arr3.slice(2));
console.log(arr3.slice(1,3));
//sort() 排序,是字符串排序，不是数值的排序
var arr31 = [2,3,1,7,2,8];
console.log(arr31.sort());
//数值降序 排序
var arr4 = [3,5,7,6,0,9,11,32 ];
arr4.sort(function (a,b) {
return b-a;
});
console.log(arr4); //[32, 11, 9, 7, 6, 5, 3, 0]
//数值升序 排序
arr4.sort(function (a,b) {
return a-b
});
console.log(arr4); //[0, 3, 5, 6, 7, 9, 11, 32]
//splice(操作位置的小标) 添加/删除指定的成员 “万能函数”
var arr5 = [1,2,3,4,5];
arr5.splice(1,2); //删除两个尘缘
console.log(arr5); //[1, 4, 5]
var arr5 = [1,2,3,4,5];
arr5.splice(1,2,10); //替换
console.log(arr5); //[1, 10, 4, 5]
var arr5 = [1,2,3,4,5];
arr5.splice(1,2,4444,55555,6666); //删除添加
console.log(arr5) ; //[1, 4444, 55555, 6666, 4, 5]
// cancat() 把2个或者多个数组合并
var arr6 = [1,2,3];
var arr7 = [4,5,6];
var ret = arr6.concat(arr7);
console.log(ret); //[1, 2, 3, 4, 5, 6]
//split() 和join() 方法
var arr8 = ["广州","深圳","南山"];
var str = arr8.join("-");
console.log(str); //广州-深圳-南山
var arr9 = "广州-深圳-南山";
console.log(arr9.split("-")) //["广州", "深圳", "南山"]
//find() 高阶函数，返回符合条件的第一个成员
var arr = [4,5,6,7];
var func = (num) =>{
if(num%2===0){
return num;
}
};
var ret = arr.find(func);
console.log(ret); //4
//filter() 对数组的每一个成员进行过滤，返回符合条件的结果
var arr = [4,5,6,7];
function func(num) {
if(num%2===0){
return num;
}
}
var ret = arr.filter(func); //所有的函数名都可以作为参数传递到另一个函数中被执行
console.log(ret); //[4, 6]
//map() 对数组的每一个成员进行处理，返回处理后的每一个成员
var arr = [4,5,6,7];
var ret = arr.map((num)=>{
return num**3;
});
console.log(ret) // [64, 125, 216, 343]
// (14) 其它方法
// includes 查询指定数据是否在数组中存在!
// indexOf() 查询指定数据在数组中第一次出现的位置
// isArray() 判断变量的值是否是数组
</script>
</head>
<body>
</body>
</html>
3.5 for循环
//循环三要素
for (1.声明循环的开始;2.条件;4.循环的计数){
//3.循环条件为true时，会执行这里的代码
}
for (循环的成员下标 in 被循环的数据){
//当被循环的数据一直没有执行到最后下标，都会不断执行这里的代码
}
退出循环
continue //退出当次循环
break //退出当前整个循环
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
for(var i=0;i<10;i++){
console.log(":",i)
}
var arr = [111,222,333];
for (var i in arr){
console.log(i,":",arr[i])
}
for (var q=0;q<arr.length;q++){
console.log(q,":",arr[q])
}
</script>
</head>
<body>
</body>
</html>
计算1+2+3+...+100的和
计算20的阶乘值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var ret = 0;
for (var i=0;i<=100;i++){
ret = ret + i
}
console.log(ret) //5050
var ret = 1;
for (var i=20;i>0;i--){
ret = ret * i;
}
console.log(ret) //2432902008176640000
</script>
</head>
<body>
</body>
</html>
3.6 while循环
格式
while (循环的条件){
//循环条件为true是，会执行这里的代码
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var count = 0;
while (count < 10){
console.log(count);
count++
}
var counts = 10;
while (counts>0){
console.log(counts);
counts--
}
</script>
</head>
<body>
</body>
</html>
3.7 switch语句
格式
switch(条件){
case 结果1:
满足条件执行的结果是结果1时,执行这里的代码..
break;
case 结果2:
满足条件执行的结果是结果2时,执行这里的代码..
break;
.....
default:
条件和上述所有结果都不相等时,则执行这里的代码
}
switch比else if结构更加简洁清晰，使教程可读性更强，效率更高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var choice = "1";
switch (choice) {
case "1":console.log("111111");break;
case "2":console.log("222222");break;
case "3":console.log("333333");break;
default:console.log("无效选择！")
}
</script>
</head>
<body>
</body>
</html>
#111111
3.8 if语句
结构
第一种：
if (条件){
//条件为true时，执行的代码
}
第二种：
if (条件){
//条件为true时，执行的代码
}else{
//条件为false时，执行的代码
}
第三种：
if(条件1){
// 条件1为true时,执行的代码
}else if(条件2){
// 条件2为true时,执行的代码
}....
}else{
// 上述条件都不成立的时候,执行的代码
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var is_login = false;
if (is_login){
console.log("hi li")
}else{
console.log("请登录")
}
var login = true;
if (login){
console.log("hi li")
}else{
console.log("请登录")
}
var socre = 98;
if (socre >90){
console.log("成绩优秀")
}else if(socre > 80){
console.log("成绩良好")
}else if(socre > 70){
console.log("成绩一般")
}else if (socre < 60){
console.log("垃圾渣渣")
}
</script>
</head>
<body>
</body>
</html>
3.9 运算符
运算符
//算术运算符
+ 数值相加
- 数值相减
* 数值相乘
/ 数值相除
% 数值求余
** 数值求幂
a++ 数值后自增1 a=a+1
++a 数值前自增1 a=a+1
b-- 数值后自减1 b=b-1
--b 数值前自减1 b=b-1
//赋值运算符
=
+=
-=
*=
/=
%=
**=
//比较运算符,比较的结果要么是true, 要么是false
> 大于
< 小于
>= 大于或者等于
<= 小于或者等于
!= 不等于[计算数值]
== 等于[计算]
!== 不全等[不仅判断数值,还会判断类型是否一致]
=== 全等[不仅判断数值,还会判断类型是否一致]
//逻辑运算符
&& 并且 and 两边的运算结果为true,最终结果才是true
|| 或者 or 两边的运算结果为false,最终结果才是false
! 非 not 运算符的结果如果是true,则最终结果是false ,反之亦然.
//逻辑运算符进阶用法:
1. 实现短路
var a = false || 2 >>> a = 2
var a = true && "hehe" >>> a = "hehe"
2. 快速布尔化[把数据快速转换成布尔类型]
var a = 100
!!a >>> true
//条件运算符[三目运算符]
条件?true:false
例如:
var age = 12;
var ret = age>=18?"成年":"未成年";
console.log(ret);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//++
var x = 10;
var ret = ++x; //先计算在赋值
console.log(ret); //11
console.log(x); //11
var y = 20;
var ret2 = y++; //先赋值再计算
console.log(ret2); //20
console.log(y) //21
//全等于
console.log(2=="2"); //true 会进行暗转换
console.log(2==="2"); //false
//and & 并且
// or | 或者
//not ! 不等于
console.log(2>3 & 2===2); //0
console.log(2>3 | 2===2); //1
console.log(2>3 | !2===2); //0
//and && 并且
// or || 或者
//not ! 不等于
console.log(2>3 && 2===2); //false
console.log(2>3 || 2===2); //true
console.log(2>3 || !2===2); //false
//条件运算符[三目运算符]
var age = 121;
var re = age >= 18 ?"成年":"未成年";
console.log(re) //成年
</script>
</head>
<body>
</body>
</html>
3.10 空值
undefined类型
undefined类型只有一个值，即undefined
1.当声明的变量末初始化时，该变量的默认值是undefined。
2.当函数无明确返回值时，返回的也是undefined
Null类型
另外一种只有一个值的类型是Null，他只有一个专用值null，即它的字面量。值undefined实际上是从值null派生来的，因此ECMAscript把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined是声明了变量但未对其初始化时赋予该变量的值，null则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是null。
3.11 类型转换
js中，类型转换有2种：一种就是强制转换，一种就是自动转换。
因为js是一门弱类型的脚本语言，所以变量会在运算符的运行要求，有时候根据运算符的要求，进行自动转换的。
| 属性 | 描述 |
|---|---|
| parseInt（） | 把数据转换为整数 |
| parseFloat() | 把数据转换成小数 |
| Number() | 把数据转换成数值 |
| .toString() | 转换数据为字符串 |
| String() | 转换数据成布尔值 |
| Boolean() | 转换数据成布尔类型 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//parseInt() 把数据类型转换为整数
var box1 = "一共100件"; //转换会失败
var box = "100件"; //转换会成功
var ret1 = parseInt(box1);
var ret2 = parseInt(box);
console.log(ret1); //NaN
console.log(ret2) ; //100
//parseFloat() 把数据类型转换为小数
var t = "3.14";
console.log(parseFloat(t)); //3.14
//Number 把数据转换成数值
//使用Number转换的数据里面必须是纯数字！否则都会转换失败
var num = "3.1.4"; //会转换失败
var num1 = "3.1415"; //会转换成功
console.log(Number(num)); //NaN
console.log(Number(num1)); //3.1415
//转换数据为字符串
//变量.toString()
//String(数据)
var str = 3.14;
var ret = str.toString();
console.log(ret); //3.14
ret = String(str);
console.log(ret) //3.14
//Boolean() 转换数据成布尔类型
var box1 = "";
console.log(Boolean(box1)); //false
var box2 = -1;
console.log( Boolean(box2) ); //true
var box3 = 0;
console.log(Boolean(box3)); //false
var box4 = "false";
console.log(Boolean(box4)); //true
var box5 = [];
console.log(Boolean(box5)); //true
var box6 = {};
console.log(Boolean(box6)); //true
var box7 = "0";
console.log(Boolean(box7)); //true
var box8 = null;
console.log(Boolean(box8)); //false
var box9 = undefined;
console.log(Boolean(box9)) ; //false
</script>
</head>
<body>
</body>
</html>
对于转换数值，如果转换失败的话，则结果为NaN，是not a Number，但是NaN的类型值也是number类型。
自动转换（暗转换）
//所谓的暗转换，其实弱类型中的变量会根据当前代码的需要，进行类型的自动隐式转换。
<script>
//true转换成数值是1，false转换成数值是0
console.log(1+true); //2
console.log(1+"100"); //1100
//程序中+的含义有2种，
第一：两边数值相加；
第二：两边字符串拼接，但是在js中运算符的优先级中，字符串拼接的优先级要高于数值的加减乘除，所以解析器优先使用了+作为字符串的拼接符号了，因为程序需要+号两边都是字符串才能完成运算操作，因此1变成了字符串
"1" + "100"
console.log(1-"200"); //-199
//因为-号中表示的就是左边的数值减去右边的数值，因此程序就会要求"200"是数值，因此内部偷偷的转换了一下。
</script>
3.12 布尔值
1.Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1，false=0
2.布尔值也可以看作no/off、yes和no、1/0对应true和false
3.Boolean值主要用于JavaScript的控制语句。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(true); //true
console.log(false); //false
console.log(typeof true); //boolean
console.log(1 >2); //false
console.log(true == 1); //true
console.log(true === 1); //false
console.log(true+1); //2
console.log(false+1) //1
</script>
</head>
<body>
</body>
</html>
3.13 字符串类型
字符串创建（两钟方式）
变量 = "字符串"
字串对象名称 = new String(字符串)
var str1="hello world";
var str1= new String("hello word");
| 参数 | 描述 |
|---|---|
| length | 统计字符串长度 |
| toUpperCase() | 字母大写转换 |
| toLowerCase() | 字母小写转换 |
| indexOf() | 获取指定字符串在字符串中第一次出现的索引位置 |
| match() | 正则匹配 |
| replace() | 正则转换 |
| search() | 正则查找，如果查找不到，则返回-1 |
| slice() | 切片，当前方法支持使用负数代表倒数下标 |
| split() | 正则分割，经常用于把字符串转换成数组 |
| substr() | 截取 |
| trim() | 移除字符串首尾空白 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var s = "hello World!";
//查看字符串长度
console.log(s.length); //12
//将所有字母变大写
console.log(s.toUpperCase()); //HELLO WORLD!
//将所有字母变小写
console.log(s.toLowerCase()); //hello world!
//索引操作
console.log(s[2]); //打印索引2的内容 l
console.log(s.indexOf("llo")); //打印以llo开头的索引位置 2
//正则匹配
var str = "我的电话是：13353575423，你的电话是：17657532666";
var ret = str.match(/\d{11}/g); //全文匹配，连续出现11次的数字,以列表形式显示
console.log(ret); //["13353575423", "17657532666"]
//正则替换 replace()
var str2 = "我的电话是：14325667666";
//正则的捕捉模式 $1..$3 表示的正则中第一个和第二个和第三个小括号捕捉的内容
var ret2 = str2.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3");
console.log(ret2); //我的电话是：143****7666
//正则查找,返回索引，如果查找不到，则返回-1 search
var str3 = "hello2";
var ret3 = str3.search(/\d/);
var ret3c = str3.search(/\d{2}/);
console.log(ret3); //5
console.log(ret3c); //-1
//切片,开区间，不包含结束下标的内容 slice()
//slice(开始下标) 从开始位置切到最后
//slice(开始下标,结束下标) 从开始下标切到指定位置之前
var str4 = "helloworld";
var ret4 = str4.slice(3.6);
console.log(ret4); //loworld
var ret5 = str4.slice(5);
console.log(ret5); //world
var ret6 = str4.slice(2,-1);
console.log(ret6); //lloworl
var ret7 = str4.slice(-4,-1);
console.log(ret7); //orl
var ret8 = str4.slice(-1,-4); //取不到值，不能倒着取值
console.log("==",ret8); //==
//split 正则分割，经常用于把字符串转换成数组,
var str = "广东-深圳-南山";
var ret = str.split("-"); //以-分割
console.log(ret) // ["广东", "深圳", "南山"]
//substr 截取，从哪个索引开始，取后面几个值
var str = "hello world";
var ret = str.substr(1,3);
console.log(ret); // ell
//trim 移除字符串首尾空白
var password = " ge llo ";
var ret = password.trim();
console.log(ret) //ge llo
console.log(password.length) //10
console.log(ret.length) //6
</script>
</head>
<body>
</body>
</html>
4. function对象
函数在程序中代表的就是一段具有功能性的代码，可以让我们的程序编程更加具有结构性和提升程序的复用性，也能让代码变得更加灵活强大。
声明函数
//1.函数的定义方式
//函数声明
function 函数(参数) {
//函数体;
return 返回值;
}
//函数调用
函数()
功能说明：
可以使用变量、常量或者表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
//2.函数的定义方式
用function 类直接创建函数的语法：
var 函数名 = new Function("参数1","参数n","function_body");
函数调用
//f(); --->OK
function f(){
console.log("hello")
}
f() //----->OK
不同于python，js代码在运行时，会分为两大部分--检查装载 和 执行阶段
- 检查装载阶段：会先检测代码的语法错误，进行变量、函数的声明
- 执行阶段：变量的赋值、函数的调用等，都属于执行阶段
函数参数
1.参数基本使用
//位置参数
function add(x,y) {
console.log(x,y)
}
add(2,3); //2 3
add(2,3,4); //2 3
add(2); //2 undefined
//默认参数
function stu_info(name,gender="male"){
console.log("姓名："+name+" 性别："+gender)
}
stu_info("li"); //姓名：li 性别：male
stu_info("li","female"); //姓名：li 性别：female
2.函数中的arguments对象
//1.
function addr(a,b) {
console.log(a+b); //21
console.log(arguments.length); //2
console.log(arguments); //[10, 11]
}
addr(10,11);
//2.
function abb() {
var ret = 0;
for (var num in arguments){
ret+=arguments[num]
}
console.log(ret)
}
abb(11,22,33);
//3.
function add() {
console.log(arguments); //[1, 2, 5, 7, 10]
var ret = 0;
for (var i=0;i<arguments.length;i++){
// console.log(i);
ret += arguments[i];
}
console.log(ret) //25
}
add(1,2,5,7,10);
//4.
function f(a,b,c) {
if(arguments.length != 3){
throw new Error("function f called with"+arguments.length+"arguments,but it 3")
}
else {
alert("success!")
}
}
f(1,2,3)
5.匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//匿名函数
var f = function () {
console.log("li")
};
function foo(func) {
func()
};
foo(f); //li
//匿名函数-直接调用
(function () {
console.log("lilili")
})(); //lilili
(function (x,y) {
console.log(x+y)
})(2,4); //6
</script>
</head>
<body>
</body>
</html>
6.函数作用域
作用域是JavaScript最重要的概念之一，
任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和声明周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。
局部变量，是在函数内部声明，它的生命周期在当前函数被调用的时候，当函数调用完毕后，则内存中自动销毁当前变量。
全局变量，是在函数外部声明，它的生命周期在当前文件中被声明以后就保存在内存中，直到当前文件执行完毕以后，才会被内存销毁掉。
var
//全局变量,再次赋值
var name = "li"; //声明一个全局变量，并赋值
name = "张珊"; //对已经存在的变量重新赋值
console.log(name); //张珊
//全局变量，重新定义全局变量
var gender = "male";
var gender = "female"; //原内存释放与新内存开辟，指针指向新开辟的内存
console.log(gender); //female
作用域案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//全局变量
for(var i=0;i<10;i++){
console.log("ok")
}
console.log(i); //打印10个OK
//全局变量和局部变量
var num = 10; //在函数外部声明的变量, 全局变量
function func() {
// num = 20; // 函数内部直接使用变量,则默认调用了全局的变量,
var num = 20; // 函数内部使用var 或者 let声明的变量则是局部变量
// 函数内部直接使用变量,则默认调用了全局的变量,
// 使用变量的时候,解释器会在当前花括号范围值搜索是否有关键字var 或者let 声明了变量,如果没有,则一层一层往外查找最近的声明
// 如果最终查找不到,则直接报错! 变量名 is not define!
console.log("局部num",num); //局部num 20
}
func();
console.log("全局num: ",num); //全局num: 10
</head>
<body>
</body>
</html>
面试题
var num3 = 10;
function fun3(){
console.log(num3); //undefined
var num3 = 20;
//在加载阶段，程序为num3开辟了作用域空间，但是没有存放任何值为undefined，//
//在执行阶段，代码从上往下执行，在执行到console.log()时，//
//在局部作用域中找到了num3，将局部作用域中的undefined打印了出来，
//再将num3=20 赋值的。
}
fun3();
console.log(num3); //10
作用域链
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其他对象一样，拥有可以通过代码访问的属性和一系列仅供Javascript引擎访问的内部属性，其中一个内部属性是[[scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，他决定了哪些数据能被函数访问，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function bar(age) {
console.log(age);
console.log(sex);
var age = 99;
var sex="male";
console.log(age);
function age(){ //function没有被调用
alert(123);
} ;
console.log(age);
return 100;
}
bar(5)
</script>
</head>
<body>
</body>
</html>
一 词法分析过程(涉及参数，局部变量声明，函数声明表达式)：
1-1 、分析参数，有一个参数，形成一个 AO.age=undefine;
1-2 、接收参数 AO.age=5;
1-3 、分析变量声明，有一个 var age, 发现AO 上面有一个 AO.age ，则不做任何处理
1-4 、分析变量声明，有一个 var sex，形成一个AO.sex=undefine;
1-5 、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成AO.age=function(){};
二 执行过程：
2-1 、执行第一个 console.log(age) 时，当前的 AO.age 是一个函数，所以输出的一个函数
2-2 、这句 var age=99; 是对不 AO.age 的属性赋值， AO.age=99，所以在第二个输出的age是 99;
2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。
注意：执行阶段：
function age(){
alert(123)
} ;
不进行任何操作，将执行语句复制给age这部操作是在词法分析时，即运行前完成的。
7.BOM对象
BOM：broswer object model，即浏览器提供我们开发者在JavaScript用于操作浏览器的对象。
7.1 本地存储对象
使用存储对象的过程中，对象数据会根据域名端口进行保存的，所以js不能获取当前页面以外其他域名端口保存到本地的数据。
也就是说，我们存储对象获取数据只能是自己当前端口或者域名下曾经设置过的数据，一旦端口或者域名改变，则无法获取原来的数据
localStorage 本地永久存储
localStorage.setItem("变量名","变量值"); 保存一个数据到存储对象
localStorage.变量名 = 变量值 保存一个数据到存储对象
localStorage.getItem("变量名") 获取存储对象中保存的指定变量对应的数据
localStorage.变量名 获取存储对象中保存的指定变量对应的数据
localStorage.removeItem("变量名") 从存储对象中删除一个指定变量对应的数据
localStorage.clear() 从存储对象中删除所有数据
sessionStorage 本地会话存储
sessionStorage.setItem("变量名","变量值"); 保存一个数据到存储对象
sessionStorage.变量名 = 变量值 保存一个数据到存储对象
sessionStorage.getItem("变量名") 获取存储对象中保存的指定变量对应的数据
sessionStorage.变量名 获取存储对象中保存的指定变量对应的数据
sessionStorage.removeItem("变量名") 从存储对象中删除一个指定变量对应的数据
sessionStorage.clear() 从存储对象中删除所有数据
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">设置一个数据</button>
<button onclick="func2()">查看一个数据</button>
<script>
function func1(){
localStorage.setItem("name","li")
}
function func2(){
var ret = localStorage.getItem("name")
console.log(ret);
}
</script>
</body>
</html>
设置一个数据，存储在浏览器
使用命令获取一个数据
localStorage和sessionstorage的区别：
1.localstorage和sessionstorage一样都是用来存储客户端临时信息的对象
2.他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）
3.localstorge生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localstorge信息，否则这些信息将永远存在。
4.sessionstorge声明周期为当前窗口或标签页，一旦窗口或者标签页被永久关闭了，那么所有通过sessionstorge存储的数据也就被清空了
5.不同浏览器无法共享localstorge或sessionstorage中的信息。相同浏览器的不同页面间可以相互共享相同的localstorage（页面属于相同域名和端口），但是不同页面或标签之间无法共享sessionstorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionstorage的。
7.2 Location（地址栏）对象
| 参数 | 描述 |
|---|---|
| protocol | 协议 |
| port | 端口 |
| hostname | 域名 |
| host | 域名:端口 |
| pathname | 路径 |
| search | 查询字符串 |
| hash | 锚点 |
| href | 完整的地址信息 |
| href | 重新赋值，页面跳转 |
| assign | 页面跳转 |
| reload | 刷新页面 |
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>title</title>
<meta charset="UTF-8">
</head>
<body>
<button onclick="func1()">查看location对象</button>
<button onclick="func2()">跳转到百度</button>
<button onclick="func3()">F5刷新</button>
<script>
function func1(){
console.log(location)
//地址栏对象控制和操作地址栏
//所谓的地址就是当前页面所在的地址
//地址结构：
// 协议://域名:端口/路径/文件名?查询字符串#锚点
console.log(`协议=>${location.protocol}`)
console.log(`端口=>${location.port}`)
console.log(`域名=>${location.hostname}`)
console.log(`域名:端口=>${location.host}`)
console.log(`路径=>${location.pathname}`)
console.log(`查询字符串=>${location.search}`)
console.log(`锚点=>${location.hash}`)
console.log(`完整地址栏信息=>${location.href}`)
}
function func2(){
// location.href="http://www.baidu.com" //页面跳转
location.assign("http://www.baidu.com")
}
function func3(){
location.reload() //刷新页面
}
</script>
</body>
</html>
7.3 Windows对象
1.窗口方法
//BOM browser object model 浏览器对象模型
//js中最大的一个对象，整个浏览器窗口出现的所有东西都是window对象的内容
console.log(window)
//alert() 弹出一个警告框
window.alert("hi,我丢了")
alert("hi,ovo") //简写方法
//confirm 弹出一个确认框，点击确认，返回true，点击取消，返回false
var b = window.confirm("是否继续")
console.log(b)
//prompt() 弹出一个消息输入框，当点击确认以后，则返回可以接受到用户在输入框填写的内容，如果点击取消，则返回null
//var c = window.prompt("请输入一个数字","默认值")
var c = window.prompt("请输入一个数字")
console.log(c)
//打开窗口和关闭窗口
window.open("http://www.baidu.com") //开一个新的窗口
window.open("http://www.baidu.com","_blank","width=800px,height=500px,left=200px,top=200px") //弹出一个新的窗口，并设置窗宽高
//关闭当前浏览器窗口
window.close()
2.定时方法
setInterval()方法会不断地调用函数，直到clearInterval()被调用或窗口关闭。由setinterval()返回的ID值可用作clearInterval()方法的参数，而setTimeout是在指定的毫秒数后调用code一次。
格式
// 设置循环定时器
var ID = window.setInterval(code,millisec) // 每millisec毫秒执行一次code
// 取消循环定时器
window.clearInterval(ID);
// 设置单次定时器
var ID = window.setTimeout(code,millisec) // millisec毫秒后执行code一次
// 取消单次定时器
window.clearTimeout(ID);
其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用code之间的时间间隔，以毫秒计。
案例
//循环定时：每隔几秒执行函数一次
//直接写函数
var ID = window.setInterval(function(){
console.log("hi")
},2000) //毫秒
clearInterval(ID) //取消循环定时器
//调用函数
function foo(){
console.log("ok")
}
var ID1 = setInterval(foo,2000)
clearInterval(ID1) //取消循环定时器
//计时定时：几秒钟后执行函数一次
var ID2 = setTimeout(foo,2000)
clearTimeout(ID2) //取消计时定时器
定时器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function show(){
//构建时间字符串
var now = new Date().toLocaleString();
console.log(now)
//将时间字符串赋值给input标签的value属性（DOM操作）
var ele = document.getElementById("i1")
console.log(ele) //标签对象
ele.value = now //复制value值
}
var ID
function start(){
if (ID === undefined){
show()
//开启定时器
ID = setInterval(show,1000);
}
}
function end(){
clearInterval(ID);
ID = undefined
}
</script>
</head>
<body>
<input type="text" id="i1" value="00:00:00">
<input type="button" value="开始" onclick="start()">
<input type="button" value="结束" onclick="end()">
</body>
</html>
8. DOM对象（js核心）
DOM document object model文档对象模型
//整个HTML文档，会保存一个文档对象document
//console.log(document)； //获取当前文件对象
8.1 绑定事件
| 事件 | 描述 |
|---|---|
| ondblclick | 当元素被双击时执行代码 |
| onclick | 当元素被单击时执行代码 |
| onmouseover | 鼠标指针移动到某个指定的HTML后执行的js代码 |
| onmouseout | 鼠标指针移出某个指定的HTML标签后执行的js代码 |
| onload | 页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成，触发onload时间 |
| onsubmit | 事件在表单提交时触发 |
| preventdefault() | 取消事件的默认动作 |
| onchange | 当用户改变input输入框内容时执行一段JavaScript代码 |
| onmouseover | 鼠标移动到代码后执行的代码 |
| onmouseout | 不论鼠标指针离开备选元素还是任何子元素，都会触发mouseout事件 |
| onmouseleave | 只有鼠标指针离开备选元素时，才会触发onmouseleave时间 |
| onkeydown | 用户按下一个键按键时执行的JavaScript代码 |
| onkeyup | 当用户释放键盘时执行的JavaScript代码 |
1.静态绑定：直接把事件写在标签元素中
点击div标签，弹出提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1" onclick="foo()">click</div>
<script>
function foo(){
alert(123)
}
</script>
</body>
</html>
2.动态绑定：在js中通过代码获取元素对象，然后给这个对象进行后续绑定
点击标签，弹出提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="i1">试一试！</p>
<script>
var ele = document.getElementById("i1")
ele.onclick=function (){
alert("hi")
}
</script>
</body>
</html>
一个元素本身可以绑定多个不同的事件，但是如果多次绑定同一个时间，则后面的代码会覆盖前面的事件代码。
多个标签绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script>
var ele = document.querySelectorAll("ul li")
console.log(ele)
for(var i=0;i<ele.length;i++){
ele[i].onclick = function (){
console.log(this.innerText)
}
}
</script>
</body>
</html>
onload事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成，触发onload事件
window.onload = function (){
dom = document.getElementById("i1")
alert(dom.innerHTML)
}
</script>
</head>
<body>
<div id="i1">li</div>
</body>
</html>
onsubmit事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="i1">
用户名：<input type="text">
密码: <input type="password">
<input type="submit">
</form>
<script>
var form = document.getElementById("i1")
//事件在表单提交时触发
form.onsubmit = function (e){
alert(123)
e.preventDefault() //取消事件的默认动作
}
</script>
</body>
</html>
onchange事假
当用户改变input输入框时执行一段Javascript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="provonce" id="s1">
<option value="qqq">请选择省份</option>
<option value="hunan">湖南省</option>
<option value="hubei">湖北省</option>
<option value="hebei">河北省</option>
</select>
<select name="provonce" id="s2">
<option value="select">请选择城市</option>
</select>
<script>
var data = {"hunan":["长沙","岳阳","张家界"],"hubei":["武汉","襄阳","晋州"],"hebei":["石家庄","保定","邯郸"]}
console.log(data)
var ele1 = document.getElementById("s1")
var ele2 = document.getElementById("s2")
//当用户改变input输入框内容时执行一段Javascript代码
ele1.onchange = function (){
console.log(this.value);
var citys = data[this.value]; //从数组去对应的value值
console.log(citys)
//清空操作
ele2.options.length=1;
//创建标签
console.log(citys.length)
for(var i=0;i<citys.length;i++){
var option = document.createElement("option");//创建一个标签 <option></option>
option.innerHTML=citys[i];
ele2.appendChild(option)
}
}
</script>
</body>
</html>
onmouseleave，onmouseout和onmouseover时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="container">
<div id="title">使用了mouseout事件!</div>
<div id="list">
<div class="item1">第一行</div>
<div class="item2">第二行</div>
<div class="item3">第三行</div>
</div>
</div>
<script>
var container = document.getElementById("container");
var title = document.getElementById("title");
var list = document.getElementById("list");
//鼠标移动到代码后执行的代码
title.onmouseover = function (){
list.style.display="block"
}
//1.不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件
container.onmouseout=function (){
list.style.display="none"
}
//2.只有在鼠标指针离开备选元素时，才会触发mouseleave事件
// container.onmouseleave=function (){
// list.style.display="none"
// }
</script>
</body>
</html>
onkey事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="t1">
<script>
var ele = document.getElementById("t1")
//用户按下一个按键时执行JavaScript代码
// ele.onkeydown=function (e){
// console.log("onkeydown",e.key)
// };
//当用户释放键盘按钮时执行的JavaScript代码
ele.onkeyup=function (e){
console.log("onkeyup",e.key)
};
</script>
</body>
</html>
8.2 操作标签
格式
<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>
参数
| 参数 | 描述 |
|---|---|
| innerHTML | 属性设置或返回表格行的开始和结束标签之间的 HTML。 |
| innerText | 属性设置或返回表格行的开始和结束标签之间的文本 |
| elementNode.setAttribute("属性名","属性值") | 增加一个指定名称和值的属性，或者把一个现有属性设定为指定的值 |
| elementNode.getAttribute("属性名") | 获取属性的值 |
| elementNode.removeAttribute("属性名"); | 根据属性名删除当前dom的属性 |
| elementNode.className | 属性设置或返回元素class属性 |
| elementNode.classList | 该属性用于在元素中添加，移除及切换CSS类 |
| elementNode.classList.add | 给该DOM对象添加class属性 |
| elementNode.classList.remove | 删除该dom对象的class属性 |
| document.createElement("标签名") | 创建节点 |
| somenode.appendChild(newnode) | 插入节点，追加一个子节点（作为最后的子节点） |
| somenode.insertBefore(newnode,某个节点) | 把增加的节点放到某个节点的前边 |
| somenode.removeChild() | 删除节点，获得要删除的元素，通过父元素调用删除 |
| somenode.replaceChild(newnode, 某个节点); | 替换节点 |
- 文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">
<a href="#">li</a>
</div>
<!--<a href="#">alvin</a>-->
<script>
var ele = document.getElementById("i1");
ele.onclick=function (){
//查看文本
console.log(ele.innerText) //li
console.log(ele.innerHTML) //<a href="#">li</a>
//文本赋值
// ele.innerText = '<a href="#">alvin</a>' //写入什么现实什么,浏览器不会解析
ele.innerHTML = '<a href="#">alvin</a>' //浏览器会解析
}
</script>
</body>
</html>
- value操作
像input标签，select标签以及textarea标签是没有文本的，但显示内容是由value属性决定的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" value="li">
<textarea name="" id="i2" cols="30" rows="10">123456</textarea>
<select name="" id="i3">
<option value="hebei">河北</option>
<option value="hubei">湖北</option>
<option value="dobei">东北</option>
</select>
<script>
//input标签
var ele1 = document.getElementById("i1")
console.log(ele1.value);
ele1.onmouseover = function (){ //鼠标指针移动到某个指定的HTML后执行的js代码
this.value = "alvin"
}
ele1.onmouseout = function (){
this.value = "我是谁!" //鼠标指针移出某个指定的HTML标签后执行的js代码
}
//textarea标签
var ele2 = document.getElementById("i2")
console.log(ele2.value)
ele2.onmouseover = function (){
// this.innerHTML = "welcome to JS world!"
// this.innerText = "hihihihi"
this.value = "ooohhhhhh!!!"
}
//select标签
var ele3 = document.getElementById("i3")
console.log(ele3.value);
ele3.onclick = function (){
ele3.value = "hubei"
}
</script>
</body>
</html>
- 属性操作
elementNode.setAttribute("属性名","属性值") //增加一个指定名称和值的属性，或者把一个现有属性设定为指定的值
elementNode.getAttribute("属性名") //获取属性的值
elementNode.removeAttribute("属性名"); //根据属性名删除当前dom的属性
并不是所有属性都可以像value那样操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: lightcoral;
}
.c2{
color: red;
font-size: 32px;
}
</style>
</head>
<body>
<div class="c1" id="i1">li</div>
<script>
dom = document.getElementById("i1")
dom.setAttribute("class","c2") //增加一个指定名称和值的属性，或者把一个现有属性设定为指定的值
console.log(dom.getAttribute("class")) //获取属性的值
dom.removeAttribute("class") //根据属性名删除当前dom的属性
</script>
</body>
</html>
-CSS样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li class="item">123</li>
<li class="item" id="i1">234</li>
<li class="item">345</li>
</ul>
<script>
var arr_dom = document.getElementsByClassName("item")
for (var i=0;i<arr_dom.length;i++){
arr_dom[i].onclick = function (){
console.log(this.innerHTML)
this.style.color = "red"
this.style.backgroundColor = "black"
}
}
</script>
</body>
</html>
- class属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: lightcoral;
}
.c2{
color: red;
font-size: 32px;
}
.c3{
border: 2px solid green;
}
</style>
</head>
<body>
<div class="c1 c2" id="i1">li</div>
<script>
dom = document.getElementById("i1")
dom.onclick = function (){
// console.log(this.className) //属性设置或返回元素class属性
console.log(this.classList) //该属性用于在元素中添加，移除及切换CSS类
this.classList.add("c3") //添加class属性
this.classList.remove("c1") //删除class属性
}
</script>
</body>
</html>
tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab{
width: 800px;
height: 300px;
margin: 200px auto;
}
.tab ul{
list-style: none; /*取消标识符*/
}
.tab ul li{
display: inline-block;
}
.tab_title{
background-color: #f7f7f7;
border: 1px solid #eee;
border-bottom: 1px solid #e4393c;
}
.tab .tab_title li{
padding: 10px 25px;
font-size: 14px;
}
.tab .tab_title li.current{
background-color: #e4393c;
color: #fff;
cursor: default;
}
.tab_con li.hide{
display: none;
}
</style>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
</head>
<body>
<div class="tab">
<ul class="tab_title">
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评论</li>
</ul>
<ul class="tab_con">
<li>商品介绍...</li>
<li class="hide">规格与包装...</li>
<li class="hide">售后保障...</li>
<li class="hide">商品评论...</li>
</ul>
</div>
<script>
var titles = document.querySelectorAll(".tab_title li") //获取文档中所有的元素
console.log(titles) //[li.current, li, li, li]
var cons = document.querySelectorAll(".tab_con li")
console.log(cons) //[li, li.hide, li.hide, li.hide]
for(var i=0;i<titles.length;i++){
//增加一个属性
titles[i].setAttribute("index",i)
titles[i].onclick = function (){
//1. 点击标签class属性加上current,同级去掉current样式；红色标识
for(var j=0;j<titles.length;j++){
titles[j].classList.remove("current")
}
this.classList.add("current")
//2.按点击标签索引对象cons进行显示与隐藏
var index = this.getAttribute("index")
console.log(index) //商品的下标
for(var k=0;k<cons.length;k++){
cons[k].classList.add("hide")
}
cons[index].classList.remove("hide")
}
}
</script>
</body>
</html>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<button class="add">add</button>
<button class="rem">rem</button>
<button class="replace">replace</button>
<div class="outer">
<h3>wecome to JS!</h3>
</div>
<script>
var add_btn = document.querySelector(".add") //返回查找到的第一个元素
var rem = document.querySelector(".rem")
var replace = document.querySelector(".replace")
var outer = document.querySelector(".outer")
console.log(add_btn.innerHTML)
add_btn.onclick = function (){
//创建一个标签对象
var img = document.createElement("img")
img.src = "https://img2.baidu.com/it/u=2107715219,163459134&fm=26&fmt=auto&gp=0.jpg"
//添加节点
outer.appendChild(img)
}
rem.onclick = function (){
var del_ele = document.querySelector("h3")
//父亲删除儿子
outer.removeChild(del_ele)
}
replace.onclick = function (){
var replace_ele = document.querySelector("h3")
var img = document.createElement("img")
img.src = "https://img2.baidu.com/it/u=2107715219,163459134&fm=26&fmt=auto&gp=0.jpg"
//替换节点
outer.replaceChild(img,replace_ele)
}
</script>
</body>
</html>
8.3 查找标签
直接查找
// 方式1：获取元素
document.getElementsByTagName("标签名") //返回一个数组
document.getElementById("id值") //返回一个DOM对象
document.getElementsByClassName("类名") //返回一个数组
// 方式2：css选择器：
document.querySelector("css选择器") // 根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
1.方法 的返回值是DOM对象或是数组
2.document对象可以是任意DOM对象，将查询范围限制在当前DOM对象
导航查找标签
elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementtSibling // 下一个兄弟标签元素
elementNode.previousElementSibling // 上一个兄弟标签元素
直接查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: red;
height: 50px;
width: 50px;
border: 1px solid royalblue;
}
</style>
</head>
<body>
<button>button</button>
<ul>
<li class="item">123</li>
<li class="item" id="i1">234</li>
<li class="item">345</li>
</ul>
<div>123</div>
<div>567</div>
<script>
//标签名
var cor = document.getElementsByTagName("button")
console.log(cor)
for(var i=0;i<cor.length;i++){
cor[i].onclick = function (){
alert(123)
}
}
//ID值
var ele = document.getElementById("i1")
console.log(ele)
ele.onclick = function(){
alert("li")
};
//类名
var arr = document.getElementsByClassName("item")
console.log(arr)
for (var i=0;i<arr.length;i++){
arr[i].onclick = function(){
alert(this.innerHTML) //事件函数中的this代指的是触发事件的标签对象
}
console.log(i)
}
console.log(i)
//css选择器
var di = document.querySelector("div")
console.log(di)
di.onclick = function (){
alert(this.innerHTML)
}
var bl = document.querySelectorAll("div")
console.log(bl)
for(i=0;i<bl.length;i++){
bl[i].onclick = function (){
console.log(this.innerText)
}
}
</script>
</body>
</html>
导航查找
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button>button</button>
<button>butt</button>
<ul id="ii">
<li class="item">123</li>
<li class="item" id="i1">234</li>
<li class="item" id="i2">1234</li>
<li class="item" id="i3">10234</li>
<li class="item">345</li>
</ul>
<div>123</div>
<div>567</div>
<script>
var ele = document.getElementById("i1")
console.log(ele)
console.log(ele.parentElement) //父节点标签元素
console.log(ele.parentElement.children) //查找父节点下所有子标签
var ele2 = document.getElementById("ii")
console.log(ele2.firstElementChild) //查询第一个子标签元素
console.log(ele2.lastElementChild) //查询最后一个子标签元素
console.log(ele2.nextElementSibling) //查找下一个兄弟标签元素
console.log(ele2.previousElementSibling) //查找上一个兄弟标签元素
</script>
</body>
</html>
浙公网安备 33010602011771号