js学习笔记

最新推荐文章于 2024-05-18 21:57:13 发布

呜噜噜。。

最新推荐文章于 2024-05-18 21:57:13 发布

阅读量5.2k

点赞数 1

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/u014608643/article/details/126183702

版权

1.js语言

2.组成

2.1BOM（browser Object Model）

JS 操作浏览器发生变化的属性和方法

2.2DOM（Document Object Model）

JS 操作文档流发生变化的属性和方法

2.3ECMAScript

JS 的书写语法和书写规则

3.书写位置

3.1行内式（不建议）

3.2内嵌式

3.3外链式（推荐）

补充：当运用外链式书写时，只会运行链接所在的文件里的内容，在<script>xxx</script>标签中间添加任何js代码都不会运行

4.变量

5.数据类型

一般来说，如果我们给某一变量赋值为null,很可能将来我们要给它与一个对象类型的变量

当一个变量我们不确定它将来的数据类型，那么我们一般会把它赋值为undefined

数据类型检测

6.数制转换

6.1转数字Number / parseInt / parseFloat

6.1.1Number遇到不正常（不（全）是数字）的数据，会转为NaN（NaN也属于number型）

6.1.2parseInt解析int。可以将不全是int的数据（但是它的最前面部分是int）转为int,另外，因为是分析int，所以对于浮点型数据，只会将小数点前面的数转为int

6.1.3parseFloat解析float。

6.1.4 -0 / *1 / /1（不能是+0）（一个数型字符串，进行乘法运算会将它直接转成对应数值再进行计算）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var x1="0.01231"
        var x2=x1-0
        var x3=x1/1
        var x4=x1*1
        console.log(x2) 
        console.log(x3) 
        console.log(x4) 
        console.log(1+"2"*3+4)//输出结果为11 这里"2"*3=6
    </script>
</head>

<body>
    
</body>

</html>

6.2转字符串String() / toString() / +

6.2.1String() 任何形式的数据都可以转成字符串

6.2.2toString() 无法将null/undefined转换成字符串，会报错

不管是String(x1),还是x1.toString(),都不会对x1本身进行改变，而是返回一个x1对应的字符串

6.2.3加法运算+

a+b ，只要任意一个数据是字符串类型，那么它们最终将会返回一个字符串

将数据a转换成字符串又没进行其它改变的操作是只加上一个 ""

    <script>
        // String
        var x1=1000
        var x2=String(x1)
        console.log(x1,x2)
        // toString
        var x3=x1.toString()
        console.log(x1,x3)
        // +
        var x4=x1+""
        console.log(x4)
    </script>

6.3 转布尔 boolean()

当数据是0,"",undefined,null,NaN,的时候，返回false，其余的返回true

    <script>
        var x1 = 0
        var x2 = Boolean(x1)
        console.log(x1, x2)
    </script>

7.比较运算符

7.1"=="只比较数值，不管类型，正确返回true，错误返回false

    <script>
        var x1=12
        var x2="12"
        console.log(x1==x2)//true
    </script>

7.2"==="比较数值+类型，正确返回true，错误返回false

    <script>
        var x1=12
        var x2="12"
        console.log(x1===x2)//false
    </script>

7.3"!="只比较数值，不管类型，正确返回true，错误返回false

7.4"!=="比较数值+类型，正确返回true，错误返回false

8.函数

8.1定义函数（函数是一种复杂的数据类型）

8.1.1声明式

8.1.2赋值式

8.1.3二者的区别

声明式的可以先调用再定义，而赋值式的必须先定义再调用

    <script>
        text1()//位置正确
        text2()//位置错误

        // 1.声明式 函数text1()
        function text1(){
            console.log(1)
        }

        // 2.赋值式 函数text2()
        var text2 = function(){
            console.log(1)
        }

        text1()//位置正确
        
        text2()//位置正确
    </script>

8.2函数参数：形参与实参数量可以不同，即可多也可少，实参少的情况下，为赋值的形参等于undefined

    <script>
        function text1(a,b,c){
            console.log(a,b,c)
        }
        text1("a",2,3,4)//实参>形参
        text1("a",2,3)//实参==形参
        text1("a",2)//实参<形参
        //以上三种均可以正常运行
    </script>

9.预解析（变量，函数声明提升）（仅限于同一个script标签：对于不同标签里都有函数age()的声明时，两者不会互相影响）

在代码开始执行前，会对所有的用var声明的变量进行解析，我们会认为它们现在都是一般的变量，且未定义，即undefined（注意！这里说的是声明，如果声明与赋值同时进行，也只会对前面的声明进行解析，而具体的赋值操作，是在执行过程中，等到程序执行到本行时）

根据这个特性，我们可以解释为什么赋值型函数定义要放在使用的前面,因为若是放在后面定义的话，前面的使用我们会看作是一般的变量后面加了一个“（）”，这就与我们的原则相违背了

10.重名问题

10.1.变量重名后者覆盖前者（这里赋值型函数与变量重名同样适用）

10.2.函数重名后者覆盖前者

10.3.函数与变量名重复（这里指的是声明型函数与变量重名）

11.作用域

11.1全局作用域

    <script>
        var myname="assad"//这里的myname的作用域是全局作用域
    </script>

11.2局部作用域

    <script>
        function Myname(){//函数作用域是全局作用域
            var myname="djffd"//这里的myname的作用域是局部作用域
        }
    </script>

12.对象数据类型

12.1创建对象

12.1.1字面量的方式

    <script>
        var obj = {
            name: "kcdds",
            age: 111,
            major: "chifan",
            "a+b":111 //这种方式也可 非常规类型的名字需要用 "" 来引起来
            //一般来说我们的对象里的每一项内容用','隔开
        }
        console.log(obj)
    </script>

12.1.2内置构造函数

    <script>
        var obj = new Object()
        obj.name = "Tom"
        obj.age = 111//如果之前不存在该属性，将会创建一个该属性
        console.log(obj)
    </script>

