JavaScript

1、什么是JavaScript

1、1什么是JavaScript？

2、快速入门

2.1 引入JavaScript

1、内部标签

<script>
    //注释
    </script>

2、外部引用

文件名.js

< !--script标签内，写avascript代码-->
    < ! --<script>-->
alert( " hello,world ');
      < ! --</script>-->
      
      
<!--外部引入-->
<! --注意: script标签必须成对出现-->
      <script src="js/qj.js"></script>
      
      
<! --不用显示定义type，也默认就是javascript-->
      <script type="text/javascript">
      
</script>

检查元素

console.Log(score)在浏览器的控制台打印变量! 相当于idea System.out.println()

数据类型

数值 文本 音视频

变量

不要用数字开头

var  变量名="变量值"

number

js不区分小数和整数，Number
123//整数123
123.1//浮点数123.1
1.123e3//科学计数法
-99//负数
NaN  / not a number
Infinity / /表示无限大

字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符\

 \ '
\  n
\  t
\u4e2d          \u####    unicode字符
\x41         Asc11字符

3、多行字符串编写

方法 英语模式 按下 tab 键上面的键 **` **

<script>
        'use strict' 
        var msg=`hello
		world`
    </script>

4、模板字符串

方法  英语模式 按下 tab 键上面的键 
let name ="wang";
let age =4;
let msg =`你好呀，${name}`

输出：你好呀，wang

5、字符串长度

str.length 

6、字符串不可变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qYRbwY84-1627432899446)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210722160114470.png)]

7、大小写转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bvr4Hvic-1627432899449)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210722160158272.png)]

8、indexof 打印的顺序

student.indexOf('t')

输出  t

9、substring

[  )
student.substring(1)  //从第一个字符串截取到最后一个字符串

student.substring(1,3)  //[1,3) 

输出   tu

布尔值

TRUE  FALSE

逻辑运算

&&  两个都为真，则为真

||  一个真则为真

！ 真即假，假即真。

比较运算符！！！重要!

=    赋值符号
==   等于（类型不一样,值一样，也会判断为true)。
===  绝对等于(类型一样，值一样，结果true)。

这是一个JS的缺陷，坚持不要使用比较
须知:
NaN=NaN，这个与所有的数值都不相等，包括自
己，只能通过isNaN(NaN)来判断这个数是否是NaN。

浮点数的问题

console.log(1/3)===(1-(1-2/3))
console.log(1/3)===(1-(1-2/3))
VM514:1 0.3333333333333333
false

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.000000001
true

null和undefined

null 空

undefined 未定义

数组

Java的数值必须是相同类型的对象~，JS中不需要这样

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5 , "he11o' ,nu17 ,true];
           
new Array(1,12,3,4,4,5, 'he11o ');

取数组下标：从零开始。如果越界就会报

undefined

对象

对象是大扩号“{}”，数组是中扩号“[ ]”
每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person (1,2,3,4,5);
var person = {
name : "qinjiang" ，
age : 3，
tags: ['js ', 'java ' , 'web ' , '...']
}

取对象值

person . name
>"wnag"
person.age
>3

严格检查模式

前提:IEDA需要设置支持ES6语法
‘use strict’;严格检查模式，预防avaScript的随意性导致产生的一些问题必须写在avascript的第一行!
局部变量建议都使用let去定义~

<script>
'use strict';
//全局变量
let i=1

数组

Array 可以包含任意的数据类型

var arr = [1,2,3,4,5,6] ;  //通过下标取值和赋值
arr[0]
arr[0] = 1

1.长度
​```js
arr.length

注意:加入给arr.length赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失

2、indexOf，通过元素获得下标索引

arr.indexof(2)
1

字符串“1”和数字1是不同的

3、slice ()截取Array的一部分，返回一个新数组，类似于String中的substring

arr.slice(1,2)
[2]

4、push（)， pop()尾部

push:压入到尾部
pop:弹出尾部的一个元素

5、unshift() , shift()头部

unshift:压入到头部
shift:弹出头部的一个元素

6、数组排序

(3)["B"，"c"，"A"]

