JavaScript根本知识

一、JavaScript基础

1.变量（重点）

• 变量指的是在步调中保存数据的一个容器
         语法：var 变量名 = 值
  

1-1 界说变量及赋值

1. //定义一个变量
2. var num
4. //给一个变量赋值
5. num = 100
7. //定义一个变量的同时给其赋值
8. var num2 = 200

复制代码

• 注意：
  
  
  • 一个变量名只能存储一个值
    
  • 当再次给一个变量赋值的时间，前面一次的值就没有了
    
  • 变量名称区分大小写（js严格区分大小写）
    
  
  

1-2 变量的命名规则和命名规范

• 规则：必须需服从的
  
  
  
  • 一个变量名称可以由**数字、字母、英文下划线（__）、美元符号（$）**组成
    
  • 严格区分大小写
    
  • 不能由数字开头
    
  • 不能是保留字或者关键字
    
  • 不要出现空格
    
     
  
• 规范：建议服从
  
  
  
  • 变量名尽量有意义（语义化）
    
  • 遵循骆驼命名规则，有多个单词组成的时间，从第二个单词开始首字母大写
    
  • 不要使用中文
    
     
  
• 判断数据范例：
  
  
  
  • 使用typeof关键字来进行判断
    
    1. //第一种使用方式
    2. var n1 = 100
    3. console.log(typeof n1)
    5. //第二种使用方式
    6. var s1 = 'abc'
    7. console.log(typeof(s1))

    复制代码
     
  

2.数据范例转换

• 数据范例之间的转换，好比数字转成字符串，字符串转成布尔，布尔转成数字等
  

2-1 其他数据范例转成数值

• Number(变量)
         可以把一个变量欺压转换成数值范例
      可以转换小数，会保留小数
      可以转换成布尔值
      以下都是：遇到不可转换的都会返回NaN
  
• parseInt(变量)
         从第一位开始检查，是数字就转换，直到一个不是数字的内容
      开头不是数字就直接返回NaN
      不认识小数点，只能保留整数
  
• parseFloat(变量)
         从第一位开始检查，是数字就转换，直到一个不是数字的内容
      开头不是数字就直接返回NaN
      认识一次小数点
  

2-2 其他数据范例转成字符串

• 变量.toString()
         有一些数据范例不能用toString()方法，如：undefined和null
  
• String(变量)
         全部数据范例都能用
  
• 使用加法运算
         字符串拼接：有一方是字符串就会拼接
      加法运算：只有两边都是数字才会进行数学运算
  

2-3 其他数据范例转成布尔

• Boolean(变量)
         在js中，只有''、0、null、undefined、NaN，这些是false，其他都是true
  

3.函数

• 对于js来说，函数就是把恣意一段代码放在一个盒子里面
  
• 代码：
  
  1. //这个是我们以前写的一段代码
  2. for (var i = 0 ; i < 10 ; i++) {
  3.     console.log(i)
  4. }
  6. //函数，这个 {} 就是那个“盒子”
  7. function fu() {
  8.     //这个函数我们以前写的代码
  9.     for (var i = 0 ; i < 10 ; i++) {
  10.             console.log(i)
  11.         }
  12. }

  复制代码
  3-1函数界说阶段
  
  声明式
  
  
  
  • 使用function这个关键字来声明一个函数
    
  • 语法：
    
    1. function fn() {
    2.     //一段代码
    3. }
    4. //function：声明函数的关键字
    5. //fn：函数的名字，自己定义
    6. //（）：必须写，放参数的位置
    7. //{} ： 就是放一段代码的位置也就是刚刚说的“盒子”

    复制代码
  赋值式
     
  
  
  
  • 其实就是使用var关键字一样
    
  • 首先使用var界说一个变量，把一个函数当做值直接复制给这个变量就可以了
    
  • 语法：
    
    1. var fn = function() {
    2.     //一段代码
    3. }

    复制代码
  3-2函数调用阶段
  
  调用一个函数
     
  
  
  
  • 函数调用就是直接谢函数名（）即可
    
  1. //声明式函数
  2. function fn() {
  3.     console.log("我是fn函数")
  4. }
  6. //调用函数
  7. fn()
  9. //赋值式函数
  10. var f1 = function(){
  11.     console.log("我是f1函数")
  12. }
  14. //调用函数
  15. f1()

  复制代码
    
  
  
  
  • 注意：界说完一个函数以后，假如没有调用函数，那么写在{}里面的代码没有意义，只有调用以后才会实行
    
  3-3 调用上的区别
  
     
  
  
  
  • 声明式函数：调用可以在界说之前或者界说之后
    
  • 赋值式函数：调用只能在界说之后
    
  3-4 函数的参数
  
     
  
  
  
  • 参数分为两种形参和实参
    
    1. //声明式
    2. function fn(形参) {
    3.     一段代码
    4. }
    6. fn(实参)
    8. //赋值式一样的位置，写在"()"里面

    复制代码
  3-5 函数的界说域
  
     
  
  
  
  • 访问规则
    
    
    
    • 首先，在本身的作用域内部查找，假如有，就直接拿来用
      
    • 假如没有，就去上一级作用于查找，假如有，就拿来用
      
    • 以此类推
      
    • 假如不停没有这个变量就会直接报错
      
    1. var num = 100
    3. function fn() {
    4.     var num2 = 200
    5.    
    6.     function fn2() {
    7.         var num3 = 300
    8.         
    9.         console.log(num3)//300
    10.         console.log(num2)//200
    11.         console.log(num)//100
    12.         console.log(a)//都没有就是直接报错
    13.     }
    14.    
    15.     fn2()
    16. }
    18. fn()

    复制代码
       
    
    
    
    • 变量的访问规则也叫造作用域的查询机制
      
    • 作用域的查找机制只能是向上查找不能向下找
      
    1. function fn() {
    2.     var num = 100
    3. }
    4. fn()
    6. console.log(num)//发现自己作用域没有，自己就是全局作用域，没有上一级了，直接报错

    复制代码
    
    
  • 赋值规则
    
    
    
    • 先在本身作用域内部查找，有就直接赋值
      
    • 没有就去上一级作用域内部查找，有就直接赋值
      
    • 以此类推
      
    • 假如不停找到全局作用域都没有，那么就把这个变量界说为全局变量，再给他赋值
      
    
    
  
  

4.对象

• 对象是一个复杂数据范例
  
• 存储了一些根本数据范例的一个聚集
  
  1. var obj = {
  2.     num : 100,
  3.     str : 'hello world',
  4.     boo : true
  5. }

  复制代码
• 这里的{}和函数中的{}不一样
  
• 函数里面的是写代码的，而对象里面是写一些数据的
  
• 对象就是一个键值对的聚集
  
• {}里面的每一个键都是一个成员
  

4-1 创建对象

• 字面量的方式创建一个对象
  
  1. //创建一个空对象
  2. var obj = {}
  4. //向对象中添加成员
  5. obj.name = 'jack'
  6. obj.age = 18

  复制代码
• 内置构造函数的方式创建对象
  
  1. //创建一个空对象
  2. var obj = new Object()
  4. //向对象中添加成员
  5. obj.name = 'jack'
  6. obj.age = 18       

  复制代码
  
  
  • Object是js内置给我们的构造函数，用于创建一个对象使用的
    
  
  

4-2 数据范例之间存储的区别

• 我们的存储空间分成两种栈和堆
  
• 栈：重要存储根本数据范例的内容
  
• 堆：重要存储复杂数据范例的内容
  

根本数据范例在内存中的存储情况

• var num = 100，在内存中的存储情况
  
• 直接在栈空间内有存储一个数据
  

复杂数据范例在内存中的存储情况

• 下面这个对象的存储
  
  1. var obj = {
  2.     name : "java",
  3.     age : 18,
  4.     gender : '男'
  5. }

  复制代码
• 复杂数据范例的存储
  
  
  
  • 在堆里面开辟一个存储空间
    
  • 把数据存储到存储空间内
    
  • 把存储空间的地址赋值给栈里面的变量
    
  
  

5.数组

5-1 数组的常用方法

• push() ：在数组的末了添加一个或多个元素，并返回新的长度
  
• pop() ：删除数组的最后一个元素，并返回该元素的值
  
• unshift() ：在数组的开头添加一个或多个元素，并返回新的长度
  
• shift() ：删除数组的第一个元素，并返回该元素的值
  
• splice() ：从数组中添加或删除元素
  
  1. //splice() -> 删除元素：
  2. var arr = [1 , 2 , 3 , 4]
  3. var ressplice = arr.splice(1 , 2)
  4. //第一个参数是要开始删除的位置下标
  5. //第二个参数是要删除元素的个数
  6. //ressplice表示返回值，是删除元素组成的集合
  8. //splice() -> 增加元素：
  9. var arr1 = [1 , 2 , 3 , 4]
  10. var ressplice1 = arr.splice(1 , 0 , "zhangsan" , "lisi")
  11. //后面两个参数是增加的元素
  12. //前面两个表示在第一个元素的位置不删除元素，但是在这个位置增加两个元素

  复制代码