12.2操作

12.2.1增

    <script>
        var obj = new Object()
        obj.name = "Tom"// 方法一
        obj["age"]=111  //方法二
        console.log(obj)
    </script>

12.2.2改

    <script>
        var obj = new Object()
        obj.name=111
        obj.name=120//方法一
        obj["name"]=120//方法二
    </script>

12.2.3查

    <script>
        var obj = new Object()
        obj.name=111
        console.log(obj.name)//方法一
        console.log(obj["name"])//方法二
    </script>

12.2.4删除属性

    <script>
        var obj = new Object()
        obj.name = "Tom"
        delete obj.name//方法一
        delete obj["name"]//方法二
    </script>

12.2.5区别

虽然第二种方式书写较麻烦，但是对于一些非常规的属性名称(即不符合一般命名规则)（eg:"a+b":10），只能通过第二种方法来进行操作

12.3遍历

    <script>
        var obj = {
            name:"dfws",
            age:12,
            class:4
        }
        //遍历
        for (var t in obj){
            // document.write(obj[t])
            console.log(t+":"+obj[t])
        }
    </script>

这种方式下，t作为某一属性名称，只能使用obj[t]进行访问,另一种方式无效

12.4存储

12.4.1简单数据类型

12.4.2复杂数据类型

12.4.3总结

复杂数据类型先在堆区开辟空间并存储，将它所在堆区的地址赋给栈区变量，那么在将此变量赋给新的变量的时候先变量接受的实际上是原对象的地址。因此，通过新变量更改属性会直接更改掉原对性内容

    <script>
        var obj={
            name:"34ssdf",
            age:123
        }
        var obj1=obj
        console.log(obj===obj1)//true
        obj1.name="ahbda"
        console.log(obj===obj1)//true 因为是同一地址 内容完全一样
    </script>

如何让我们在更改新变量属性的时候，旧变量不会受影响？

先创建一个空的对象（那么两者的地址不相关），将就对象的属性一对一的赋给新的对象，从而实现复制操作，再更改的时候两者就不会再有关联了

    <script>
        var obj = {
            name: "34ssdf",
            age: 123
        }
        var obj1 = {}
        for(var i in obj){
            obj1[i]=obj[i]
        }
        console.log(obj)
        console.log(obj1)
        console.log(obj===obj1)//false 内容一样但是地址不一样
        obj1["name"]="xiaoming"//更改obj1
        console.log(obj.name)//obj未被更改
    </script>

13.数组

13.1数组的创建

13.1.1字面量

    <script>
        var arr1=[11,22,3,3434,553,2]
        var arr2=["ad","dsfcds","fid"]
        var arr3=[
            {name:"sdkjs1",age:12},
            {name:"sdkjs2",age:13},
            {name:"sdkj3",age:14}
        ]
        console.log(arr1)
        console.log(arr2)
        console.log(arr3)
    </script>

13.1.2内置构造函数

    <script>
        var arr1=new Array(112,2343,453456,23,23,22)
        var arr2=new Array("shd","dsfsdf","dfsd","sdfd")
        var arr3=new Array(
            {name:"sdkj",age:11},
            {name:"sdkj",age:11},
            {name:"sdkj",age:11},
            {name:"sdkj",age:11},
        )
        var arr4=new Array(20)//这种方式如果只有一个参数，代表的是数组的元素数量
        console.log(arr1)
        console.log(arr2)
        console.log(arr3)
        console.log(arr4)
    </script>

13.2数组的基本操作

13.2.1 arr.length数组长度可读可写（arr.length=0,可以清空数组）

    <script>
        var arr1=new Array(112,2343,453456,23,23,22)
        console.log(arr1.length) //6
        arr1.length=4      // 4 > 6 将后面超出的部分剪断
        console.log(arr1)  // 112 2343 453456 23
    </script>

13.2.2索引（从0开始）

    <script>
        var arr1=new Array(112,2343,453456,23,23,22)//0...5
        //访问
        console.log(arr1[0])
        console.log(arr1[1])
        //访问如果超出了数组的范围 打印一个undefined 且数组大小不变
        console.log(arr1[10])
        //修改 如果超出了范围 就会将范围扩充到要修改的位置 中间空余的位置为空empty
        arr1[8]=23
        console.log(arr1)
    </script>

13.2.3遍历for循环

13.2.4复制

与对象数据类型存在同样的性质，因为放在堆区，变量仅存放地址，直接复制会导致两者地址也相同。怎样让他们内容相同，且互不影响？

解决方法：创建空数组，逐个元素赋值即可

    <script>
        var arr1 = new Array(112, 2343, 453456, 23, 23, 22)//0...5
        var arr2 = []
        for(var i=0;i<arr1.length;i++){
            arr2[i]=arr1[i]
        }
        console.log(arr1)
        console.log(arr2)
        arr2[1]=23//修改arr2[1]
        console.log(arr1[1])//arr1[1]并未发生改变
    </script>

13.2.5排序

13.2.5.1冒泡排序：相邻元素进行比较，大的在后面

13.2.5.2选择排序：每轮选择当前最小元素

13.2.6结尾添加元素arr.push(x) 返回值是数组当前长度

    <script>
        var arr = new Array(112, 2343, 453456, 23, 23, 22)//0...5
        arr.push(1)
        arr.push(2)
        arr.push(3)
        arr.push(54)
        var res=arr.push(4343)//返回值记录的是当前数组长度
        console.log(arr)//112, 2343, 453456, 23, 23, 22,1,2,3,54,4343
        console.log(res)
    </script>

13.2.7结尾弹出元素arr.pop() 返回值弹出的元素

    <script>
        var arr = new Array(112, 2343, 453456, 23, 23, 22)//0...5
        var res=arr.pop()
        console.log(arr)
        console.log("返回值",res)
    </script>

