1、什么是Javascript

1.1、概述

JavaScript是一门世界上最流行的脚本语言

Java、javaScript

10天~

一个合格的后端人员，必须要精通JavaScript

1.2、历史

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到了es6版本~

但是大部分浏览器还停留在支持es5代码上~

开发环境–线上环境，版本不一致

2、快速入门

2.1、引入JavaScript

内部标签

alert（‘xxx’）:弹窗

 <!--内部js-->
<script>alert('hello word!')
/*弹窗 alert*/
</script>

外部引入
```
 <script src="../JS/MW.js"></script>
```

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

注意：Script成对出现

//不用显示定义type，也默认就是javascript<script type="text/javascript"></script>

2.2、基本语法入门

浏览器调试须知：

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

Elements：元素

Console：控制台

Sources：源码调试

Network：互联网抓包

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

    <script>
<!--script严格区分大小写！-->/*1、定义变量*/var  source=66;/*变量类型只有一个var 变量名=变量值*//*    alert(source);*//*2、条件控制*/if(source>60 && source<70){alert(source)}else if (source>70 && source<80){alert(source);}alert('999');// 在浏览器的控制台打印变量！console.log('我的宝儿！')</script>

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

2.3、数据类型

数值，文本，图形，视频，音频。。。。

变量

var _$
//变量名不能用数字开头

number
js不区分小数和整数，都用number

123//整数123
123.12//浮点数123.1
1.12e3//科学技术法=1120
-88//负数
NaN//not a number 不是一个number
Infinity //表示无限大

字符串

‘abc’ “abc”

布尔型

ture， flase

<script>var  a=5;console.log(a>4);</script>

逻辑运算

&&   and
||   or
!     not

比较运算符

=  //赋值
== //等于(类型不一样，值一样，会判断ture)==== //等于（类型一样，值一样，判断ture）

这是js的缺陷，坚持不要使用==比较

须知

NaN==NaN ，这个与所有的数值都不相等，包括自己

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

只能通过isNaN(NaN)来判断

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

浮点数问题
```
  <script>/*  var  a=5;*/console.log((1-1/3)===1/3);</script>
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NECeUUyg-1636732352352)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019222629704.png)]

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

函数绝对值Math.abs

使用绝对值比较
```
<script>/*  var  a=5;*/console.log((Math.abs(1-2/3)===1/3)<0.00000001);</script>
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ewnuvdFG-1636732352353)(C:\Users\陈明伟\AppData\Roaming\Typora\typora-user-images\image-20211019223106756.png)]

数组

JAVA的数组必须是相同类型的对象~，JS不用这样

对象定义数组new Array

 <script>/*  var  a=5;*//* console.log((Math.abs(1-1/3)===1/3)<0.00000001);*/var arr = [1,2,3,4,5,null,'hello',true]//面向程序new Array(1,2,4,5) //面向程序console.log(arr[6]);</script>

取数组下表如果越界会报

undefined

null和undefined

null 表示空
undefined 未定义

对象

对象是大括号，数组是中括号

var person ={name:'chengmingwei',age:20,arr:[1,2,4,5,null]}

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

取对象的值

person.age
>20
person.name
>'chengmingwei'

2.4、严格检查格式

//未定义的变量，默认全局变量

前提是是ES6模式下

局部变量建议使用let去定义，必须写在第一行script

用严格检查格式，use strict就会报错变量未定义类型

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

 <script>/* 'use strict' 严格检查模式，防止JAVAScrip的随意性导致出现问题t*/
'use strict';let  i=1;console.log(i);</script>

3、数据类型

3.1、字符串

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

2、注意转义字符\

\'
\n
\u4e2d \u####  unicode字符
\x41   ASCLL字符

3、多行字符串编写

<script>
//tab 上面的飘号
var msg=`
hello
world
英雄联盟
`
</script>

4.模板字符串

 'use strict';//严格检查格式let  name='chengmingwei';let   age=3;let    msg=`你好呀,${name}`;console.log(msg);

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

5、字符串长度

//str.length
var student='student';console.log(student.length);

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

6、字符串的可变性，不可变

7、大小写转换

//注意，这里是方法，不是属性了
student.toupperCase()
student.toLowerCase()

