概念

  1. 什么是JavaScript？
    一般称为JS。是网景公司开发的一款在浏览器端解释执行的脚本语言。需要嵌入到HTML文件当中才能运行。
    其主要作用：

    • 数据校验【对表单中用户填写的数据，做合法性验证】
    • 操作网页，实现一些动态效果。【产生事件的交互】
    • 访问浏览器，获取一些浏览器的数据。【版本、类型…】

  2. 特点

    • JS是弱类型语言—类C语言。【数据的类型不是在编译器确定的，而是在运行期确定。】
    • JS可以保存在.js文件中，也可以直接写在.html文件中。（与CSS相同）
    • JS是基于对象的，不是纯粹的面向对象。

  3. 组成

    • ECMA规范
      一种脚本语言的开发规范，最初的时候命名为Mocha。后来根据版本迭代改名为ECMA。
    • DOM
      文档对象模型【将元素对象化】
      比如：<input type="text" name="" value="" class="" id=""/>
      将input对象化，然后.属性名的方式操作其属性值
    • BOM
      浏览器对象模型【浏览器中内置的对象】
      比如：Java API

变量的命名规范。

与Java规范相同。
变量名不能以数字开头，可以以_$以及字母开头。
语句以";"号结尾。

数据类型

  1. 基本类型
    数字类型【number】
    布尔类型【boolean】
    空类型【null】
    字符串类型【string】
    未定义【undifined】
  2. 引用类型
    Array【数组类型】
    Function【函数对象类型】
    Date【日期类型】
    Math【算术类型】
    document【文档对象】
    ….
  3. 查看数据类型
    Typeof();
  • 注意：
    JS的数据类型是在运行时确定的，并且可以随时改变。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// typeof()【判断是什么类型】
// Boolean()【强制转换为布尔】
// isNaN()【判断是否是数字，如果不是数字返回true，否则返回false】
// parseInt()【强制转换成number类型】

// 关键字：NaN
//     全名：not a number【不是一个数字】



var i = 100;
console.log(typeof(i));//number
i = "abc";
console.log(typeof(i));//string





// boolean数据类型
var a;
//console.log(Boolean(a));//undefiend是false
var b = null;
//console.log(Boolean(b));//null是也false
var c = 0;
//console.log(Boolean(c));//0是false
var d = 2;
//console.log(Boolean(d));//非0是true
console.log(Boolean(-1));//负数也是true

var e = 1 + "a";//NaN;
//console.log(Boolean(e));//非空的字符串是true

var f = "";
//console.log(Boolean(f));//空字符串也是false

//boolean类型可以进行数学运算
console.log(true + false);//1




// 三等和双等的区别
var a = 10;
var b = "10";
console.log(a == b);//true只比较值
console.log(a === b);//fasle 先比较类型，在比较值，如果都相等返回true，否则返回false。

引入JS的方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
在页面中引入CSS样式有3中方式：
/* 1.内部样式（head标签中） */
    <script>
        window.onload = function(){
            
        }
    </script>

/* 2.内联样式（html文件的标签中） */
    <div onclick="xxx();">

    </div>

/* 3.外部引入样式（把css文件引入到html中）*/
<script src="../js/jquery-3.4.1.min.js" type="application/javascript"></script>
src属性：对应是js所在文件地址。

信息输出的方式

  1. 内容会在页面中显示
    document.write("输出内容...");
  2. 警告框
    alert("输出内容");
  3. 日志输出，输出在浏览器的控制台
    console.log("输出内容");

变量的使用

  1. 变量必须声明才能使用。
  2. 变量的类型在运行期确定。

关键字：var、let、const

1
2
3
语法：
    JS使用  var  或  let  或  const  关键字来定义变量。
    var 变量名 = 值;
  • 注意：
    • var
      有变量提升作用。
      JS在运行期，会将所有以var关键字声明的变量全部放在函数的最顶端，但是没有赋值。 关键字声明的变量，无论声明在何处，都会被视作声明在函数的最顶端。
    • let
      用于声明局部变量的关键字。
      没有变量提升作用。
      声明的变量只在声明的地方到括号结束的地方为止。
    • const
      声明的是只读常量，一但声明，便不可改变。
      不使用var关键字声明的变量都是全局变量。
  • 建议：局部变量尽可能不要与全局变量重名。*