13.2.8开头添加元素arr.unshift(x) 返回值数组当前长度

    <script>
        var arr = new Array(112, 2343, 453456, 23, 23, 22)
        var res=arr.unshift("laji")//添加到开头arr.unshift(x) 返回值当前长度 
        console.log(arr)
        console.log("返回值",res)
    </script>

13.2.9删除开头元素arr.shift() 返回值删除的元素

    <script>
        var arr = new Array(112, 2343, 453456, 23, 23, 22)
        res=arr.shift()//删除开头arr.shift() 返回值删除的元素
        console.log(arr)
        console.log("返回值",res)
    </script>

13.2.10删除arr.splice(idx,num) 自定义位置idx+长度num

删除从下标idx开始的，长度为num的元素，返回值是由删除元素组成的数组

    <script>
        var arr = new Array(112, 2343, 453456, 23, 23, 22)//0...5
        //删除
        var res=arr.splice(1,3)//从下标1开始的三个元素
        console.log(arr)
        console.log("返回值",res)//返回值是删除的元素组成的数组 [2343, 453456, 23]
    </script>

13.2.11增加arr.splice(idx,num,"dfwef",...) （如果只是增加，那么将num设定为0即可）

删除从下标idx开始的，长度为num的元素，将"dfwef",...添加到该位置，返回值是删除的元素组成的数组

    <script>
        var arr = new Array(112, 2343, 453456, 23, 23, 22)
        //增加
        res=arr.splice(1,3,"dfs","ds","sfdj")
        console.log(arr)
        console.log("返回值",res)//返回值是删除的元素组成的数组 [2343, 453456, 23]
    </script>

13.2.12倒序arr.reverse() 返回值是倒序的结果

    <script>
        var arr = new Array(112, 2343, 453456, 23, 23, 22)
        res=arr.reverse()
        console.log(arr)
        console.log("返回值",res)//返回值是倒序的结果
    </script>

13.2.13排序sort() 参数是一个回调函数，来控制升降序（如果不加参数，排序顺序是按照每个数的每一位来排，对于所有的元素，先排第一位，再排第二位，直到位置确定下来）

    <script>
        var arr = new Array( 2343, 453456, 23,112, 23, 22)
        console.log(arr)
        arr.sort(function(a,b){//回调函数控制升序
            return a-b
        })
        console.log(arr)
        arr.sort(function(a,b){//回调函数控制降序
            return b-a
        })
        console.log(arr)
    </script>

13.2.14数组拼接 arr1.concat(arr2)

拼接的两个数组胡会受到影响，会返回一个两个数组拼接的数组

    <script>
        var arr1 = new Array( 2343, 453456, 23,112, 23, 22)
        var arr=arr2.concat(arr2)
        console.log(arr)//[2343, 453456, 23,112, 23, 22,2343, 453456, 23,112, 23, 22]
    </script>

13.2.15 arr.join("x") 在打印数组的时候将数组元素用x隔开（不加的话，是用“，”隔开）

    <script>
        var arr1 = new Array(2343, 453456, 23, 112, 23, 22)
        document.write(arr1.join("--"))//2343--453456--23--112--23--22
    </script>

13.2.16 arr.slice(idx1,idx2) 返回值是由下标idx1 -- idx2-1 的元素组成的数组（下标包左不包右）

arr.slice(idx1) 返回值是由下标idx1 以及后面的所有元素组成的数组

arr.slice() 返回值是与原数组元素一样的数组

补充：arr.slice(1,-2)表示后两位不管，从下标1开始的所有元素

    <script>
        var arr1 = new Array(2343, 453456, 23, 112, 23, 22)
        console.log(arr1)
        var arr=arr1.slice(3,5)//截取下标为3--4的元素
        console.log(arr)
        arr=arr1.slice(3)//截取下标是3以及后面的所有元素
        console.log(arr)
        arr=arr1.slice()//返回与原数组元素一样的新数组
        console.log(arr)
        arr=arr1.slice(1,-1)//截取下标为1--length-1-1的元素
        console.log(arr)
        arr=arr1.slice(2,-2)//截取下标为2--length-1-2的元素
        console.log(arr)
    </script>

13.2.17 arr.indexOf(u,idx)从下标idx开始，内容是u的第一个元素的下标，idx不写的话默认从头开始

    <script>
        var arr = new Array(2343, 453456, 23, 112, 23, 22)
        var res=arr.indexOf(23)//返回第一个23的下标 没有返回-1
        console.log(res)
        res=arr.indexOf(23,3)//返回从下标3开始的第一个23的下标 没有返回-1
        console.log(res)
    </script>

13.2.18 arr.lastIndexOf(u,idx)从下标idx开始，从后往前找，内容是u的第一个元素的下标，idx不写的话默认从结尾开始

    <script>
        var arr = new Array(2343, 453456, 23, 112, 23, 22)
        var res=arr.lastIndexOf(23)//返回第一个23的下标 没有返回-1
        console.log(res)//4
        res=arr.lastIndexOf(23,3)//返回从下标3开始的第一个23的下标 没有返回-1
        console.log(res)//2
    </script>

13.2.19数组的去重

13.2.19.1 将原数组arr[]的元素逐个放入新的数组里，再放的过程中，通过 arr1.indexOf(arr[i])判断新数组是否已经放过，放过的话就不再放了

    <script>
        var arr = new Array(2343, 453456, 23, 112, 23, 22, 112, 23, 22, 112, 23, 22, 232, 545)
        //方法一
        var arr1 = []
        for (var i = 0, j = 0; i < arr.length; i++) {
            if (arr1.indexOf(arr[i]) == -1) {
                arr1[j++] = arr[i]
            }
        }
        console.log(arr1)
    </script>