• sort() ：对数组的元素进行排序
  
  1. //不能直接用arr.sort()的用法
  2. arr.sort(function(a , b){
  3.     return a - b //表示从小到大排序
  4.     //return b - a  表示从大到小排序
  5. })

  复制代码
• reverse() ：颠倒数组中元素的顺序
  以上方法都会对原数组造成影响
  
• concat() ：毗连两个或多个数组，并返回新的数组，并不会改变原来的数组
  
• slice() ：从数组中截取一部门，并返回新的数组，并不会影响原数组
  
  1. var arr = [1 , 2 , 3 , 4]
  2. var arr2 = arr.slice(0 , 2) //[1 , 2] ,截取的数组是左闭右开
  3. //-1表示最后一个数，可以用负数表示

  复制代码
• indexOf() ：返回数组中指定元素的第一个索引，-1就表示找不到
  
• lastIndexOf() ：返回数组中指定元素的最后一个索引，-1就表示找不到
  
• join() ：将数组的全部元素毗连成一个字符串
  
  1. arr.join()//默认会用“，”隔开
  2. arr.join("|")//会用“|”隔开，里面可以是任意字符

  复制代码
• forEach() ：对数组的每个元素实行一次指定的函数
  
  1. //forEach()遍历
  2. var arr = ["aaa" , "bbb" , "ccc"]
  3. //回调函数
  4. arr.forEach(function(item , index , arr) {
  5.     console.log(item , index , arr)
  6. })
  7. //item : 表示数组里面的值
  8. //index : 表示当前位置的索引
  9. //arr : 表示数组，每次都会重新将数组打印一遍

  复制代码
• map() ：对数组的每个元素实行一次指定的函数，并返回一个新的数组
  
  1. var arr = [1 , 2 , 3 , 4]
  2. //回调函数
  3. var arr1 = arr.map(function(item) {
  4.     return item * item
  5. })
  6. console.log(arr1)
  7. //表示将arr数组中每个数的平方加入到arr1数组中

  复制代码
• filter() ：对数组的每个元素实行一次指定的函数，并返回一个新的数组，该数组只包罗满足条件的元素（只会返回true和false）
  
  1. var arr = [1 , 2 , 3 , 4]
  2. //回调函数
  3. var arr1 = arr.filter(function(item) {
  4.     return item > 2
  5. })
  6. console.log(arr1) //只包含[3 , 4] ,把1 和 2都过滤掉了

  复制代码
• every() ：对数组的每个元素实行一次指定的函数，假如全部元素都满足条件，则返回 true
  
  1. var arr = [1 , 2 , 3 , 4]
  2. //回调函数
  3. var arr1 = arr.every(function(item) {
  4.     return item > 2
  5. })
  6. console.log(arr1) //返回false,因为前面两个数不满足
  7. //[3 , 4 , 5]返回true，因为所有的元素都满足条件

  复制代码
• some() ：对数组的每个元素实行一次指定的函数，假如有恣意一个元素满足条件，则返回 true
  
• reduce() ：对数组的每个元素实行一次指定的函数，并返回一个值
  
  1. var arr = [1 , 2 , 3 , 4 , 5]
  3. var arr1 = arr.reduce(function(prev , item){
  4.     return prev + item
  5. } , 0)
  6. console.log(arr1)//输出15，表示所有数字累加
  7. //prev表示每次计算后的结果，开始数据为后面的写入数据为0，（也可以写"",这样就表示字符串的拼接操作）
  8. //item表示当前数组的值

  复制代码
• reduceRight() ：对数组的每个元素实行一次指定的函数，并返回一个值，该值是从右到左盘算的
  
• find() ：返回数组中第一个满足条件的元素
  
• findIndex() ：返回数组中第一个满足条件的元素的索引
  
• fill() ：用指定的值添补数组的指定位置
  
• copyWithin() ：将数组的一部门复制到另一个位置
  

6.字符串

6-1 字符串的常用方法

• charAt()：返回指定位置的字符
  
• charCodeAt()：返回指定位置的字符的 Unicode 编码
  
• fromCharCode()：将 Unicode 编码转换为字符
  
• toUpperCase()：将字符串转换为大写
  
• toLowerCase()：将字符串转换为小写
  
• substr(开始索引，长度)：返回指定位置的子字符串
  
• substring(开始索引，结束索引)：返回指定位置的子字符串（左闭右开，不能用负数）
  
• slice(开始索引，结束索引)：返回指定位置的子字符串（左闭右开，可以使用负数）
  
• replace()：替换字符串中的指定字符
  
  1. var str = "asdfsdafdsaf"
  2. var str1 = str.replace("a" , "*")
  3. //第一个参数"a"表示要修改的字符
  4. //第二个参数"*"表示将原来的字符修改成这个
  5. //注意不能全部修改只能修改第一次出现的，并不是把所有的"a"改成"*",只能改第一个

  复制代码
• split()：将字符串分割为数组
  
  1. var str = "a|b|c|d"
  2. console.log(str.split("|"))
  3. //表示将原来的字符串按照"|"进行分割形成一个新数组["a" , "b" , "c" , "d"]

  复制代码
• indexOf()：返回指定字符在字符串中第一次出现的位置
  
  1. var str = "adsafdsaf"
  2. console.log(str.indexOf("a")) //返回第一次出现"a"的下标
  3. console.log(str.indexOf("a" , 1)) //表示从索引1开始往后查的第一个"a"的下标，在1前面的不用算

  复制代码
• lastIndexOf()：返回指定字符在字符串中最后一次出现的位置
  
• concat()：毗连字符串
  
• trim()：去除字符串两头的空格
  
• trimStart() 和 trimLeft() :去掉首空格
  
• trimEnd() 和 trimRight() : 去掉尾空格
  

6-2 json字符串(重要用来前后端交换)

json字符串的格式：'{"key" : 110 , "key" : "110"}'
   

• 里面用了" ",最外面就要用’ ’
  
• key值必须要用" "包裹
  
• value值恣意，假如是字符串就用""，假如是数字就直接写
  
• 不能有多余的”，“ 只能是数据之间用逗号隔开
  

  

• json字符串转为对象
  
  1. var str = '{"name" : "nb" , "age" : 18}'
  2. var obj = JSON.parse(str)
  3. console.log(obj)

  复制代码
• 对象转为json字符串
  
  1. var obj = {name "tiechui"}
  2. var str = JSON.stringify(obj)
  3. console.log(obj , str)

  复制代码

6-3 模板字符串

普通字符串用单引号或双引号来表示，而模板字符串用``来表示

1. var name = "aaa\
2. bbb\
3. ccc
4. "
5. //普通字符串想要换行输入就要加上""
7. var name1 = `aaa
8. bbb
9. ccc`
10. //模板字符串就可以直接换行
12. var myname = "xie"
13. var str = `my name is ${myname} ${10 + 20} ${10 > 20 ? 'aaa' : 'bbb'}`
14. //这种写法会把${}里面的数据自动解析，如myname会自动写成xie

复制代码

7.数字

7-1 数字的常用方法

• toFixed():保留几位小数，返回的是字符串
  
  1. var price = 123.4567
  3. var sum = price.toFixed(2) - 0 + 100 //因为返回的是字符串，所以要先减去0，变成数字再加上100
  4. console.log(sum.toFixed(2))//223.46
  5. //表示结果取两位小数

  复制代码
• Math.random():随机数
  
  1. //0-10  不包含10
  2. var res = Math.floor(Math.random() * 10)
  4. //0-10  包含10
  5. var res = Math.floor(Math.random() * (10 + 1))
  7. //10-20 不包含20
  8. var res = Math.floor(Math.random() * 10) + 10
  10. //10-20 包含20
  11. var res = Math.floor(Math.random() * (10 + 1)) + 10

  复制代码
• Math.round():四舍五入取整
  
• Math.ceil():向上取整
  
• Math.floor():向下取整
  
• Math.abs():绝对值
  
• Math.pow():幂
  
• Math.sqrt():开方
  
• Math.max():最大值
  
• Math.min():最小值
  
• Math.PI:圆周率
  
• Math.E:自然对数的底数
  

8.时间对象

8-1创建时间对象

1. //不传参数，表示当前的北京时间
2. var date = new Date()
3. console.log(date);//自动转为字符串
5. //new Date传参
6. //1个参数   毫秒数
7. var date1 = new Date(1000)
8. console.log(date1);//1970-1-1 08:00:01
9. //都是从1970年1月1日开始计算的，因为中国是东八区，所以是8小时
10. //2个参数   年 月
11. var date2 = new Date(2020,10)//月份是从0开始的
12. console.log(date2);//2020-11-01 08:00:00
13. //3个参数   年 月 日
14. var date3 = new Date(2020,10,10)
15. console.log(date3);//2020-11-10 08:00:00
16. //后面的时 分 秒依次类推
19. //new Date传字符串
20. var date8 = new Date('2020-11-10 10:10:10')
21. console.log(date8);//2020-11-10 10:10:10
22. var date9 = new Date('2020/11/10 10:10:10')
23. console.log(date9);//2020-11-10 10:10:10