模板字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"" + ""; //字符串拼接;
1.字符串格式化
语法：
	${变量}：获取变量的值。

例子：
    var name = "张三";
    var age  = 10;
    console.log(`hello ${name} 他的年龄是:${age}`);
   
2.字符串的拼接
例子：
    var value = "zhangsan"
    var str = `<input type="text" name="username" value="${value}">`;
    document.write(str);

函数【function】

JS中使用function关键字来定义函数。
函数本身并不会执行，必须调用函数才能执行。与JAVA的方法类似。
语法：
function 函数名(参数1,参数2...){}

注意：在JS中没有多态概念，是基于对象，方法名如果相同，后面的覆盖前面的。如果变量名与函数名相同，依然覆盖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18


function show(idCard){
    console.log(`身份证：${idCard}`);
}

function show(name,age){
    console.log(`姓名为：${name} 年龄为：${age}`);
}
// 此函数覆盖了上面的函数

show("李四",19);
show("赵六");
show("李七",30,true);

show("123456789",20);
var show = "我是一个变量";
console.log(show);

回调函数

将一个函数当做另一个函数的参数传入进去。

1
2
3
// 例子（show函数调用fn函数）：
	function show(a,b,fn){}
	function fn(x,y){}

匿名函数

顾名思义，没有名字的函数，一般用于回调。

1
2
3
4
5
6
7
8
9
10
11
12
13
语法:
	function(参数1,参数2,...){}

例子：
function Show(a,b,fun){
    return fun(a,b);
}

var showMe = Show(3,4,function(x,y){
    return x * y;
});

console.log(showMe);

函数的默认参数

函数的形参在没有具体实参传入的时候，则采用的预设的值。如果在调用时传入参数，就采用传入的值。

1
2
3
例子：
	function f1(x,y=100){}
	// 当前的y如果在方法调用的时候，没有传入参数，那么它的值就是100

箭头函数（拉姆达表达式）

  • 新特性
    意义在于简化匿名类的写法
  • 特点
    1.不需要使用function关键即可创建函数。
    2.省略return关键字
    3.继承当前this。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    语法：
    	(req,resp) => req
    	
    	相当于

    	function(req,resp){
            return req;
        }

    1.创建一个无参函数【没有参数的箭头函数】
    	ar emptyParams = () => `welcome to GuangZhou`;

    2.单一函数，函数体只有一条语句的箭头函数
    	var welcome = (name,msg) => `${msg} : ${name}`;

    3.函数体有多条语句的函数。（使用大括号、代码块）
    	var add = (a,b=100) => {
    		let c = a * b;
    		return c;
    	}

    4.函数体返回的是一个对象
        var Bus = (color,price) =>(
            {color,price}
        );
        var bus = Bus("黑色",5000);
        console.log(bus);

        // 等同于

        function Bus(color,price){
            this.color = color;
            this.price = price;
        }
        var bus = new Bus("黑色",5000);
        console.log(bus);



    5.rest参数
    // 相当于Java中的可变参数
    语法：
        function 函数名(参数一,...参数n){}

循环与选择结构

if

1
2
3
4
5
6
7
var i = 10;
/*
    if中的表达式可以使用数字、字符串等等表达式。
*/
if(i){
    console.log(--i);
}

for in 类似 JAVA中的 forEach。
for in 循环的不是对象的值，而是下标。一般用于迭代数组。

1
2
3
4
5
6
7
8
9
10
var str = "你好世界";
//字符串的本质就是字符数组。
for(const i in str){
    console.log(str[i]);
}

// 你
// 好
// 世
// 界

数组【Array】

数组是一种复合数据结构。一个变量可以存放多个数据。
创建数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 方式一：Array()【浏览器内置对象】
var arr = new Array();//创建了一个空数组。
var arr = new Array("Tom","Jarry");//创建并赋值元素

// 赋值
arr[0] = 1;

// 方式二：
var hobby = [];//创建一个空数组
var hobby = ["吃","喝","玩","乐"];//创建并赋值元素