13.2.19.2 将原数组的每个元素，都看作是一个空对象obj的属性名称（不是属性值），然后给每个属性都赋予一个属性值存放在obj中（因为同一个对象不会有相同的属性值，就实现了去重操作）。然后再将对象的属性逐个取出来，放在新数组中

    <script>
        var arr = new Array(2343, 453456, 23, 112, 23, 22, 112, 23, 22, 112, 23, 22, 232, 545)
        //方法二
        var arr2 = []
        var obj = {}
        for(var i=0;i<arr.length;i++){
            obj[arr[i]]="lala"
        }
        console.log(obj)
        for(var i in obj){
            arr2.push(Number(i))//属性名称是字符串类型的所以要转回数值类型
        }
        console.log(arr2)
    </script>

13.2.19.3 将原数组元素放在Set类型的容器中，因为Set容器具有去重的功能，比较方便

    <script>
        var arr = new Array(2343, 453456, 23, 112, 23, 22, 112, 23, 22, 112, 23, 22, 232, 545)
        //方法三
        var set1=new Set(arr)
        console.log(set1)
    </script>

13.2.20数组的遍历forEach()

    <script>
        var arr = new Array(2343, 453456, 23, 112, 23)
        arr.forEach(function(item,index,arr){//item代表元素内容 index代表下标 arr代表数组
            console.log(item,index,arr)//我们写的参数的名称比较具有代表性，只是为了便于记忆与使 
            //用，参数名没有限制，可以随便起名字
        })
    </script>

13.2.21数组的映射map

    <script>
        //映射map
        var arr = new Array(2343,453456,23,112,23)
        var arr1=arr.map(function(item){
            return "<li>"+item+"</li>"
        })
        console.log(arr1)
        document.write(arr1.join(""))
    </script>

13.2.22过滤filter（通过设置回调函数来控制过滤的内容,返回一个数组）

    <script>
        //过滤filter
        //eg1
        var arr=[123,324,5443,343,213,232,34534,43,34]
        console.log(arr)
        var arr1=arr.filter(function(item){
            return item>100 && item<500
        })
        console.log(arr1)
        //eg2
        var arr2=[
            {name:"dfjh",age:21,class:2},
            {name:"adssfk",age:22,class:3},
            {name:"ffdsg",age:24,class:4},
            {name:"fdlk",age:28,class:6}
        ]
        var arr3=arr2.filter(function(item){
            return item.age<24
        })
        console.log(arr3)
    </script>

13.2.23 every 每一项都满足回调函数的要求时返回true 否则返回false

    <script>
        //every 每一项都满足回调函数的要求时 返回true 否则返回false
        var arr=[123,324,5443,343,213,232,34534,43,34]
        var res=arr.every(function(item){
            return item<100000
        })
        console.log(res)
    </script>

13.2.24 some 只要存在满足回调函数的要求时返回true 否则返回false

    <script>
        //some 只要存在满足回调函数的要求时 返回true 否则返回false
        var arr=[123,324,5443,343,213,232,34534,43,34]
        var res=arr.some(function(item){
            return item<100000
        })
        console.log(res)
    </script>

13.2.25 find 找到满足回调函数的第一项

    <script>
        //find 找到满足回调函数的第一项
        var arr=[123,324,5443,343,213,232,34534,43,34]
        var res=arr.find(function(item){
            return item>123
        })
        console.log(res)
    </script>

13.2.26 reduce叠加

    <script>
        //reduce叠加 将所有的元素叠加
        var arr=[123,324,5443,343,213,232,34534,43,34]
        var res=arr.reduce(function(prev,item){
            return prev+item
        },0)//0作为prev的初始值 每轮返回值赋给prev 然后继续累加 直到遍历完一遍数组
        console.log(res)
    </script>

13.3 字符串（基本数据类型）

13.3.1 length长度只读

13.3.2 索引只读

    <script>
        var str = "hello world"
        for(var i=0;i<str.length;i++){
            console.log(i,str[i])
        }
        var str1 = str//简单数据类型 新的变量与原变量无关 不会互相影响
        console.log(str1)
        str1[1]="p"//只读 所以str1[1]不会改变
        console.log(str1)
    </script>

13.3.3 计算字符串每种字母个数

    <script>
        //计算字符串每种字母个数
        var str = "hellokfdmsfl;adks;fsdsfk"
        var obj={}
        for(var i=0;i<str.length;i++){
            // if(obj[str[i]]==undefined) obj[str[i]]=1;
            // else obj[str[i]]++
            if(obj[str[i]]) obj[str[i]]++;//当不存在此属性时 属性值是undefined
            else obj[str[i]]=1
        }
        console.log(obj)
    </script>

13.3.4 chartAt(索引) 返回对应的字符索引超出是返回空字符

    <script>
        //chartAt(索引) 返回对应的字符
        var str = "hellllokfdmsfl;adks;fsdsfk"
        for(var i=0;i<str.length;i++){
            console.log(str.charAt(i))
        }
        console.log(str.charAt(100))//空
        if(''==str.charAt(100)) console.log(false)//返回false 说明是空字符
        else console.log(true)
    </script>

13.3.5 charCodeAt(索引) 返回索引所对应的字符的编码

    <script>
        //charCodeAt(索引) 返回索引所对应的字符的编码 
        var str = "hellllokfdmsfl;adks;fsdsfk"
        for(var i=0;i<str.length;i++){
            console.log(str.charCodeAt(i))
        }
    </script>

13.3.6 String.fromCharCode(num)将字符编码num转化成字符

    <script>
        //charCodeAt(索引) 返回索引所对应的字符的编码 
        var str = "hellllokfdmsfl;adks;fsdsfk"
        var str1 = []
        for (var i = 0; i < str.length; i++) {
            // console.log(str.charCodeAt(i))
            var charcode = str.charCodeAt(i)//每次返回str[i]所对应字符的字符编码
            str1[i]=String.fromCharCode(charcode)//将字符编码转化成字符
        }
        console.log(str1.join(''))
    </script>