复制代码

8-2 时间对象的常用方法

• getFullYear() 获取年份
  
• getMonth():获取月份
         返回的数字是0-11 ，对应的月份是1-12月
  
• getDate():获取日期
  
• getDay():获取星期
         周日对应的是0 周一到周六：1-6
  
• getHours():获取小时
  
• getMinutes():获取分钟
  
• getSeconds():获取秒
  
• getMilliseconds():获取毫秒
  
• getTime():获取时间戳
         是间隔1970-1-1 00:00:00的毫秒数，本身不是， 返回的是一串随机数
      //时间戳转换为时间对象
      var date10 = new Date(1605070610100)
  
• setFullYear():设置年份
  
• setMonth():设置月份
  
• setDate():设置日期
  
• setHours():设置小时
  
• setMinutes():设置分钟
  
• setSeconds():设置秒
  
• setMilliseconds():设置毫秒
  
• setTime():设置时间戳
  

8-3 倒计时计时器

• 语法：setTimeout(需要实行的函数，多长时间后实行)
  
  1. var timerId = setTimeout(function() {
  2.     console.log("我执行了")
  3. } , 1000)
  4. console.log(timerId) //1
  6. clearTimeout(timerId) //表示清除计时器timerId

  复制代码
  
  
  • 时间是按照毫秒盘算的，1000毫秒就是一秒钟
    
  • 以是会在页面打开一秒钟以后实行函数
    
  • 只实行一次，之后就不实行了
    
  • 返回值是当前这个定时器是页面中第几个定时器
    
  
  

8-4 隔断定时器

• 语法：setInterval(需要实行的函数，每隔多长时间实行)
  
• 跟上面雷同，只是会每隔一段时间实行这个函数
  
• 清除计时器用clearInterval(返回值)
  

二、BOM

• BOM：浏览器对象模子
  
• 就是一些操纵浏览器的一些本领
  
• 我们可以操纵的内容：
  
  
  
  • 获取一些浏览器的相关信息（窗口的大小）
    
  • 操纵浏览器进行页面跳转
    
  • 获取当前浏览器地址栏的信息
    
  • 操纵浏览器的滚动条
    
  • 浏览器的信息（浏览器的版本）
    
  • 让浏览器出现一个弹出框（alert/confirm/prompt）
    
  
  
• BOM的核心就是window对象
  
• window是浏览器内置的一个对象，里面包罗了操纵浏览器的方法
  

1. 获取浏览器窗口的尺寸

• innerHeight和innerWidth
  
• 这两个方法分别是用来获取浏览器窗口的高度和宽度（包罗滚动条）
  
  1. //获取浏览器的高度
  2. //window可以省略
  3. var windowHeight = window.innerHeight
  4. console.log(windowHeight)
  6. //获取浏览器的宽度
  7. var windowWidth = window.innerWidth
  8. console.log(windowWidth)

  复制代码

2. 浏览器的弹出层

• alert:弹出一个警告框
  
• confirm:弹出一个确认框
  
• prompt:弹出一个提示框
  

3.浏览器的地址信息

• location.href:跳转页面
  
• location.reload():刷新页面
  

4. 浏览器的常见事件

• window.onload:页面加载完成后触发
  
• window.onresize:页面大小发生改变时触发
  
• window.onscroll:页面滚动时触发
  
• window.document.documentElement.scrollTop和window.document.body.scrollTop：都是测量离顶部的间隔（window可以省略）
  
• window.scrollTo() :
  
  
  
  • window.scrollTo(0 , 0) ：表示回到（0，0）这个位置
    
  • window.scrollTo({left:0 , top:0}) :也表示回到顶部
    
     
  
• window.open(“网址”):在一个新的页面打开，原来的页面稳定
  
• window.close():只能是关闭本身的页面
  

5. 浏览器的历史记录

• window中有一个对象叫做history
  
• 是专门用来存储历史记录信息的
  

history.back

• history.back是用来回退历史记录的，就是回到前一个页面
  
  1. window.history.back()

  复制代码
  
  
  • 前提是你要有删一条记录，不然就是不停在这个页面，也不会回退
    
  
  

history.forword

• history.forword是去到下一个历史记录里面，也就是去到下一个页面
  
  1. window.history.forword()

  复制代码
  
  
  • 前提是你要之前有过回退操纵，不然的话你现在就是最后一个页面，没有下一个
    
  
  

6. 浏览器本地存储

6-1 loclocalStorage：永久存储

1. //增
2. localStorage.setItem("age" , "14")
3. //存数据, 两个参数, 第一个是键, 第二个是值
4. //只能存储字符串，如果要存储对象，那么可以使用`JSON`字符串
5. //如果之前的键已经存在，那么会覆盖原来的值，也就是修改
7. //取
8. localStorage.getItem("age")
10. //删
11. localStorage.removeItem("age")
13. //清空
14. localStorage.clear()

复制代码

6-2 sessionStorage：临时存储

1. //增
2. sessionStorage.setItem("age" , "14")
3. //取
4. sessionStorage.getItem("age")
5. //删
6. sessionStorage.removeItem("age")
7. //清空
8. sessionStorage.clear()

复制代码

  sessionStorage：关闭页面数据就会消散
  三、DOM

• DOM(Document Object Model)：文档对象模子
  
• 其实就是操纵html中标签的一些本领
  
• 我们可以操纵哪些内容
  
  
  
  • 获取一个元素
    
  • 移除一个元素
    
  • 创建一个元素
    
  • 向页面里面添加一个元素
    
  • 给元素绑定一些事件
    
  • 获取元素的属性
    
  • 给元素添加一些css样式
    
  • …
    
  
  
• DOM的核心对象就是document对象
  
• document对象是浏览器内置的一个对象，里面存储着专门用来操纵元素的各种方法
  
• DOM：页面中的标签，我们通过js获取以后，就把这个对象叫做DOM对象
  

1. 获取一个元素

• document.documentElement：rem,获取的就是html
  
• document.head：获取head
  
• document.body：获取body
  
• getElementById:根据id获取元素
  
• getElementsByClassName:根据class获取元素
         获取到的是一个伪数组，可以使用Array.from()将这个伪数组转为真正的数组
  
• getElementsByTagName:根据标署名获取元素
         他会将这个代码里面的全部的这个标签都获取下来
  
• getElementsByName:根据取得的元素的name属性值获取元素
  
• querySelector:根据选择器获取元素
  
  1. //都是根据之前写style样式的方式获取
  2. var items = document.querySelector(".newItem")
  3. var items = document.querySelector("#box")
  4. //注意：这个只能获取第一次出现的对象
  5. //下面那个就可以获取所有的指定对象

  复制代码
• querySelectorAll:根据选择器获取元素
  

2. 操纵元素属性

2-1 操纵原生属性

1. <body>
2.     <div id = "box">hello</div>
3.     <input type = "text" id = "password">
5.     <script>
6.         box.innerHTML = "world"   //这个会将id为box的div里面的内容改为"world"
7.         password.type = "password"  //这个会将id为password的文本框改为密码框
8.     </script>
9. </body>

复制代码

  注意：这些都是通过id来修改里面的属性
  2-2 自界说属性

1. <body>
2.     <ul>
3.         <li>111</li>
4.         <li>222</li>
5.         <li>333</li>
6.         <li>444</li>
7.     </ul>
9.     <div id = "box" nb = "222"></div>
10.     <script>
11.         //自定义属性有两种方式
12.         //第一种
13.         //setAttribute(设置属性)、getAttribute(获取属性的值)、removeAttribute(删除属性)
14.         var itmes = document.getElementsByTagName("li")
15.         for (var i = 0 ; i < itmes.length ; i++) {
16.             itmes[i].setAttribute("index" , i)//这样给每个li的标签都添加了一个名为"index"的属性，并且值为"i"
17.         }
18.         
19.         //第二种方法(比较推荐，主流，主要是为了方便区分自己定义的属性和原生属性)
20.         //他会以"data-*****"的方式出现，便于区分
21.         var oitmes = document.getElementsByTagName("li")
22.         for (var i = 0 ; i < oitmes.length ; i++) {
23.             oitmes[i].dataset.index = i  //这样给每个li的标签都添加了一个名为"data-index"的属性，并且值为"i"
24.         }
25.         
26.         //想要删除这个属性的话用下面的方法
27.         delete box.dataset.nb
28.     </script>
29. </body>

复制代码

  注意：一般都是用下面的方法，比力常用
  3. 操纵元素文本内容

• innerHTML：获取元素内部的内容,包括标签
  
• innerText：获取元素内部的内容,不包括标签
  
• value：获取表单元素的值
  

4. 操纵元素样式

• 行内元素
  
  1. //只能行内样式方法，style --读写
  2. box.style.width = 100px
  3. console.log(box.style["background-color"]) //不能直接"."要使用[]
  4. console.log(box.style.backgroundColor) //或者使用驼峰命名法

  复制代码
