JavaScript学习笔记-优快云博客

JavaScript

1、什么是JavaScript

javascript是一门世界上流行的脚本语言，

1.2、历史

它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。

2、快速入门

2.1、引入js

1、内部定义

<!--    js是用script标签写的
可以在html标签内定义  一般在head标签中  或者body标签的最后面定义
-->
    <script>
        alert("你好，啦啦啦");
    </script>

2、外部引入

<!--    外部引入-->
<!--    注意：script标签必须成对出现-->
    <script src="Js/a1.js"></script>
<!--    不用显示化定义  默认类型就是javascript  -->
    <script type="text/javascript"></script>

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    js是用script标签写的
可以在html标签内定义  一般在head标签中  或者body标签的最后面定义
-->
    <script>
        alert("你好，啦啦啦");
    </script>

<!--    外部引入-->
<!--    注意：script标签必须成对出现-->
    <script src="Js/a1.js"></script>
<!--    不用显示化定义  默认类型就是javascript  -->
    <script type="text/javascript"></script>


</head>
<body>

</body>
</html>

2.2、基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //基本变量
        const num = 89;
        const name = "昭昭";

        if (num>=60 && num<70){
            alert("60~70")
        }else if (num>=70 && num<80){
            alert("70~80")
        }else {
            alert("other")
        }

        /*
        控制台输出    console.log()   
         */
    </script>
</head>
<body>

</body>
</html>

2.3、基本数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //基本变量
        var num = 89;
        var name = "昭昭";

        if (num>=60 && num<70){
            alert("60~70")
        }else if (num>=70 && num<80){
            alert("70~80")
        }else {
            alert("other")
        }
        var aaa = ["aaaaaaa",1,2,3,4,null,false]

        /*
        控制台输出    console.log()
         */
    </script>
</head>
<body>

</body>
</html>

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

变量

变量的定义都是用 var

var a = 1;

number

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

123//整数123
123.1//浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大

字符串

‘abc’ “abc”

布尔值

true false

比较运算符

    =
    ==  等于（类型不一样，值一样，也会判断为true）
    ===  绝对等于（类型一样，值一样，结果为true）

js缺陷不要使用 == 比较一般用===

须知：

NaN===NaN 这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3))

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

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

null和undefined

null 空
undefined 未定义的

数组

java的数值必须是相同类型的对象，js中不需要这样

//保证代码的可读性  ，尽量舒勇怕[]
var aaa = ["aaaaaaa",1,2,3,4,null,false];

new Array(1,2,3,445,545,6456,'hello')

去数组下标，如果越界会输出 undefined

对象、

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

每个属性之间用逗号隔开，最后一个不用

//java定义：Person person = new Person();
var person = {
    name:"zhaozhao";
    age:3;
    tags:['js','java','web'];
}

取对象的值

person.name
>zhaozho
person.age
>3

2.4、严格检查格式

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script>
       //使用 'use strict'; 时 会进入严格管理模式，
       // 会对出错的进行标红 预防JS的随意性导致的一些问题
       //局部变量使用let定义
       //必须写在JavaScript的第一行
       'use strict';
       //全局变量
       let i = 1;

   </script>
</head>
<body>

</body>
</html>

设置严格检查格式的前提时js要在6版本可以通过设置进行调试

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

3、数据类型

3.1、字符串

1、正常字符串我么能使用单引号（’ ‘）或者双引号（“ ”）包裹

2、之一转义字符 \