13.3.7 str.toUpperCase()返回字符串str的大写形式，str不受影响

    <script>
        var str="hello world"
        console.log(str.toUpperCase())//HELLO WORLD
        console.log(str)//str不受影响 Hello world
    </script>

13.3.8 str.toLowerCase()返回字符串str的小写形式，str不受影响

    <script>
        var str="hello world"
        console.log(str.toLowerCase())//hello world
        console.log(str)//str不受影响 Hello world
    </script>

13.3.9 substr substring slice区别

    <script>
        var str="hello world"
        console.log(0,str)
        //substr(index,num)
        var str1=str.substr(0,3)//hel
        console.log(1,str1)
        //substr(index) index...结尾
        var str2=str.substr(4)//hel
        console.log(2,str2)
        //substring[index_start,index_end)
        var str3=str.substring(0,4)//hell
        console.log(3,str3)
        //substring(index) index...结尾
        var str4=str.substring(3)//lo world
        console.log(4,str4)
        //slice[index_start,index_end)
        var str5=str.slice(0,-1)// 'hello '
        console.log(5,str5)
        //slice[index,length-1-1]
        var str7=str.slice(2,-1)//llo worl
        console.log(7,str7)
        //slice(index) index...结尾
        var str6=str.slice(5)// ' world'
        console.log(6,str6)

        //substring slice 区别
        //slice第二参数可正可负 substring第二参数为正
    </script>

13.3.10 首字母转大写（思路：首字母取出来单独处理，转大写，后面不变）

    <script>
        var str="sjkcdsaj"
        console.log(str.substring(0,1).toUpperCase() + str.substring(1))//Sjkcdsaj
        console.log(str.substr(0,1).toUpperCase()+str.substr(1))//Sjkcdsaj
        console.log(str.slice(0,1).toUpperCase()+str.slice(1))//Sjkcdsaj
    </script>

13.3.11 str.replace('j','***') 将字符串str中的第一个'j'替换成'***'(这里可以提换成任意的字符)

    <script>
        var str="djkfcvsdkj"
        var str1=str.replace('j','***')
        console.log(1,str1)
    </script>

13.3.12 split()分割

    <script>
        var str="how are you"
        //split() 无参数 默认只有一个元素，即str本身
        console.log(str.split())//['how are you']
        //split(ch,num) 将字符串按照ch来分割(ch会被','取代)，且数组里面有num个元素 
        //num不写的话元素数量就不受限制
        console.log(str.split('o'))//['h', 'w are y', 'u']
        //参数是' '时，将每个字符分开，作为元素
        console.log(str.split(''))//['h', 'o', 'w', ' ', 'a', 'r', 'e', ' ', 'y', 'o', 'u']
    </script>

13.3.13 indexOf() lastIndexOf()

    <script>
        //str.indexOf("s")从前往后返回第一个's'返回第一个's'下标
        //str.indexOf("s"，index)index开始且从前往后返回第一个's'下标
        //str.lastIndexOf("s)index开始且从后往前返回第一个's'下标
        //str.lastIndexOf("s"，index)index开始且从后往前返回第一个's'下标
        //找不到就返回 -1 
        var str="sfdjwsdsf"
        console.log(str.indexOf("s"))//0
        console.log(str.indexOf("s",1))//5
        console.log(str.lastIndexOf("s"))//7
        console.log(str.lastIndexOf("s",6))//5
    </script>

13.3.14 concat字符串拼接

    <script>
        //concat字符串拼接
        var str="fgvhdsfadsd"
        var str1=str.concat("xjs")//str + "xjs"
        console.log(str1)
        var str2="str".concat(str)//"str" + str
        console.log(str2)
    </script>

13.3.15 去掉空格 trim/trimStart/trimLeft/trimEnd/trimRight

    <script>
        var str="    dfjkv   df    dif    djhfk  jdf    "  
        console.log('/'+str+'/')
        //trim 去掉首尾空格
        console.log('/'+str.trim()+'/')
        //trimStart trimLeft去掉首部空格
        console.log('/'+str.trimStart()+'/')
        console.log('/'+str.trimLeft()+'/')
        //trimEnd trimRight去掉尾部空格
        console.log('/'+str.trimEnd()+'/')
        console.log('/'+str.trimRight()+'/')
    </script>

13.3.16 模糊查询

    <script>
        //模糊查询
        var str=["fdfs","dsf","dff","sfsd","erwwqwe","axzs"]
        var input=prompt("请输入查询内容")
        var res=str.filter(function(item){
            return item.indexOf(input)!=-1
        })
        console.log(res)
    </script>

13.3.17 json字符串

    <script>
        //json字符串==>对象
        //格式固定 '{"key":value,"age":21}' 要求对象外边必须用''/""包裹起来,
        //不同属性之间用','隔开，结尾不加',' 
        // key必须用""包裹起来 value根据实际情况(eg:年龄不加 100,姓名加 "Mark")
        var str='{"name":"Mark","age":100}'
        //json字符串转对象 将后端传过来的json字符串转为对象 后端-->前端
        var obj=JSON.parse(str)
        console.log(obj)
        //字符串转json字符串 前端-->后端
        var str1=JSON.stringify(obj)
        console.log("str1:",str1)
    </script>

13.3.18 模式字符串

    <script>
        var myhtml1="<li>111</li>\
        <li>222</li>\
        <li>333</li>"//这里必须要加上'\' 否则会出错
        
        //模板字符串 
        //不加'\'且直接换行依然不会出错
        var myhtml = `<li>111</li> 
         <li>222</li>
         <li>333</li>`
        //模板字符串格式 `...` 
        //在``内容可以放${} 

        //在${}中加上各种字符串 ${}相当于创造了script环境
        //放的是数字的话那它就是数字 放的是数字的运算的话那它将显示运算的结果
        //放的是一个随便的字符串的话 如果有"xxx"括起来 那么它将显示成xxx
        //放的只是xxx 会被看做变量xxx 将检查前面是否存在这个变量xxx 存在的话将变量的内容放进来 不存在的话报错 
        var str=`表格样式是 ${myhtml}${111}nn${'+'}fg${222}gd${'=='}fe${111+222}`
        document.write(str)
    </script>