arr.sort(）
(3)["A"，"B"，"c"]

7、元素反转reverse()

(3)["A"，"B"，"c"]

arr.reverse(）
(3)["c"，"B"，"A"]

8、concat ()

(3) ["c"，"B"，"A"]
arr.concat([1,2,3]）
(6) ["c"，"B"，"A"，1，2，3]
arr
(3) ["c"，"B"，"A"]

注意：concat ()并没有修改数组，只是返回一个新的数组

9、连接符join

打印拼接数组，使用特定的字符串连接

(3) ["c"，"B"，"A"]

arr.join('-')
"c-B-A"

10、多维数组

arr = [[1,2],[3,4]，["5"", "6"]];

arr[1][1]
4

数组：存取数组，

对象

若干个键值对

var对象名= {
属性名:属性值，
属性名:属性值,
属性名:属性值
}

//定义了一个person对象，它有四个属性!
var person = {
name : "kuangshen",
    age : 3,
email: "24736743@qq.com",
    score: 0
}

JS 中对象，{…}表示一个不存在的对象属性，键值对描述 xxxx:xxxx, 多个属性之间使用逗号隔开，最后一个属性不叫逗号！

JavaScript 中的所有的键是字符串，值是任意对象！

1、对象赋值

person . name = "qinjiang""qinjiang"
person. name"qinjiang"

2、使用一个不存在的对象属性，不会报错! undefined

person .haha
undefined

3、动态的删减属性,通过delete删除对象属性

delete person. name
true
person

4、动态的添加，直接给新的属性添加值即可

person . haha = "haha"
"haha"
person

5、判断属性值是否在这个对象中!xxx in xxx!

'age' in person
true
//继承
'tostring' in person
true

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person. hasownProperty ( 'tostring ' )
false
person.hasOwnProperty('age ' )
true

流程控制

if 判断语句

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jPj69qIB-1627432899450)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723112701961.png)]

while 循环， 避免死循环

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hDqpfhJb-1627432899452)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723112737156.png)]

for 循环

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hPIHqplZ-1627432899453)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723112913631.png)]

for Each 循环

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g2Ovv7xA-1627432899455)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723113244166.png)]

Map 和Set

ES6 新特性

map：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OulBaBOC-1627432899456)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723114352720.png)]

set：无序不重复的集合

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0W1BF7Ur-1627432899456)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723114452426.png)]

iterator

遍历数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gp1UzYRM-1627432899457)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723115201319.png)]

遍历map

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UPAylcJd-1627432899458)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723115034772.png)]

遍历set

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-StG7AADY-1627432899459)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723115043570.png)]

函数

定义函数

绝对值函数

方法一：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwrZXnPi-1627432899460)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723152153215.png)]

一旦执行到return就代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

方法二：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6RYsAn4D-1627432899460)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210723154107084.png)]

function(x) …} 这是一个匿名函数。但是可以把结果赋值给abs，通过abs 就可以调用函数!方式一和方式二等价!

调用函数

abs(10)   //10   

abs(-10)   //10

参数问题： javaScript可以传任意个参数，也可以不传递参数~

参数进来是否存在的问题?假设不存在参数，如果规避?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxPAZ4C8-1627432899460)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210725151710415.png)]

arguments

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0QwkuG3a-1627432899461)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210725152019111.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H4YBCaLw-1627432899461)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210725152043838.png)]

问题: arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~

rest

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D29K717H-1627432899462)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210725171313386.png)]

rest参数只能写在最后面，必须用…标识。

变量的作用域

在javascript中, var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~（非要使用的话可以使用闭包）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EJLPWs7v-1627432899463)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726100000963.png)]

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-drVclkMc-1627432899464)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726100727632.png)]

内部函数可以访问外部函数的成员，反之则不行[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CiH3XGke-1627432899464)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726100816963.png)]

假设，内部函数变量和外部函数的变量，重名!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MFTDpO86-1627432899465)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726100859646.png)]

假设在JavaScript中函数查找变量从自身函数开始~，由"内“向“外"查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5FuAV7Py-1627432899465)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726101230427.png)]

结果 x undefined

说明;js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值’;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9hGb0XXK-1627432899465)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726101449095.png)]

这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部，不要乱放，便于代码维护;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1e3TrPoH-1627432899466)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726101503565.png)]