\`
\n
\t
\u4e2d   unicode字符
\
\x41     ascll字符

3、多行字符串编写

'use strict';
        //可以包裹多行数据  在TAB键上面的~键
        let a = `
                    你好啊
                    昭昭
                    学习
                    嘻嘻嘻
        `

4、模板字符串

//可以不用加号拼接字符串（也可以使用） 可以使用${}的格式添加
        let name = '昭昭';
        let age = 3;
        let msg = `你好啊 ${name}`

5、字符串长度

str.length

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

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

7、大小写转换

注意：是方法，不是属性

student.toUpperCase();
student.toLowerCase();

8、str.indexOf(‘s’); 找出下标

9、substring（）

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

3.2、数组

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

var arr = [1,2,3,4,'zzz']
arr[0]
arr[0] = 1;

1、长度

arr.length

注意：加入给arr.length赋值，数组大小会改变，如果赋值过小，则会导致元素丢失

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

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

arr.indexOf(2)
>1

字符串

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

4、push() pop() 尾部

push:压入到尾部   在尾部添加元素
pop：弹出尾部的一个元素   删除尾部的一个元素

5、unshift() shift() 头部

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

6、排序 sort()

(3) ['B', 'A', 'C']0: "A"1: "B"2: "C"length: 3[[Prototype]]: Array(0)
arr.sort()
(3) ['A', 'B', 'C']

7、concat() 拼接字符串

3.3、对象

定义对象：

如干戈键值对

var person = {
            name: "zz",
            age: 18,
            email: "332147@qq.com",
            score: 28

        }

js中第项，{…}表示一个对象，键值描述对象属性，用逗号隔开，最后一个不用加逗号

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

1、对象赋值

person.name = "zz1"
'zz1'
person.name
'zz1'

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

3、动态的删减属性

delete person.name
true
person
{age: 18, email: '332147@qq.com', score: 28}

4/、添加属性直接赋值就可

person.haha = "hah"
'hah'
person
{age: 18, email: '332147@qq.com', score: 28, haha: 'hah'}

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

xxx in xxxx

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

6、判断一个属性是否是这个对象自身拥有的（继承的不算）hasOwnProperty()

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

3.4、流程控制

if else语句

var num = 3;
if (num<=100) {
    num ++;
}else
{num+=2}

while循环

while(num>100){
    num++;
}

for循环

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

forEach循环

var age = [1,23,4,52,63,36,234,2342,213]

//函数
age.forEach(function(value) {
            console.log(value)
            })

for…in

for(var num in age){
    console.log(age[num])
}

//参数：num是数组的下标  索引需要  数组[下标]  形式

3.5、Map和Set

ES6的新特性

Map：

var map = new Map([['name',"昭昭"],['age',13],['score',19]]);
var name1 = map.get('name');
console.log(name1);//通过key获得value
map.set('zz',"123")//新增或修改
map.delete('name');//删除

Set:无序不重复的集合

var set = new Set([1,2,3,4,5,1,1,1,1]);
        set.add(9);//添加
        set.delete(2);//删除
        console.log(set.has(4));//是否包含某个元素

3.6 iterator

通过for of 遍历

遍历数组

var arr = [1,2,3,4,5,1,1,1,1];
for (const auto of arr) {
            console.log(auto)
        }

遍历map

var map1 = new Map([["jack",100],["zhaozhao",90],["rose",88]]);
        for (var a of map1){
            console.log(a);
        }

遍历set

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

4、函数

4.1、定义函数

定义方式一

绝对值函数

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

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

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

定义方式二

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

function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs也可以调用函数。

两种方式等价

调用函数

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

参数问题：javaScript可以传任意个参数，也可以不传参数，这样容易发生各种歧义，导致代码有问题，所以我们可以自己定义异常

function abs(x){
            if (typeof x != "number"){
                throw 'Not A Number';
            }
            if(x>=0){
                return x;
            }else{
                return -x;
            }

        }

如果参数不是一个数字的话，就会报’Not A Number’错误

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

arguments

arguments是JS免费送的一个关键字（关于函数参数的数组）

代表，传递进来的所有的参数所组成的一个数组，我们可以通过遍历这个数组，来发现这些参数，因为JS的不严谨性，我们虽然定义上只有一个参数，但是调用函数的时候可以传多个参数，这就导致有时候会出现问题，所以我们需要arguments 我们可以通过arguments 来判断那些隐藏的参数。

function abs(x){
            console.log("x-->"+x);
            for (let i = 0;i<arguments.length;i++){
                console.log(arguments[i]);
            }

            // if (typeof x != "number"){
            //     throw 'Not A Number';
            // }
            if(x>=0){
                return x;
            }else{
                return -x;
            }

        }

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

问题：arguments 包括所有的参数，我们有时候只需要一些特定的参数，排除那些我们不需要的参数。

rest

ES6引入的新特性，在获取除了一经定义的参数外的所有参数。

function f(a,b,...rest) {
            console.log("a-->"+a);
            console.log("b-->"+b);
            console.log(rest);


        }

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

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

4.2、变量的作用域

在JS张，var定义变量实际是有作用域的，假设在函数体中有声明，则在函数体外不可使用（闭包）

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

如果两个函数内部都使用了相同的变量名，不会相互冲突，只要这个变量在函数的函数体中，都是局部变量，只在函数体内生效,所以不会冲突。

function zz() {
            var x = 1;
            x = x + 1;
        }

function zz2() {
            var x = 'A';
            x = x + 1;
        }

函数的嵌套：

function zz() {
            var x = 1;
            x = x + 1;
            function zz3() {
                var y = x + 1;
            }
            //会报错，因为内部函数可以访问外部函数的变量，但是外部函数不能访问内部函数的变量
            var z = x + y;

        }

如果内部函数和外部函数的变量相同，则互不影响

function f() {
            var x =1;

            function f1() {
                var x = 'A';
                console.log("内部-->"+x);

            }
            console.log("外部-->"+x);
            f1();
        }
        f();

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

内部原理：在JS中，函数查找变量是从自身开始的，会由内到外查找，如果是内部函数，会先查找自身的变量，如果外部函数的变量与其内部的变量有重名的情况，则内部函数会自动屏蔽外部函数的变量。

function f2() {
            var x = 'x' + y;
            console.log(x);//x  undefined
            var y = 'y';
        }

如果函数的变量没有定义，但在后面定义了，JS的引擎会自动将函数的定义提前。

function f3() {
            var x = 1,
                y = 'a'
            y=x+y;
            //在前面先定义所有的变量，之后就可以随便使用
        }

全局变量

var s = 1;
        function f4() {
            console.log(s);
        }
        f4();
        console.log(s);

全局对象 window

var h = 'xxx';
        alert(h);
        alert(window.h);

alert

 var z = 'xxx';
        window.alert(z);

        var Old_alert = window.alert;

        window.alert = function () {

        };
        //发现alert失效了
        window.alert(123);

        //恢复
        window.alert = Old_alert;
        window.alert(456);

JavaScript时加上只有一个全局作用域，任何变量（函数也可以是变量），假设没有在函数作用范围内找到，就会向外查找，如果还没有找到，那就会报错 （RefrenceError）

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的JS文件，使用了相同的全局变量会发生冲突，如何减少这些冲突？、

//定义一个唯一全局变量
        var ZhaozhaoApp = {};
        
        //定义全局变量
        ZhaozhaoApp.name = 'zz';
        ZhaozhaoApp.add = function (a,b) {
            return a+b;
        }

我们可以把自己的全局变量都放在自己创建的一个唯一空间名字中，减少全局命名冲突的问题。

jQuery就是这样做的

局部作用域 let

function aaa() {
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+1);
        }

发现问题：按照局部作用域 i在跳出循环之后就不会再生效了，但是此代码执行后依然能输出i+1的值（我们希望的是从1到99，后面的101并不会输出）

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

解决：

ES6新特性：加入了let关键字定义局部变量，将var换成let就不会出现这样的问题了

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

常量

在ES6之前：常量的定义使用大写字母，是一种约定，并没有强制性。

var PI = '3.14';
        console.log(PI);
        PI = '666';
        console.log(PI);

ES6引入关键在 const 这次常量就不可以重新赋值了具有强制性

const PI = '3.14';
        console.log(PI);
        PI = '666';//会报错：Uncaught TypeError: Assignment to constant variable.
        console.log(PI);

4.3、方法

定义方法

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

var zz = {
            birth:2000,
            name:'昭昭',
            //方法
            age:function () {
                //年龄 = 今年 - 出生的年
                var now = new Date().getFullYear();
                return now - this.birth;
            }
        }

//属性
zz.name
//方法
zz.age()

this.代表将上方代码拆开看看

function getAge() {
	//年龄 = 今年 - 出生的年
	var now = new Date().getFullYear();
	return now - this.birth;
}
var zz = {
     birth:2000,
     name:'昭昭',
     //方法
     age:getAge
}

//zz.age()   ok
//getAge NaA   调用的是this是window 但window没有birth属性

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

apply

在JS中可以控制this的指向

function getAge() {
            //年龄 = 今年 - 出生的年
            var now = new Date().getFullYear();
            return now - this.birth;
        }
        var zz = {
            birth:2000,
            name:'昭昭',
            //方法
            age:getAge
        };
        var bb = {
            birth:2000,
            name:'宝宝',
            //方法
            age:getAge
        };

        //this指向了 bb 参数为空
        getAge.apply(bb,[])

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

5、内部对象

标准对象

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []  //数组
'object'
typeof {}  //对象
'object'
typeof Math.abs  //函数
'function'
typeof undefined   //未定义的
'undefined'

5.1、Data

基本使用

var now = new Date();
        now.getFullYear(); //年
        now.getMonth();  //月
        now.getDay(); //获取星期几
        now.getDate(); //日
        now.getHours();//时
        now.getMinutes(); //分
        now.getSeconds();//秒

        now.getTime();//时间戳  以1970年1月1日0点00分到现在的毫秒数  全球统一

转换

now = new Date(1666077712229)
Tue Oct 18 2022 15:21:52 GMT+0800 (GMT+08:00)
now.toLocaleDateString()
'2022/10/18'
now.toGMTString()
'Tue, 18 Oct 2022 07:21:52 GMT'

5.2、JSON

json是什么

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

对象：对象在 JS 中是使用花括号包裹 {} 起来的内容，数据结构为 {key1：value1, key2：value2, …} 的键值对结构。在面向对象的语言中，key 为对象的属性，value 为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。

数组：数组在 JS 中是方括号 [] 包裹起来的内容，数据结构为 [“java”, “javascript”, “vb”, …] 的索引结构。在 JS 中，数组是一种比较特殊的数据类型，它也可以像对象那样使用键值对，但还是索引使用得多。同样，值的类型可以是任意类型。

在JavaScript一切皆为对下颌骨，任何支持JS的类型都可以用JSON来表示：string，number…

格式：

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

json和js对象的转换

 var user = {
            name:"zz",
            age:18,
            sex:'男'
        };
        //将js对象转换成json字符串    '{"name":"zz","age":18,"sex":"男"}'
        var jsonUSer = JSON.stringify(user);

        //json 字符串转换成对象，参数为json字符串
        var u1 = JSON.parse('{"name":"zz","age":18,"sex":"男"}');

JSON和js对象的区别：

var obj = {a:'hello',b:'hellob'}
var json = '{"a":"hello","b":"hellob"}'

5.3、Ajax

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

6、面向对象编程

6.1、神么是面向对象

JS 。java，c#…面向对象，JS有些区别

类：模板
对象：具体的实例

原型：

var student = {
            name: 'zz',
            age:20,
            run:function () {
                console.log(this.name+"run...");
            }
        };

        var xiaoming = {
            name: 'xiaominhg'
        };
        //小明的原型是student
        xiaoming.__proto__ = student;

var student ={
            name:this.name
        };
        //给student新增一个方法
        student.prototype.hello = function () {
            alert('hello');
        }

class 继承

class关键字是在ES6引入的

//定义一个学生类
        class student{
            //构造器
            constructor(name) {
                this.name = name;
            }
            //新增方法   直接在下面写就好
            hello(){
                alert('hello');
            }
        }

继承

//定义一个学生类
        class student{
            //构造器
            constructor(name) {
                this.name = name;
            }
            //新增方法   直接在下面写就好
            hello(){
                alert('hello');
            }
        }
        //继承
        class xiaoStudent extends student{
            constructor(name,grade) {
                super(name);
                this.grade = grade;

            }
            myGrade(){
                alert('我是一名小学生')
            }
        };
        var xiaoming = new student('xiaoming');
        var xiaohong = new student('xiaohong');
        var xiaohua = new xiaoStudent('xiaohua',2);

继承本质上还是将student作为xiaoStudent的原型

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

原型链

每一个对象最终的原型都会指向object object 是老祖宗总之是一个环形；

__ proto __ (原型)

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系？

JavaScript的诞生就是为了能在浏览器上运行！

BOM：浏览器对象模型

浏览器分类：（内核）

IE 6~11
Chrome
Safari
FileFox
Opera

三方浏览器

QQ浏览器
360浏览器

window

window.alert(111)
undefined
window.innerHeight
2022
window.innerWidth
458
window.outerHeight
505
window.outerWidth
114

Navigator

Navigator封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Mobile Safari/537.36'
navigator.platform
'Win32'

大多是时候，我们不会使用navigator对象，欣慰会被人为修改

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

screen

screen.width
1245  px
screen.height
635   px

代表屏幕尺寸

location（重要）

location代表挡墙页面的URL信息

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

document

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

document.title
'百度一下，你就知道'
document.title='昭昭'
'昭昭'

获取具体的文档树结点

<dl id="app">
        <dt>java</dt>
        <dt>javaSE</dt>
        <dd>javaEE</dd>

    </dl>
    <script>
        var dl = document.getElementById('app');
    </script>

获取cookie值

document.cookie
'BIDUPSID=98C7D91FC38427B9FAE78C8C872EA876; PSTM=1651710111; BAIDUID=98C7D91FC38427B95A966D75C60B30F9:FG=1; BD_UPN=12314753; BAIDUID_BFESS=98C7D91FC38427B95A966D75C60B30F9:FG=1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; MSA_WH=855_634; COOKIE_SESSION=61888_4_9_8_9_49_1_3_8_9_10_13_364728_320_0_0_1666016736_1665561625_1666078621%7C9%23422_19_1665561599%7C7; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1665386777,1665561180,1666078636; Hm_lpvt_aec699bb6442ba076c8981c6dc490771=1666078636; RT="z=1&dm=baidu.com&si=5y5bu2q2qxm&ss=l9dw77tf&sl=4&tt=4zg&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=2jag&ul=3kni&hd=3koi"; BD_HOME=1; H_PS_PSSID=37542_36548_37353_37584_37300_36885_36789_37532_37500_26350_37370; delPer=0; BD_CK_SAM=1; PSINO=6; BA_HECTOR=0ka4052g040g8g8080204hhi1hkt8hb1b; channel=baidusearch; baikeVisitId=c119f055-49a0-4ee7-848e-1f3c58fd0a3a; ZFY=HZmwY58wyxXM1UeLUEhYnnIeSMq8glRQeXKLtmebq08:C; B64_BOT=1; H_WISE_SIDS=110085_180636_188746_194530_204906_205168_209568_210321_211986_212295_212868_213031_213352_214793_215730_216850_216941_219412_219943_219946_220017_220663_221873_221967_222299_222397_222522_222605_222625_223063_223209_224080_224086_224268_224457_224572_225639_225846_225860_226547_226627_226815_226956_226964_227147_227152_227515_227528_227577_227743_227864_227934_227963_227969_228535_228604_228617_228872_229028_229061_229154_229166_229365_229526_229685_229913_229938_229968_229975_230084_230184_230232_230241_230248_230267_230543_230622_230625_230664_230686_230862_230923_230930_230969_231091_231117_231175_231208_231463_231919_232242_232246_232255_232357; H_WISE_SIDS_BFESS=110085_180636_188746_194530_204906_205168_209568_210321_211986_212295_212868_213031_213352_214793_215730_216850_216941_219412_219943_219946_220017_220663_221873_221967_222299_222397_222522_222605_222625_223063_223209_224080_224086_224268_224457_224572_225639_225846_225860_226547_226627_226815_226956_226964_227147_227152_227515_227528_227577_227743_227864_227934_227963_227969_228535_228604_228617_228872_229028_229061_229154_229166_229365_229526_229685_229913_229938_229968_229975_230084_230184_230232_230241_230248_230267_230543_230622_230625_230664_230686_230862_230923_230930_230969_231091_231117_231175_231208_231463_231919_232242_232246_232255_232357; plus_lsv=e9e1d7eaf5c62da9; plus_cv=1::m:f3ed604d; Hm_lvt_12423ecbc0e2ca965d84259063d35238=1666097813; SE_LAUNCH=5%3A27768296_0%3A27768296; rsv_i=f4f1urzIkV0cmI%2FNBQ7eFUlRZXQ254lps7dMDTY6kBiVmxXlRIuWlKHzKjOGCi2bO72hsWa9ZhDVH80BQ3CunE97SqmTrI4; Hm_lpvt_12423ecbc0e2ca965d84259063d35238=1666097830'

8、操作DOM对象（重点）

核心

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //对应css的选择器
    var h1 = document.getElementsByTagName('h1');  //通过标签名获取结点
    var p1 = document.getElementById('p1');  //通过id获得结点
    var p2 = document.getElementsByClassName('p2');  //通过class获得结点
    var father = document.getElementById('father');

    var childrens = father.children;  //获取父节点下的所有子节点
    // father.firstChild;
    // father.lastChild;
    
</script>

</body>
</html>

更新节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="zz">

</div>
<script>
    var zz = document.getElementById('zz');
    zz.innerText = 'zz';
</script>

</body>
</html>

操纵文本

zz.innerText = 'zz';
zz.innerHTML = '<strong>zz</strong>'  //可以解析html文本标签

操作css

//通过.style定位到css，再调用css的属性  后面的属性需要用字符串包裹
    zz.style.color = 'red';   
    zz.style.padding = '20px';
    zz.style.fontSize = '100px';  //需要注意的是 原来css的font-size 改为驼峰命名法

效果：

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

删除结点

删除结点的步骤：

先获取父节点，再通过父结点删除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    //先获得自己的结点
    var self = document.getElementById('p1');
    //在获得此节点的父节点  使用.parentElement
    var father = self.parentElement;
    //在调用父结点的删除方法
    father.removeChild(p1);
    
    
    //注意：删除是一个动态的过程
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
    

</script>

</body>
</html>

注意：删除的时候是一个动态的的过程，所以删除的时候子节点是在不断变化的，如果找不到结点该节点就会报错。

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过使用innerHTML就可以增加一个元素，但是如果这个Dom节点如果存在元素了，使用上述方法的话就会覆盖原来的Dmo节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>

</body>
</html>

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

通过新建一个标签，实现插入

//已经存在的节点
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    //插入节点：   list.appendChild(js);

    //通过JS 创建一个新节点
    var NewP = document.createElement('p');//创建一个p标签
    NewP.id = 'zz';//给新创建的p标签赋id值
    NewP.innerText = '你好啊，';//设置文本
    //插入list
    list.appendChild(NewP);

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

插入方法二：

//创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');//设置属性  



    //设置css
    //首先创建一个style标签
    var myStyle = document.createElement('style');
    //在给style标签写上默认值
    myStyle.setAttribute('type','text/css');
    //在写入css代码
    myStyle.innerText = 'body{background-color: blue;}';
    //再将写好的style标签放在head里面   很重要！！如果少这一步  不会显示
    document.getElementsByTagName('head')[0].appendChild(myStyle);

9、操作表单（验证）

9.1、表单是什么

form DOM树

文本框 text
下拉框 < select >
单选框 radio
多选框 chekbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

9.2、获得提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form action="post">
        <p>
            <span>账号：</span>
            <input type="text" id="username" >
        </p>
        <p>
            <span>性别：</span>
            <input type="radio"value="man" name="sex" id="nan">男
            <input type="radio"value="women" name="sex" id="nv">女


        </p>

    </form>
</div>
<script>
    var userName = document.getElementById('username');
    // 获取输入的值   还可以赋值修改      userName.value
    var nan = document.getElementById('nan');
    var nv = document.getElementById('nv');

    //对于单选框、多选框 使用.value只能取到当前的值 并不能动态的获取在浏览器上到底选择了哪个
    //使用.checked赋值  如果被选中的话 checked的值为true  反之为false
    //查看返回结果      nan.checked    nv.checked   可以通过给此属性赋值来改变选项



</script>

</body>
</html>

9.3、提交表单

按钮提交事件

<!DOCTYPE html>
<html lang="en">
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <form action="#" method="post">
        <p>
            <span>账号：</span>
            <input type="text" id="username" name="username">
        </p>
        <p>
            <span>密码：</span>
            <input type="text" id="pwd" name="pwd"> <br/>
<!--            <input type="submit">-->

<!--            绑定按钮  实现提交事件     onclick被点击-->
            <button type="submit" onclick="aa()">提交</button>
        </p>
    </form>
</div>
<script>
    function aa() {
        var userName= document.getElementById('username');
        var pwd = document.getElementById('pwd');
        console.log(userName.value);
        //MD5算法加密
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
        return true;


    }
</script>


</body>
</html>

通过md5加密完成对密码的保护

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

表单提交事件

可以校验和判断表单的内容是否进行跳转原理是执行的js函数的最终返回值是什么 true则可以 false则不能将这个boolean值传给表单的一个onsubmit属性在通过return关键字来决定是否进行跳转。

涉及知识：

md5加密
隐藏表单的使用（如果不使用加密的密码将会改变场长度，容易看破）

主要是因为name属性浏览器返回的值是name属性我们可以不给我们输入的密码设置name属性给一个隐藏域设置名为pwd的name 然后将真实输入的密码传给这个隐藏域，最后将这个隐藏域加密并显示出来这样密码框的密码就并不会被操作了

<!DOCTYPE html>
<html lang="en">
<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>

<!--
表单绑定提交事件
onsubmit  绑定一个提交检测的函数  true  false
将这个结果返回给表单   使用onsubmit接收 如果返回false 不会发生跳转

-->
    <form action="https://www.baidu.com/" method="post" onsubmit="return aa()">
        <p>
            <span>账号：</span>
            <input type="text" id="username" name="username">
        </p>
        <p>
            <span>密码：</span>
            <input type="password" id ="input-pwd"> <br/>
<!--            <input type="submit">-->

<!--            绑定按钮  实现提交事件     onclick被点击-->
            <button type="submit">提交</button>
        </p>
<!--        使用一个隐藏表单-->
        <input type="hidden" id="md5_pwd" name="pwd">
    </form>
</div>
<script>
    function aa() {
        var userName= document.getElementById('username');
        var pwd = document.getElementById('input-pwd');
        console.log(userName.value);
        var md5pwd = document.getElementById('md5_pwd');

        md5pwd.value = md5(pwd.value)
        //可以校验判断表单内容，true是通过提交   false是阻止提交
        return true;
        
    }
</script>


</body>
</html>

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

10、jQuery

<!DOCTYPE html>
<html lang="en">
<!--<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.1.js"></script>
</head>
<body>
<a href="" id="test-jQuery">点我</a>


<!--
公式：$(celector).action()

-->
<script>
    // 选择器就是css选择器
    $('#test-jQuery').click(function () {
            alert('hello,jQuery!!!');
    })
</script>

</body>
</html>

事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.1.js"></script>
    <style>
        #divMove{
            width: 700px;
            height: 700px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--获得鼠标的坐标-->
mouse:<span id="mouseMove"></span>

<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完成之后，响应事件  可简写
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY);
        })
    })
</script>

</body>
</html>

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

操作Dom

节点文本操作

$('#test-ul li[name=py]').text();//获得值
$('#test-ul li[name=py]').text('');//设置值

$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.1.js"></script>
    <script>
    $('#test-ul li[name=py]').text();
    $('#test-ul').html('');

</script>

</head>
<body>
<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="py">python</li>
</ul>



</body>
</html>

css操作：

$('#test-ul li[name=py]').css("color","red");//键值对

元素的显示和隐藏：本质上还是设置了display:none;

$('#test-ul li[name=py]').show()//显示
$('#test-ul li[name=py]').hide()//隐藏

Title 点我 ```

事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.1.js"></script>
    <style>
        #divMove{
            width: 700px;
            height: 700px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--获得鼠标的坐标-->
mouse:<span id="mouseMove"></span>

<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完成之后，响应事件  可简写
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY);
        })
    })
</script>

</body>
</html>

[外链图片转存中…(img-rpomy9Fa-1675761851896)]

操作Dom

节点文本操作

$('#test-ul li[name=py]').text();//获得值
$('#test-ul li[name=py]').text('');//设置值

$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.1.js"></script>
    <script>
    $('#test-ul li[name=py]').text();
    $('#test-ul').html('');

</script>

</head>
<body>
<ul id="test-ul">
    <li class="js">javascript</li>
    <li name="py">python</li>
</ul>



</body>
</html>

css操作：

$('#test-ul li[name=py]').css("color","red");//键值对

元素的显示和隐藏：本质上还是设置了display:none;

$('#test-ul li[name=py]').show()//显示
$('#test-ul li[name=py]').hide()//隐藏