注意：
	JS中 数组的长度是随意扩容的。
	JS中 数组中的元素类型可以不一致。但不建议。
  • 数组的常用方法
    1. sort()：排序
    2. join()：拼接，根据指定的字符拼接，返回一个字符串
    3. push()：向数组的末尾追加一个或者多个元素
    4. pop()：删除数组中最后一个元素，并返回该元素
    5. concat()：将其它数组连接到当前数组的末尾，返回一个新数组，原数组不变。
    6. unshift()：向数组的开头添加一个或者多个元素
    7. shift()：删除数组开头的元素，并返回该元素
    8. slice()：从已有数组中返回选择的子范围元素【类似切片】
    9. reverse()：将数组反转【头变尾】
    10. toString()：将数组转换成字符串
    11. indexOf()：返回指定元素在数组中第一次出现的下标的位置
    12. forEach()：迭代数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
// 1. sort()：排序
// 默认按照aciis码排序（只排序第一个）
var nums = [54,89,41,589,278,12,741,0,6,8,877];
var names = ["tom","jerry","bruse li","andy","smith","alice","rose"];

console.log(nums.sort());   // [0, 12, 278, 41, 54, 589, 6, 741, 8, 877, 89]

// 重写排序规则后
console.log(nums.sort(function(a,b){
    if(a > b){
        return 1;
    }else if(a < b){
        return -1;
    }else{
        return 0
    }
}));
// [0, 6, 8, 12, 41, 54, 89, 278, 589, 741, 877]

// 默认字符串排序是按照首字母排序
console.log(names.sort());  //["alice", "andy", "bruse li", "jerry", "rose", "smith", "tom"]

// 按照长度顺序重写排序规则后
console.log(names.sort(function(a,b){
    if(a.length > b.length){
        return 1;
    }else if(a.length < b.length){
        return -1;
    }else{
        return 0;
    }
    }));
// ["tom", "andy", "rose", "jerry", "smith", "alice", "bruse li"]

------------------------------------

// 2.join()：拼接，根据指定的字符拼接，返回一个字符串
var names = ["tom","jerry","bruse li","andy","smith","alice","rose"];
var str = names.join("-");
console.log(str);
// tom-jerry-bruse li-andy-smith-alice-rose

------------------------------------

// 3.push()：向数组的末尾追加一个或者多个元素
var names = ["tom","jerry"];
names.push("andy");
console.log(names);
// ["tom", "jerry", "andy"]

names.push("pengpeng","HuLu");
console.log(names);
//  ["tom", "jerry", "andy", "pengpeng", "HuLu"]



// 4.pop()：删除数组中最后一个元素，并返回该元素
var names = ["tom","jerry","PengPeng"];
names.pop();
console.log(names);
// ["tom","jerry"];


// 5.concat()：将其它数组连接到当前数组的末尾，返回一个新数组，原数组不变。
var firstnames = ["tom","jerry","bruse li"];
var lastnames = ["andy","smith","alice","rose"];
var names = firstnames.concat(lastnames);
console.log(names);
// ["tom", "jerry", "bruse li", "andy", "smith", "alice", "rose"]


// 6.unshift()：向数组的开头添加一个或者多个元素
var names = ["tom","jerry","bruse li"];
names.unshift("alice","rose");
console.log(names);
// ["alice","rose","tom","jerry","bruse li"]


// 7.shift()：删除数组开头的元素，并返回该元素
var names = ["tom","jerry","bruse li"];
var name = names.shift();
console.log(name);
// tom
console.log(names);
// ["jerry","bruse li"]


// 8.slice()：从已有数组中返回选择的子范围元素【类似切片】
var names = ["tom","jerry","bruse li","andy","smith","alice","rose"];
var names2 = names.slice(1,4);//包前不包后，
console.log(names2);
// ["jerry", "bruse li", "andy"]
/*
    指定一个参数时，从指定下标开始-末尾。全部包括
*/
var names3 = names.slice(4);
console.log(names3);
// ["smith", "alice", "rose"]


// 9.reverse()：将数组反转【头变尾】
var names = ["tom","jerry","bruse li","andy","smith","alice","rose"];
console.log(names.reverse());
// [ "rose", "alice", "smith", "andy", "bruse li", "jerry", "tom" ]


// 10.toString()：将数组转换成字符串
var names = ["tom","jerry","bruse li","andy","smith","alice","rose"];
var str = names.toString();
console.log(str);
// tom,jerry,bruse li,andy,smith,alice,rose



// 11.indexOf()：返回指定元素在数组中第一次出现的下标的位置
var names = ["tom","jerry","bruse li","andy","smith","alice","rose"];
var index = names.indexOf("alice");
console.log(index);
//5
console.log(typeof(index));