全局变量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nfZJeXSW-1627432899466)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726101849319.png)]

全局对象 Window

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ykZm0hoK-1627432899467)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726102002049.png)]

alert()这个函数本身也是一个window变量;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwExVL91-1627432899467)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726102252978.png)]

Javascript 实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError。

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如果能够减少冲突?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C985enLF-1627432899468)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726103049700.png)]

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

jQuery 工具包

局部作用域 let

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NzoSMPHG-1627432899468)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726103851096.png)]

ES6 let关键字，解决局部作用域冲突问题!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PlnyXai4-1627432899468)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726103925491.png)]

建议大家都是用let去定义局部作用域的变量;

常量 const

在ES6之前，怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1gVJF6Yz-1627432899469)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726104156746.png)]

在ES6引入了常量关键字const

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XQb6Ja96-1627432899469)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726104840952.png)]

方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西:属性和方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eHHTpd23-1627432899470)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726110333975.png)]

this. 代表什么？ 拆开上面的代码来看

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8XCeA0fN-1627432899470)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726110715825.png)]

this是无法指向的，是默认指向调用它的那个对象;

apply

在js 中可以控制this 指向！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Eoel9rC-1627432899471)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726111422620.png)]

内部对象

标准对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rr7maPKD-1627432899471)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726111645472.png)]

date

基本使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W2R5RaFG-1627432899472)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726112521353.png)]

转换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mBrmrHOX-1627432899473)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726112604400.png)]

JSON

json 是什么

早期，所有数据传输习惯使用XML文件!
. JSON(JavaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式。

·简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
·易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象、任何js支持的类型都可以用SON来表示; number，string…格式:

· 对象都用 { }

·数组都用 [ ]
·所有的键值对都是用key:value

JSON字符串和JS对象的转化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7JVrm39V-1627432899474)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726114429633.png)]

JSON 和JS对象的区别

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ZCin0ET-1627432899474)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726114831474.png)]

AJAX

原生的js写法xhr 异步请求
jQuey封装好的方法$("#name").ajax("")

axios请求

面向对象编程

什么是面向对象？

javascript、Java、c#。。。。面向对象; javascript有些区别!

·类:模板
·对象:具体的实例
在JavaScript这个需要大家换一下思维方式!

原型:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y7mMVcdv-1627432899475)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726152027260.png)]

class 继承

关键字，是在ES6引入的

1、定义一个类，属性，方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bi4h1Q1q-1627432899475)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726154254624.png)]

2、继承

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6NJM8MYo-1627432899475)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726155250509.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUcvNqef-1627432899476)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726155306508.png)]

本质：查看对象的原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ABKYB9q7-1627432899476)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726155428486.png)]

原型链

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzeMAh4q-1627432899477)(https://www.cnblogs.com/loveyaxin/p/11151586.html)]](C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726155849270.png)

javascript——原型与原型链 - 雅昕 - 博客园 (cnblogs.com)

操作 BOM 对象（重点）

JavaScript和浏览器关系?
JavaScript诞生就是为了能够让他在浏览器中运行!

BOM :浏览器对象模型

·IE 6~11
. Chrome

.Safari

.FireFoxX
三方
.QQ浏览器

360浏览器

window

表示浏览器窗口

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzCzSSXX-1627432899478)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726161107958.png)]

Navigator

封装浏览器的信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-btQOVXu7-1627432899479)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726161611102.png)]

大多数时候，我们不会使用navigator对象，因为会被人为修改!不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-usZHgJWt-1627432899479)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726162013230.png)]

location

代表当前页面的URL信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eDWtuO4a-1627432899480)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726162258223.png)]

document

document代表当前的页面，HTML DOM文档树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OecQmy3U-1627432899481)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726163616794.png)]

获取具体的文档树节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bskq4uKe-1627432899481)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726163658860.png)]

获取cookie

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4jCQTYj1-1627432899482)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726163724554.png)]

劫持cookie原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yq13DmVz-1627432899482)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726164312126.png)]

服务器端可以设置cookie: httpOnly

history

代表浏览器的历史记录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0UxRDdxt-1627432899483)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726164624105.png)]

操作DOM对象（重点）