13.4 数字

13.4.1 toFixed(num) 保留num位小数返回值是一个字符串

    <script>
        //toFixed(num)保留num位小数 且后一位的采取四舍五入
        var price=12.3213523
        console.log(price.toFixed(4))//12.3214
        console.log(price.toFixed(20))//12.32135229999999914696
    </script>

13.4.2Math对象函数

    <script>
        //Math对象
        //random 0(包含)-1(不包含)
        console.log(Math.random())
        //round 四舍五入取整
        console.log(Math.round(3.5))//4
        //ceil 向上取整
        console.log(Math.ceil(3.6))//4
        //floor 向下取整
        console.log(Math.floor(3.6))//3
        //abs 取绝对值
        console.log(Math.abs(-12))//12
        //sqrt 取平方根
        console.log(Math.sqrt(16))//4
        //pow 次幂
        console.log(Math.pow(10,2))//100
        //max 取最大 参数可多个
        console.log(Math.max(12,23,34354,34,656,45))//34354
        //min 取最小 参数可多个
        console.log(Math.min(12,23,34354,34,656,45))//12
        //PI π值
        console.log(Math.PI)
    </script>

13.4.3 random()的应用

    <script>
        //0(包含)-10(不包含) 
        console.log(Math.floor(Math.random()*10))
        //0(包含)-10(包含) 
        console.log(Math.floor(Math.random()*11))
        //10(包含)-20(不包含) 
        console.log(Math.floor(Math.random()*10)+10)
        //10(包含)-20(包含) 
        console.log(Math.floor(Math.random()*11)+10)
        //min(包含)-max(不包含)
        function getRnd1(min,max){
            if(min>max) {
                console.error("输入的参数有误")
                return
            }
            return Math.floor(Math.random()*(max-min))+min
        }
        console.log(getRnd1(23,34))//23-33
        //min(包含)-max(包含)
        function getRnd2(min,max){
            if(min>max) {
                console.error("输入的参数有误")
                return
            }
            return Math.floor(Math.random()*(max-min+1))+min
        }
        console.log(getRnd2(23,34))//23-34
    </script>

13.5 时间

13.5.1时间函数

    <script>
        //Date时间函数

        //默认参数 当前时间 返回的是一个对象 
        var date=new Date()
        console.log(typeof date,date)//打印的时候自动转为字符串 
        
        //自己设定不同的参数
        //一个参数 毫秒
        var date1=new Date(1000)
        console.log(date1)
        //多个参数  年 月 日 时 分 秒
        //注意：这里的月份是 0-11 对应这现实中的 1-12 
        var date2=new Date(2022,11,23,23,59,59)
        console.log(date2)
        //字符串 对应着时间
        var date3=new Date("2022-12-23 23:59:59")
        console.log(date3)
        var date4=new Date("2022/12/23 23:59:59")
        console.log(date4)
    </script>

13.5.2 得到时间

    <script>
         var date=new Date()
         //得到 年 月 日 星期 时 分 秒 毫秒
        //getFullyear年
        console.log(date.getFullYear())
        //getMonth月
        console.log(date.getMonth())
        //getDate日
        console.log(date.getDate())
        //getDay周几
        console.log(date.getDay())
        //getHours时
        console.log(date.getHours())
        //getMinutes分
        console.log(date.getMinutes())
        //getSeconds秒
        console.log(date.getSeconds())
        //getMilliseconds毫秒
        console.log(date.getMilliseconds())
        //getTime距离初始时间的毫秒数 1970-1-1 0:0:0
        console.log(date.getTime())
        var date1=date.getTime()
        console.log(new Date(date1))
    </script>

13.5.3 设置时间

    <script>
         var date=new Date()
        //设置 年 月 日 星期 时 分 秒 毫秒
        //设置年
        date.setFullYear(2000)
        console.log(date)
        //设置月
        date.setMonth(11)
        console.log(date)
        //设置日
        date.setDate(29)
        console.log(date)
        //设置时
        date.setHours(20)
        console.log(date)
        //设置分
        date.setMinutes(24)
        console.log(date)
        //设置秒
        date.setSeconds(56)
        console.log(date)
        //设置毫秒
        date.setMilliseconds(2000)
        console.log(date)
        //设置时间 参数是毫秒(是距离初试时间的毫秒数) 或者 时间对象
        date.setTime(date)
        date.setTime(1000)
        console.log(date)
    </script>

13.5.4 定时器

<body>
    <button id="b1">关闭定时器1</button>
    <button id="b2">关闭定时器2</button>
    <script>
        //定时器 ：1.延时定时器 2.间隔定时器

        //延时定时器(爆炸定时器) 倒计时到了后执行一次
        var time1=setTimeout(function(){
            console.log("李学孟")
        },4000)

        //间隔定时器 每间隔一定时间就会执行一次 直到我们选择结束
        var time2=setInterval(function(){
            console.log(new Date())     
        },1000)
        // console.log(time1,time2)//定时器的返回值是定时器的相对位置(即：第几个定时器就返回几)
        //定时器的返回值 可以用与清除定时器
        //清除定时器 clearTimeout() clearTnterval()
        console.log(b1,b2)
        //可以直接通过css标签的id名调用onlick来实现链接问题
        b1.onclick=function(){
            console.log("1关闭了")
            clearTimeout(time1)
        }
        b2.onclick=function(){
            console.log("2关闭了")
            clearInterval(time2)
        }
        //定时器里面的回调函数属于异步执行
        //一般的代码是同步执行 要等到同步代码执行完之后 才能执行异步代码
        //因此，异步代码不应定会被执行到，因为如果同步代码出现死循环就执行不到异步了
    </script>