// 12.forEach()：迭代数组
var names = ["tom","jerry","bruse li","andy","smith","alice","rose"];
names.forEach(function(value,index){
    console.log(`${index} : ${value}`);
});
// 0 : tom
// 1 : jerry
// 2 : bruse li
// 3 : andy
// 4 : smith
// 5 : alice
// 6 : rose

二维数组

与JAVA一样，数组中每个元素还是一个数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1.二维数组的声明
	方式一
	var nums = new Array(new Array(),new Array());
	方式二
	var nums2 = [[],[],[]];

2.二维数组的赋值
	nums[0][0] = 20;


//3.二维数组的迭代
var names = [["tom","jerry"],["alice","smith","jeck"],["rose"]];
			
for(var i = 0; i < names.length; i++){
    for(var j = 0; j < names[i].length; j++){
        document.write(names[i][j] + "\t");
    }
}

闭包

在函数内部定义了一个或者多个函数，是用来封装一个或者多个函数的。
简单的理解：闭包就是用于封装JS函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
语法：
	(function(函数的参数){
        执行的代码块;
    })();

例子：
var fn = (function(){
    var num = 10;
    return {
        addition:function(n){
            num+=n
            return num;
        },
        substration:function(n){
            return num-=n;
        }
    }
})();

// 调用函数中的函数
console.log(fn.addition(20));
// 30
console.log(fn.substration(15));
// 15

JS对象

JS对象是数据类型之一，是一种复合的数据类型。
将多种数据类型集中在数据单元，并且允许通过对象来存储和调用这些数据的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// 1.自定义对象
语法：
方式一：
var stduent = {属性名:属性值..}
方式二：
function student(name,age,sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
}

方式一例子：
var student = {
    name:"张三",
    age:20,
    sex:"男",
    sayName:function(){
        alert(this.name);
    },
    print:function(msg){
        console.log(`${msg} ${this.name}`);
    }
}
			
console.log(student.name);
// 张三
student.print("欢迎来到广州");
// 欢迎来到广州 张三

方式二：
function student02(name,age,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayName = function(){
        alert(this.name);
    },
    this.print = function(msg){
        alert(msg);
    }
}
var stu = new student02("李四",20,"女");
console.log(stu.name);
// 李四

------------------------------------------------
// 2.对象初始化简写
语法：
	function student(name,age){
		rerturn {
            name,
            age
		}
	}


例子：
function student(name,age,sex){
    return{
        name,
        age,
        sex,
        sayHello:function(){
            console.log("Hello World");
        }
    }
}
var stu = new student("李四",20,"男");
console.log(stu.name);
stu.sayHello();
// 李四 
// Hello World

String对象

1.charAt()：根据指定下标返回下标指向的字符
2.indexOf()：返回指定字符在字符串中第一次出现的下标位置。
3.lastIndexOf()：返回指定字符在字符串中最后一次出现的下标位置。
4.substr()：从指定的位置开始截取指定长度的子字符串。
5.subString()：从指定的位置开始截取指定位置的子字符串。
6.trim()：去除前后两端空白
7.replace()：替换
8.toLowerCase()：转换为小写
9.toUpperCase()：转换为大写
10.concat()：连接两个字符串
11.split()：根据指定的字符拆分字符串。返回一个数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//1.创建一个字符串
var str = " welcome to GuangZhou....  ";
// 以下语句以  str  为标准


// 1.charAt()：根据指定下标返回下标指向的字符
console.log(str.charAt(0)); //w
// 2.indexOf()：返回指定字符在字符串中第一次出现的下标位置。
console.log(str.indexOf("o"));  //5
// 3.lastIndexOf()：返回指定字符在字符串中最后一次出现的下标位置。
console.log(str.lastIndexOf("o"));  19
// 4.substr(index,size)：从指定的位置开始截取指定长度的子字符串。
console.log(str.substr(15,5));//Zhou
console.log(str.substr(15));//Zhou....  
// 5.subString()：从指定的位置开始截取指定位置的子字符串。
console.log(str.substring(0,7));//welcome
console.log(str.substring(7));//to GuangZhou....
// 6.trim()：去除前后两端空白
console.log(str.trim().length);
// 7.replace()：替换
console.log(str.replace("GuangZhou","*"));  // welcome to *
// 8.toLowerCase()：转换为小写
console.log(str.toUpperCase());
// 9.toUpperCase()：转换为大写
console.log(str.toLowerCase());
// 10.concat()：连接两个字符串
console.log(str.concat("翻译：欢迎来到广州"));  //welcome to GuangZhou....  翻译：欢迎来到广州
console.log(str.split(" "));    //[ "", "welcome", "to", "GuangZhou....", "", "" ]