• 内部样式，外部样式
  
  1. //内部样式,外部样式，行内getComputedStyle 获取，不能赋值写样式
  2. var obox = document.getElementById("box")
  3. var res = getComputedStyle(obox)["background-color"]
  4. var res = getComputedStyle(obox).backgroundColor

  复制代码
        注意：只能获取，不能修改样式，但是上面那种方式可以修改样式
  

5. 操纵元素类名

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <meta charset="UTF-8">
5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
6.     <title>Document</title>
7.     <style>
8.         .item{
9.             width: 100px;
10.             height: 100px;
11.             background-color: red;
12.             color: black;
13.             border-radius: 10px;
14.         }
15.     </style>
16. </head>
17. <body>
18.     <div id = "box" class = "item item1 item2">hello world</div>
20.     <button id = "btn">click</button>
22.     <script>
23.         //.className 可以获取到元素的所有样式
24.         //.className 可以设置元素的样式
26.         console.log(box.className)
28.         box.className = "item item1"//这样会覆盖前面的样式
29.         box.className += " item2"//注意要有空格，否则会跟前面的样式合并
31.         //classList 是一个类数组对象，里面存放着元素的所有样式
33.         console.log(box.classList)
35.         box.classList.add("item3")//添加样式
36.         box.classList.remove("item1")//移除样式
37.         // box.classList.toggle("item")//切换样式，如果有就移除，如果没有就添加
39.         btn.onclick = function(){
40.             box.classList.toggle("item")
41.         }
42.     </script>
43. </body>
44. </html>

复制代码

6. DOM节点

• DOM的节点一般分为常用的三大类元素节点、文本节点、属性节点
  
• 什么是分类，好比我们在获取元素的时间，通过各种方法获取到的我们叫做元素节点（标签节点）
  
• 好比我们标签里面写的文字，那么就是文本节点
  
• 写在每一个标签上的属性，就是属性节点
  

6-1 元素节点

• 我们通过getElement...获取到的都是元素节点
  

6-2 属性节点

• 我们通过getAttribute获取到的就是属性节点
  

6-3 文本节点

• 我们通过innerText获取到的就是元素的文本节点
  

6-4 获取节点的方式

• childNodes和children
         childNodes属性返回指定节点的子节点聚集
      children属性返回指定节点的子元素聚集
  
• firstChild和firstElementChild
         firstChild属性返回指定节点的第一个子节点
  firstElementChild属性返回指定节点的第一个子元素
  
• lastChild和lastElementChild
         lastChild属性返回指定节点的最后一个子节点
  lastElementChild属性返回指定节点的最后一个子元素
  
• previousSibling和previousElementSibling
         previousSibling属性返回指定节点的前一个兄弟节点
  previousElementSibling属性返回指定节点的前一个兄弟元素
  
• nextSibling和nextElementSibling
         nextSibling属性返回指定节点的后一个兄弟节点
  nextElementSibling属性返回指定节点的后一个兄弟元素
  
• parentNode和parentElement
         parentNode属性返回指定节点的父节点
      parentElement属性返回指定节点的父元素
  

1. <body>
2.     <div id="box">
3.         kerWin
4.         <p>111</p>
5.         <!-- 我是注释 -->
6.     </div>
8.     <script>
9.             // 1.\n
10.             // kerWin
11.             // \n
12.             // 2.<p>111</p>
13.             // 3.\n
14.             
15.             // 4.<!-- 我是注释 -->
16.             // 5.\n
18.         //childNodes属性   vs   children属性
19.         //childNodes属性返回指定节点的子节点集合
20.         //children属性返回指定节点的子元素集合
21.         console.log(box.childNodes)//返回所有节点
22.         console.log(box.children)//返回所有元素
24.         //firstChild   vs   firstElementChild
25.         //firstChild属性返回指定节点的第一个子节点
26.         //firstElementChild属性返回指定节点的第一个子元素
27.         console.log(box.firstChild)//返回第一个节点
28.         console.log(box.firstElementChild)//返回第一个元素
30.         //lastChild   vs   lastElementChild
31.         //lastChild属性返回指定节点的最后一个子节点
32.         //lastElementChild属性返回指定节点的最后一个子元素
33.         console.log(box.lastChild)//返回最后一个节点
34.         console.log(box.lastElementChild)//返回最后一个元素
36.         //previousSibling   vs   previousElementSibling
37.         //previousSibling属性返回指定节点的前一个兄弟节点
38.         //previousElementSibling属性返回指定节点的前一个兄弟元素
39.         console.log(box.previousSibling)//返回前一个兄弟节点
40.         console.log(box.previousElementSibling)//返回前一个兄弟元素
42.         //nextSibling   vs   nextElementSibling
43.         //nextSibling属性返回指定节点的后一个兄弟节点
44.         //nextElementSibling属性返回指定节点的后一个兄弟元素
45.         console.log(box.nextSibling)//返回后一个兄弟元素
46.         console.log(box.nextElementSibling)//返回后一个兄弟元素
48.         //parentNode   vs   parentElement
49.         //parentNode属性返回指定节点的父节点
50.         //parentElement属性返回指定节点的父元素
51.         console.log(box.parentNode)//返回父节点
52.         console.log(box.parentElement)//返回父元素
54.         
55.     </script>
56.     </script>
57. </body>
58. </html>

复制代码

6-5 节点操纵

• 创建节点
  
  1. //createElement("节点")：创建节点
  2. var odiv = document.createElement("div")
  3. //可以对节点进行任意操作
  4. odiv.className = "aaa"
  5. odiv.id = "aaa"

  复制代码
• 插入节点
  
  1. //appendChild()方法将一个节点添加到指定父节点的子节点列表的末尾
  2. box.appendChild(odiv)
  3. //box.insertBefore(要插入的节点，谁的前面)
  4. //表示在box里面的"谁的前面"插入一个节点
  5. box.insertBefore(odiv , box1)

  复制代码
• 删除节点
  
  1. //删除节点
  2. box.removeChild(box1)
  3. //删除自己以及自己的后代
  4. box.remove()

  复制代码
• 替换节点
  
  1. //replaceChild()方法用一个新节点替换指定父节点的一个子节点
  2. //replaceChild(新节点,指定节点)
  3. box.replaceChild(obox,box1)

  复制代码
• 复制节点
  
  1. //cloneNode()方法复制一个节点
  2. //cloneNode(true)复制节点及其所有子节点
  3. var obox2 = obox.cloneNode(true)
  4. box.appendChild(obox2)

  复制代码

6-6 节点属性

nodeTypenodeNamenodeValue元素节点1大写标署名null属性节点2属性名属性值文本节点3#text文本内容 6-7 获取元素尺寸

• offsetWith和offsetHeight
  
  
  
  • offsetWith：获取的元素内容 + padding + border的宽度
    
  • offsetHeight：获取的元素内容 + padding + border的高度
    
  
  
• clientWidth和clienHeight
  
  
  
  • clienWidth：获取的是元素内容 + padding的宽度
    
  • clientHeight：获取的是元素内容 + padding的高度
    
  
  

注意：

• 获取到的尺寸是没有单元的数字
  
• 当元素在页面中不占未知的时间，获取到的是0
  

6-8 获取元素偏移量

• offsetLeft和offsetTop
  
  
  
  • offsetLeft：获取的是元素间隔左侧的间隔
    
  • offsetTop：获取的是元素间隔顶部的间隔
    
         注意：
      参考点： 是定位父级
      假如父级元素都没有定位，偏移量相对于body
     
  
• clientLeft和clientTop
  
  
  
  • clientLeft：间隔左边框的间隔
    
  • clienTop：间隔上边框的间隔
    
  
  

6-9 获取可视窗口的尺寸

• innerWidth和innerHeight
  
• document.documentElement.clientWidth和document.documentElement.clientHeight
         注意：
      第一个：访问的尺寸含有滚动条的宽度
      第二个：访问的尺寸不包罗滚动条的宽度
  

7. 事件

• 一个事件由什么东西组成
  
  
  
  • 触发谁的事件：事件源
    
  • 触发什么事件：事件范例
    
  • 触发以后做什么：事件处理函数
    
  1. var odiv = document.querySelector("div")
  3. odiv.onclick = function() {
  4.     console.log("你点击了div")
  5. }
  6. //谁来触发事件 =>  odiv  => 这个事件的事件源就是odiv
  7. //触发什么事件 => onclick  => 这个事件类型就是click
  8. //触发之后做什么 => function(){}  => 这个事件的处理函数
  9. //每次点击div的时候都会调用里面的函数

  复制代码
  
  

7-1 初识事件

• dom0 范例 --后面会覆盖前面的
  
  1. box.onclick = function() {
  2.     alert("1111")
  3. }

  复制代码
• dom2 范例 – 绑定多个事件处理函数，按照顺序实行
  
  1. box2.addEventListener("click",function() {
  2.         alert("1111")
  3. })
  5. box2.addEventListener("click",function() {
  6.         alert("2222")
  7. })

  复制代码

7-2 事件解绑

• dom0 范例 --dom节点.onclick = null
  
  1. box.onclick = null

  复制代码
