diff --git "a/53 \345\276\220\345\205\210\351\221\253/2023.12.14 JavaScript \347\254\224\350\256\260.md" "b/53 \345\276\220\345\205\210\351\221\253/2023.12.14 JavaScript \347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..720b58cb96183ec9e86e0d32f895cd1999b3a484
--- /dev/null
+++ "b/53 \345\276\220\345\205\210\351\221\253/2023.12.14 JavaScript \347\254\224\350\256\260.md"	
@@ -0,0 +1,782 @@
+### 变量
+
+//声明变量
+let 变量名
+//变量赋值
+变量名 = 值
+let 变量名 = 值
+let不可多次声明同一个变量
+//声明多个变量
+let 变量名 = 值,变量2 = 值2...
+
+# 变量命名规则与规范
+
+规则：
+1.不能用关键字
+2.只能有字母，数字，下划线_，$ 组成，且数字不能作为开头
+3.字母严格区分大小写
+规范：
+1.见名知意
+2.小驼峰命名法
+
+# let与var的区别
+
+1.var可以先使用，再声明
+2.var可以重复声明一个变量
+
+### 不使用第三方变量完成交换
+
+n1 = n1 + n2;  300=100+200
+n2 = n1 - n2;  100=300-200
+n2 = n1 - n2;  200=300-100
+
+# 数据类型
+
+Number 数字类型
+JavaScript中的正数，负数，小数等统一称为数字类型
+let num = 10;
+let num2 = 10.12;
+infinity 无穷大，由 n/0 得出
+NaN 不是数字代表一个计算错误，例如"小明"-2，任何对NaN操作的数都得NaN
+Number.MAX_VALUE  范围的最大值
+Number.MIN_VALUE  范围的最小值
+isNaN(数
+String 字符串类型
+通过单引号，双引号或反引号包围的数据都叫字符串，单引号双引号无区别
+let uname = '闪电'
+let ename = "秀六根"
+无论引号还是双引号都必须成双成对
+单引号/双引号可以互相嵌套，但是不能自己嵌套自己（外双内单，外单内双）
+必要时使用转义符\，输出单引号或双引号
+转义符：\'',\,""\t 制表, \n 换行
+字符串拼接的+号，从左到右，+号左右两边只要有字符串就一定是拼接效果
+字符串拼接，除了用+号，还可以用反引号将所有字符串包围起来，然后用 ${} 来表示变量
+例： document.writr(`大家好我叫${name},今年${age}岁了`)
+boolean 布尔型
+两个固定的值，true和false
+undefined 未定义类型
+只有一个值，undefined
+只声明，不赋值的情况下，变量默认为undefined
+null 空类型
+只有一个值，仅仅是一个代表“无”，“空”或“值未知”的特殊值
+与undefined的区别：undifined表示没有值，而null表示赋值了，但内容是空
+使用场景：将来有个变量存放对象，但是对象还没创建好，可以先给个null
+object 引用类型或者复杂类型
+//js是弱数据类型，未赋值之前不知道是那种数据类型
+
+# 查看类型
+
+typeof 运算符可以返回被检测的数据类型，支持两种语法
+typeof x
+typeof(x)
+
+### 数据类型的转换
+
+隐式转换：
+某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
++号两边只要有一个字符串，都会把另外一个转成字符串
+除了+号以外的算数运算符，比如-，*，/等都会把数据转成数字类型
+显式转换：
+类型(数据)
+Number(数据)  //转成数字类型，如果字符串内容有非数字，转换失败时结果为NaN，即不是个数字
+parseInt(数据)  //只保留整数
+parseFlost(数据)  //可以保留小数
+补充
+--
+
+//documen中的输出语句，换行用<br>因为document执行区域为HTML，而在console中用换行符换行
+//``反引号，也称模板字符串，可以让字符换行，换行可以直接被保留，最重要的是反引号支持解析变量，用${变量}表示
+
+---------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+### 常量
+
+const 常量名 = 值
+//不可二次赋值，所以在创建的时候不允许赋值与声明分开
+
+### 运算符
+
+'/'号中js会保留小数，而小数作为浮点数不精准
+3/0 Java会报错，而js不会，因为在js中0做除数是无穷大，Infinity
+
+### 赋值运算符
+
++=，-+，*=，/=，%=
+a +=b  -->  a = a+b
+
+### 自增(一元运算符)
+
+i++,++i,i--,--i
+先加和后加区别：
+++i：先自增在参与运算
+i++：先参与运算在自增
+两者单独使用没区别，i++用的多
+例：
+(i++ + ++i + i)=7
+
+### 比较运算符
+
+,< ,> = ,<= ,== ,=== ,!==
+
+== 为两边值是否相等
+=== 为两边的值与数据类型是否相等
+!== 为两边的值与类型都不等
+比较运算符会隐式转换为数字类型
+undefined==null,true
+undefined===null,false
+NaN 不等于任何值，包括他自己
+
+### 逻辑运算符
+
+&& 逻辑与，并且，两边都true才真
+|| 逻辑或，或者，两边都false才假
+! 逻辑非，取反
+优先级：!>&&>||
+
+### 运算符优先等级
+
+1.括号  ()
+2.一元运算符  ++ --
+3.算数运算符  先*/后+-
+4.关系运算符  > >= < <=
+5.相等运算符  == != === !==
+6.逻辑运算符  先&&后||
+7.赋值运算符  =
+8.逗号运算符  ,
+
+### 判断
+
+if 判断：
+if(条件1){
+    满足条件执行的代码
+}else if(条件2){
+    满足条件执行的代码
+}else{
+    代码
+}
+三元运算符：
+条件?表达式1:表达式2
+Switch 判断：
+switch (数据){
+    case 值1:
+        代码
+        break
+    case 值2:
+        代码
+        break
+    ....
+    default:
+        代码
+        break
+}
+// case 匹配的值必须值和类型全等于，所以用===
+
+### 断点调试
+
+F12，打开sources，选择代码文件
+
+### 循环
+
+循环三要素：变量起始值，终止条件（无终止条件会死循环），变量变化量（自增或自减）
+while 循环:不明确的次数时使用
+while(循环条件){
+    循环体
+}
+for 循环：明确循环次数时使用
+for(let i = 0;i<n;i++){
+    循环体
+}
+退出循环
+break :退出整个循环
+continue :退出本次循环，继续下一次循环
+// 控制台重复内容会叠加在一起
+
+### 数组
+
+1.声明数组
+let 数组名 = [数据1,数据2,....]
+2.取值
+数组名[索引值]
+js数组索引从0开始
+3.数组的遍历
+for(let i = 0;i<数组名.length;i++){
+    数组名[i]
+}
+// js的数组长度不固定，类型也不固定，可以直接 数组名[索引值] = xx 进行赋值
+// 取一个数组不存在的索引时，不会报错，而是会取到undefined
+
+# 数组的操作
+
+数组名.length  获取数组长度
+数组名.push()  动态向数组末尾添加一个或多个数据，并返回该数组的新长度
+arr.push(数据1,数据2,...)
+
+数组名.unshift()  动态向数组开头添加一个或多个数据，并返回该数组的新长度
+arr.unshift(数据1,数据2,...)   
+
+数组名.pop() 删除数组中最后一个元素，并返回该元素的值
+arr.pop()         
+数组名.shift() 删除数组中第一个元素，并返回该元素的值
+arr.shift()
+数组名.splice(起始索引值,删除个数)  动态删除数组中指定元素，并返回该元素的值 
+arr.splice(2,1)  从索引2开始往后删除1个元素
+//如果不选删几个元素，则会从起始位置删除到最后
+
+### 数学方法
+
+Math.random()  取[0,1)随机数
+Math.floor()   向下取整
+
+### 标签
+
+CSS中#表示id，.表示class
+而在js中：
+
+document.getElementById('id')  可获取HTML中的id
+1.let a1Div = document.getElementById('a1')
+2.let a2Div = document.querySelector('#a2')
+  let a3Div = document.querySelector('.a3')
+
+//因为class元素可重复命名，存在多个元素，取对应的元素第一个
+
+3.let a4Div = document.querySelectorAll('.a4')
+
+// 获取class的全部元素
+   innerHtml：
+
+作用1：取出容器中的内容包括HTML
+  console.log(aiDiv.innerHtml)
+作用2：将内容赋值给容器，内容可以包括HTML
+  a2Div.innerHtml = '222,'
+
+innerText:与innerHtml相似，但不包含HTML
+
+### 补充
+
+js数组特点：
+1.长度不确定，可变
+2.类型不确定，可混合
+所以可以随意的添加删除元素，而且允许跳过索引，可以通不存在的索引取数组的值，不报错，取值为undefined
+数组名.reverse()  反转数组
+数组名.sort(排列规则)  排序数组
+num.sort(function(a,b){return a-b})  正序
+num.sort(function(a,b){return b-a})  倒序
+数组名.concat(数组2)  拼接；两个数组，返回新数组
+通用思考：所有的方法，发生作用时，是直接操作原对象，还是产生新的对对象
+
+---------------------------------------------------------------------------------------------------------------------------------------------------
+
+### 函数
+
+声明：
+function 函数名(){
+
+}
+调用：
+函数名()
+//声明的函数必须调用才会真正的被执行
+//我们曾经使用的alert(),parseInt()这种名字后面跟小括号的本质都是函数的调用
+函数的命名规范：
+和变量命名基本一直，字母，数字_$ 不允许数字作为开头
+尽量使用小驼峰命名法
+前缀为动词
+常用动词约定：
+can 判断是否可执行某个动作
+has 判断是否含义某个值
+is  判断是否为某个值
+get 获取某个值
+set 设置某个值
+load 加载某些数据
+
+### 函数的传参
+
+声明：
+function 函数名(形参1,形参2){
+    函数体
+}
+调用：
+函数名(实参1,实参2)
+//形参可以理解为在这个函数声明的变量，实参可以立即为给这个变量赋值
+//开发尽量保持形参和实参个数一致
+传参默认值：
+形参和实参不一一对应也不会报错，但防止出现形参没有赋值，建议给形参加一个默认值
+function 函数名(x = 0,y = '',arr = []){}
+形参比实参多时，多出来的形参为undefined，而实参比形参多时，多出来的实参会存在arguments里
+//默认值只有在确实实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参，否则默认为undefined
+
+### 函数的返回值
+
+函数执行后得到结果，结果是调用者想要拿到的（函数内部不需要输出结果，而是返回结果）
+对执行结果的扩展性更高，可以让其他程序使用这个结果
+关键字 return
+function 函数名(x,y){
+    return x+y
+}
+//在函数中使用return关键字能将内部的执行结果交给外部使用
+//return后面的代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写
+//return函数可以没有return，这种情况函数默认返回值为undefined
+
+### 函数细节补充
+
+两个相同的函数后面会覆盖前面的函数
+js中实参个数和形参个数可以不一致
+函数碰到return就不会往下执行了，函数的结束用return
+
+### 作用域
+
+函数外部let的变量为全局变量
+函数内部的变量为局部变量，只能在当前函数内部访问和修改
+函数的形参也看做局部变量
+坑：
+如果函数内部，变量没有声明，直接赋值，也当做全局变量看，但是强烈不推荐
+访问原则：就近原则
+
+### 匿名函数
+
+没有名字的函数，无法直接使用，分为
+1.函数表达式
+2.立即执行函数
+
+函数表达式：
+将匿名函数赋值给一个变量，并且通过变量名称进行调用，成为函数表达式
+声明：
+let x = function(){函数体}
+调用：
+x()
+//其中形参和实参使用与具名函数一致
+立即执行函数：
+语法1:
+(function(){})();
+语法2：
+(function(){}());
+使用场景：避免全局变量之间的污染
+//多个立即执行函数必须用;隔开，不然会报错
+
+### 逻辑中断
+
+function 函数名(x,y){
+    x = x || 0
+    y = y || 0
+}
+&&  左边为false就短路
+||  左边为true就短路
+短路:只存在于&&和||中，当满足一定条件会让右边代码不执行
+原因：通过左边能得到整个式子的结果，因此没必要载判断右边
+运算结果：无论&&还是||，运算结果都是最后被执行的表达式，一般用在赋值变量
+
+### 类型转化
+
+转化为boolean
+显示转换：
+'',0,undefined,null,false,NaN 转化为布尔值都是false，其余则为true
+隐式转换：
+1.有字符串的加法""+1,结果为"1"
+2.减法-(想大多数数学运算一样)只能用于数字，他会使空字符串""转换为0
+3.null 经过数字转换后会变为0
+4.undefined 经过数字转换之后会变成NaN
+补充
+--
+
+//函数的自动提升，调用可以写在声明之前
+
+## 对象
+
+JavaScript里的一种数据类型，可以理解为一种无序的数据集合；注意数组是有序的数据集合
+
+声明对象:
+let 对象名{
+    成员属性,
+    成员方法,
+        ...
+}
+let 对象名 = new Object()
+对象的属性：信息或特征
+属性名:属性值
+uname:'xx'
+//属性是成双成对出现的，包括属性名和值，他们之间使用:分隔
+//多属性之间用英文,分隔
+//属性是依附在对象上面的变量（外面是变量，对象内是属性）
+//属性名可以用""或''，一般情况下不使用，除非遇到特殊符号如空格，-等
+对象的方法：功能或行为
+方法名:函数表达式()
+eat:function(){}
+//方法是由方法名和函数两部分组成的，他们之间用:分隔
+//多个属性之间使用英文,分隔
+//方法是依附在对象中的函数，函数的参数照常使用
+//方法可以用""或''，一般情况下不使用，除非遇到特殊符号如空格，-等
+//多个成员之间用,间隔
+
+### 对象的操作
+
+如何对一个对象的属性进行增删改查
+查：声明对象，并添加属性后，可以使用.获取对象中属性对应的值，称之为属性访问
+对象名.属性
+改：
+对象名.属性 = 新值
+增：
+对象名.新属性 = 新值
+删：
+delete 对象名.属性
+//改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是修改
+属性的操作分为两种模式：当多次属性或-等属性，.操作就不能使用了，必须用另一种方法
+1.对象名.属性名
+2.对象名['属性名']
+//第二种方式必须加引号
+//一般场景用对象名.属性名，当需要用到变量时用对象或属性名为字符串时才用对象名['属性名']
+方法的操作也分为两种：
+1.对象.方法名()
+2.对象['方法名']()
+
+### 遍历对象
+
+//对象里面是无序的键值对，没有规律，不像素组里面有规律的下标、
+//对象没有像数组一样有length属性，所以无法确定长度
+for in 遍历数组
+let arr = [1,2,3,4]
+for(let key in arr){
+    console.log(k)
+}
+//打印的是数组的下标，但是是字符串，所以不推荐用for in遍历数组
+for in 遍历对象
+let obj = {
+    uname:'xx',
+    age:21
+}
+for(let key in obj){
+    console.log(key)
+    console.log(obj[key])
+}
+//key打印的是对象的属性名'uname','age' 是字符串，所以前面的 对象名['属性'] 必须加引号
+//obj[key]打印的是对象的属性的值,key本身是个变量，代表着带着引号的属性名，所以他本身不带引号
+//一般不用这种方法遍历数组，主要用来遍历对象
+//for in语法中的k是一个变量，在循环过程中依次代表对象的属性名
+//由于k是变量，所以必须使用[]语法解析
+//k是获得对象的属性名，对象名[k]才是获得属性值
+
+
+
+
+
+### 补充
+
+// 键值对：key:value
+// 对象名['属性名'] 的使用场景：如果键名是一个变量，则必须使用[]且不加''
+
+------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+## DOM
+
+### splice:是数组万能方法，任意位置增删改查
+
+删除： 数组名.splice(索引,n)  // 截取从索引值位置起的n个单位并返回
+修改： 数组名.splice(索引,n,要修改的值)  // 将起始索引值位置起的n个单位删除，并添加要修改的值
+增加： 数组名.splice(索引,n,要添加的值)  // 必须选择不存在的索引，数组在尾部添加值，否则为修改
+查询： console.log(数组名.splice(索引,n))  // 截取从索引值位置起的n个单位并返回
+// 修改中操作数n不为1时，则把操作数的n个值删掉，在加上一个修改后的值
+// 添加时，索引超过时只会在数组尾部添加，而不像数组赋值 arr[n] = xx 可以调索引赋值
+
+
+
+### 获取DOM对象
+
+查找元素DOM元素就是利用JS选择页面中标签元素
+
+1.选择匹配的第一个元素
+documen.querySelector('CSS选择器')
+返回CSS选择器匹配的第一个元素，一个HTMLElement对象，如果没有匹配到则返回null
+如： documen.querySelector('#id')
+//获取的DOM对象可以直接操作
+const bon = document.querySelector('bon')
+bon.style.color = 'red'  // 将颜色改成红色
+2.选择匹配的多个元素
+documen.querySelectorAll('CSS选择器')
+返回CSS选择器匹配的NodeList对象集合
+如： documen.querySelectorAll('ul li')
+得到的是一个伪数组，有长度有索引号，但是没有pop(),push()等方法
+想要获取里面的对象，需要遍历(for)数组
+const bon = document.querySelectorAll('bon')
+for(let i = 0;i<bon.length;i++){}
+//哪怕只有一个元素，通过querySelectorAll()返回的都是伪数组
+也可以直接找伪数组特定的值
+const bon = document.querySelectorAll('bon')[0]
+//CSS选择器必须加引号
+
+
+
+### 操作元素文字内容
+
+DMO对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
+
+1.inneText
+添加/修改标签内部文字内容
+显示纯文本，不解析标签
+const bon = document.querySelector('bon')
+bon.innerText = '什么牛魔'
+2.innerHTML
+添加/修改标签内部文字内容
+会解析标签，多标签建议使用模板字符(反引号)
+const bon = document.querySelector('bon')
+bon.innerHTML = `<b>你是什么牛魔</b>`
+
+
+
+### 操作元素常用属性
+
+常见属性如： href,title,src 等
+语法: 对象.属性 = 值
+例:
+const bon = document.querySelector('bon')
+bon.src = './imag001'
+bon.herf = 'www.baidu.com'
+
+
+
+### 操作元素样式属性
+
+1.通过style属性操作CSS
+2.操作类名(className)操作CSS
+3.通过classList操作CSS
+1.通过style属性操作CSS
+语法:  对象.style.样式属性 = '值'
+例如：
+const bon = document.querySelector('bon')
+bon.style.width = '300px'
+bon.style.backgroupColor = 'red'
+bon.style.border = '2px solid blue'
+// 修改样式通过style属性引出
+//如果有连接符-如:backgroup-color 需要转换成小驼峰命名法backgroupColor
+//赋值的时候记得CSS单位 如 px
+2.操作类名(className)操作CSS
+如果修改的样式比较多，直接用style修改比较繁琐，可以通过借助于CSS类名的形式，在CSS里写属性和值，再给某个标签赋予类名
+给元素赋予属性类名，相当于<div class = 'box'></div>
+语法:  元素.className = '类名'  
+例如：
+const bon = document.querySelector('bon')
+bon.className = 'box'
+//由于class是关键词，所以用className代替
+//className是使用新值换旧值（覆盖），所以如果需要添加一个类，需要保留之前的类名 bon.className = 'xxn box'
+3.通过classList操作CSS
+为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
+语法:
+元素.classList.add('类名')  // 添加
+元素.classList.remove('类名')  // 删除
+元素.classList.toggle('类名')  // 切换，有就删掉，没有就添加
+例如：
+const bon = document.querySelector('bon')
+bon.classList.add('xxn')  // 追加xxn类名
+bon.classList.remove('xxn')  // 删除xxn类名
+bon.classList.toggle('xss')  // 切换xss类名，有就删掉，没有就添加
+
+
+
+### 操作表单元素样式
+
+表单很多情况也需要修改熟悉，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
+正常的有属性有取值的 跟其他的标签属性没有任何关系
+语法：
+获取: DOM对象.属性名
+设置: DOM对象.属性名 = 新值
+例如：
+<input type="text" value="请输入">
+const uname = document.querySelector('input')
+uname.value = '用户名'
+uname.type = 'password'
+//innerHTML得不到表单的值，所以才需要用表单.属性名
+表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果为false代表移除该属性
+例如：  disabled,checked,selected
+const ipt = document.querySelector('input')
+ipt.checked = true   // 勾选状态
+const button = document.querySelector('button')
+button.disabled = true  //禁用按钮
+
+
+
+### 自定义属性
+
+标准属性：标签天生自带的属性，比如class,id,title等，或可以直接用.语法操作的属性，比如 disabled,checked,selected
+自定义属性:
+在HTML5中推出来专门的data-自定义属性
+在DOM对象上一律以dataset对象方式获取
+例如：
+
+<div data-xx="1" data-yy="牛魔">1</div>
+const one = document.querySelector('div')
+console.log(one.dataset.id)  // 获取结果为1
+
+### 定时器
+
+能够使用定时器函数重复执行代码
+1.开启定时器
+setInterval(函数,间隔时间)
+setInterval(函数名,间隔时间)
+例如：
+setInterval(function(){console.log('牛魔倒计时')},1000)
+setInterval(getName,1000)
+//间隔时间单位是毫秒
+//函数名不需要加括号
+//定时器返回的是一个id数字
+2.关闭定时器
+let 变量名 = setInterval(函数,间隔时间)   //定时器返回的是一个id数字
+clearInterval(变量名)
+
+
+
+
+
+### CSS选择器
+
+1.用标签做选择器，叫做标签选择器    对标签
+例如：
+h1{
+    color:red
+}
+
+<h1>这是标签</h1>
+2.用类名做选择器    对多个元素
+例如：
+.a1{
+    color:red
+}
+<div class="a1">这是div</div>
+<p class="a1">这是正文</p>
+3.用id做选择器   对单
+例如：
+#b2{
+    color:red
+}
+<div id="b2">这是div</div>
+
+### const常量
+
+const声明的值不能更改，而且const声明变量的时候里面需要初始化
+但是对于引用数据类型，const声明的变量，里面存的不是值，而是地址
+const指向栈地址，栈再指向堆
+所以 const a = [2];  a.push(3)  不报错
+而  a = [4]  会报错
+同样
+const b = document.querySelector('div')
+b.innerText = '321'
+指向的是'div'的位置，修改div的内容不报错
+
+可以从上往下找下级标签，中间用空格间隔，例如：
+const b = document.querySelector('.a li')
+
+
+
+
+
+### 伪类
+
+取第1个值   
+例 取第一个li   li:first-child
+const li = document.querySelector('.a1 li:first-child')
+取第n个值
+例 取第5个li    li:nth-child(5)
+const li2 = document.querySelector('.a1 li:nth-child(5)')
+取第最后一个值 
+例 取最后一个li   li:last-child
+const li3 = document.querySelector('.a1 li:last-child')
+
+
+
+### 生成随机数函数
+
+function getRandom(n,m){
+    return Math.floor(Math.random() * m-n+1)+n
+}
+
+### 补充
+
+//获取元素时，建议从上级往下多级确认//innerHTML,innerText只能获取双标签，如<h1>xx</h1>,<button>提交</button>，获取不到单标签如<input>
+
+
+
+
+
+### 操作表单元素样式
+
+//innerHTML,innerText只能获取双标签，如<h1>xx</h1>,<button>提交</button>，获取不到单标签如<input>
+表单很多情况也需要修改熟悉，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
+正常的有属性有取值的 跟其他的标签属性没有任何关系
+语法：
+获取: DOM对象.属性名
+设置: DOM对象.属性名 = 新值
+例如：
+<input type="text" value="请输入">
+const uname = document.querySelector('input')
+uname.value = '用户名'
+uname.type = 'password'
+//innerHTML得不到表单的值，所以才需要用表单.属性名
+//button比较特殊，他是双标签，可以用innerHTML,innerText
+表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果为false代表移除该属性
+例如：  disabled 禁用表单元素,checked 单选框复选框打钩；下拉框选中,selected
+const ipt = document.querySelector('input')
+ipt.checked = true   // 勾选状态
+const button = document.querySelector('button')
+button.disabled = true  //禁用按钮
+
+
+
+### 自定义属性
+
+标准属性：标签天生自带的属性，比如class,id,title等，或可以直接用.语法操作的属性，比如 disabled,checked,selected
+自定义属性:
+在HTML5中推出来专门的data-自定义属性
+在DOM对象上一律以dataset对象方式获取
+例如：
+
+
+
+ 补充
+
+// 对象.style.display = 'none'    隐藏，用在删除广告等
+// 对象.style.display = 'block'   显示
+
+
+
+### 事件监听
+
+事件是在编程系统内发生的动作或发生的事情，比如在网页上单击一个按钮
+
+事件监听就是、让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出相应，也称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等
+
+语法：
+元素对象.addEventListener('事件类型',要执行的函数)
+例：
+const div = document.querySelector('div')
+div.addEventListener('click',function(){
+    document.write('打印的内容')
+})
+//相当于给div添加一个事件，这个事件可以直接调用,要加括号：
+div.click()
+事件监听三要素：
+1.事件源：那个dom元素被事件触发了，要获取dom元素
+2.事件类型：用什么方式触发，比如单击click，双击dblclick等
+3.事件调用的函数：要做什么事
+//事件监听要加引号
+//函数是点击之后再去执行，每次点击都会执行一次
+
+
+
+### 事件监听的类型
+
+鼠标事件：
+click  鼠标点击
+dblclick  鼠标双击
+mouseenter   鼠标经过
+mouseleave   鼠标离开
+键盘事件：
+keydown  键盘按下触发
+keyup  键盘抬起触发
+
+
+
+### 事件监听版本
+
+DOML0
+事件源.on事件 = function(){}
+DOML2
+事件源.addEventListener('事件',function(){})
+区别：on的方式是一个属性，可以被修改覆盖，多次定义相当于是一个变量重新赋值
+
+
diff --git "a/53 \345\276\220\345\205\210\351\221\253/2023.12.15 JavaScript \347\254\224\350\256\260 .md" "b/53 \345\276\220\345\205\210\351\221\253/2023.12.15 JavaScript \347\254\224\350\256\260 .md"
new file mode 100644
index 0000000000000000000000000000000000000000..720b58cb96183ec9e86e0d32f895cd1999b3a484
--- /dev/null
+++ "b/53 \345\276\220\345\205\210\351\221\253/2023.12.15 JavaScript \347\254\224\350\256\260 .md"	
@@ -0,0 +1,782 @@
+### 变量
+
+//声明变量
+let 变量名
+//变量赋值
+变量名 = 值
+let 变量名 = 值
+let不可多次声明同一个变量
+//声明多个变量
+let 变量名 = 值,变量2 = 值2...
+
+# 变量命名规则与规范
+
+规则：
+1.不能用关键字
+2.只能有字母，数字，下划线_，$ 组成，且数字不能作为开头
+3.字母严格区分大小写
+规范：
+1.见名知意
+2.小驼峰命名法
+
+# let与var的区别
+
+1.var可以先使用，再声明
+2.var可以重复声明一个变量
+
+### 不使用第三方变量完成交换
+
+n1 = n1 + n2;  300=100+200
+n2 = n1 - n2;  100=300-200
+n2 = n1 - n2;  200=300-100
+
+# 数据类型
+
+Number 数字类型
+JavaScript中的正数，负数，小数等统一称为数字类型
+let num = 10;
+let num2 = 10.12;
+infinity 无穷大，由 n/0 得出
+NaN 不是数字代表一个计算错误，例如"小明"-2，任何对NaN操作的数都得NaN
+Number.MAX_VALUE  范围的最大值
+Number.MIN_VALUE  范围的最小值
+isNaN(数
+String 字符串类型
+通过单引号，双引号或反引号包围的数据都叫字符串，单引号双引号无区别
+let uname = '闪电'
+let ename = "秀六根"
+无论引号还是双引号都必须成双成对
+单引号/双引号可以互相嵌套，但是不能自己嵌套自己（外双内单，外单内双）
+必要时使用转义符\，输出单引号或双引号
+转义符：\'',\,""\t 制表, \n 换行
+字符串拼接的+号，从左到右，+号左右两边只要有字符串就一定是拼接效果
+字符串拼接，除了用+号，还可以用反引号将所有字符串包围起来，然后用 ${} 来表示变量
+例： document.writr(`大家好我叫${name},今年${age}岁了`)
+boolean 布尔型
+两个固定的值，true和false
+undefined 未定义类型
+只有一个值，undefined
+只声明，不赋值的情况下，变量默认为undefined
+null 空类型
+只有一个值，仅仅是一个代表“无”，“空”或“值未知”的特殊值
+与undefined的区别：undifined表示没有值，而null表示赋值了，但内容是空
+使用场景：将来有个变量存放对象，但是对象还没创建好，可以先给个null
+object 引用类型或者复杂类型
+//js是弱数据类型，未赋值之前不知道是那种数据类型
+
+# 查看类型
+
+typeof 运算符可以返回被检测的数据类型，支持两种语法
+typeof x
+typeof(x)
+
+### 数据类型的转换
+
+隐式转换：
+某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
++号两边只要有一个字符串，都会把另外一个转成字符串
+除了+号以外的算数运算符，比如-，*，/等都会把数据转成数字类型
+显式转换：
+类型(数据)
+Number(数据)  //转成数字类型，如果字符串内容有非数字，转换失败时结果为NaN，即不是个数字
+parseInt(数据)  //只保留整数
+parseFlost(数据)  //可以保留小数
+补充
+--
+
+//documen中的输出语句，换行用<br>因为document执行区域为HTML，而在console中用换行符换行
+//``反引号，也称模板字符串，可以让字符换行，换行可以直接被保留，最重要的是反引号支持解析变量，用${变量}表示
+
+---------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+### 常量
+
+const 常量名 = 值
+//不可二次赋值，所以在创建的时候不允许赋值与声明分开
+
+### 运算符
+
+'/'号中js会保留小数，而小数作为浮点数不精准
+3/0 Java会报错，而js不会，因为在js中0做除数是无穷大，Infinity
+
+### 赋值运算符
+
++=，-+，*=，/=，%=
+a +=b  -->  a = a+b
+
+### 自增(一元运算符)
+
+i++,++i,i--,--i
+先加和后加区别：
+++i：先自增在参与运算
+i++：先参与运算在自增
+两者单独使用没区别，i++用的多
+例：
+(i++ + ++i + i)=7
+
+### 比较运算符
+
+,< ,> = ,<= ,== ,=== ,!==
+
+== 为两边值是否相等
+=== 为两边的值与数据类型是否相等
+!== 为两边的值与类型都不等
+比较运算符会隐式转换为数字类型
+undefined==null,true
+undefined===null,false
+NaN 不等于任何值，包括他自己
+
+### 逻辑运算符
+
+&& 逻辑与，并且，两边都true才真
+|| 逻辑或，或者，两边都false才假
+! 逻辑非，取反
+优先级：!>&&>||
+
+### 运算符优先等级
+
+1.括号  ()
+2.一元运算符  ++ --
+3.算数运算符  先*/后+-
+4.关系运算符  > >= < <=
+5.相等运算符  == != === !==
+6.逻辑运算符  先&&后||
+7.赋值运算符  =
+8.逗号运算符  ,
+
+### 判断
+
+if 判断：
+if(条件1){
+    满足条件执行的代码
+}else if(条件2){
+    满足条件执行的代码
+}else{
+    代码
+}
+三元运算符：
+条件?表达式1:表达式2
+Switch 判断：
+switch (数据){
+    case 值1:
+        代码
+        break
+    case 值2:
+        代码
+        break
+    ....
+    default:
+        代码
+        break
+}
+// case 匹配的值必须值和类型全等于，所以用===
+
+### 断点调试
+
+F12，打开sources，选择代码文件
+
+### 循环
+
+循环三要素：变量起始值，终止条件（无终止条件会死循环），变量变化量（自增或自减）
+while 循环:不明确的次数时使用
+while(循环条件){
+    循环体
+}
+for 循环：明确循环次数时使用
+for(let i = 0;i<n;i++){
+    循环体
+}
+退出循环
+break :退出整个循环
+continue :退出本次循环，继续下一次循环
+// 控制台重复内容会叠加在一起
+
+### 数组
+
+1.声明数组
+let 数组名 = [数据1,数据2,....]
+2.取值
+数组名[索引值]
+js数组索引从0开始
+3.数组的遍历
+for(let i = 0;i<数组名.length;i++){
+    数组名[i]
+}
+// js的数组长度不固定，类型也不固定，可以直接 数组名[索引值] = xx 进行赋值
+// 取一个数组不存在的索引时，不会报错，而是会取到undefined
+
+# 数组的操作
+
+数组名.length  获取数组长度
+数组名.push()  动态向数组末尾添加一个或多个数据，并返回该数组的新长度
+arr.push(数据1,数据2,...)
+
+数组名.unshift()  动态向数组开头添加一个或多个数据，并返回该数组的新长度
+arr.unshift(数据1,数据2,...)   
+
+数组名.pop() 删除数组中最后一个元素，并返回该元素的值
+arr.pop()         
+数组名.shift() 删除数组中第一个元素，并返回该元素的值
+arr.shift()
+数组名.splice(起始索引值,删除个数)  动态删除数组中指定元素，并返回该元素的值 
+arr.splice(2,1)  从索引2开始往后删除1个元素
+//如果不选删几个元素，则会从起始位置删除到最后
+
+### 数学方法
+
+Math.random()  取[0,1)随机数
+Math.floor()   向下取整
+
+### 标签
+
+CSS中#表示id，.表示class
+而在js中：
+
+document.getElementById('id')  可获取HTML中的id
+1.let a1Div = document.getElementById('a1')
+2.let a2Div = document.querySelector('#a2')
+  let a3Div = document.querySelector('.a3')
+
+//因为class元素可重复命名，存在多个元素，取对应的元素第一个
+
+3.let a4Div = document.querySelectorAll('.a4')
+
+// 获取class的全部元素
+   innerHtml：
+
+作用1：取出容器中的内容包括HTML
+  console.log(aiDiv.innerHtml)
+作用2：将内容赋值给容器，内容可以包括HTML
+  a2Div.innerHtml = '222,'
+
+innerText:与innerHtml相似，但不包含HTML
+
+### 补充
+
+js数组特点：
+1.长度不确定，可变
+2.类型不确定，可混合
+所以可以随意的添加删除元素，而且允许跳过索引，可以通不存在的索引取数组的值，不报错，取值为undefined
+数组名.reverse()  反转数组
+数组名.sort(排列规则)  排序数组
+num.sort(function(a,b){return a-b})  正序
+num.sort(function(a,b){return b-a})  倒序
+数组名.concat(数组2)  拼接；两个数组，返回新数组
+通用思考：所有的方法，发生作用时，是直接操作原对象，还是产生新的对对象
+
+---------------------------------------------------------------------------------------------------------------------------------------------------
+
+### 函数
+
+声明：
+function 函数名(){
+
+}
+调用：
+函数名()
+//声明的函数必须调用才会真正的被执行
+//我们曾经使用的alert(),parseInt()这种名字后面跟小括号的本质都是函数的调用
+函数的命名规范：
+和变量命名基本一直，字母，数字_$ 不允许数字作为开头
+尽量使用小驼峰命名法
+前缀为动词
+常用动词约定：
+can 判断是否可执行某个动作
+has 判断是否含义某个值
+is  判断是否为某个值
+get 获取某个值
+set 设置某个值
+load 加载某些数据
+
+### 函数的传参
+
+声明：
+function 函数名(形参1,形参2){
+    函数体
+}
+调用：
+函数名(实参1,实参2)
+//形参可以理解为在这个函数声明的变量，实参可以立即为给这个变量赋值
+//开发尽量保持形参和实参个数一致
+传参默认值：
+形参和实参不一一对应也不会报错，但防止出现形参没有赋值，建议给形参加一个默认值
+function 函数名(x = 0,y = '',arr = []){}
+形参比实参多时，多出来的形参为undefined，而实参比形参多时，多出来的实参会存在arguments里
+//默认值只有在确实实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参，否则默认为undefined
+
+### 函数的返回值
+
+函数执行后得到结果，结果是调用者想要拿到的（函数内部不需要输出结果，而是返回结果）
+对执行结果的扩展性更高，可以让其他程序使用这个结果
+关键字 return
+function 函数名(x,y){
+    return x+y
+}
+//在函数中使用return关键字能将内部的执行结果交给外部使用
+//return后面的代码不会再被执行，会立即结束当前函数，所以return后面的数据不要换行写
+//return函数可以没有return，这种情况函数默认返回值为undefined
+
+### 函数细节补充
+
+两个相同的函数后面会覆盖前面的函数
+js中实参个数和形参个数可以不一致
+函数碰到return就不会往下执行了，函数的结束用return
+
+### 作用域
+
+函数外部let的变量为全局变量
+函数内部的变量为局部变量，只能在当前函数内部访问和修改
+函数的形参也看做局部变量
+坑：
+如果函数内部，变量没有声明，直接赋值，也当做全局变量看，但是强烈不推荐
+访问原则：就近原则
+
+### 匿名函数
+
+没有名字的函数，无法直接使用，分为
+1.函数表达式
+2.立即执行函数
+
+函数表达式：
+将匿名函数赋值给一个变量，并且通过变量名称进行调用，成为函数表达式
+声明：
+let x = function(){函数体}
+调用：
+x()
+//其中形参和实参使用与具名函数一致
+立即执行函数：
+语法1:
+(function(){})();
+语法2：
+(function(){}());
+使用场景：避免全局变量之间的污染
+//多个立即执行函数必须用;隔开，不然会报错
+
+### 逻辑中断
+
+function 函数名(x,y){
+    x = x || 0
+    y = y || 0
+}
+&&  左边为false就短路
+||  左边为true就短路
+短路:只存在于&&和||中，当满足一定条件会让右边代码不执行
+原因：通过左边能得到整个式子的结果，因此没必要载判断右边
+运算结果：无论&&还是||，运算结果都是最后被执行的表达式，一般用在赋值变量
+
+### 类型转化
+
+转化为boolean
+显示转换：
+'',0,undefined,null,false,NaN 转化为布尔值都是false，其余则为true
+隐式转换：
+1.有字符串的加法""+1,结果为"1"
+2.减法-(想大多数数学运算一样)只能用于数字，他会使空字符串""转换为0
+3.null 经过数字转换后会变为0
+4.undefined 经过数字转换之后会变成NaN
+补充
+--
+
+//函数的自动提升，调用可以写在声明之前
+
+## 对象
+
+JavaScript里的一种数据类型，可以理解为一种无序的数据集合；注意数组是有序的数据集合
+
+声明对象:
+let 对象名{
+    成员属性,
+    成员方法,
+        ...
+}
+let 对象名 = new Object()
+对象的属性：信息或特征
+属性名:属性值
+uname:'xx'
+//属性是成双成对出现的，包括属性名和值，他们之间使用:分隔
+//多属性之间用英文,分隔
+//属性是依附在对象上面的变量（外面是变量，对象内是属性）
+//属性名可以用""或''，一般情况下不使用，除非遇到特殊符号如空格，-等
+对象的方法：功能或行为
+方法名:函数表达式()
+eat:function(){}
+//方法是由方法名和函数两部分组成的，他们之间用:分隔
+//多个属性之间使用英文,分隔
+//方法是依附在对象中的函数，函数的参数照常使用
+//方法可以用""或''，一般情况下不使用，除非遇到特殊符号如空格，-等
+//多个成员之间用,间隔
+
+### 对象的操作
+
+如何对一个对象的属性进行增删改查
+查：声明对象，并添加属性后，可以使用.获取对象中属性对应的值，称之为属性访问
+对象名.属性
+改：
+对象名.属性 = 新值
+增：
+对象名.新属性 = 新值
+删：
+delete 对象名.属性
+//改和增语法一样，判断标准就是对象有没有这个属性，没有就是新增，有就是修改
+属性的操作分为两种模式：当多次属性或-等属性，.操作就不能使用了，必须用另一种方法
+1.对象名.属性名
+2.对象名['属性名']
+//第二种方式必须加引号
+//一般场景用对象名.属性名，当需要用到变量时用对象或属性名为字符串时才用对象名['属性名']
+方法的操作也分为两种：
+1.对象.方法名()
+2.对象['方法名']()
+
+### 遍历对象
+
+//对象里面是无序的键值对，没有规律，不像素组里面有规律的下标、
+//对象没有像数组一样有length属性，所以无法确定长度
+for in 遍历数组
+let arr = [1,2,3,4]
+for(let key in arr){
+    console.log(k)
+}
+//打印的是数组的下标，但是是字符串，所以不推荐用for in遍历数组
+for in 遍历对象
+let obj = {
+    uname:'xx',
+    age:21
+}
+for(let key in obj){
+    console.log(key)
+    console.log(obj[key])
+}
+//key打印的是对象的属性名'uname','age' 是字符串，所以前面的 对象名['属性'] 必须加引号
+//obj[key]打印的是对象的属性的值,key本身是个变量，代表着带着引号的属性名，所以他本身不带引号
+//一般不用这种方法遍历数组，主要用来遍历对象
+//for in语法中的k是一个变量，在循环过程中依次代表对象的属性名
+//由于k是变量，所以必须使用[]语法解析
+//k是获得对象的属性名，对象名[k]才是获得属性值
+
+
+
+
+
+### 补充
+
+// 键值对：key:value
+// 对象名['属性名'] 的使用场景：如果键名是一个变量，则必须使用[]且不加''
+
+------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+## DOM
+
+### splice:是数组万能方法，任意位置增删改查
+
+删除： 数组名.splice(索引,n)  // 截取从索引值位置起的n个单位并返回
+修改： 数组名.splice(索引,n,要修改的值)  // 将起始索引值位置起的n个单位删除，并添加要修改的值
+增加： 数组名.splice(索引,n,要添加的值)  // 必须选择不存在的索引，数组在尾部添加值，否则为修改
+查询： console.log(数组名.splice(索引,n))  // 截取从索引值位置起的n个单位并返回
+// 修改中操作数n不为1时，则把操作数的n个值删掉，在加上一个修改后的值
+// 添加时，索引超过时只会在数组尾部添加，而不像数组赋值 arr[n] = xx 可以调索引赋值
+
+
+
+### 获取DOM对象
+
+查找元素DOM元素就是利用JS选择页面中标签元素
+
+1.选择匹配的第一个元素
+documen.querySelector('CSS选择器')
+返回CSS选择器匹配的第一个元素，一个HTMLElement对象，如果没有匹配到则返回null
+如： documen.querySelector('#id')
+//获取的DOM对象可以直接操作
+const bon = document.querySelector('bon')
+bon.style.color = 'red'  // 将颜色改成红色
+2.选择匹配的多个元素
+documen.querySelectorAll('CSS选择器')
+返回CSS选择器匹配的NodeList对象集合
+如： documen.querySelectorAll('ul li')
+得到的是一个伪数组，有长度有索引号，但是没有pop(),push()等方法
+想要获取里面的对象，需要遍历(for)数组
+const bon = document.querySelectorAll('bon')
+for(let i = 0;i<bon.length;i++){}
+//哪怕只有一个元素，通过querySelectorAll()返回的都是伪数组
+也可以直接找伪数组特定的值
+const bon = document.querySelectorAll('bon')[0]
+//CSS选择器必须加引号
+
+
+
+### 操作元素文字内容
+
+DMO对象都是根据标签生成的，所以操作标签，本质上就是操作DOM对象
+
+1.inneText
+添加/修改标签内部文字内容
+显示纯文本，不解析标签
+const bon = document.querySelector('bon')
+bon.innerText = '什么牛魔'
+2.innerHTML
+添加/修改标签内部文字内容
+会解析标签，多标签建议使用模板字符(反引号)
+const bon = document.querySelector('bon')
+bon.innerHTML = `<b>你是什么牛魔</b>`
+
+
+
+### 操作元素常用属性
+
+常见属性如： href,title,src 等
+语法: 对象.属性 = 值
+例:
+const bon = document.querySelector('bon')
+bon.src = './imag001'
+bon.herf = 'www.baidu.com'
+
+
+
+### 操作元素样式属性
+
+1.通过style属性操作CSS
+2.操作类名(className)操作CSS
+3.通过classList操作CSS
+1.通过style属性操作CSS
+语法:  对象.style.样式属性 = '值'
+例如：
+const bon = document.querySelector('bon')
+bon.style.width = '300px'
+bon.style.backgroupColor = 'red'
+bon.style.border = '2px solid blue'
+// 修改样式通过style属性引出
+//如果有连接符-如:backgroup-color 需要转换成小驼峰命名法backgroupColor
+//赋值的时候记得CSS单位 如 px
+2.操作类名(className)操作CSS
+如果修改的样式比较多，直接用style修改比较繁琐，可以通过借助于CSS类名的形式，在CSS里写属性和值，再给某个标签赋予类名
+给元素赋予属性类名，相当于<div class = 'box'></div>
+语法:  元素.className = '类名'  
+例如：
+const bon = document.querySelector('bon')
+bon.className = 'box'
+//由于class是关键词，所以用className代替
+//className是使用新值换旧值（覆盖），所以如果需要添加一个类，需要保留之前的类名 bon.className = 'xxn box'
+3.通过classList操作CSS
+为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
+语法:
+元素.classList.add('类名')  // 添加
+元素.classList.remove('类名')  // 删除
+元素.classList.toggle('类名')  // 切换，有就删掉，没有就添加
+例如：
+const bon = document.querySelector('bon')
+bon.classList.add('xxn')  // 追加xxn类名
+bon.classList.remove('xxn')  // 删除xxn类名
+bon.classList.toggle('xss')  // 切换xss类名，有就删掉，没有就添加
+
+
+
+### 操作表单元素样式
+
+表单很多情况也需要修改熟悉，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
+正常的有属性有取值的 跟其他的标签属性没有任何关系
+语法：
+获取: DOM对象.属性名
+设置: DOM对象.属性名 = 新值
+例如：
+<input type="text" value="请输入">
+const uname = document.querySelector('input')
+uname.value = '用户名'
+uname.type = 'password'
+//innerHTML得不到表单的值，所以才需要用表单.属性名
+表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果为false代表移除该属性
+例如：  disabled,checked,selected
+const ipt = document.querySelector('input')
+ipt.checked = true   // 勾选状态
+const button = document.querySelector('button')
+button.disabled = true  //禁用按钮
+
+
+
+### 自定义属性
+
+标准属性：标签天生自带的属性，比如class,id,title等，或可以直接用.语法操作的属性，比如 disabled,checked,selected
+自定义属性:
+在HTML5中推出来专门的data-自定义属性
+在DOM对象上一律以dataset对象方式获取
+例如：
+
+<div data-xx="1" data-yy="牛魔">1</div>
+const one = document.querySelector('div')
+console.log(one.dataset.id)  // 获取结果为1
+
+### 定时器
+
+能够使用定时器函数重复执行代码
+1.开启定时器
+setInterval(函数,间隔时间)
+setInterval(函数名,间隔时间)
+例如：
+setInterval(function(){console.log('牛魔倒计时')},1000)
+setInterval(getName,1000)
+//间隔时间单位是毫秒
+//函数名不需要加括号
+//定时器返回的是一个id数字
+2.关闭定时器
+let 变量名 = setInterval(函数,间隔时间)   //定时器返回的是一个id数字
+clearInterval(变量名)
+
+
+
+
+
+### CSS选择器
+
+1.用标签做选择器，叫做标签选择器    对标签
+例如：
+h1{
+    color:red
+}
+
+<h1>这是标签</h1>
+2.用类名做选择器    对多个元素
+例如：
+.a1{
+    color:red
+}
+<div class="a1">这是div</div>
+<p class="a1">这是正文</p>
+3.用id做选择器   对单
+例如：
+#b2{
+    color:red
+}
+<div id="b2">这是div</div>
+
+### const常量
+
+const声明的值不能更改，而且const声明变量的时候里面需要初始化
+但是对于引用数据类型，const声明的变量，里面存的不是值，而是地址
+const指向栈地址，栈再指向堆
+所以 const a = [2];  a.push(3)  不报错
+而  a = [4]  会报错
+同样
+const b = document.querySelector('div')
+b.innerText = '321'
+指向的是'div'的位置，修改div的内容不报错
+
+可以从上往下找下级标签，中间用空格间隔，例如：
+const b = document.querySelector('.a li')
+
+
+
+
+
+### 伪类
+
+取第1个值   
+例 取第一个li   li:first-child
+const li = document.querySelector('.a1 li:first-child')
+取第n个值
+例 取第5个li    li:nth-child(5)
+const li2 = document.querySelector('.a1 li:nth-child(5)')
+取第最后一个值 
+例 取最后一个li   li:last-child
+const li3 = document.querySelector('.a1 li:last-child')
+
+
+
+### 生成随机数函数
+
+function getRandom(n,m){
+    return Math.floor(Math.random() * m-n+1)+n
+}
+
+### 补充
+
+//获取元素时，建议从上级往下多级确认//innerHTML,innerText只能获取双标签，如<h1>xx</h1>,<button>提交</button>，获取不到单标签如<input>
+
+
+
+
+
+### 操作表单元素样式
+
+//innerHTML,innerText只能获取双标签，如<h1>xx</h1>,<button>提交</button>，获取不到单标签如<input>
+表单很多情况也需要修改熟悉，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
+正常的有属性有取值的 跟其他的标签属性没有任何关系
+语法：
+获取: DOM对象.属性名
+设置: DOM对象.属性名 = 新值
+例如：
+<input type="text" value="请输入">
+const uname = document.querySelector('input')
+uname.value = '用户名'
+uname.type = 'password'
+//innerHTML得不到表单的值，所以才需要用表单.属性名
+//button比较特殊，他是双标签，可以用innerHTML,innerText
+表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为true代表添加了该属性，如果为false代表移除该属性
+例如：  disabled 禁用表单元素,checked 单选框复选框打钩；下拉框选中,selected
+const ipt = document.querySelector('input')
+ipt.checked = true   // 勾选状态
+const button = document.querySelector('button')
+button.disabled = true  //禁用按钮
+
+
+
+### 自定义属性
+
+标准属性：标签天生自带的属性，比如class,id,title等，或可以直接用.语法操作的属性，比如 disabled,checked,selected
+自定义属性:
+在HTML5中推出来专门的data-自定义属性
+在DOM对象上一律以dataset对象方式获取
+例如：
+
+
+
+ 补充
+
+// 对象.style.display = 'none'    隐藏，用在删除广告等
+// 对象.style.display = 'block'   显示
+
+
+
+### 事件监听
+
+事件是在编程系统内发生的动作或发生的事情，比如在网页上单击一个按钮
+
+事件监听就是、让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出相应，也称为绑定事件或者注册事件，比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等
+
+语法：
+元素对象.addEventListener('事件类型',要执行的函数)
+例：
+const div = document.querySelector('div')
+div.addEventListener('click',function(){
+    document.write('打印的内容')
+})
+//相当于给div添加一个事件，这个事件可以直接调用,要加括号：
+div.click()
+事件监听三要素：
+1.事件源：那个dom元素被事件触发了，要获取dom元素
+2.事件类型：用什么方式触发，比如单击click，双击dblclick等
+3.事件调用的函数：要做什么事
+//事件监听要加引号
+//函数是点击之后再去执行，每次点击都会执行一次
+
+
+
+### 事件监听的类型
+
+鼠标事件：
+click  鼠标点击
+dblclick  鼠标双击
+mouseenter   鼠标经过
+mouseleave   鼠标离开
+键盘事件：
+keydown  键盘按下触发
+keyup  键盘抬起触发
+
+
+
+### 事件监听版本
+
+DOML0
+事件源.on事件 = function(){}
+DOML2
+事件源.addEventListener('事件',function(){})
+区别：on的方式是一个属性，可以被修改覆盖，多次定义相当于是一个变量重新赋值
+
+