//格式化字符串
document.write(str.fontsize(7).fontcolor("#ccc").concat("</br>"));
document.writeln(str.small() + `</br>`);
document.writeln(str.big() + `</br>`);
document.write(str.italics());

Data对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// new一个Data对象
var date = new Date();
//console.log(date);

//1.设置
date.setFullYear(2020);
date.setMonth(8)
//....
//2.获取当前年月日 时分秒
console.log(date.getFullYear());//年
console.log(date.getMonth() + 1);//月份从0开始
console.log(date.getDate());//日
console.log(date.getDay());// 星期
console.log(date.getHours());// 小时
console.log(date.getMinutes())// 分钟
console.log(date.getSeconds());//秒


document.write(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日\t" + date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒");

BOM【重点】

Browser Object Model
浏览器对象模型。
通俗的说：可以获取浏览器信息的内置对象。

1.window
2.screen
3.navgator
4.location
…
9.document

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
// 1.window
// 	所有浏览器都支持 window 对象。它表示浏览器窗口
// 	所有对象默认都是window对象的子对象。

// 2.screen
// 	window对象的成员，用来获取用户屏幕属性。
// 查看screen里面内置的属性
console.log(window.screen);
console.log(`屏幕宽度 :${screen.width} 屏幕高度：${screen.height}`);
// 屏幕宽度 :1536 屏幕高度：864
console.log(`屏幕可用宽度 :${screen.availWidth} 屏幕高度：${screen.availHeight}`);
// 屏幕可用宽度 :1536 屏幕高度：824


// 3.navgator
// 	获取用户的浏览器信息。
console.log(navigator);

document.write(`浏览器代号：${navigator.appCodeName} 
    <br/>浏览器的名称：${navigator.appName}
    <br/>浏览器的版本：${navigator.appVersion}
    <br/>浏览器的cookie是否开启：${navigator.cookieEnabled}
    <br/>硬件平台：${navigator.platform}
    <br/>用户代理：${navigator.userAgent}
    <br/>用户语言：${navigator.language}
    `);


// 4.location
// 	浏览器地址对象
console.log(window.location);
document.write(`全球资源定位【URL】：${location.href}
    <br/>服务器资源定位【URI】：${location.pathname}
    <br/>端口号：${location.port}
    <br/>IP地址：${location.hostname}
    <br/>协议：${location.protocol}
    `);


5.警告框 alter()
    alert("提示框");    //会强制提示框

6.交互框 prompt()
    var value = prompt("交互框");
    console.log(value);
    // 在输入框输入点确定后会获取值，点取消则null

7.确认框 confirm()
    var flag = confirm("确定删除吗？");
    console.log(flag);
    // 返回的是布尔值，确定true，取消false

8.window对象的定时器
	定时器：
		按照指定的时间，执行指定时间之后的某个事件。
	a)一次性定时器
		setTimeout(callback,delay);

        例子：两秒后运行回调函数
        var timer = window.setTimeout(callback,2000);
        //回调函数
        function callback(){
            console.log("定时器开始工作...");
            //window.location = "https://www.baidu.com";
        }

	b)循环性定时器
		setInterval(callback,delay);

            例子：每两秒运行一次
            window.setInterval(callback,2000);
            function callback(){
            console.log("定时器开始工作...");
            //window.location = "https://www.baidu.com";

            }
	c)清除定时任务
		clearInterval();
		clearTimeout();

        例子：运行上次后结束
        var a = 0;
        var times = window.setInterval(callback,2000);
        function callback(){
            console.log("定时器开始工作...");
            a+=1;
            if(a == 3){
                clearInterval(times);
            }
        }