• dom2 范例 --dom节点.removeEventListener(“click”,function() {})
  
  1. function handler() {
  2.     console.log("1111")
  3.     //解绑事件
  4.     this.removeEventListener("click", handler)
  5. }
  6. //事件触发
  7. btn.addEventListener("click" , handler)

  复制代码

7-3 事件范例

• 鼠标事件
  
  
  
  • click：单击实行
    
  • dblclick：双击实行
    
  • contextmenu：右键菜单事件
    
  • mousedown：鼠标按下事件
    
  • mouseup：鼠标抬起事件
    
  • mousemove：鼠标移动事件
    
  • mouseenter：鼠标移入事件(在孩子节点里面移入移出不会触发)
    
  • mouseleave：鼠标移出事件(在孩子节点里面移入移出不会触发)
    
  • mouseover：鼠标移入事件(在孩子节点里面移入移出会触发)
    
  • mouseout：鼠标移出事件(在孩子节点里面移入移出会触发)
    
  
  
• 键盘事件
  
  
  
  • keydown：键盘按下事件
    
  • keyup：键盘抬起事件
    
  • keypress：键盘按下事件
    
  
  
• input事件
  
  
  
  • focus：获取核心事件
    
  • blur：失去核心事件
    
  • change：改变事件，当获取核心和失去核心的时间里面的内容不一样才会触发
    
  • input：输入事件，输入内容不一样就触发
    
  • select：选择事件
    
  • submit：提交事件
    
  • reset：重置事件
    
  
  
• 触摸事件(只对移动端有效)
  
  
  
  • touchstart：触摸开始事件
    
  • touchend：触摸结束事件
    
  • touchmove：触摸移动事件
    
  • touchcancel：触摸取消事件
    
  
  

7-4 事件对象

• 浏览器给了我们一个黑盒子，叫做window.event，就是对事件信息的全部描述
  
  
  
  • 好比点击事件
    
  • 你点在了(0,0)位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
    
  • 你点在了(10,10)位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
    
    1. odiv.onclick = function() {
    2.     console.log(window.event.x轴坐标信息)
    3.     console.log(window.event.y轴坐标信息)
    4. }

    复制代码
  
  
• 鼠标事件
  
  
  
  • clientX，clientY：间隔浏览器可视窗口的左上角的坐标值
    
  • pageX，pageY：间隔页面文档流的左上角的坐标值
    
  • offsetX，offsetY：间隔出发元素的左上角的坐标值
               注意：假如当前元素里面还有子元素，那么点击这个子元素也会有值，只是这个值是间隔本身子元素左上的值
    
  
  
• stopPropagation：阻止事件流传
  
  1. fanction fn(evt) {
  2.     evt.stopPropagation
  3. }

  复制代码
• 阻止默认行为
  
  1. document.oncontextmenu = function() {
  2.     console.log("右键单击")
  3.     return false
  4. }

  复制代码

7-5 事件委托

• 就是把我要做的事情委托给别人来做
  
• 由于我们的冒泡机制，点击子元素的时间，也会同步触发父元素的相同事件
  
• 以是我们就可以把子元素的事件委托给父元素来做
  

事件触发

• 点击子元素的时间，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件
  
  1. <body>
  2.     <ul>
  3.         <li>1</li>
  4.         <li>2</li>
  5.         <li>3</li>
  6.     </ul>
  7.    
  8.     <script>
  9.         var oul = document.querySelector("ul")
  10.         
  11.         oul.addEventListener("click" , function(e) {
  12.             console.log("我是ul的点击事件，我被触发了")
  13.         })
  14.     </script>
  15. </body>

  复制代码
  
  
  • 像上面的代码，当你点击ul的时间肯定会被触发
    
  • 但是当你点击li的时间，也会触发
    
  
  

target

• target这个属性是事件对象里面的属性，表示你点击的目标
  
• 当你触发点击事件的时间，你点击在哪个元素上，target就是哪个元素
  
• 这个target也不兼容，在IE下要使用srcElement
  
  1. <body>
  2.     <ul>
  3.         <li>1</li>
  4.         <li>2</li>
  5.         <li>3</li>
  6.     </ul>
  7.    
  8.     <script>
  9.         var oul = document.querySelector("ul")
  10.         
  11.         oul.addEventListener("click" , function(e) {
  12.             e = e || window.event
  13.             var target = e.target || e.srcElement
  14.             console.log(target)
  15.         })
  16.     </script>
  17. </body>

  复制代码
  
  
  • 上面的代码，当你点击ul的时间，target就是ul
    
  • 当你点击在li上面的时间，target就是li
    
  
  

8. 正则表达式

• 字面量 //
  
  1. var reg1 = /abc/;

  复制代码
• **构造函数 **
  
  1. var reg2 = new RegExp('abc');

  复制代码
  例子：
  
  1. <script>    // 正则表达式    //js复杂范例    // 1. 字面量  //    var reg1 = /abc/;
  2.     console.log(reg1);    // 2. 构造函数     var reg2 = new RegExp('abc');
  3.     console.log(reg2);    //失去核心时触发onblur    mytext.onblur = function() {            console.log(mytext.value);        //test : 测试是否匹配        console.log(reg1.test(mytext.value));    }</script>

  复制代码

8-1 元字符

• \d： 匹配一个数字字符。等价于 [0-9]。
         \d\d：表示就要包罗两个数字字符
      里面的内容可以是字符串数字，也可以是数字
  
• \D ：匹配一个非数字字符。等价于 ![0-9]。
  
• \s ：匹配一个空白字符，包括空格、缩进 、制表符、换页符和换行符。
  
• \S ：匹配一个非空白字符。等价于 ![\s]。
  
• \w ：匹配包括下划线的任何单词字符。等价于’[A-Z、a-z、0-9、_ ]'。
  
• \W ：匹配任何非单词字符。等价于 ‘![A-Za-z0-9_]’。
  
• . ： 匹配恣意内容（换行符不算）
         注意：要满是换行符才不算，如：\n\n\n，返回false
      假如是ab\ncd，返回的还是true
  
• \ ：转义字符
         像上面那个假如写成\.就表示一个普通的.，而不是元字符
  

1. <body>
2.     <script>
3.         // 1. \d :匹配一个数字字符。等价于 [0-9]。
4.         var reg = /\d/
5.         console.log(reg.test('1')) // true
6.         console.log(reg.test('a')) // false
7.         console.log(reg.test('1a')) // true
8.         console.log(reg.test('a1')) // true
10.         // 2. \D :匹配一个非数字字符。等价于 [^0-9]。
11.         var reg = /\D/
12.         console.log(reg.test('1')) // false
13.         console.log(reg.test('a')) // true
15.         // 3. \s :匹配一个空白字符，包括空格、制表符、换页符和换行符。
16.         var reg = /\s/
17.         console.log(reg.test(' ')) // true
18.         console.log(reg.test('\t')) // true
20.         // 4. \S ：匹配一个非空白字符。等价于 [^\s]。
21.         var reg = /\S/
22.         console.log(reg.test(' ')) // false
23.         console.log(reg.test('a')) // true
25.         // 5. \w ：匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。
26.         var reg = /\w/
27.         console.log(reg.test('a')) // true
28.         console.log(reg.test('1')) // true
30.         // 6. \W ：匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。
31.         var reg = /\W/
32.         console.log(reg.test('a')) // false
33.         console.log(reg.test('1')) // false
35.         // 7. . :匹配任意内容（换行符不算）
36.         var reg = /zo*/
37.         console.log(reg.test('z')) // true
38.         console.log(reg.test('zo')) // true
40.         // 8. \ :转义字符
41.         var reg = /\./
42.         console.log(reg.test('.')) // true
43.         console.log(reg.test('a')) // false
44.     </script>
45. </body>

复制代码

8-2 界限符

• ^ ：匹配输入字符串的开始位置。
  
• $ ：匹配输入字符串的结束位置。
  

1. <body>
2.     <script>
3.         // 1. ^ ：匹配输入字符串的开始位置。
4.         var reg = /^\d/
5.         console.log(reg.test('aab')) // false
6.         console.log(reg.test('1b')) // true
8.         // 2. $ ：匹配输入字符串的结束位置。
9.         var reg = /\d$/
10.         console.log(reg.test('aab')) // false
11.         console.log(reg.test('a1')) // true
13.         // 3. ^开头结尾$
14.         var reg = /^\d$/
15.         console.log(reg.test('aab')) // false
16.         console.log(reg.test('1')) // true
17.     </script>
18. </body>

复制代码

8-3 限定符

• * :匹配前面的子表达式零次或多次。
  
• + :匹配前面的子表达式一次或多次。
  
• ? :匹配前面的子表达式零次或一次。
  
• {n} :n 是一个非负整数。匹配确定的 n 次。
  
• {n,} :n 是一个非负整数。至少匹配n 次。
  
• {n,m} :最少匹配 n 次且最多匹配 m 次。
         注意：他只能修饰他前面的一个字符，对于再前面的，表示固定的
  