DOM :文档对象模型，

浏览器网页就是一个Dom树形结构!

·更新:更新Dom节点
·遍历dom节点:得到Dom节点

删除:删除一个Dom节点

·添加:添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-avG4VpvC-1627432899483)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726192150029.png)]

这是原生代码，之后我们尽量都是用jQuery();

更新节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ip7n1OTl-1627432899483)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726194130499.png)]

操作文本
id1.innerText='456’修改文本的值
id1.innerHTML='123’可以解析HTML文本标签

操作css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ChiiO8no-1627432899484)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726194314748.png)]

删除节点

删除节点的步骤:先获取父节点，在通过父节点删除自己

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v62KA9VO-1627432899485)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726195529900.png)]

注意:删除多个节点的时候,children是在时刻变化的，删除节点的时候一定要注意!

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了!会产生覆盖。

追加

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eopk0Zip-1627432899485)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726215231635.png)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CMc7e1Te-1627432899486)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726215247824.png)]

创建一个新的标签，实现插入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HQfkOs41-1627432899486)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726220528710.png)]

insertBefore

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pj9FJ4yq-1627432899487)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210726220639799.png)]

操作表单（验证）

表单是什么form DOM树

文本框text
下拉框

单选框radio

多选框checkbox

隐藏域hidden

密码框password

…

表单的目的:提交信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q10rnvV2-1627432899487)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727085813306.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PzN4D4X-1627432899488)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727085900199.png)]

提交表单。 md5加密密码，表单优化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EPktM6RW-1627432899488)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727091304083.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gnU4W1hZ-1627432899489)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727091330121.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rlZ1dahe-1627432899489)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727092558360.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-inAIQpW8-1627432899491)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727092818780.png)]

JQuery

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-41f17LUK-1627432899492)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727094501172.png)]

获取jQuery

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zpunNFRB-1627432899492)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727094621997.png)]

jQuery cdn加速 (jq22.com)

jQuery库，里面存在大量的Javascript函数

使用公式：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oHD5r3Zk-1627432899492)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727094706326.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qjZbrSvP-1627432899494)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727095014496.png)]

选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HjYNHmEh-1627432899494)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727100532702.png)]

工具jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

事件

鼠标事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eGMgpLNb-1627432899495)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727101949403.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HrhwZVNc-1627432899495)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727102053286.png)]

键盘事件

操作DOM

节点文本操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CexBDU8k-1627432899496)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727102837049.png)]

CSS操作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-36nA06n2-1627432899497)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727103348945.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SnG1Q6nn-1627432899497)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727103417636.png)]

小技巧

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6gUPNNoI-1627432899497)(C:\Users\hello\AppData\Roaming\Typora\typora-user-images\image-20210727155656840.png)]

4X-1627432899488)]

提交表单。 md5加密密码，表单优化

[外链图片转存中…(img-EPktM6RW-1627432899488)]

[外链图片转存中…(img-gnU4W1hZ-1627432899489)]

[外链图片转存中…(img-rlZ1dahe-1627432899489)]

[外链图片转存中…(img-inAIQpW8-1627432899491)]

JQuery

[外链图片转存中…(img-41f17LUK-1627432899492)]

获取jQuery

[外链图片转存中…(img-zpunNFRB-1627432899492)]

jQuery cdn加速 (jq22.com)

jQuery库，里面存在大量的Javascript函数

使用公式：

[外链图片转存中…(img-oHD5r3Zk-1627432899492)]

[外链图片转存中…(img-qjZbrSvP-1627432899494)]

选择器

[外链图片转存中…(img-HjYNHmEh-1627432899494)]

工具jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm (cuishifeng.cn)

事件

鼠标事件

[外链图片转存中…(img-eGMgpLNb-1627432899495)]

[外链图片转存中…(img-HrhwZVNc-1627432899495)]

键盘事件

操作DOM

节点文本操作

[外链图片转存中…(img-CexBDU8k-1627432899496)]

CSS操作

[外链图片转存中…(img-36nA06n2-1627432899497)]

[外链图片转存中…(img-SnG1Q6nn-1627432899497)]

小技巧

[外链图片转存中…(img-6gUPNNoI-1627432899497)]