</body>

13.5.5 定时器--倒计时案例

<body>
    <div id="box"></div>
    <script>
        //倒计时案例
        var target=new Date("2022-10-10")
        
        function caluTime(current,target){
            var second=Math.ceil((target-current)/1000)
            var day=parseInt(second/(60*60*24)) 
            var hour=parseInt(second%(60*60*24)/(60*60)) 
            var minute=parseInt(second%(60*60)/60)
            second=second%60
            var obj={
                days:day,
                hours:hour,
                minutes:minute,
                seconds:second
            }
            return obj
        }
        setInterval(function(){
            var current=new Date()
            var res=caluTime(current,target)
            box.innerHTML=`京东618倒计时:${res.days}天${res.hours}小时${res.minutes}分钟${res.seconds}秒`
        },1000)
    </script>
</body>

14.BOM

14.1 浏览器可视窗口高度宽度（包含滚动条）


    <script>
        //浏览器可视窗口高度 宽度 (包含滚动条)
        var heig = innerHeight
        var wid = innerWidth
        console.log(heig, wid)
    </script>

14.2 提示框 alert

<body>
    <button id="mybutton">请验证</button>
    <script>

        //提示框
        //alert("你又对了！！！")//浏览器界面弹出一个提示框
        //案例
        mybutton.onclick = function () {
            alert("正在验证,请稍候...")
            document.write(2213132)
        }

    </script>
</body>

14.3 询问框 confirm

<body>
    <button id="mybutton">请验证</button>
    <script>

        //询问框 confirm 弹出的界面会有选择按钮 正确返回值true 取消返回值false
        mybutton.onclick = function () {
            var res = confirm("你吃饭了吗？")
            
            if (res) {
                document.write("吃过了")
            } else {
                document.write("还没吃")
            }
            document.write(12312)
        }

    </script>
</body>

14.4 输入框 prompt

<body>
    <button id="mybutton">请验证</button>
    <script>

        //输入框 prompt  返回值 返回输入的内容 ,如果没输入直接点击确定就返回空串,直接点击取消返回null 
        mybutton.onclick=function(){
            var res=prompt("请输入您的密码")
            document.write(2131)
            document.write("你的密码:",res)
        }
        
    </script>
</body>

14.5 不足：14.2-14.4上面几个的缺陷会阻塞线程前面不运行完的情况下，后面的无法运行

14.6 浏览器的地址栏跳转页面刷新

<body>
    <button id="btn1">请验证</button>
    <button id="btn2">刷新</button>
    <script>
        console.log(location.href)
        //跳转页面
        btn1.onclick=function(){
            location.href="http://baidu.com"
        }
        //刷新
        btn2.onclick=function(){
            location.reload()
        }
    </script>
</body>

14.7 onload页面资源加载完成后执行

    <script>
        window.onload=function(){
            console.log("加载完毕")
        }
        document.write(`<div>dqwdq</div>
                    <div>dqwddfq</div>
                    <div>dqwddfsq</div>`)
        btn2.onclick=function(){
            location.reload()
        }
        //onload
        window.onload=function(){
            console.log("加载完成")
        }
    </script>

14.8 onresize当屏幕大小发生改变的时候也会调用

    <script>
        window.onresize=function(){
            console.log("变化啦")
        }
    </script>

14.9 onscroll屏幕滚动时会调用(滚轮上下左右都会触发)

    <script>
        window.onscroll=function(){
            console.log("我滚动了！！！")
        }
    </script>

14.10 scrollTo()调整两个滚轮的位置

        //scrollTo参数
        box.onclick=function(){
        //1.两个参数 x1,x2 对应着left top
            window.scrollTo(200,20)
        //2.一个对象
            window.scrollTo({
                left:0,
                top:0
             })
        }

14.11 document.documentElement.scrollTop document.body.scrollTop

用于获取竖向滚轮距离顶部的距离

document.documentElement.scrollLeft document.body.scrollLeft

用于获取水平滚轮距离左侧的距离

早些版本不支持document.documentElement.scrollTop / Left

为了兼容性，一般两个一起使用 eg:var res = document.documentElement.scrollTop || document.body.scrollTop

14.12 新建标签页open 关闭标签页close

<body>
    <button id="btn1">新建标签页</button>
    <button id="btn2">关闭标签页</button>
    <script>
        //新建标签页
        btn1.onclick = function () {
            window.open("http://www.baidu.com")
        }
        //关闭标签页
        btn2.onclick = function () {
            window.close()
        }
    </script>
</body>

14.13 浏览器的历史记录

    <script>
        btn.onclick=function(){
            //回退到上一个页面
            history.back()

            //进入下一个页面
            history.forward()
            
            //参数num 前进num个页面 参数-num 回退num个页面
            //这种方式 如果num大于可以前进或回退的页面的数量的话会失效
            history.go(2)
        }
    </script>

14.14 本地存储localStorage 临时存储(会话存储)sessionStorage

<body>
    <button id="btn1">增</button>
    <button id="btn2">删</button>
    <button id="btn3">查</button>
    <button id="btn4">清空</button>
    <script>
        //本地存储
        //增
        btn1.onclick=function(){
            // localStorage.setItem("age","Mark")//对于简单变量的操作
            //对对象的操作 不能像简单的变量一样 因为不管是设置属性还是查看属性 都用的是字符串
            //而对对象的操作 
            //属性的设置 应该先把目标对象转化为字符串再进行属性的设置 (将对象转化成JSON字符串)
            //属性的查询 对于对象，我们在查询的时候希望看到的是以对象的方式(注意：不是字符串)显示出来，那么就需要我们将得到的字符串转化成对象(将JSON字符串转化成对象)

            localStorage.setItem("obj",JSON.stringify({name:"Mark",age:21,Grade:3}))//对于对象变量的操作
        }
        //删
        btn2.onclick=function(){
            localStorage.removeItem("obj")
        }
        //查
        btn3.onclick=function(){
            // console.log(localStorage.getItem("age"))//对于简单变量的操作
            console.log(JSON.parse(localStorage.getItem("obj")))//对于对象变量的操作
        }
        //清空
        btn4.onclick=function(){
            localStorage.clear()
        }
    </script>