1. <body>
2.     <script>
3.         // 1. * :匹配前面的子表达式零次或多次。
4.         var reg = /zo*/
5.         console.log(reg.test('z')) // true
6.         console.log(reg.test('zo')) // true
8.         // 2. + :匹配前面的子表达式一次或多次。
9.         var reg = /zo+/
10.         console.log(reg.test('z')) // false
11.         console.log(reg.test('zo')) // true
12.         console.log(reg.test('o')) // false
14.         // 3. ? :匹配前面的子表达式零次或一次。
15.         var reg = /zo?/
16.         console.log(reg.test('z')) // true
17.         console.log(reg.test("zozo")) // true
18.         console.log(reg.test("zo")) // true
19.         console.log(reg.test("o")) // false
21.         // 4. {n} :n 是一个非负整数。匹配确定的 n 次。
22.         var reg = /zo{2}/
23.         console.log(reg.test('z')) // false
24.         console.log(reg.test("zo")) // false
25.         console.log(reg.test("zoo")) // true
26.         console.log(reg.test("zooo")) // true
28.         // 5. {n,} :n 是一个非负整数。至少匹配n 次。
29.         var reg = /zo{2,}/
30.         console.log(reg.test('z')) // false
31.         console.log(reg.test("zo")) // false
32.         console.log(reg.test("zoo")) // true
34.         // 6. {n,m} :最少匹配 n 次且最多匹配 m 次。
35.         var reg = /zo{2,3}/
36.         console.log(reg.test('z')) // false
37.         console.log(reg.test("zo")) // false
38.     </script>
39. </body>

复制代码

8-4 特别符号

• () :整体
  
• | :或
         注意：他表示是他左右两边的整体字符，不是一个
      var reg = /abc | ddd/
      表示含有abc或者ddd字符串
  
• [] :字符集。匹配包罗的任一字符。
         [0-9]：表示匹配数字0、1、2、3、4、5、6、7、8、9中的恣意一个字符
  
• [^] :排除字符集。匹配未包罗的任何字符。
  

1. <body>
2.     <script>
3.         // 1. () :匹配括号内的表达式，也表示一个组。
4.         var reg = /(abc){2}/
6.         console.log(reg.test('abc')) // false
7.         console.log(reg.test('abcabc')) // true
9.         // 2. | :表示或。
10.         var reg = /abc|cba/
12.         console.log(reg.test('abc')) // true
13.         console.log(reg.test('cba')) // true
14.         console.log(reg.test('ab')) // false
16.         // 3. [] :字符集。匹配包含的任一字符。
17.         var reg = /[abc]/
19.         console.log(reg.test('a')) // true
20.         console.log(reg.test('b')) // true
21.         console.log(reg.test('d')) // false
23.         // 4. [^] :排除字符集。匹配未包含的任何字符。
24.         var reg = /[^abc]/
26.         console.log(reg.test('a')) // false
27.         console.log(reg.test('b')) // false
28.         console.log(reg.test('d')) // true
29.     </script>
30. </body>

复制代码

8-5 捕捉exec

   语法：reg.exec(“字符串”)
  标识符：（他是写在正则表达式的外面的，如：/\d/g）

• g ：表示全局匹配。
  
• i ：表示不区分大小写。
  
• m ：表示多行匹配。
  
• u ：表示使用unicode码的模式进行匹配。
  
• y ：表示粘性匹配。
  

8-6 正则与字符串方法

• 字符串.replace() : 替换与正则表达式匹配的子串。
  
  1. var str = 'asdfadafdsaf'
  2. //正则表达式后面加了一个"g",表示所有的，全局的
  3. var newstr = str.replace(/a/g , "*")
  4. console.log(newstr) //*sdf*d*fds*f

  复制代码
• 字符串.search() : 检索与正则表达式相匹配的值。
         不管是不是全局都只能检索到第一个出现的字符
     
  1. var str = 'asdfadafdsaf'
  2. var newstr = str.search(/a/g)
  3. //如果是表达式里面没出现的就是-1
  4. console.log(newstr) //0
  5. console.log(str.search(/ax/)) //-1

  复制代码
• 字符串.match() : 找到一个或多个正则表达式的匹配。
  
  1. var datestr = "time is from 2029-01-01 to 2029-12-31"
  2. console.log(datestr.match(/\d{4}-\d{1,2}-\d{1,2}/g)) //["2029-01-01", "2029-12-31"]

  复制代码

9. this指向

改变this指向：

• call：实行函数，并改变this指向为函数的第一个参数
         注意：支持多个参数
  
• apply：实行函数，并改变this指向为函数的第一个参数
         注意：只支持两个参数，第二个参数是一个数组
  
• bind：改变this指向为函数的第一个参数，不会主动实行函数
         注意：支持多个参数，还要手动实行
  

1. <body>
2.     <button id="btn">click</button>
3.     <script>
4.         // call apply bind
6.         var name = "111"
8.         var obj1 = {
9.             name : "obj1",
10.             getName :function(a , b ,c) {
11.                 console.log("getName1" , this.name)
12.                 console.log("参数" , a, b, c)
13.             }
14.         }
16.         var obj2 = {
17.             name : "obj2",
18.             getName :function(a , b ,c) {
19.                 console.log("getName2" , this.name)
20.                 console.log("参数" , a, b, c)
21.             }
22.         }
23.         // call 方法
24.         // 语法：函数.call(谁调用我，参数1，参数2，参数3，...)
25.         // 作用：改变函数的this指向
26.         // 返回值：函数的返回值
27.         obj1.getName.call(obj2, 1, 2, 3)
29.         // apply 方法
30.         // 语法：函数.apply(谁调用我，[参数1，参数2，参数3，...])
31.         // 作用：改变函数的this指向
32.         // 返回值：函数的返回值
33.         obj1.getName.apply(obj2, [1, 2, 3])
35.         // bind 方法
36.         // 语法：函数.bind(谁调用我，参数1，参数2，参数3，...)
37.         // 作用：改变函数的this指向
38.         // 返回值：函数
39.         var fun1 = obj1.getName.bind(obj2, 1, 2, 3)
40.         console.log(fun1)//函数
41.         fun1()//手动执行
43.         btn.onclick = handler.bind(window)
45.         function handler() {
46.             console.log(1111 , this)
47.         }
49.     </script>
50. </body>

复制代码

四、ES6

1. ES6界说变量

let和const关键字

• let和const与var的区别：
  
  
  • let和const不允许重复声明变量
    
  • let和const必须先声明界说才可以使用
    
  • let和const的块级作用域只要是{}里面的都是，而var只有函数里面才是
    
  
  
• let和const的区别：
  
  
  • let可以只声明不赋值，而const必须要赋值，const是界说一个常量，是不能更改的
    
  • 注意：const界说一个对象，然后改变对象里面的元素内容是可以的，由于堆栈问题，cosnt只是存储的一个地址，地址并没有改变，对象里面的内容是存在堆里面
    
  
  

2. ES6的箭头函数

   语法： var test = () => {}
  可以省略function，变成=>
  

• 只有一个参数时，可以省略()
  
• 函数体只有一句话或者只有返回值的时间，可以省略{}
  
• 函数体只有一句return时，可以省略return
  
• 注意假如返回的是一个对象范例的时间，省略了return和{}，要在对象的{}的外面加上一个()，防止把对象的{}当成了函数的
  
• 没有arguments
         arguments：是函数里面的一个伪数组，当你界说函数而没有设置形参的时间，而你调用函数时，传入了参数，想要获取这个参数就可以用arguments[0]、arguments[1]....获取
  
• 箭头函数没有this，或者说箭头函数的this是父级作用域的
  

3. ES6的解构赋值

• 快速的从对象和数组中获取里面的成员
  
  1. var arr = ['a' , 'b' , 'c']
  2. //注意只能是按照顺序取出
  3. let [x , y , z] = arr
  4. console.log(x , y , z) // a  b  c
  6. //快速换值
  7. var a = 10
  8. var b = 20
  9. var [a , b] = [b , a]//这样a=20，b=10
  11. var obj = {
  12.     name : 'zhangsan',
  13.     age : 20 ,
  14.     location : 'jiangxi'
  15. }
  16. //这里要一一对应，不然拿不出来，前面的key要一样
  17. //这里最后的location:mylocation就是重命名，将location的名字改为mylocation，那之前的location就不能调用了
  18. let {name , age , location:mylocation} = obj
  19. console.log(name , age , mylocation) //这里就不能用location了，因为没有被定义
  21. //复杂对象类型
  22. var obj = {
  23.             name: '张三',
  24.             age: 18,
  25.             location: {
  26.                 city: '北京',
  27.                 province: '北京'
  28.             },
  29.             hobbies: ['唱', '跳', 'rap']
  30.         }
  32. var {name, age, location: {city, province}, hobbies: [hobby1, hobby2, hobby3]} = obj
  33. console.log(name, age, city, province, hobby1, hobby2, hobby3);//张三 18 北京 北京 唱 跳 rap

  复制代码

4. ES6的睁开运算符