8、student.lindexof(‘t’)

9、substring

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

3.2、数组

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

//控制台打印数组
var arr=[1,2,3,4,56];console.log(arr);

1、长度

var arr=[1,2,3,4,56];
arr[0]=99;
arr.length=10;console.log(arr);

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

注意：加入arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失，如果过大就会用空来替补。

2.indexOf 通过元素查找索引

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

字符串的‘’1‘’和数字的1不同

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

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

4、push，pop //类似数据结构中的栈

push压入尾部
pop弹出尾部

5、unshift(),shift()头部

unshift压入头部
shift弹出头部

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

6.排序sort

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

7.元素反转reverse()

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

8.concat()拼接

arr.concat('a','b','c')
(10) [9, 8, 7, 4, 3, 2, 1, 'a', 'b', 'c']

注意：concat()并不会修改数据，只会返回数据新的数组

9.连结符号join

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

arr.join('-')
'9-8-7-4-3-2-1'

10.多维数组

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

注意：多维数组打印的时候，arr[M] [N]表示M行的N个数组，只有一行的时候，看N,M可以未任意值，也可以为null

3.3、对象

若干个键对

var 对象名 = {属性名：属性值，
属性名：属性值，
属性名：属性值，
}
//定义一个person的对象，他有四个属性！
var person ={name:'chengmingwei',age:9,email:1092705638@qq.com,score:59
}

JS中对象，{。。。}表示一个对象，键值对描述属性xxxx：xxx,属性之间使用逗号隔开，最后一个不加逗号！

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

<script>'use strict';var person={name:'chengmingwei',age:9,email:'1092705638@qq.com',score:59}console.log(person.name);

1、对象赋值

person.name='chengmingwei'
'chengmingwei'

2、动态的删除属性，通过delete删除对象属性

person
{name: 'chengmingwei', age: 9, email: '1092705638@qq.com', score: 59}
delete person.name
true

3、使用一个不存在的属性,不会报错 undefined

//person  kk
undefined

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

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

person.name='chengmingwei'
'chengmingwei'

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

'age'in person
ture
//继承
'toString' in person
true

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

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4、流程控制

if判断

var age=3;if (age>3){alert('倔强青铜')}else{alert('最强王者')}

While循环

 let age=0;while(age<100){age=age+1;console.log(age);}
//do while
do{age=age+1;console.log(age);
}while(age<100);

for循环

 for (let i = 0; i <100 ; i++) {console.log(i)}