9.document
	文档对象。
 	用于查找、创建、操作节点对象。
 	通俗的理解：将每一个HTML标签都当做是一个对象。
 	
    常用函数:
        getElementById(id)：根据节点的id属性来获取节点。
        getElementsByName(name)：根据节点的name属性获取节点，返回数组。
        getElementsByClassName(name)：根据class属性获取节点，返回数组。
        getElementsByTagName(name)：根据标签获取节点，返回数组。

        例子：
        var arr = document.getElementsByTagName("p");  //获取<p>标签
        var arr = document.getElementsByClassName("c1");  //获取class = "c1"的标签
        var arr = document.getElementsByName('hobby');  //获取name = "hobby"的标签
        var arr = document.getElementById("c1");  //获取id = "c1"的标签

DOM【重点】

Document Object Model
文档对象模型
将每一个HTML标签都当做是一个对象。
将一个HTML文件抽象成一颗树。

1.创建节点
2.插入一个节点
3.获取一个对象中所有的子节点
4.dom的css样式操作，每一个对象都有一个sytle属性

1
2
3
4
5
6
7
8
9
10
11
12
// 1.创建节点
//   createElement(elementName)：创建指定elementName的节点
//   createTextNode(content)：创建节点中的内容
//   appendChild(element)：将element节点放入指定节点的内部【追加一个节点】
 
// 2.插入一个节点
// 	insertBefore：插入一个节点的前面

// 3.获取一个对象中所有的子节点
// 	childNodes：需要进行处理，空白也是它的子节点。

//4.dom的css样式操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
1.创建节点
//createElement:通过文档对象创建一个新的节点
var p = document.createElement("p");
//createTextNode:创建节点的文本内容
var value = document.createTextNode("我是p标签中的内容");
//将节点内容添加到节点中
p.appendChild(value);

//获取body元素，将p元素添加到body中，最后HTML中显示p标签的内容
document.getElementsByTagName("body")[0].appendChild(p);


2.插入一个节点
// 获取节点
var p = document.createElement("p");
var div= document.getElementById("div1");
var div_p= document.getElementById("p1");
// div节点中将p插入div_p前
div.insertBefore(p,div_p);


3.获取一个对象中所有的子节点（并且清除空节点）
<ul id="u1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>


var ul = document.getElementById('u1');
console.log(ul.childNodes);
//获取ul下的所有子节点
var findLi = ul.childNodes;
for(var i = 0; i < findLi.length; i++){
    /*
        /\s/：匹配空白
        test()：正则表达式对象的内部函数。用于判断字符串中是否有指定字符，如果包含，返回true，否则false
    */
    if(findLi[i].nodeName == "#text" && /\s/.test(findLi[i].nodeValue)){
            //findLi[i].remove();
            ul.removeChild(findLi[i]);
    }
}
console.log(findLi.length);//清楚后显示为3



4.dom的css样式操作
<body>
    <p id="p1">这是p标签中的内容</p>
    <script type="text/javascript">
        var p  = document.getElementById('p1');
        p.style.color = "#ccc";
        p.style.fontSize = "22px";
        p.style.fontFamily = "宋体";
        p.style.width = "200px";
    </script>
</body>

事件

能够与用户产生动态交互。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
页面加载事件:
    0.onload：页面加载事件【等待浏览器将页面渲染完毕后立即执行的事件】

鼠标事件：
    1. onclicke：点击事件【用户点击按钮】
    2. onmouseover：鼠标移入事件
    3. onmouseout：鼠标移出事件
    4. onmousedown：鼠标按下事件
    5. onmouseup：鼠标抬起事件
    6. onmouseenter：鼠标移入事件
    7. onmouseleave：鼠标移出事件。
    8. onscroll：鼠标滚轮事件

键盘事件：
	1.onkeydown：键盘按下事件
	2.onkeyup：键盘抬起事件
	3.onkeypress：键盘按键被按下并松开。

表单事件：
	1.onblur：焦点失去事件
	2.onfocus：获取焦点事件
	3.onchange：值改变事件
	4.oninput：用户在输入事件
	5.onsubmit：用户提交事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 1.onclicke：点击事件
// 当点击按钮，发生xxxx函数事件
<script type="text/javascript">
    window.onload = function(){
        document.getElementById("on").onclick = function(){
            xxxxxxx
        }
    }
</script>

<body>
    <button type="button" id="on">按钮</button>
</body>

// 1.onkeydown：键盘按下事件,并且输出
window.onkeydown = function(temp){
    console.log(`按下了 ${temp.keyCode}`);
}