• ... ：睁开运算符(不管是数组还是对象都可以睁开)
         在对象里面，假如key和value一样可以省略value，好比：{name:name};这样可以简写成{name}
     
  1. var a = [1 , 2 , 3]
  2. var b = [4 , 5 , 6]
  3. var c = [...a , ...b]
  4. console.log(c)//[1, 2, 3, 4, 5, 6]
  6. var obj1 = {
  7.     name : '张三' ,
  8.     age : 18 ,
  9.     sex : '男'
  10. }
  12. //只是展开obj1里面的内容存到obj2中，如果有的内容一样那么就会被覆盖
  13. var obj2 = {
  14.     ...obj1 ,
  15.     name : '李四' ,
  16.     hobby : '唱歌'
  17. }
  19. console.log(obj2);//{name: "李四", age: 18, sex: "男", hobby: "唱歌"}

  复制代码

5. ES6模块化语法

• export导出
  
  1. // 方式1：声明时导出
  2. export const name = 'Alex';
  3. export function sum(a, b) { return a + b; }
  5. // 方式2：统一导出
  6. const PI = 3.14;
  7. const multiply = (x, y) => x * y;
  8. export { PI, multiply };
  10. // 方式3：重命名导出（用as重命名可以避免不同js里面的函数或者变量名相同的情况）
  11. export { PI as π, multiply as mul };
  13. // 一个模块只能有一个默认导出
  14. export default class Calculator {
  15.   // ...
  16. }
  18. // 或
  19. const utils = { /* ... */ };
  20. export default utils;

  复制代码
• import导入
  
  1. //1. 导入命名导出
  2. import { sum, PI } from './math.js';
  3. import { sum as add, PI as π } from './math.js'; // 重命名
  4. import * as math from './math.js'; // 整体导入
  6. //2.导入默认导出
  7. import Calculator from './calculator.js';
  8. import calc from './calculator.js'; // 任意命名

  复制代码

   注意：
  

• 文件扩展名：浏览器中需明确写.js扩展名
  
• 路径规范：
  
  
  
  • 相对路径：./ 或 ../
    
  • 绝对路径：以/开头
    
  • 第三方模块：直接写包名（需设置）
    
  
  
• 严格模式：模块主动启用严格模式
  
• 浏览器使用：需添加type="module"
  
  1. <script type="module" src="app.js"></script>

  复制代码
• 跨域限定：需设置CORS或使用本地服务器
  

  五、面向对象

1. 对象基础

1-1 创建对象

1. // 字面量创建
2. const obj = {
3.   name: 'John',
4.   sayHi() {
5.     console.log(`Hi, ${this.name}`);
6.   }
7. };
9. // new Object() 创建
10. const obj2 = new Object();
11. obj2.age = 30;

复制代码

1-2 属性访问

1. // 点语法
2. console.log(obj.name);
4. // 方括号语法
5. console.log(obj['name']);

复制代码

2. 构造函数

2-1 根本用法

1. function Person(name, age) {
2.   this.name = name;
3.   this.age = age;
4.   
5.   this.introduce = function() {
6.     console.log(`I'm ${this.name}, ${age} years old`);
7.   };
8. }
10. const p1 = new Person('Alice', 25);

复制代码

2-2 new关键字的作用

• 创建新空对象
  
• 绑定this到新对象
  
• 主动返回新对象
  

2-3 注意事项

• 首字母要大写
  
• 构造函数不写return
  
• 构造函数不能当成普通函数使用
  

3. 原型(Prototype)

3-1 原型链机制

1. function Animal(name) {
2.   this.name = name;
3. }
4. //用prototype这个可以节省空间
5. Animal.prototype.eat = function() {
6.   console.log(`${this.name} is eating`);
7. };
9. const cat = new Animal('Mimi');
10. cat.eat(); // 通过原型链查找方法
12. //对象.__proto__ === 构造函数.prototype

复制代码

3-2 原型相关方法

1. // 检查原型
2. console.log(Object.getPrototypeOf(cat) === Animal.prototype);
4. // 设置原型
5. const dog = { name: 'Buddy' };
6. Object.setPrototypeOf(dog, Animal.prototype);

复制代码

4. ES6 Class

4-1 类界说

1. class Rectangle {
2.   //构造器函数
3.   constructor(height, width) {
4.     this.height = height;
5.     this.width = width;
6.   }
8.   // 方法
9.   get area() {
10.     return this.calcArea();
11.   }
13.   calcArea() {
14.     return this.height * this.width;
15.   }
17.   // 静态方法
18.   static info() {
19.     console.log('This is a Rectangle class');
20.   }
21. }

复制代码

4-2 继续

1. class Square extends Rectangle {
2.   constructor(side) {
3.     super(side, side);
4.   }
5. }

复制代码

5. 继续

5-1 构造函数继续

1. function student(name , age , classroom) {
2.     //这里就是属性继承，方法没法继承
3.     Person.call(this , name , age)
4.     this.classroom = classroom
5. }

复制代码

5-2 原型链继续

1. function Parent() {
2.   this.name = 'Parent';
3. }
5. Parent.prototype.sayName = function() {
6.   console.log(this.name);
7. };
9. function Child() {}
10. Child.prototype = new Parent();
12. const child = new Child();

复制代码

5-3 组合继续(经典继续)

1. function Parent(name) {
2.   this.name = name;
3. }
5. function Child(name, age) {
6.   Parent.call(this, name); // 继承属性
7.   this.age = age;
8. }
9. //方法继承
10. //Child.prototype = Object.create(Parent.prototype);
11. //Child.prototype.constructor = Child;
12. Child.prototype = new Parent()

复制代码

5-4 ES6类继续

1. class Vehicle {
2.     constructor(wheels) {
3.         this.wheels = wheels;
4.     }
5.     say() {
6.         console.log('aa')
7.     }
8. }
10. //extends继承
11. class Car extends Vehicle {
12.     constructor(wheels, brand) {
13.         //super继承父类里面的元素
14.         super(wheels);
15.         this.brand = brand;
16.     }
18.     //覆盖
19.     say() {
20.         //super.say()//调用父类方法
21.         console.log('bb')
22.     }
23. }

复制代码

六、ajax

• 核心作用：在不重新加载整个页面的情况下，与服务器交换数据并更新部门网页内容
  
• 重要特点：
  
  
  
  • 异步通信
    
  • 基于现有的 Web 标准（HTML, CSS, JavaScript, XML/JSON）
    
  • 提升用户体验
    
  
  
• 传统 Web vs AJAX 应用
     传统 Web 应用AJAX 应用同步请求（阻塞）异步请求（非阻塞）整页刷新局部更新频繁的服务器请求按需获取数据
  

1. 根本用法

1-1 创建 XMLHttpRequest 对象

1. let xhr = new XMLHttpRequest(); // 现代浏览器
2. // 兼容旧版 IE（<= IE6）：
3. // let xhr = new ActiveXObject("Microsoft.XMLHTTP");

复制代码

1-2 设置请求

1. xhr.open(method, url, async);
2. // method: "GET", "POST" 等
3. // url: 请求地址
4. // async: 是否异步（默认 true：异步，false：同步）

复制代码

  注意：假如是true,表示异步可以后面的代码实行了在调用onreadystatechange函数，但是假如是false，假如后面的代码已经实行了，那么onreadystatechange函数就不会实行了，除非将这个函数放在xhr.send()的前面才会调用这个函数再实行后面的代码
  异步效率更高，一般都是异步，用true
  1-3 发送请求

1. /*
2.         get:偏向获取数据
3.         post:偏向提交数据
4.         put:偏向更新数据（全部）
5.         delete:偏向删除信息
6.         patch:偏向部分修改
7.         主要还是前面两个
8. */
9. xhr.send(); // GET 请求
10. xhr.send(data); // POST 请求（可发送表单数据等）

复制代码

1-4 处理响应

1. //注册事件,接受服务器返回的数据
2. xhr.onreadystatechange = function() {
3.   //readyState  0-4:请求未发送 1:请求已发送 2:请求已接收 3:请求处理中4:请求已完成
4.   //status 200-300
5.   //status 404:请求的资源不存在 500:服务器内部错误
6.   if (xhr.readyState === 4 && xhr.status === 200) {
7.     // 处理响应数据
8.     console.log(xhr.responseText); // 文本格式
9.     console.log(xhr.responseXML);  // XML 格式
10.   }
11. };
12. //这个不用判断readyState是否为4，因为他已经要是4才能执行这个函数
13. xhr.onload = function(){
14.             if(xhr.status == 200) {
15.                 console.log(xhr.responseText)
16.             } else if (xhr.status == 404) {
17.                 console.error('请求的资源不存在')
18.             } else if (xhr.status == 500) {
19.                 console.error('服务器内部错误')}
20.         }

复制代码

常见的HTTP状态码

• 200: 乐成
  
• 404: 未找到页面
  
• 500: 服务器内部错误
  

2. 封装ajax