</body>

二者的用法一样，区别在于，本地存储不会丢失，临时存储关闭当前浏览器页面就会丢失

案例

<body>
    <form action="">
        <div>
            <input type="text" required="required" placeholder="用户名" name="username" id="username">
        </div>
        <div>
            <input type="password" required="required" placeholder="密码" name="password" id="password">
        </div>
        <div>
            <button type="submit" id="btn">登录</button>
        </div>
    </form>
    <script>
        var username_start=localStorage.getItem("username")
        var userpassword_start=localStorage.getItem("password")
        username.value=username_start
        password.value=userpassword_start
        btn.onclick=function(){
            localStorage.setItem("username",username.value)
            localStorage.setItem("password",password.value)
        }
    </script>
</body>

15.DOM

15.1 获取元素的方式

<body>
    <div class="box1">
        <ul id="id1">
            <li class="n1">嘿嘿嘿啊</li>
            <li class="n2">"weee"</li>
            <li class="n3">"wre"</li>
            <li class="n4">"wer"</li>
            <li class="n5">"wer"</li>
        </ul>
    </div>
    <div class="box2">
        <ul id="id2">
            <li class="n6">呜噜噜</li>
            <li class="n7"></li>
            <li class="n8"></li>
            <li class="n9"></li>
            <li class="n10"></li>
        </ul>
    </div>
    <div class="box3">
        <ul id="id3">
            <li class="n61">54646</li>
            <li class="n7"></li>
            <li class="n8"></li>
            <li class="n9"></li>
            <li class="n10"></li>
        </ul>
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div id="box">222</div>
    <div id="box">111</div>
    <input type="text" name="name11" id="Namee">
    <input type="text" name="name">
    <script>
        //获取元素 常规 非常规

        //非常规
        //html
        console.log(document.documentElement)
        //head
        console.log(document.head)
        //body
        console.log(document.body)

        //常规
        //通过class名(ClassName) 同一个class名可以对应多个标签 因此通过class名的方式查找返回的是一个伪数组
        var byclass = document.getElementsByClassName("box1")//返回的是伪数组
        console.log(byclass)
        var Byclass = Array.from(byclass)//将伪数组转化为常规数组
        console.log(Byclass)
        //通过Id名 注意：我们默认一个id名仅对应一个标签 因此通过Id名的方式查找返回的是单个元素(第一个找到的)
        var byid = document.getElementById("box")
        console.log(byid)
        byid.style.color="red"
        //通过标签名TagName
        var by_tag_na = document.getElementsByTagName("ul")
        console.log(by_tag_na)
        by_tag_na[0].innerHTML = "<style>ul{list-style:none}</style>"
        var By_tag_na = Array.from(by_tag_na)
        console.log(By_tag_na)
        //通过name 
        //一般用于Input标签 返回的也是伪数组
        var byname = document.getElementsByName("name11")
        console.log(byname)
        var Byname = Array.from(byname)
        console.log(Byname)
        Byname[0].value = "Mark"
        //
        // console.log(23424237) 
        //选第一个满足要求的标签 返回一个对象
        //好处是实现了 在css里面一样的调用方式
        var item=document.querySelector("ul li.n6")
        console.log(item)
        //选满足要求的所有标签 
        var items = document.querySelectorAll("ul li.n1")
        console.log(items)
    </script>
</body>

15.2 对元素的操作方法

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <input type="text" name="" id="box" value="" data-home="" >
    <script>
        //对于原有的属性
        box.value="hello world"
        box.name="Mark"
        box.type="password"
        //对于新建属性
        //设置属性
        box.setAttribute("age",12)
        box.setAttribute("Grade","Number_one")
        //得到属性值
        var res=box.getAttribute("age")
        console.log(res)
        //移除属性
        box.removeAttribute("age")
        box.removeAttribute("value")
        //案例
        var items=document.getElementsByTagName("li")
        for(var i=0;i<items.length;i++){
            items[i].setAttribute("age",i+10)
            console.log(items[i].getAttribute("age"))
        }

        //h5 约定 对于我们新建的属性，为了便于识别，将新建标签的开头设置为'data-'
        //查看当前新建属性 返回一个对象
        res=box.dataset
        console.log(res ,typeof res)
        //修改/新建
        box.dataset.home = "南阳"//我们通过此种方式新建/修改属性 将会最终显示为 'data-...'
        box.dataset.wife="Tom"
        //删除属性
        delete box.dataset.wife
    </script>
</body>

案例

<body>
    <input type="checkbox" id="all">
    <hr>
    <ul class="ii">
        <li>
            <input type="checkbox" id="shopper1">电脑
        </li>
        <li>
            <input type="checkbox" id="shopper2">键盘
        </li>
        <li>
            <input type="checkbox" id="shopper3">鼠标
        </li>
        <li>
            <input type="checkbox" id="shopper4">鼠标垫
        </li>
        <li>
            <input type="checkbox" id="shopper5">充电器
        </li>
    </ul>
    <script>
        var items=document.querySelectorAll(".ii input")
        var oall=document.querySelector("#all")
        oall.onclick=function(){
            for(var i=0;i<items.length;i++){
                items[i].checked=oall.checked
            }
        }
        for(var i=0;i<items.length;i++){
            items[i].onclick=function(){
                var count=0
                for(var j=0;j<items.length;j++){
                    if(items[j].checked) count++
                }
                if(count===items.length) oall.checked=true
                else oall.checked=false
            }
        }
    </script>
</body>

15.3

15.4

15.5

15.6

15.7

15.8

15.9

15.10

15.11

15.12

15.13

15.14