// 1.onblur：焦点失去事件
// 当写完账号后移下密码行，出发“焦点失去”
<script type="text/javascript">
    function f1(){
        console.log("焦点失去");
    }
</script>

<body>
账号：<input type="text" onblur="f1();" /><br/>
密码：<input type="text"  />
</body>

模块

将一个文件模块化，文件之间的引用。
以下例子，index.html导入index.js，index.js引用mudole的导出

注意：
在导入过程中如果导入名称加 {} 表示导入的是指定文件的变量名称，或者函数名称等。
如果不加{} 表示导入default中的所有内容，可以理解为，将default起了一个别名

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// mudole.js

//变量
let a = 10;
let b = 20;
let c = 30;

//export：将 a 和 b变量导出
export {a,b,c}

// 导出名为info函数
export function info(){
	alert("info函数被执行....");
}


// 将{}中的内容全部导出
export default{ 
	name:"Andy",
	age:26,
	e(name){
		alert("e函数被执行:" + name);
	},
	getList(){
		document.getElementById('btn').onclick = function(){
			console.log("getList被触发...");
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// index.js

// import：导入
import {a,b,c} from "./mudole.js"

// 导入一个叫info的函数
import {info} from './mudole.js'

// 导入default中的所有内容,自定义别名为m
import m from './mudole.js'
 

console.log(a);
console.log(b);
console.log(c);

console.log(m.name);

//函数调用并且赋值
m.e("Smith");

//调用m中的函数
m.getList();

//调用名为info的函数
info();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- index.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title></title>
		<!-- 注意，这里的type是module -->
		<script src="index.js" type="module" charset="utf-8"></script>
	</head>
	<body> 
		<button type="button" id="btn">点击</button>
	</body>
</html>

正则表达式

如何使用？
例子：

1
2
3
4
5
6
7
8
9
10
11
var reg = new RegExp(这里写入表达式);
// RegExp()：正则表达式对象。提供用于匹配、检索正则表达式的函数。

可以简写为:    /这里写入表达式/ . 与字符串类型;

例子：
var reg = /[1234]/;
console.log(reg.test("567589"));    //false

var reg2 = new RegExp([1234]);
console.log(reg2.test("567589"));    //false

多选框checked（全选、不全选）

直接上demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var flag = 0;
			var userCode = "";
			window.onload = function(){
				var checks = document.getElementsByClassName("check");
				$("checkAll").onclick = function(){
					if(flag == 0){
						for(let i = 0;i<checks.length;i++){
							checks[i].checked = true;
						}
						flag = 1;
					}else{
						for(let i = 0;i<checks.length;i++){
							checks[i].checked = false;
						}
						flag = 0;
					}
				}
				
				for(let i = 0; i < checks.length; i++){
					checks[i].onclick = function(){
						console.log(checks[i].value);
						userCode += `${checks[i].value},`;
					}
				}
				
				
			}
			
			function checkSubmit(){
				console.log(userCode);
			}
			
			
			function $(id){
				return document.getElementById(id);
			}
		</script>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="50%" style="text-align: center;">
			<tr>
				<td>
					<input type="checkbox" id="checkAll"/>
					编号
				</td>
				<td>
					账号
				</td>
				<td>
					邮箱
				</td>
				<td>
					操作
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="check" value="001"/>
					001
				</td>
				<td>
					zhangsan
				</td>
				<td>
					ykdong@foxmail.com
				</td>
				<td>
					<input type="button" value="更新"/> |
					<input type="button" value="删除"/>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="check" value="002"/>
					002
				</td>
				<td>
					zhangsan
				</td>
				<td>
					ykdong@foxmail.com
				</td>
				<td>
					<input type="button" value="更新"/> |
					<input type="button" value="删除"/>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="check" value="003"/>
					003
				</td>
				<td>
					zhangsan
				</td>
				<td>
					ykdong@foxmail.com
				</td>
				<td>
					<input type="button" value="更新"/> |
					<input type="button" value="删除"/>
				</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="check" value="004"/>
					004
				</td>
				<td>
					zhangsan
				</td>
				<td>
					ykdong@foxmail.com
				</td>
				<td>
					<input type="button" value="更新"/> |
					<input type="button" value="删除"/>
				</td>
			</tr>
		</table>
		<button type="button" onclick="checkSubmit();">提交</button>
	</body>
</html>