1. //将一个对象函数转化为查询字符串如：a = 1 & b = 2 & c = 3这种形式
2. function queryStringify(obj) {
3.     let str = ''
4.     for (let k in obj) str += `${k}=${obj[k]}&`
5.     return str.slice(0, -1)
6. }
8. //封装ajax
9. function ajax(options) {
10.     let defaultoptions = {
11.         url : '',
12.         method : 'get' ,
13.         async : true,
14.         data : {} ,
15.         headers : {
16.             'Content-Type' : 'application/json'
17.         } ,
18.         success : function () {},
19.         error : function () {}
20.     }
21.     //将传入的参数和默认参数合并
22.     let {url , method, async, data, headers, success, error} = {
23.         ...defaultoptions,
24.         ...options
25.     }
27.     //判断请求方式和数据类型来修改data
28.     //headers['Content-Type']?.indexOf('json') > -1：判断headers中是否有Content-Type并且值为json，这里面的问号表示可选链操作符，意思是如果headers中没有Content-Type，那么就不会执行后面的indexOf方法，不会报错
29.     if(typeof data === 'object' && headers['Content-Type']?.indexOf('json') > -1 && method === 'post') {
30.         data = JSON.stringify(data)
31.     } else {
32.         data = queryStringify(data)
33.     }
35.     //如果是get请求，那么就将数据拼接在url后面
36.     if(/^get$/i.test(method) && data) url += `?${data}`
38.     //发送请求
39.     const xhr = new XMLHttpRequest()
40.     xhr.open(method, url, async)
41.     xhr.onload = function() {
42.         if(!/^2\d{2}$/.test(xhr.status)) {
43.             error(`错误状态码：${xhr.status}`) //如果状态码不是2开头的，就执行error函数
44.             return
45.         }
47.         //执行解析
48.         try {
49.             let res = JSON.parse(xhr.responseText)
50.             success(res)
51.         } catch (err) {
52.             error("解析失败！因为后端返回的结果不是json格式字符串")
53.         }
54.     }
56.     //设置请求头内的信息
57.     for (let k in headers) xhr.setRequestHeader(k, headers[k])
59.     //发送请求
60.     if(/^get$/i.test(method)) {
61.         xhr.send()
62.     } else {
63.         xhr.send(data)
64.     }
65. }
67. //promise封装ajax
68. function pajax(options) {
69.     return new Promise((resolve , reject) => {
70.         ajax({
71.             ...options,
72.             success(res) {
73.                 resolve(res)
74.             } ,
75.             error(err) {
76.                 reject(err)
77.             }
78.         })
79.     })
80. }
82. // export {ajax , pajax}
83. // export default ajax

复制代码

七、Promise

• promise是一个ES6的语法，用来解决回调地狱的问题
         回调地狱：就是指回调函数里面嵌套了回调函数，不停嵌套下去，有很多层
  

1. Promise根本语法

1. // 回调地狱示例
2. doSomething(function(result) {
3.   doSomethingElse(result, function(newResult) {
4.     doThirdThing(newResult, function(finalResult) {
5.       console.log('Final result: ' + finalResult);
6.     }, failureCallback);
7.   }, failureCallback);
8. }, failureCallback);
10. // Promise 是一个构造函数，自己身上有all、reject、resolve 这几个眼熟的方法，原型上有then、catch等同样很眼熟的方法。
11. // 既然是构造函数，那就可以用new关键字生成实例，
12. // 而该构造函数接受一个参数，是函数，并且有两个参数，分别是resolve和reject。
13. // 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。
14. // 实例生成后，可以用then方法分别指定res和rej回调函数。
15. let q = new Promise(function(resolve , reject){
16.     // 异步任务
17.     setTimeout(() => {
18.         // 异步任务成功
19.         resolve('成功的数据');
20.         // 异步任务失败
21.         // reject('失败的数据');
22.     }, 1000);
23. })
25. //q是promise的对象
26. q.then((res) => {
27.     //兑现承诺，执行这个函数
28.     console.log(res);
29. }).catch((err) => {
30.     //拒绝承诺，执行这个函数
31.     console.log(err);
32. })

复制代码

2. Promise的生命周期

• 一个 Promise 有以下三种状态：
  

状态描述pending初始状态，既不是乐成也不是失败fulfilled操纵乐成完成rejected操纵失败

• 状态转换：
  

1. pending -> fulfilled
2. pending -> rejected

复制代码

3. 链式调用

Promise 链的特点：

• 每个 then() 返回新 Promise
  
• 返回值会主动包装成 Promise
  
• 可以通报值到下一个 then()
  

1. let q = new Promise(function(resolve , reject) {
2.     ...
3. })
5. q.then(res => {
6.     return pajax({})
7. }).then(res => {
8.     return pajax({})
9. }).catch(err => {
10.     console.log(...)
11. })

复制代码

4.Promise静态方法

方法描述Promise.all(iterable)全部乐成时返回效果数组，任何一个失败立即拒绝Promise.allSettled(iterable)全部 Promise 完成后返回效果数组（ES2020）Promise.race(iterable)采用第一个完成（乐成/失败）的 Promise 效果Promise.any(iterable)采用第一个乐成的 Promise 效果（ES2021）Promise.resolve(value)返回已解决的 PromisePromise.reject(reason)返回已拒绝的 Promise 示例：Promise.all

1. const promises = [
2.   fetch('/api/data1'),
3.   fetch('/api/data2'),
4.   fetch('/api/data3')
5. ];
7. Promise.all(promises)
8.   .then(results => {
9.     // results 是按顺序的结果数组
10.   })
11.   .catch(error => {
12.     // 任一请求失败立即进入此处
13.   });

复制代码

5.Promise 与 async/await

• async/await是一个es7的语法
  
• 语法：
  
  1. async function fn() {
  2.     const res = await promise对象
  3.     return res
  4. }

  复制代码
• 这个可以把异步代码写的看起来像同步代码
  
• 只要是一个promise对象，那么我们就可以用async/await来写
  
• 只能影响async里面的代码，函数外面的无法影响
  
• 假如需要在内部捕捉错误可以用try/catch
  

例子：

1. // Promise 链式调用
2. function getData() {
3.   return fetchData()
4.     .then(data => processData(data))
5.     .then(result => saveResult(result))
6.     .catch(handleError);
7. }
9. // async/await 版本
10. async function getData() {
11.   try {
12.     const data = await fetchData();
13.     const processed = await processData(data);
14.     return await saveResult(processed);
15.   } catch (error) {
16.     handleError(error);
17.   }
18. }

复制代码

6. Fetch

• Fetch API 提供了现代网络请求解决方案，替代传统的 XMLHttpRequest。
  

6-1 根本使用方法

• GET请求：默认是get请求
  
  1. fetch('https://api.example.com/data')
  2.   .then(response => response.json())
  3.   .then(data => console.log(data))
  4.   .catch(error => console.error('Error:', error));

  复制代码
• POST请求
  
  1. fetch('https://api.example.com/data', {
  2.   method: 'POST',
  3.   headers: {
  4.     'Content-Type': 'application/json',
  5.   },
  6.   //注意这里要按照fetch的格式，是body传入数据，而不是用data
  7.   //而且传入的数据格式要严格按照上面写的格式传入
  8.   body: JSON.stringify({
  9.     name: 'John',
  10.     age: 30
  11.   })
  12. });

  复制代码

6-2 响应对象属性

1. fetch(url).then(response => {
2.   console.log(response.status);    // HTTP 状态码
3.   console.log(response.statusText); // 状态文本
4.   console.log(response.headers);   // 响应头
5.   console.log(response.ok);        // 状态码 200-299 时为 true
6. });

复制代码

6-3 解析不同格式的响应

1. // JSON
2. response.json()
4. // 文本
5. response.text()
7. // Blob（二进制数据）
8. response.blob()
10. // FormData
11. response.formData()
13. // ArrayBuffer
14. response.arrayBuffer()

复制代码

6-4 网络错误处理

1. fetch(url)
2.   .then(res => {
3.     if (res.ok) {
4.               //这里拿不到本来的数据，要先返回json数据，然后到下一个then才能拿到数据，返回的是状态码
5.             return res.json();
6.     } else {
7.         //拒绝请求
8.         return Promise.reject({
9.             status : res.status ,
10.             statusText : res.statusText
11.         })
12.     }
13.   })
14.   .then(res => {
15.     //这里才可以拿到数据
16.     console.log(res)
17.   })
18.   .catch(error => {
19.     console.error('Fetch error:', error);
20.   });

复制代码

7. jsonp

• Jsonp是json的一种"使用模式"，可以让网页从别的域名（网站）获取资料，即跨域读取数据。
  
• 由于同源计谋，才需要这个特别的技术
  
  1. const script = document.createElement('script')
  2. script.src = './kerwin.txt'//这里是要传的地址
  3. document.body.appendChild(script)

  复制代码
• jsonp原理：动态创建script标签，src属性指向没有跨域限定，指向一个接口，接口返回的格式肯定是***()函数表达式，函数的参数就是接口返回的数据
  
• 注意：
  
  
  
  • 后端接口情势必须***()，需要后端配合
    
  • jsonp缺点：
    
    
    
    • 获取了数据之后删除
      
      1. //因为它获取数据是每次都插入了一个script标签，然后获取数据，获取完数据之后就可以将这个标签删除了，直接用onload删除
      2. script.onload = function () {
      3.         script.remove()
      4. }

      复制代码
    • 只能get请求，不能post、put、delete
      
    
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。