forEach循环遍历数组

 var age=[1,2,3,4,5,6,7,9,8];age.forEach(function (value) {console.log(value)}

for in…

3.5、Map和Set

ES6的新特性

Map

//var name=["Tom","Jack","Luse"];//var source=[100,80,60];var map=new Map([['Tom',100],['Jack',80],['Luese',60]]);var name=map.get('Tom');map.set('Admin',1234567);//增加或修改map.delete('Admin',1234567);//删除console.log(name);

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

Set无序不重复的集合//去重

var set =new Set([1,2,3,3,3,3])console.log(set);

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

set.add(11)//增加
Set(4) {1, 2, 3, '9'}
set.delete('1')//删除
false
set
Set(4) {1, 2, 3, '9'}
set.delete(1)
true
set
Set(3) {2, 3, '9'}
console.log(set.has(2))//是否包含这个元素

3.6、iterator

使用iterator来遍历迭代我们Map，Set

遍历数组

//for(var x in arr)遍历索引
//for(var x of arr)遍历数组值
var arr=[1,2,3,4,5]for(var x of arr){console.log(x);}

遍历Map

var map=new Map([['chengmingwei',20],['liqinglan',20]]);for(let x of map){console.log(x);}
//遍历结果
(2) ['chengmingwei', 20]
5、循环判断.html?_ijt=k6ght20dek5dh3oga80dunf7tn:25 (2) ['liqinglan', 20]

遍历Set

var set =new Set([1,2,3,4,5,88]);for (let x of set){console.log(x);}

区别：for of 不会遍历手动添加的值，而for in会

4、函数及面向对象

4.1定义函数

定义方式一

绝对值函数

function abs(x){if(x>0){return x;
}else{return -x;
}
};

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

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

定义方式二

var abs=function(x){if(x>0){return x;}else{return -x;}}

function(x)（。。）这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数.

调用函数

abs(10)//10
abs(-10)//

参数问题：JavaScript可以传递任意个参数，也可以不传递任何参数

参数进来是否存在的问题？

假设不存在参数，如何规避？

var abs=function(x){//手动抛出异常if(typeof x !=='number'){throw 'Not a Number';}if(x>0){return x;}else{return -x;}}

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

arguments

arguments是一个js免费赠送的关键词；

代表，传递进来的所有的参数，是一个数组！

var abs=function(x){console.log('x=>'+x);for(var i=0;i<arguments.length;i++){console.log(arguments[i])}//遍历参数if(x>0){return x;}else{return -x;}
}

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

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

rest

Es6引入的新特性，获取除了已经定义的参数之外的所有参数。。。

function ab(a,b，...rest){console.log('a=>'+a);console.log('b=>'+b);console.log(rest);
}

rest参数只能写再函数的最后面，必须用…标识

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

4.2、变量的作用域

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

假设在函数体中声明，则在函数外不能使用~(闭包)

function f(x) {var x=1;x=x+1;}x=x+1;//Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在内部就互不影响。

function f1() {var x=1;x=x+1;
}
function f2() {var x=1;x=x+1;
}

嵌套，外部内能给内部内用，内部内不能给外部内用

function f1() {var x=1console.log('外部'+x)function f2() {var y=x+1console.log('内部：'+y)}f2()var z=x+y;console.log('底部'+z);
}

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

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

function f1() {var x=1console.log('外部'+x)function f2() {var x=2console.log('内部：'+x)}f2()}

内部变量和外部变量重名，会由内到外查找（就近原则）,会自动屏蔽外部变量

提升变量的作用域

<script>'use strict';function f1(){var x='x'+y;console.log('x');var y='y';}

结果：Xundefined

当未定义y调用的时候，JS引擎会自动默认提升y的申明，但是不会提升赋值。

这个在JavaScript建立之初就存在的特性。

养成规范：所有的变量的定义都写函数头部，不要乱放，方便代码的维护。

function f1(){var x=1;var y=x+1;
//  z,v..//以后随便用
}

全局函数

var x=1;
function f1(){console.log(x);
}
f1();
console.log(x);

全局对象window

var x=1;alert(x);window.alert(x);var old_alert =window.alert(123);//alert失效了var  old_alert= function (){}//恢复window.alert= old_alert;window.alert=old_alert(456);

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

规范

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

结果:ReferenceError: x is not defined

<script>//报错内外都没定义直接使用，找不到xwindow.alert(x);
</script>

结果：x is not defined

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

jQuery=$()

//定义全局变量var chenmingwei={};//添加属性chenmingwei.name='chengmingwei';chenmingwei.age=20;chenmingwei.add=function (a,b) {return(a,b);}

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

Es6 let关键字，解决局部作用域的冲突问题。

function aa() {//建议使用let解决局部变量冲突的问题for (let i = 0; i <100 ; i++) {console.log(i)}//var全局作用冲突的作用console.log(i+1);}

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

常用const

在Es6，怎么定义常量：只有用全部大写字母重命名的就是常量；建议不要修改它的值。

 var PI='3.1415';console.log(PI);PI=123;console.log(PI);

在Es6引入了常量关键字const

 const PI='3.1415';console.log(PI);PI=123;console.log(PI);

结果：Assignment to constant variable.

4.3、方法

var chenmingwei={name:'chenmingwei',birth:2000,age:function(){now=new Date().getFullYear();//this 指向它return  now-this.birth;}//属性chenmingwei.name//方法chengmingwei.age()

拆开写

function getAge() {now=new Date().getFullYear();return  now-this.birth;}//拆开var chenmingwei={name:'chenmingwei',birth:2000,age:getAge}//调用的方法写方法名不用写括号

直接调用getAge不会返回数据，结果NaN。因为这个方法this指向了对象chenmingwei

Apply定向指向对象

在js中可以用apply控制this的指向

getAge().apply(chenmingwei,[])

 function getAge() {now = new Date().getFullYear();return now - this.birth;}//拆开var chenmingwei={name:'chenmingwei',birth:2000,age:getAge}getAge().apply(chenmingwei,[]);//指向对象chenmingwei，参数空参

5、内部对象

标准对象

typeof '123'
'string'//字符
typeof 123
'number'//数字
typeof  []
'object'//数组
typeof  {}
'object'
typeof true
'boolean'//布尔
typeof  undefined
'undefined'//未定义
typeof  Math.abs
'function'//函数

5.1、DATE日期

基本使用

var now=new Date();now.getFullYear();//年now.getMonth();//月now.getDate();//日now.getHours();//时now.getSeconds();//秒now.getMinutes()//分now.getDay();//星期now.getTime();//时间戳//转换成本地时间

转换

now.toDateString
now.toLocaleString();
结果：'2021/10/25 上午10:38:09'

5.2、JSON

json是什么

早期，所有数据传输习惯使用XML文件！

JSON(JavaScript Object Notion,JS对象简朴)是一种轻量级级的数据交换格式。
易于人阅读和编写，同时也易于机器解析和生成，并有效提升网络传输效率

在JavaScript一切皆是对象、任何js支持的类型都可以用JSON来表示，

对象用{}
数组用[]
所有的键值对都是用key.value

JSON字符串和JS对象的转化

JSON.stringify—转字符串

JSON.parse_解析

var user={name:'chenmingwei',age:20,sex:'男'}//对象转JSON字符串var jsonUser=JSON.stringify(user);//JSON字符串转对象   Parse解析var   obj=JSON.parse('{"name":"chenmingwei","age":20,"sex":"男"}')
//{name: 'chenmingwei', age: 20, sex: '男'}

JSON和对象区别

var obj={name:'chenmingwei',age:20};
var json={"name":'chenmingwei',"age":20};

5.3、Ajax

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

6、面向对象编程

原型对象

javascript、java、c#。。。面向对象；javascript有什么区别！

类：模板 原型对象

对象：具体的实例

类是对象的抽象，对象是类的一个具体表现

在JavaScript这个需要换一下思维

原型：

xiaoming.proto = obj; //前后两个下划线

var obj={name:'chenmingwei',age:20,pb:function(){console.log(this.name+'+return')}};//继承obj的属性和方法var  xiaoming={name:'xiaoming'};var   Bird={fly:function{console.log(this.name+"fly")}};//可以继承父类全部数据，有的就替换//继承方法1  原型对象xiaoming.__proto__ = obj;
//小明的原型是objxiaoming.__proto__ = Bird;  //继承方法2Object.setPrototypeOf(xiaoming,obj);

function  student(name) {this.name=name;}//增加一个方法，原型继承student.prototype.hello=function () {alert('JAVA')}

class继承

class关键字，在ES6引入的

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

class student{constructor(name) {this.name=name;}hello(){alert('狂神')}
}
var xiaoming=new student('xiaoming')
//调用——xiaoming.hello()

2、继承

class  xiaostudent{constructor(name,age) {this.name=(name);this.age=function () {alert('今年3岁了')}}}var xiaoming=new student('xiaoming')var xiaohong=new xiaostudent('xiaohong')//xiaohong.age()

本质：查看原型

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

原型链

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

7、操作BOM对象(重要)

浏览器介绍

JavaScript和浏览器有什么关系？

JavaScript诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

IE6~11
Chrome
Safari
FireFox

三方：

QQ浏览器
360浏览器

Window(重要)

window代表浏览器窗口

window.innerHeight
406
window.innerWidth
923
window.outerHeight
419
window.outerWidth
222

Navigator

Navigator封装了浏览器的信息

Navigator.arguments

大多数时候，我们不会使用Navigator对象，因为会被人修改！

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width
1536px
screen.height
864px

location(重要)

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()//刷新网页
//设置新地址
location.assign('https://www.baidu.com')

document(内容)

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

document.title
'百度一下，你就知道'
document.title='你是个大傻逼'
'你是个大傻逼'

获取具体的文档树节点

<dl  id="app"><dd>java</dd><dd>C++</dd><dd>C语言</dd>
</dl>
<script>var dl=document.getElementById(app);
</script>

获取cookie

document.cookie

劫持原理

www.taobao.com

<script src="aa.js"> </script>
//恶意人员：获取你的cookie

history

history代表浏览器的历史纪录

history.back()//后退
history.forward(//

8、操作DOM对象(重要)

核心

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

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新节点

要操作一个Dom节点，就必须要获得这个Dom节点

8.1、获得dom节点

<div  id="father"><h1>标题一</h1><p  id="p1">段落1</p><p  class="p2">段落2</p>
</div>
<script>'use strict';var h1=document.getElementsByTagName('h1');var p1=document.getElementById('p1');var p2=document.getElementsByClassName('p2');//获取父节点下的全部子节点var children=father.children;var firstchidren=father.firstChild;//第一个孩子var lastchildren=father.lastChild;//最后一个孩子var p1text=p1.textContent;//下一个孩子
</script>

这是原生代码，之后我们尽量使用JQuery

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

8.2、更新节点

id1.innerText='abc';修改文本的值
id1.innerHTML='<a href="">超链接修改文本的超文本标记语言
id1.style.color='red'; id1.style.fontFamily='楷体'修改文本的样式

<div id="id1"></div>
<script>var id1=document.getElementById('id1');id1.innerText='abc';id1.innerHTML='<a href="">超链接</a>';id1.style.color='red';id1.style.fontFamily='楷体'
</script>

8.3、删除节点

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

<div  id="father">
<h1>标题一</h1>
<p  id="p1">段落1</p>
<p  class="p2">段落2</p>
</div>
<script>//通过父类删除子节点var self=document.getElementById('father');self.removeChild(p1);//获取子节点的父亲然后删除var father=p1.parentElement;father.removeChild(p1)
</script>

//删除一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])

注意：删除多个节点的时候，children是时刻变化的，删除节点的时候一定要注意！

8.4、插入节点

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

‘追加’

<p id="js">javaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javaee</p><p id="me">javame</p>
</div><script>var js=document.getElementById('js');var list=document.getElementById('list');//追加list.appendChild(js);</script>

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

创建一个新节点(实现插入)

<p id="js">javaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javaee</p><p id="me">javame</p>
</div><script>var js=document.getElementById('js');var list=document.getElementById('list');//追加list.appendChild(js);//创建一个节点newPvar newP=document.createElement('p');//新节点赋id选择器newP.id='id1';//修改文本newP.innerText='Hello,Word!';//追加list.appendChild(newP);
//创建一个标签
var  mystyle=document.createElement('style');//创建一个空style
mystyle.setAttribute('type','text/css');
mystyle.innerHTML='body{background-color: red;}'//设置标签内容
document.getElementsByTagName('head')[0].appendChild(mystyle);</script>

insertbefore

<p id="js">javaScript</p>
<div id="list"><p id="se">javase</p><p id="ee">javaee</p><p id="me">javame</p>
</div>
<script>
var js= document.getElementById('js');
var list= document.getElementById('list');
var ee=document.getElementById('ee');
list.insertBefore(js,ee);
</script>

9、操作表单

<form action="post"><span>用户名：</span><input type="text" id="usename"><br><p><span>性别：</span><input type="radio" name="sex" value="man" id="man">男<input type="radio" name="sex" value="girl" id="girl">女</p></form>
<script>'use stricr'var usename     = document.getElementById('usename');var man_radio   = document.getElementById('man');var girl_radio  = document.getElementById('girl');//获取usename的值usename.value;//修改usename的值usename.value='hello  word!'
//对于单选框，多选框等等固定的值，man_radio,value只能取到当前的值//判断是否会选中、查看返回的结果，是否为ture，如果为ture，则选中man_radio.checked=ture//赋值girl_radio.checked
</script>

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

MD5算法加密

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

按钮-绑定事件onclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单的验证</title><!--MD5算法共工具类--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post" onsubmit="aa()">
<p><span>UserName:</span><input type="text" name="username" id="username">
</p><p><span>PassWord:</span><input type="password" name="psd" id="input_password"></p><input type="hidden" id="password"><!--绑定事件onlink被点击-->
<button type="submit" onclick="aa()">提交</button>
</form>
<script>function aa() {var uname = document.getElementById('username');var pwd = document.getElementById('input_password');var MD5d = document.getElementById('password');MD5d.value=md5(pwd.value);/*console.log(uname.value);console.log(pwd.value);uname.value=md5(uname.value)pwd.value=md5(pwd.value)*/}
</script>
</body>
</html>

表单提交-绑定事件- return ‘onsubmit‘

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单的验证</title><!--MD5算法共工具类--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aa()">
<p><span>UserName:</span><input type="text" name="username" id="username">
</p>
<p><span>PassWord:</span><input type="password"  id="input_password">
</p><input type="hidden" id="md5_pwd" name="password"><button type="submit">提交</button></form>
<script>function aa() {var uname = document.getElementById('username');var pwd = document.getElementById('input_password');var md5_pwd = document.getElementById('md5_pwd');//pwd.value=md5(pwd.value);md5_pwd.value=md5(pwd.value);return  true;}
</script>
</body>
</html>

注意：使用隐藏的标签hidden，password的name标识取消，写道的hildden里才能成功加密！

10、jQuery

javascript

jQuery库，里面存在大量的javascript

获取jQuery

URL:https://jquery.com/

CDN外部引入和本地引入

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
<!--cdn 外部在线引入--><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!--    本地jQuery--><script src="lib/jquery-3.6.0.js"></script>
</head>
<body></body>
</html>

公式：$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
<!--    本地jQuery--><script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<a href="" id="id1">点击我跳转</a>
<script>//var id=document.getElementById(id)$('#id1').click(function () {alert('123')})
</script>
</body>
</html>

选择器

<script>//标签document.getElementsByTagName()//iddocument.getElementById()//classdocument.getElementsByClassName()//jQuery   css中的选择器全部能进$(selector).action()$('#id1').click()$('.class1').click()
</script>

工具网站：https://jquery.cuishifeng.cn/

事件

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

通过jQuery控制鼠标的移动mousemove，获取鼠标当前的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件</title><style>#div{width: 500px;height: 500px;border: 2px solid red;}</style><script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
mouse：<span id="mouse"></span>
<div id="div"></div>
<script>//获取到整个文档的节点  ready载入/*$('document').ready(function () {$('#div').mousemove(function (e) {$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);})})*///等价上面$(function () {$('#div').mousemove(function (e) {$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);})})</script>
</body>
</html>

自我小练习，点击出弹窗

<a href="#" id="my_a">点击我出弹窗！</a><script>$(function () {$('#my_a').mousedown(function () {alert('123')})})
</script>

jQuery操作Dom

<ul id="list"><li id="id1">javacript</li><li id="id2">Phtyon</li>
</ul>
<script>$(function () {$('#list li[id=id1]').text()//获取当前值  $('#list li[id=id1]').text('12')//重新赋值$('#id2').html('<em>哈哈哈</em>')//g$('#id2').css("color","red");//修改样式})
</script>

})

```

选择器

<script>//标签document.getElementsByTagName()//iddocument.getElementById()//classdocument.getElementsByClassName()//jQuery   css中的选择器全部能进$(selector).action()$('#id1').click()$('.class1').click()
</script>

工具网站：https://jquery.cuishifeng.cn/

事件

[外链图片转存中…(img-UdGXPJby-1636732352393)]

通过jQuery控制鼠标的移动mousemove，获取鼠标当前的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件</title><style>#div{width: 500px;height: 500px;border: 2px solid red;}</style><script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
mouse：<span id="mouse"></span>
<div id="div"></div>
<script>//获取到整个文档的节点  ready载入/*$('document').ready(function () {$('#div').mousemove(function (e) {$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);})})*///等价上面$(function () {$('#div').mousemove(function (e) {$('#mouse').text('x:'+e.pageX+'y:'+e.pageY);})})</script>
</body>
</html>

自我小练习，点击出弹窗

<a href="#" id="my_a">点击我出弹窗！</a><script>$(function () {$('#my_a').mousedown(function () {alert('123')})})
</script>

jQuery操作Dom

<ul id="list"><li id="id1">javacript</li><li id="id2">Phtyon</li>
</ul>
<script>$(function () {$('#list li[id=id1]').text()//获取当前值  $('#list li[id=id1]').text('12')//重新赋值$('#id2').html('<em>哈哈哈</em>')//g$('#id2').css("color","red");//修改样式})
</script>