javaScript的代码写入<script></script>双标签内部（其位置位于head标签内部title下部，同style的位置一样。也可以位于body下方“最优选着优先放在下面：因为当JS代码量大的时候会影响页面的加载展示，会影响用户体验，降低转化率。”）
alert("弹出一个警告窗口");
document.write("在页面中写出一段本文");警告！！！：该代码会显出一段文字，但是会覆盖你在body内的所有内容。
console.log("在检查窗口的控制台中添加一段文字");
onclick（点及按钮弹出警告框，书写位置：在按钮的开始标签内。）称为点击事件。
语法：<button οnclick="">按钮的提示信息</>
值有：
alert("弹框输出方式");
confirm('弹出确定框，比警告框多了一个取消按钮。') 返回值的数据类型为布尔值。
prompt(content,defaultText)弹出一个对话框，第一个参数位置为问题，第二个位置为回答。该对话框返回的数据类型为字符串类型。
document.write("在页面中写出一段本文");会识别标签，警告！！！：该代码会显出一段文字，但是会覆盖你在body内的所有内容。
Js的组成：
ECMAScript JS的基础语法 ES
DOM 文档对象模型
BOM 浏览器对象模型
js的基本语法
（
1.JS中严格区分大小写。
2.JS中每一条语句都以分号(;)结尾
//如果不写分号，历览器会自动添加，但会消耗一些系统资源，
而且有些时候，浏览器会加错分号，所以在开发中分号必须写。
3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行美化、格式化。
）
JS的字面量和变量
(
字面量：为一些固定不可改变的值，
例如：1 2 3 4 5 6
字面量都是可以直接使用，但是我们一般不会去直接使用字面量或者是很少用固定不可变的值。
变量：组成（变量名、变量值、变量数据类型）
变量都是可以直接用来保存之冕了，而且变量的值是可以去进行更改。
变量的可修改性更适合我们在开发中的使用，很少直接使用字面量。
变量也可以通过对变量的声明对字面量进行一些描述
! ! !通过一个var 可以声明多个变量，并赋值(var a= 1 , b='nihao ' , c=5).
)
JS的数据类型
(
七种：
基础六种
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Symbol (ES6 刚引入的原始数据类型，表示独一无二的。 例：var f=Symbol('1'); var g=Symbol('1'); 但是f不等于g。 )
Object 对象(引用数据类型)
进行数据声明的时候，其类型编码是首字母需大写。
其中String Number Boolean null Undefined 属于基本数据类型，而Object属于引用数据类型。
)
String字符串：（
- 在js中字符串需要使用引号引起来
- 使用双引号或单引号都可以，但是不可以混合使用。正确嵌套使用方式（
eg：var str='hello';(声明并赋值变量于str);
str = '我说："今天天气真不错！"';（将字符串赋值于变量str）
）
- 引号互相嵌套时，双引号不能嵌套双引号，单引号不能嵌套单引号。
）
字符串中可以使用的几个转译字符（
\" 表示为 "
\' 表示为 '
\n 表示为换行
\t 表示按了一个制表符(tab键)
\\ 表示 \
）
Number数字(
在JS中所有的数值都是Number类型，
包括整数和浮点数(小数)
JS中可以表示的最大值
Number.MAX_VALUE
1.7976931348623157e+308(科学计数法意为：1.7976931348623157*10的308次方)
Number.MIN_VALUE(大于零的最小值或称为最小的正数)
5e-324(科学计数法意为：5*10的负324次方)
如果使用Number表示的数字超过了最大值，则会返回一个
Infinity 表示正无穷大
-Infinity 表示负无穷大
使用typeof检查Infinity也会返回number
NaN 是一个特殊的数字，表示Not A Number(返回的结果不是一个数字)
使用typeof 检查一个 NaN 也会返回number
)
JS在进行浮点运算，可能得到一个比不精确的运算结果，所以千万不要使用JS进行精确度要求比较高的运算。
typeof运算符
用来检查一个变量的类型。
语法：typeof 变量
检查的是字符串是会返回string
检查数值时，会返回number
书写方式：
var a = 10;
console.log(typeof a);
console.log(typeof(a));
Boolean 布尔值
布尔值只有两个，主要用来做逻辑判断
true
-表示逻辑真。
false
-表示逻辑假。
使用typeof检查的一个布尔值时，会返回boolean。
eg：
var a = 1 , b = 5 ;
var c = a > b;
console.log ( typeof e, e);
Null(空值)
类型的值只有一个null
null这个值是专门用来表示一个空的对象
使用typeof检查一个null值时，会返回一个object(以为对象)
Undefined（未定义及未赋值。）
类型的的值只有一个，就undefiend
当声明一个变量，但是并不给变量赋值时 ，他的值就默认为undefined。
使用typeof 检查一个undefined 时也会返回一个undefined。
11.（1）、强制数据类型转换
-指将一个数据类型强制转换为其他的数据类型
-转换类型主要指，将其他的数据类型，转化为
String(字符串) Number(数字) Boolean(布尔值)
（2）、将其他的数据类型转换成String。
方法一：-调用被转换数据类型的toString()方法。
-该方法不会影响原变量，他将会转换后的结果返回。
-但是注意：null和undefined这个指没有toString()方法。
如果调用他们的方法，将会报错
方法二：
-使用String()函数，并将转换的数据作为参数传递给函数。
-使用String()函数做强制类型转换时，
对于Number和Boolean 实际上也是调用toString()方法
但是对于null和undefined，就不会调用toString()方法
它会将null直接转化为“null”(字符串数据类型的值)
将undefined 直接转化为“undefined”(字符串数据类型的值)
12.(1)、将数据类型转换成Number类型
- 字符穿-->数字
1.如果是纯数字的字符串，则直接将其转换为数字
2.如果字符串中拥有非数字的内容，则转换为NaN
3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。
-布尔--->数字
true 转成 1
false 转成 0
-null---->数字 0
-undefined---> 数字 NaN
隐式转换方式：
非布尔值转-->布尔值
为任意数据类型做两次非运算，即可将其转换为布尔值。
语法：
var a = "hello";
a = !!a; //返回值为true。
转换方式二：
-这种方式专门对付字符串
-parseInt() 把一个字符串转换为一个整数。只识别数字
-parseFloat() 把一个字符串转换为一个浮点数。
(2)、调用parseInt()函数将a转换为Number
parseInt()可以将一个字符串中的有效整数内容取出去，
然后转换为Number
parseFloat()作用和parseInt()类似，区别在于parseFloat()可以获的有效小数。
13.(1)、常用进制书写及转换。
十六进制书写 以0x开头，
a = 0x10; (意为16进制的10赋给a，浏览器以十进制解读时为16。)
a = 0xff; (意为16进制的ff赋给a，浏览器以十进制解读时为255。)
a = 0xcafe ; (意为16进制的cafe赋给a，浏览器以十进制解读时为51966。)
八进制书写，以0开头，
a= 070; (意为8进制的070赋给a，浏览器以十进制解读时为70。 但是070该数字是以0开头所以浏览器可能会以8进制来解读，解读结果为56。一般不常用八进制数据。)
二进制以0b开头，
a = 0b10; (意为2进制的10赋给a，浏览器以十进制解读时为2。可能只在火狐跟谷歌浏览器支持。)
但不是所以浏览器都支持。
8:29 2022/10/5 星期三
像“070”着中字符串有的浏览器以8进制解析，有的浏览器以十进制解析，（其问题是因浏览器的解析方式不同造成运行结果不同。）
解决方法：
可以使用parseInt()函数来解决，在函数中传递一个第二参数，用来指定浏览器解析时的进制。
例：a = parseInt(a,10 );
意为将a的数值通过parseInt()函数解读后，将解读的值重新赋予a，并对该值设定的解读时以10进制解读，第二参数为进制值，也可以写8 16。
14.(1)、 将其他数据类型转换为Boolean类型。
- 数字 ---> 布尔
- 除了0 和 NaN转换后为false，其余数字转换都是true(包括正负Infinity无穷，转换后也为true)。
- 字符串---> 布尔
- 除了空串(值为空的字符串)转换布尔后为false外，其余字符串都为true。
-null 和 undefined 转换为布尔类型，其值都为false。
-对象也会转换成true。
15.(1)、运算符。(也被称为操作符。)
含义：通过运算符可以对一个或多个进行整合运算，并获取运算结果。
比如：tapeof就算是一个运算符，可迎来获得一个值的类型。（该值的类型，就算他所获取的值）
其返回值是以字符串的形式进行返回 。
eg：
var a = 123； //声明一个变量a 并对其赋予一个字面量123。
var result = typeof a； //声明一个变量result 并对其变量赋予 typeof a;所运算出结果的值；
console.log(result); //在检查窗口输出变量result的值。
(2)、算数运算符。(算数运算符一般不会修改原参数变量。！！！！重点：除了加法与字符串相加之外其他都转换成Number的数据类型。)
对，数据类型是number的变量，正常运算
对于非Number类型的数据进行运算时，会先将其数据类型转换Number类型的数据，再进行运算。(除了字符串加法。)
任何值于NaN做运算得到的返回值都是NaN。
+
可以对两个值进行加法运算，并返回结果
如果对两个字符串进行加法运算，则会做拼串(如果Number数值与string字符串进行运算是会将Number的数据类型转换为string类型与字符串接为并串。)
会将两个字符串拼接为一个字符串，并返回。
eg：
var a = “123”+“456”；//声明一个变量a 并对齐赋值，值为字符串123+字符串456.
console.log(a); 在控制台输出变量a。
控制台输出的为：123456。
因为任何值与字符串相加都会转换位字符串，并做拼串操做。
利用这一运算特点，来将任意的一个数据的类型转换被String(字符串类型)。
我们只需要为这个数据类型与一个 "" (空串)进行整合运算，便可以将该数据转换为String(字符串)类型。
这是一种隐式的类型转换，由浏览器自动完成，实际上也是调用了String()函数。
语法：eg
var c = 123；//声明一个变量c，并对其赋值，值为123(数据类型为Number)
c = c + ""; //将变量c与空串进行整合运算的结果，重新赋予c，此时的c变量已从Number类型 ，转换成String类型。
其效果等同于 c = String(c);调用String()函数来对变量c进行处理并将返回所得结果重新赋予变量c。
其值为字符串123，而并不是数字123。
输出一个可以看出，变量名和与其相对应的值，例如：在控制台数以一个 c= 123。
语法：
var a = 123; //首先神功一个变量 a 并对齐赋值。
console.log("c = "+c); //console.log()意为控制台输出，”c = ”因为有引号浏览器会将其解读为字符串将输出c=，+c意为同时输出一个变量c，
控制台所输出的为字符串 c = 和变量c的值 123
所以控制台会得到 c = 123。
+=
自加并赋值，
概念：符号左侧变量的值加上右边变量的值，得到得返回值重新赋予符号左侧的变量。
语法： eg
var a = '你好';
var b = '(｡･∀･)ﾉﾞ嗨'；
a += b; //等同于a = a + b ;
- 可以对两个值进行减法运算，并返回结果 。
两个字符串的内容可以转化为Number类型时在减法运算是会自动转换Number类型，
如果内容不能转化为Number类型时，进行运算操作将会输出NaN（NaN 是一个特殊的数字，表示Not A Number(返回的结果不是一个数字)）。
* 可以对两个值进行乘法法运算，并返回结果（同上)
/ 可以对两个值进行除法法运算，并返回结果（同上)
任何值做 - * / 运算时都会自动转换Number类型，在运算。
我们可以利用这一贴点做隐式类型转换。
原理与Number（）原理一样，使用起来更加简单。
语法：eg
var d = '123' ; //声明变量d，并将字符串123赋予d。
d = d - 0； //将变量d与数字0经过减法运算的结果，重新赋予d。
console.log(typeof d , d); //在控制台输出d的当前数据类型 和d的值。
% 取模运算 （去余数）。
概念：取模运算是求两个数相除的余数。
取模运算（“Modulus Operation”）和
取余运算（“Remainder Operation ”）
两个概念有 重叠 的部分但又不完全一致。
主要的区别
在于对负整数进行除法运算时操作不同。 取模主要是用于计算机术语中。
语法：eg
var result； //声明一个变量result。
result = 9 % 3; //给变量赋值 值为9%3，通过console.log()所得的返回值为0，因为%运算是为去的余号，9除以3，除的尽。所以返回值为0。
result = 9 % 4; //同理可得，给变量赋值 值为9%4，通过console.log()所得的返回值为1。
result = 9 % 5; //同理可得，给变量赋值 值为9%5，通过console.log()所得的返回值为4。
16.(1)、一元运算符：
+
正号不会对数字产生任何影响
-
负号可以对数字进行负号取反
对于非Number类型的数据，
它会将先转换为Number，然后再运算，
可以对一个其他数据类型前使用+，来使其转换为number.
(其中：null转换为0，
true 转换为1
false转换为0
undefined转换为NaN
非数字的字符串转换为NaN
纯数字的字符串转换为数字。
Symbol数据类型不可转换，转换会报错。
)
该操做原理与Number()函数一样。
语法： eg
var a = 1 + "2" + 3; //声明一个变量，并赋予1+“2”+3的运算结果。
console.log(a); 结果为字符串：123。
var b = 1 + +"2"+3; //并赋予1 + +"2”+3的运算结果。
console.log(b); 结果为6
17.(1)、自增自减：
自增(符号++)：
——通过自增可是变量再自身的基础上增加1.
——对于一个变量自增以后(这里指自增代码结束)，原变量会立即自增1.
——自增分成两种：后++(a++) 和 前++(++a)。
无论是a++ 还是++a 再代码结束时，都会时原变量的值自增1.
不管使a++ 还是 ++a 都不值，而是一个关于变量a变化的表达式，且值不同；
a++ 是在a变量参与运算之后才开始自增。（参与运算时为自增前原变量的值。）
++a 是在a变量参与运算之前就开始之家。（参与运算时为自增后变量的值。）
语法：eg
var a = 10; //声明一个变量a并对其赋值，
console.log(c++); //控制台输出变量c++的表达式的值，其得到的返回值为10。
console.log(++c); //控制台输出变量c++的表达式的值，其得到的返回值为12。因为，上一行代码结束时。c++便开始执行，自增后为11，第三行代码输出的++c的表达式该为(前++)
参与运算之前便可自增所以第三行输出为第二行结果的自增之后的值。所以为12.
var b = 10; //声明一个变量b并对其赋值。
console.log(++c); //控制台输出变量++c的表达式的值，其得到的返回值为11。
例：eg
var a = 20; //声明一个变量a并对其赋值。
console.log(a++ + ++a + a) //控制台输出结果，计算分为三部分，先求出每部分的值然后相加。
//第一个a++是(后++)在参与运算后才会自增，所以第一部分为20.
//第二部分++a首先a值在第一个a++结束后就发生自增说a在第二部分的原值为21，又因为是(前++)在参与运算之前先自增，所以第二部分的值22.
//第三部分为a ，但是现a的新值是两次自增后的值其值为22。
//所以为20+22+22所得结果为64.
自减(符号--) ：
其规则跟自增相同。
代码 运行结果（控制台输出结果。）
var n1=10, n2=20;
var n=n1++;
console.log('n='+n); n=10
console.log('n1='+n1); n1=11
n = ++n1;
console.log('n='+n); n=12
console.log('n1='+n1); n1=12
n = n2--;
console.log('n='+n); n=20
console.log('n2='+n2); n2=19
n = --n2;
console.log('n='+n); n=18
console.log('n2='+n2); n2=18
尝试的话，代码复制这个：
var n1=10, n2=20;
var n=n1++;
console.log('n='+n);
console.log('n1='+n1);
n = ++n1;
console.log('n='+n);
console.log('n1='+n1);
n = n2--;
console.log('n='+n);
console.log('n2='+n2);
n = --n2;
console.log('n='+n);
console.log('n2='+n2);
19.(1)、逻辑运算符： ！(非) &&(与) || (或)
！非：
-！可以用来对一个值进行非运算
- 所谓非运算就是值对一个布尔值进行取反，
true变false，false变true
- 如果对一个值进行两次取反，值不会变。
-如果对非布尔值进行非运算，则回将其转换成布尔值，然后再取反
所以我们可以利用这点，将其他数据转成布尔值，
对一个数据取反两次，其原理与Bollean（）函数一样。
&& 与：
-&&可以对两个值进行运算并返回结果
-运算规则
-两个值只要有false就返回false，
只有两个都为true时，才返回true。
-JS 中的“与”属于短路的与，(全真才真，有假则假。)
如果第一个值为false，边不会再看第二个值。
|| 或：
-| | 可以对两个值进行运算并返回结果
--运算规则
-两个值只要有true就返回true，
只有两个都为false时，才返回false。
-JS 中的“或”属于短路的与，(全假才假，有真则真。)
如果第一个值为true，边不会再看第二个值。
20.(1)、非布尔值的与或运算：
&& | | 运算：
对于非布尔值进行与或运算时，
会先将其转换为布尔值，然后再运算，！！！！！运算后返回原值。(不是true或false)
-&&与运算：(全真才真，有假则假。)
-如果第一个值为true，则必然返回第二个值(原因：都为出true时返回第二个值，如果有false就返回false，第一个为true，所以必然返回第二个值。)
-如果第一个值为false，则直接返回false。（与为短路，有假就假。说以第一个就是false就不看第二个值了。）
-| |与运算：(全假才假，有真则真。)
-如果第一个值为true，则直接返回第一个值。
-如果第一个值为false，则直接返回第二个值。
21.(1)、赋值运算符：
= 赋值号。
可以将符号右侧的值赋给符号左侧的变量。
+=加等号。
a += 5;等价于 a = a + 5; //变量a加等 5，与变量a加5所得返回值重新赋予a一样。
-=减等号。
a -= 5;等价于 a = a - 5; //变量a减等 5，与变量a减5所得返回值重新赋予a一样。
*=乘等号。
a *= 5;等价于 a = a * 5; //变量a乘等 5，与变量a乘5所得返回值重新赋予a一样。
/=除等号。
a /= 5;等价于 a = a / 5; //变量a除等 5，与变量a除5所得返回值重新赋予a一样。
%=百分比等号。
a %= 5;等价于 a = a % 5; //变量a百分 5，与变量a百分5所得返回值重新赋予a一样。
//用不明白可以用后面的方式，只不过这些都只是简写方式。
21.(1)、关系运算符：
通过关系运算符可以比较两个值之间的大小关系，
如果关系成立它会返回true，如果关系不成立则返回false
> 大于号
-判断符号左侧的值是否大于或等于右侧的值。
-如果关系成立，返回true，如果关系不成立则返回false.
>= 大于等于
-判断符号左侧的值是否大于或等于右侧的值。
<=小于等于
-判断符号左侧的值是否小于或等于右侧的值。
非数字的情况
- 对于非数值进行比较时，会将其转换为数字然后在比较
- 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较
而会分别比较字符串中字符的Unicode编码(Ascll码)。
//比较中文时无意义，如果两边一样，这比较下一位，所以借用英文来排序
console.log("abc" > "abd"); //其得到的返回值为false。因为前面两个字符，符号两侧都一样，所以比较第三位，c的Ascll码为63，d的Ascll码为64. 所以c不大于d，所以为假输出false。
如果要比较两个纯数字的字符串时一定要转型。（因为比较两个字符串类型的数字，可能会得到不可预期的结果。）
23.(1)、Unicode编码表：
看视频：https://www.bilibili.com/video/BV1YW411T7GX?p=23&vd_source=a92217871d8125a0083b040313c9873b
语法：
例如：控制台输出：
console.log("\u2620"); //将会输出☠因为☠的编码为2620 \u 为语法加上符号编码以字符串的形式输出。
！！！！声明Unicode编码均为16进制在js中实现，
如果想要在HTML代码中实现需要将编码转换为10进制，
html实现语法：
☠； body内会输出☠，2620从十六进制转换为十进制会变成9760，#为语法必须添加。
24.(1)、相等运算符：
想等运算符用来比较两个值是否相等，
相等返回true，否则返回false。
使用== 来做相等运算
-当使用==来比较两个值时，如果值得类型不同，
则会自动进行数据类型转换，将其转换为相同的类型
然后进行比较
语法：
eg
var a = 10; //声明变量a 并赋值。
console.log(a == 4); //控制台输出false。
console.log("1" == 1'); //控制台输出true, 因为符号两边的数据无论转换为字符串还是Number类型都相等，因此无法判断其比较时所值转换的类型。
console.log(true == "1"); //控制台输出为true，因为符号左边为true且相等所以本次比较时数据类型并没有转换位字符串类型。所以实验将字符串1换为hello输出为false，所以也并不是转换为布尔值，
所以本次比较是转换Number的数据类型。才会使本次比较相等。
console.log(null == 0); //控制台输出为false，所以null并没有转换，空值不会转换。
undefiend 衍生自 null 所以这两个值做判断时，会返回true。
NaN不和任何值相等，包括他本身。
假如你将NaN赋予一个变量应当如何检查该变量的值是否为NaN ,可以通过isNaN()函数来判断。
语法： eg
var b = NaN；
console.log( isNaN(b) ); //控制台输出true，所以为赋值成功，a变量值为NaN。
不相等 !=
当使用 != 来比较两个值时，不相等返回值为true，否则返回false。
不想等比较时也会自动进行数据类型转换，将其转换为相同的类型
然后进行比较。
全等 ===（要求数据类型与值都相等才会返回true。）
比较时，先比较值得类型是否相等不等直接返回false。
类型相等时，查看值，相等为true，不等false，
不全等 !==
比较时，只要数据类型不相等就会返回true。
25.(1)、条件运算符（又称三元运算符。）：
语法：
条件表达式 ？ 语句1：语句2；
-执行的流程：
条件运算符在执行时，首先对条件表达式进行求值，
如果该值为ture，则执行语句1，并返回执行结果。
如果该值为fasle，则执行语句2，并返回执行结果。
如果返回运算结果不是布尔值，会转换成布尔值再运算。
eg
true ? console.log('语句1') : console.log('语句2');
案例
https://www.bilibili.com/video/BV1YW411T7GX?p=25&spm_id_from=pageDriver&vd_source=a92217871d8125a0083b040313c9873b 第九分钟。
三个数 a b c中求最大值。
var a = 30;
var b = 40;
var c = 50 ;
var max = a > b ? ( a > c ? a : c ) : (b > c ? b :c ); //JS代码，尝试一下.
26.(1)、运算符的优先级：
, 号运算符
使用 , 可以分割多个语句，一般用在变量声明中，可以一次性声明多个变量。
指： var a , b , c , d , e;
像数学一样，在JS中运算符也有优先级，
例如：先乘除，后加减。
在JS中也有一个优先级的表，排名越考上，优先级越高 会优先计算。
例子：(
var a = 1 || 2 && 3 ;
console.log("a ="+a);
如果||(或)的优先级高，或者两个一样高，则应该返回3
如果&&(与)的优先级高，则返回1。返回值疑惑，为什么会这样返回。
)
28.(1)、if控制语句（流程控制语句。）：
在JS中代码运行顺序是一行一行的输出；
语句分类：
1、条件判断语句。
2、条件分支语句。
3、循环语句。
1、条件判断语句：
-使用条件判断语句可以在执行某个语句之前会需首先进行判断，
如果条件成立才会执行语句，条件不成立则语句不成立。
-if语句
-语法一：
if(条件表达式){ //{}为代码块，意为可书写多条语句。
语句....
}
if语句在执行时，会先对条件表达式进行求值判断，
如果过条件表达式的值为true，则执行if后的语句，
如果过条件表达式的值为false，则不会执行if后的语句，
if语句只能控制紧随其后的那条语句，
如果希望if语句可以控制多条语句，
可以将这些语句统一的放到代码块中
if语句后的代码块不是必须书写的，但是在开发中尽量写上。
eg：
var a = 11 ； //声明一个变量a并赋值，
if(a >10){ //条件判断语句变量a是否大于10。因为添加了代码块所以才能多条if后的语句，没有代码块只能输出你....，意为没有一定条件，你的话都无法表达。
console.log("你....")； //控制台输出：你.....
console.log("好么？")； //控制台输出：好么？
console.log("最近真么样了？")； //控制台输出：最近怎么样？
console.log("我想你了。")； //控制台输出：我想你了。
}
当你的条件判断语句需要满足多个条件判断是的情况：
eg：
var b = 15 ;
if(b > 10 b<20){ //if语句中同时包含b大于10，b小于20的两个条件 条件之间用空格隔开。
console.log("b大于10，b小于20")；
}
29、 if （2） 语法二：
if.....else...语句
if语句在执行时，会先对条件表达式进行求值判断，
如果过条件表达式的值为true，则执行if后的语句，
如果过条件表达式的值为false，则执行else后的语句。
if(判断语句){ //if else语句不同于语法一的地方是：语法一在判断为false将不会生效下方语句，而语法二会继续生成else后的语句。
语句一；
}else{
语句二；
}
eg：
var age = 50；
if(age >= 60){ //
alert("你已经退休了~~~")；
}else{
alert("你还没退休~~~")；
}
语法三：
if..else if....else
当该语句执行时，会从上至下依次对表达式进行求值判断。
如果值为true，则执行当前语句。
如果值为false，则继续向下进行判断。
if(条件表达式){
语句....
}eles if(条件表达式){
语句.....
}eles if(条件表达式){
语句....
}eles if(条件表达式){
语句....
}eles
注意：
当使用语法三时，书写时应当注意在添加条件判断语句时切记不可将范围小的条件放于上方。
例如：
var a = 95;
if(a > 17){ //当a为95时，你本应该输出“你岁数挺大的了~~~”，但是在第一次判断的时候就以经截至，便不会在向下进行解读，输出的为你已经成年了。后面永远无法执行的代码，我们称之为死代码。
alert("你已经成年了~~~")； //如果在书写条件的时候补全如同a >17 && a<30 这样的条件，便可以向下继续判断。将代码写活。
}eles if(a >30){
alert("你已经中年了~~~")；
}eles if( a > 60){
alert("你已经退休了~~~")；
}eles if( a >90){
alert("你岁数挺大的了~~~")；
}
30.(1)、作用域：
分全局变量，局部变量
特例：在函数体内部，不经过var定义的变量，是一个去全局变量。
（2)、预解析
变量的预解析:
将var定义的变量，提至到代码的最前端。
函数的预解析:
命名函数：浏览器会将function定义的函数提至代码的最前端。
匿名函数：不会调动函数。
函数表达式：如果在函数定义前调用函数，会报错预解析，先回提至var定义的变量
注意事项：
1、当函数名和变量名同名时，先提升函数，在提升变量。
2、浏览器会将var和function定义的变量和函数提至到代码的最前面。
(3)、数组
概念和作用：
数组是一个有序的数据的集合
集合的组成：number，string ,boolean,null,undefined, ,object
数组的创建：
语法一：
var a=new Array(); //创建一个空数组并赋于变量a。
语法二：
通过字面量完成对数据的创建。//[ ]中括号为数组的字面量。 扩展：( )小括号是函数的字面量 {}大括号是对象的字面量。
var b=[]; //创建一个空数组并赋于变量b。
素组的元素添加。
数组内添加元素，应添加到括号内。
当数组中只有一个数字参数时，这个数字是定义在数组内添加了多少个空值参数。//仅适用于new Array方法创建的数组。
当数组中只有一个数字参数时，这个数字仅是一个参数。 //通过字面量完成对数据的创建
数组的特征：
数组的长度 length
获取数组的长度，语法：
数组名. lenght
var arr=[1,2,3,4,5,6]
console.log(arr.lengh); //控制台输出6.
修改数组长度，
语法：
var arr=[1,2,3,4,5,6]
arr.length=a(a是任意一个数字)
console.log(arr.lengh); //控制台输出a，当a大于数组内参数得到个数是，将会添加空值，来补满个数，如果a小于数组内参数个数，多的将会被抹去。
数组的下标(大名：索引)：
数组的下标从0开始，到长度（length-1）结束
获取和修改数组中的值：
获取参数：
// arr[要获取参数的下标]，当获取的下表不存在时返回undefined。
语法：
var arr=[1,2,3,4,5,6]
console.log(arr[要获取参数的下标])；
修改参数：
//arr[要获取参数的下标]=想要更改后的参数
语法：
var arr=[1,2,3,4,5,6]；
arr[要修改参数的下标]=想要更改后的参数； //相当于重新赋值。
console.log(arr)；
修改长度并添加参数：
arr.length+=2;
arr[要修改参数的下标]=想要更改后的参数；
遍历数组():
i=0 开始的下标
i<arr.length 只能选着到arr.length-1 === 最大下标
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
31.(1)、数组方法：
concat 合并数组 //可以实现同时合并多个数组。
语法：
var arr=arr1.concat(arr2); //arr1.concat(arr2)完成合并操作，然后将合并后的内容赋值给变量arr。
join 拼接 //使用拼接符，将数组变为字符串。 （拼接是将数组内的每个元素组成一个字符串）
语法：
var arr4=['你','还','好','么']；
var str=arr4.join() //arr4.join()完成合并操作，然后将合并后的内容赋值给变量arr4。()小括号内用来添加拼接符，意为，是在元素拼接时之间的添加你想加入的东西。
indexOf LastlndexOf 查找某个元素是否存在于数组中。
indexOf： //当查找的元素不存在时，返回-1，存在时返回该元素的下标(索引)。/当查找的元素多次出现时，默认查找第一个值得位置，想要查询arr.indexOf(需要查询的值，下标+1)
语法：
var arr=[2000,3,5,8,14,2000]
console.log(arr.indexOf(love))； //返回-1，表示在该数组中不存在查询元素。
console.log(arr.indexOf(2000 ，n))； //返回0，0表示在该数组中存在查询元素，且该元素的下标(索引)。n为在元素得下标(索引)。
LastindexOf： 当查找的元素不存在时，返回-1，存在时返回该元素的下标(索引)。/当查找的元素多次出现时，默认查找第一个值得位置，想要查询arr.LastindexOf(需要查询的值，下标-1)
区别：indexOf在数组中是从前往后查找。
LastindexOf在数组中是从前往后查找。
增删改查：
unshift开头添加 //给数组开头添加多个值，
语法：
var arr=[2000,3,5,8,14,2000]
arr.unshift(I,like,you);
console.log(arr); //控制台输出为[I,like,you,2000,3,5,8,14,2000]
push结尾添加 //给数组结尾添加多个值，
语法：
var arr=[2000,3,5,8,14,2000]
arr.push(I,like,you);
console.log(arr); //控制台输出为[2000,3,5,8,14,2000,I,like,you]
shift开头删除 //只能删除数组中得第一个元素。
语法：
var arr=[I,like,you,2000,3,5,8,14,2000]
arr.shift(I,like,you);
var b=arr.shift(I,like,you); //被丢弃的。
console.log(arr); //控制台输出为[2000,3,5,8,14,2000],并非是因为数组长度不够被抹去，而是被shift强制删除。
pop结尾删除 //只能删除数组中得最后一个元素。。
语法：
var arr=[2000,3,5,8,14,2000,I,like,you,]
arr.pop(I,like,you);
var b=arr.pop(I,like,you); //被丢弃的。
console.log(arr); //控制台输出为[2000,3,5,8,14,2000],并非是因为数组长度不够被抹去，而是被pop强制删除。
splice可以删除任意一个位置。 //只能删除数组中得任意一个元素。 删除的内容将会放到一个新的数组中。
语法：
var arr=[2000,3,5,8,14,2000,I,like,you,]
arr.splice( n , m ); //n代表要开始删除的下标，m要删除内容的长度。
例如：
arr.splice(6，3); //从下标6开始，删除三个元素。
console.log(arr); //控制台输出为[2000,3,5,8,14,2000],并非是因为数组长度不够被抹去，而是被splice强制删除。
方法二（替换）：
arr.splice( n , m，i ); //n代表要开始删除的下标，m要删除内容的长度，i为在n下标的位置添加元素，类似替换功能。
数组排序：
sort 排序 ES6的方法： //按照Ascll码进行排序，现大写字母，在小写字母。在纯数字数组中排序，并不是数字大小，而是以数字中的位置排序。
语法：
var arr=[2000,3,5,8,14,2000,I,like,you,]
arr.sort()
（纯数字数组以大小排列） a-b 从小到大，b-a从大到小。
var a=[158,68,4,4,8641,752,3,638]
a.sort(function(a,b){
return b-a
})
console.log(a)
6
reverse 翻转数组： //将数组变为倒序排列。
语法：
var arr=[2000,3,5,8,14,2000,I,like,you,]
arr.reverse()
forEach遍历： ES6的方法
var arr=[2000,3,5,8,14,2000,I,like,you,]
arr.forEach(function(val,i,c){2
console.log(val) //数组中的每一个元素。
console.log(i) //数组本身的下标
console.log(c) //数组本身 c为数组长度，且会输出c次。一般不使用，无意义。
}
数组去重： //将数组中重复的内容去掉，并添加到一个新的数组中并输出。
语法：
var a=[10,2,1,10,2,5,6,8,5]
var b=[] //创建一个空的数组，接受去重后的内容。
for(var c=0;c<a.length;c++){ //遍历循环整个数组。
if(b.indexOf(a[c])==-1){ //根据indexOf()方法的特形，来判断新的数组中是否存在某一个值，当返回值为-1时，标明该值不存在。
b.push(a[c]) //便将这个值，添加到新的数组中
}
}
console.log(b); //在控制台输出这个去重后的数组。
(2)、面试重点：
冒泡排序： 必要理解。
语法：
var arr=[5,1,4,2,8];
for(var i=0;i<arr.length;i++){ //外层循环每次执行将会出现一个最大值。
for(var j=0;j<arr.length;j++){ //进行比较的次数；
if(arr[j]>arr[j+1]){ //对相邻的两个值进行判断，如果前面大于后面的就换他们的位置(改样式为从小到大的冒泡排序)。从大到小的将大于号换为小于号即可。
var a=0;
a=arr[j];
arr[j]=arr[j+1];
arr[j+1]=a
}
}
}
console.log(arr);
32.(1)、对象： 官方回答：对象是一个无序的属性和方法的集合（此处的属性和方法指的是数据。） 对象中的this指向对象本身。 万物皆对象。
对象的组成：属性和方法。
属性：用来描述对象的特征。
方法：用来描述对象的行为。
对象的创建：
new Object() //创建空对象
//给对象添加属性
方法一：（受到命名规范限制属性名只能添加英文单词：）被称点法。
b.name='张三'； //对象.属性名=属性值
b.age=18;
b.sex='男'；
console.log(b);
方法二：（可以添加数字，中文，是以字符串形式输出）
b.['你好']=180,90,80,70; //对象名['属性名']=属性值
方法三：简介 常用。重点
var obj={
name='人'；
age:3;
1:'你好';
sleep:function(){
console.log('跟周公下棋');
}
}
console.log(obj);
//给对象添加方法
b.sleep=function(){
console.log('跟周公约会')
}
b[sleep]=function(){
console.log('跟周公约会')
}
(2)、字面量：
{ } 对象的直面量
’ ‘ 字符串字面量
（）函数字面量
[] 数组字面量
(3)、自定义构造函数：
语法：（通过构造函数创建对象）
function Fn(name,age){
this.name=name；
this.age=age;
this.say=function(){
console.log('怎么不做核酸')
}
}
var obj=new Fn('张三'，18);
var obj=new Fn('李四'，18,'不详');
构造函数的特点：
1、函数名首字母必须大写。
2、构造函数中this指向，当前创建的这个对象；
3、构造函数中不需要return返回值；
4、构造函数通过new关键字调用。
(4)、 对象中的this指向对象本身。
理解案例：
33.(1)、对象得到使用：
对象名.属性名
对象名
调用对象中的方法：
对象名.方法名()
例：
获取某个对象中的某个属性的值时： //获取年龄
var obj={
id:1,
name:'仵政',
age:22
}
console.log(obj.age); //obj，age 第一个参数是选定对象，第二个参数为该对象中的属性，结合起来在控制台输出该属性的属性值。
(2)、对象的遍历：
for in语法： //几乎可以说for in方法是用来遍历对象而存在的。属性是以键值对（key:value）的形式出现的。
for(var k in obj){
console.log(k) //k代表对象中的属性名。
console.log(obj[k]) //for in循环时不能使用点方法获取内容，如果使用点方法，就会返回undefined。
}
(3)、数组对象：
数组和对象是包含于被包含的关系；
数组与对象互相嵌套时取值：
var obj={
data:[
{id:1,name:'仵政'，age:22},
{id:2,name:'你怎么样？'，age:18},
]
}
console.log(obj.data[0].name); //在控制台中输出你怎么样？
34.(1)、ES6的数组方法：
filter()： //将数组中所有满足的条件中返回一个新的数组。
语法：
var a=[1,358,4,797,133,93,4];
var b=a.fliter(function(val,i,array){
return var>=100（筛选条件）； //所需要满足的条件。
})
console.log(a); //fuhe
find(): //返回数组中满足条件的第一个值。。 也可以说是，返回一个在满足条件中下标最小的值。
语法：
var a=[1,358,4,797,133,93,4];
var b=a.find(function(val,i,array){
return val>100（筛选条件）； //所需要满足的条件。
})
console.log(a); //返回的是一个具体的值。
findIndex()： //返回数组中满足条件的第一个值的下标。。 也可以说是，返回一个在满足条件中下标最小的值的下标。
语法：
var a=[1,358,4,797,133,93,4];
var b=a.find(function(val,i,array){
return val>100（筛选条件）； //所需要满足的条件。
})
console.log(a); //返回的是一个下标。
every(): //判断数组中所有的值，当所有值都满足条件时返回true，否则返回false（只要有一个不满足就返回false）。
语法：
var a=[1,358,4,797,133,93,4];
var b=a.every(function(val,i,array){
return val>100（筛选条件）； //所需要满足的条件。
})
console.log(a); //返回一个布尔值当所有值都满足条件时返回true，否则返回false
some(): //判断数组中所有的值，只要有一个满足就返回true，当所有值都不满足条件时才返回false。
语法：
var a=[1,358,4,797,133,93,4];
var b=a.some(function(val,i,array){
return val>100（筛选条件）； //所需要满足的条件。
})
console.log(a); //返回一个布尔值当所有值都不满足条件时返回false，只要有一个满足就返回true。
forEach遍历： ES6的方法
var arr=[2000,3,5,8,14,2000,I,like,you,]
arr.forEach(function(val,i,c){
console.log(val) //数组中的每一个元素。
console.log(i) //数组本身的下标
console.log(c) //数组本身 c为数组长度，且会输出c次。一般不使用，无意义。
}
sort 排序 ES6的方法： //按照Ascll码进行排序，现大写字母，在小写字母。在纯数字数组中排序，并不是数字大小，而是以数字中的位置排序。
语法：
var arr=[2000,3,5,8,14,2000,I,like,you,]
arr.sort()
对象---Map():
var a=new Map()
//给Map对象添加属性 使用set（）关键字添加
a.set('name','张三')；
//获取Map对象的属性 使用get（）获取
console.log(a.get('name'))
//用has()判断对象中是否存在该属性，存在返回true，不存在返回false。
console.log(a.has('height'))
(2)、字符串：
字符串的创建：
' ' 只是字符串的字面量。
var a='abc'
console.log(a);
通过new String创建的的字符串将会变成复杂数据类型。所有复杂数据类型都为Object；//字符串即使简单数据类型也是复杂数据类型。
var b=new String('abc')；
字符串的特征：
1、字符串具有长度属性，使用length来获取。
2、数组可以更改长度，但是字符串不可以。
3、字符串同样具有下标，且也是从零开始，到b.length-1 . //在浏览器在数据处理时会隐式的将字符串当作数组来处理。
字符串方法：
conact：合并字符串。
语法：
var a='123'
var b='123'
var c='123'
var d=a.concat(b,c)
split: 将字符串按照分割符，转变为数组。
语法：
var a='4522627289'
console.log(a.split ()) //当没有分隔符时，只会将字符串变成数组并不会分割。 控制台将会输出 [ '4522627289' ]
console.log(a.split('')) //当分隔符为空时，分隔符会将每一个字符，单独变成数组中的每一项。 控制台将会输出 [ '4','5','2','2','6','2','7','2','8','9‘]
console.log(a.split('2')) //当分隔符有值时，将会把该值的变成分隔符。 控制台将会输出 [ '45',,'6,'7','89‘]
indexOf()/lastIndexOf(): //与数组查询使用发法一致。//当查找的元素不存在时，返回-1，存在时返回该元素的下标(索引)。/当查找的元素多次出现时，默认查找第一个值得位置，想要查询arr.indexOf(需要查询的值，下标+1)
语法：
var arr=[2000,3,5,8,14,2000]
console.log(arr.indexOf(love))； //返回-1，表示在该数组中不存在查询元素。
console.log(arr.indexOf(2000 ，n))； //返回0，0表示在该数组中存在查询元素，且该元素的下标(索引)。n为在元素得下标(索引)。
LastindexOf： 当查找的元素不存在时，返回-1，存在时返回该元素的下标(索引)。/当查找的元素多次出现时，默认查找第一个值得位置，想要查询arr.LastindexOf(需要查询的值，下标-1)
区别：indexOf在数组中是从前往后查找。
LastindexOf在数组中是从前往后查找。
trim: 去除字符串两端的空格（在实际开发种是为防止空格输入。）
语法：
var a=' abc ';
a.trim()
a=a.trim() //去除来出两端的空格。
console.log(a.length) //看着他返回的长度为3
大小写字母互相转化：
语法：
var a='aadwFEFfefsfefeFE'
console.log(a.toUpperCase()) //小写转大写。toUpperCase()
console.log(a.toLowerCase()) //大写转小写。toLowerCase()
includes(): //用于查找字符串种是否包含，某一段内容。有返回true，没有返回false。 在字符串中可以同时查找多个内容。
//用于查找数组中是否包含，某一个元素。有返回true，没有返回false。 数组中使用只可以同时查找一个。
语法：
var a='abc def ghi'
console.log(a.includes('abc'));
slice()、substr()、substring()字符串截取：
语法：
var a='abcdefghijklnm';
a.slice（a,b） //a:开始截取位置 ，b：结束位置（不包含结束位置）
a.substr（a,b） //a:开始截取位置 ，b：截取的长度
a.substring（a,b） //a:开始截取位置 ，b：结束位置（不包含结束位置）
charAt() //通过对应下标查找对应的元素元素，当查找的下表不存在时，返回空。
语法：
var a='abcdefghijklnm';
console.log(a.charAt(i)); // i 为需要查找元素的下标。
9月24日
35.(1)、js中的对对象：
内置对象：
new Array：
new Object:
new String:
Math（算数对象）：
语法：
Math.PI; //PI圆周率
向下取整：Math.floor(1.9)； //控制台输出1，当为浮点数时，不足一舍去。
向上取整：Math.ceil(1.9)； //控制台输出1，当为浮点数时，不足一按一算。
绝对值：Math.abs(-18） //控制台输出18，去负号
取最大值：Math.max(); //括号内只能填入实际数字。
取最小值：Math.min(); //括号内只能填入实际数字。
重点：
随机数
Math.random() //取值范围0-1.
语法：
function fn(min,max){
return parseInt(Math.random()*(max-min)+min)); //随机从范围内去一个值，parseInt使用是为在获取数字取整。
}
console.log(fn(n,m)); //在控制台输出谁出一个n-m的随机区间的
案例：(随机获取一个16进制的颜色)
var a=[1,2,3,4,5,6,7,8,9,a,b,c,d,e,f] //随机颜色的组成内容。
function fn(min,max){
return parseInt(Math.random()*(max-min)+min)); //随机从范围内去一个值，parseInt使用是为在获取数字取整。
}
var b='#'; //声明一个变量用来接收返回结果。
for(var i=0;i<6;i++){ //十六进制的颜色组成＃加六个字符，所以循环六次
var c=fn(0,15)
b=a[c] //获取结果拼接为字符串并赋予b
}
console.log(b) //在控制台输出b。
new Date(日期对象):
创建日期对象：
var date=new Date(); //只有一种new中创建方式，且没有字面量。//(n,m)在对象需要获取参数进行传参时，内容需要用引号包裹时间拼接使用。
console.log(date); //如果日期对象中的参数无，便默认获取当前的电脑时间。
单独获取年份：
语法：
var date=new Date();
console.log(date.getFullYear());
单独获取月份： //获取值为0-11，0是1月，11是12月 ，也就是所得返回值加一为当前月份。
语法：
var date=new Date();
console.log(date.getMonth()+1);
获取星期： //获取值为0-6，0是周日，6是周六 。
语法：
var date=new Date();
console.log(date.getDay());
单独获取小时： //获取值为0-23，0是午夜12点。
语法：
var date=new Date();
console.log(date.getHours());
单独获取分钟： //获取值为0-59，。
语法：
var date=new Date();
console.log(date.getMinutes());
单独获取秒： //获取值为0-59，。
语法：
var date=new Date();
console.log(date.getSeconds());
单独获取毫秒： //1970年0点被称为计算机元年。
语法：
var date=new Date();
console.log(date.getSeconds()); //所得的返回值是从1970年0点开始。
console.log(+new Date()); //所得的返回值是从1970年0点开始。两个获取的方式的所得返回值一样。
扩展： 常用的阔加填充：toLocaleString(); toLocaleTimeString(); toLocaleDateString();
语法：
var a=new Date().tolocaleString() //以字符串形式返回一个固定格式的时间。
console.log(a); //控制台输出：年/月/日 时：分：秒 例如2022/9/24 14：35：45
var a=new Date().toLocaleTimeString(); //以字符串形式返回根据本地时间格式，把 Date 对象的时间部分转换为字符串。
console.log(a); //控制台输出：时：分：秒 例如 14：35：45
var a=new Date().toLocaleDateString(); //以字符串形式返回根据本地时间格式，把 Date 对象的日期部分转换为字符串。
console.log(a); //控制台输出：年/月/日 例如2022/9/24
案例：//距离目标时间的倒计时：距离国庆节倒计时；
function fn(a){
var b=+new Date();
var c=+new Date(a);
var d=(c-b)/1000;
var tian=parseInt(d/3600/24)
var h=parseInt(d/3600%24)
var m=parseInt(d/60%60)
var s=parseInt(d%60)
return '距离'+a+'还剩'+tian+'天'+h+'小时'+m+'分'+s+'秒'
}
setInterval(function(){
document.body.innerHTML=fn('2022/10/1 0:0:0')
},1000)
arguments函数内置对象：
使用情况：
1、当函数中的参数过多，或者不知道函数有多少个参数时使用。
2、使用arguments时，不要形参。
3、函数传递参数时，全部存放于arguments数组中。
4、arguments具有长度和下标属性，可以遍历。
5、不能使用数组方法。
6、arguments是一个伪数组。
案例： //函数封装，使用arguments完成冒泡排序。
语法：
function fn(){ //使用arguments时，不需要形参。
for(var j=0;j<arguments.length;j++){
for(var i=0;i<arguments.length;i++){
if(arguments[i]>arguments[i+1]){
var c=arguments[i]
arguments[i]=arguments[i+1]
arguments[i+1]=c
}
}
}
return arguments
}
console.log(fn(1,866,68,4,64,77,76,1,439,79))
36.（1）、DOM操做：使用js操做页面的标签。
什么是DOM ：文档对象模型（document object Model）是由w3c提出。
HTML页面组成：
一个HTML文件，就是一个文档。
标签：文档中的节点。
节点：文档节点、标签节点（元素节点）、属性节点、注释节点。
DOM树：
在DOM树种的每一个元素都是节点。在js种操做的内容都是节点。
节点（node）：
节点名（nodeName）
节点值（nodeValue）
节点类型：（nodeType）
标签节点（元素节点）
属性节点
注释节点
节点获取：
使用JS操做标签前，必须获取标签。（老方法但依然可以使用）
1、根据标签名获取元素节点。（老方法但依然可以使用）
语法：
var div=document.getElementsByTagName('div') //节点获取后需要使用一个变量来接受。参数位置决定所选元素。
以标签名作为参数，可以将页面中所以的该标签全部获取，
2、根据类名获取元素(class名)：（老方法但依然可以使用）
语法：
var div1=document.getElementsByClassName('div') //节点获取后需要使用一个变量来接受。参数位置决定所选元素。
以class名作为参数，可以获取页面中所有的设置了该class名全部标签. //获取是不需要加点,当获取多个时，内容是一个伪数组。
3、根据id获取节点： （老方法但依然可以使用） //因为Id在页面中具有唯一性，当使用Id获取节点是一次只能获取一个节点，获取时不需要加#号。
语法：
var div2=document.getElementsById('div') //节点获取后需要使用一个变量来接受。参数位置决定所选元素。
以Id名作为参数，可以获取页面中设置了该Id名的标签.
4、根据name名获取节点：（老方法但依然可以使用）
语法:
var div2=document.getElementsByName('div') //节点获取后需要使用一个变量来接受。参数位置决定所选元素。
标签中需要有name属性才可以获取，会将所以带有该name名字的标签远不获取回来，得到然是一个伪数组，其元素为拥有该元素的标签。
H5的获取方法：（新方法）以后常用
单个获取： //只能获取一个标签，且要获取的标签必须要拥有标签标识：如class的标识为点（.）id的标识为（#）一样。
var div=document.querySelector('div') //只能获取一个div标签
var div=document.querySelector('.div') //只能获取当前页面的第一个class名为div标签
var div=document.querySelector('#div') //只能获取当前页面的第一个id名为div标签
多个获取： //将页面中的所有该元素全部获取回来，并放到一个伪数组种。
var div=document.querySelectorAll('div') //获取所以div标签
var div=document.querySelectorAll('.div') //获取当前页面的所有带有该class名的div标签
获取特殊元素： //特殊元素亦可以使用上方的方法获取，但是下方的更规范，更简介。
html：
var html=document.documentElement //会将页面中所有的标签一并获取回来。
body：
var body=document.body //会将body中所有的标签一并获取回来。
（2）、获取并修改html标签中的内容：
将标签中的内容在控制台输出： //当前下方的两个方法只能获取一次。
innerText：
语法：
console.log(div.innerText); //只能获取内容。该书写方式是js引擎将参数当作对象来解div被当作对象，innerText为对象中的属性。
innerHTML：
语法：
console.log(div.innerHTML); //除了文字内容以外还可以将里面的标签一并获取。该书写方式是js引擎将参数当作对象来解div被当作对象，innerText为对象中的属性。
设置： //设置时都可更改内容，且ineerHTMl可以识别标签。
innerText：
语法：
div.innerText="想要替换的内容"； //不仅能获取内容，而且可以更改。
innerHTML：
语法：
div.innerHTML="<a href="#">等你</a> //不仅能获取内容，还可以更改，而且识别标签。
（3）、操做表单中的文字内容：
获取：
var input=document.querySelector('input')
console.log(input.value); //只能获取内容。该书写方式是js引擎将参数当作对象来解input被当作对象，value为对象中的属性。
设置：
var input=document.querySelector('input')
input.value='想要更改为的内容'
console.log(input.value); //只能获取内容。该书写方式是js引擎将参数当作对象来解input被当作对象，value为对象中的属性。
（4）、操作元素：
操作元素属性：
1、元素自带属性--固有属性。
var img=document.querySelector（'img'） //在获取图片的路径时，返回的是绝对路径。
2、后期添加给元素的属性（自定义）。
操做元素样式：
行内样式。
语法：
标签名.style.样式名=’样式值‘ //一次只可以更改一个属性。
className：
语法：
标签名.className='类名1 类名2...' //弊端：当使用className给html标签添加类名时会将原有所携带的类名覆盖掉。
classList：
语法：
标签名，classList.add('类名1',' 类名2...'); //当使用classList给html标签添加类名时不会将原有所携带的类名覆盖掉。可以同时增加多个类名。
标签名，classList.remove('类名1',' 类名2...'); //可以同时删除多个类名。
标签名，class List.toggle('类名')切换 //可以添加和删除来回切换。
标签名，class List.item() //参数位置填写的为下标，item是以下标来获取类名
元素的属性操作的方法：
设置元素属性：
语法：
标签名.setAttribute('id','box') //第一个参数位置是要设置的属性名，第二个参数位置是要设置的属性值。
获取元素属性：
语法：
标签名.getAttribute('') //参数位置为元素中想要获取的属性名。
删除元素属性：
语法：
标签名.removeAttribute('') //参数位置为元素中想要删除的属性名。
简单事件：
1、事件三要素：
事件源
事件类型
事件驱动程序
2、执行事件的步骤：
html部分语法：
<body>
<button>按钮</button>
</body>
js部分语法：
var btn=aocument.querySelector("button") //获取事件源。
btn οnclick=function(){ //给事件源，绑定事件。
alert('下课了') //书写事件驱动程序。
}
案例：
语法：
html部分语法：
<body>
<span>按钮</span>
</body>
js部分语法：
var span=aocument.querySelector("span") //获取事件源。
span.οnclick=function(){ //给事件源，绑定事件。
this.innerTHML=456 //书写事件驱动程序。在事件中的this，事件绑定给谁，this就指向谁。
}
百度换肤事件：
var imgs=document.querySelectorAll('img') //获取页面中所有img。
for(var i=0;i<imgs.length;i++){ //遍历所有的img
imgs[i].οnclick=function(){ //给所有img绑定点击事件
document.body.style.background='url('+this.src+')' //将当前点击图片路径设置给body元素
}
}
22年9月27日
37.（1）、排他思想：
概念：只能自己有，其他人不能有。。//核心思想：干掉其他人，活到最后。
语法：
eg：
var btns=document.querySelectorAll('button')
for(var i=0;i<btns.length;i++){
btns[i].οnclick=function(){
for(var j=0;j<btns.length;j++){
btns[j].style.background=''
}
this.style.background='pink'
}
}
（2）、全选反选：
全选，全部选：
由全选控制下面的所有按钮。
语法：
案例：
var a=document.querySelector('#all') //获取全选按钮。
var b=document.querySelector('.a') //获取下方所有按钮。
a.οnclick=function(){ //给全选按钮绑定点击事件
for(var i=0;i<b.length;i++){ //遍历所有下方的按钮。
a[i].checked=this.checked //将下面的按钮的选中状态于全选按钮报错一致。
}
}
反选： //原理：判断选中按钮的长度和原有按钮的长度，如果长度想等，就设置全选，否则不选。
由下面的按钮控制全选按钮。
选择选中状态选着框：
语法：
var input=document.querySelector( ' .a:checked ' ) //:伪选择器。
var input=document.querySelectorAll( ' .a ' ) //下方的按钮
案例：
for(var i=0;i<b.length;i++){ //遍历所有下面的按钮。
b[i].οnclick=function(){ //给下面的所有按钮绑定点击事件。
var bs=document.querySelectorAll('.a:checked') //获取页面中所有被选中的按钮
if(bs.length==ab.length){ //判断两者的长度（选中的与原有的长度）
a.checked=true
}else{
a.checked=false
}
}
}
（2）、节点操作：
节点关系：
1、包含关系（也被称为父子关系）：
2、并列关系（也称为兄弟关系）：
节点关系访问：
1、通过子节点获取父节点：
· parentNode语法： 该方法可以连续的使用，一层一层的向上查找
var i=document.quertSelector('#box') //首先获取子节点，
var a=i.parentNode //通过parentNode获取父节点，输出
console.log(a) //通过该方法获取的节点输出时输出的为该标签中的所有内容。
2、通过父节点获取子节点：
方法一：
children语法
var i=document.quertSelector('#box') //首先获取父节点，
var a=div.children
console.log(a) //通过该方法获取的内容是，一个伪数组，数组中包含所有子元素（标签）节点。
//当要使用直接点中的某一个是，可以通过下标去获取。
方法二：
childNodes语法
var a=div.childNodes
console.log(a) //通过该方法获取的内容是，一个伪数组，数组中包含所有子节点（包含：标签节点、文字节点、注释节点···）。
3、获取兄弟节点：
上一个兄弟 ( previousEleementSibliing ) ：
var a=document.querySelector('#li2');
var b=a.previousEleementSibliing（常用）
var b=a.previousSibling //该方法获取的文字节点
下一个兄弟：（ nextElementSibling ）：
var a=document.querySelector('#li2');
var b=a.nextEleementSibliing（常用）
var b=a.nextSibling //该方法获取的文字节点
节点关系操作：
1、创建：
通过Js创建一个标签：
语法：
var a=document.createElement('li')
li.innerHTML='我是li'
案例：通过JS创建一个p标签：
var v=document.createElement('p') //创建一个p标签
p.innerHTMl='你好' //添加内容
li.classList.add('box') //添加class属性
console.log(p)
2、插入（appendChild）： //可以将创建的标签插入到指定的位置
可以将创建的标签插入到页面中： //默认的插入原内容的后面
语法：
var ul=document.querySelector("ul")
ul.appendChild(li)
方法二（insertBefore）： //插入到原有内容的前面,也可以插入到任意位置。其原理是利用children[]下标进行位置选者插入。
插入到原有属性的前面
语法：
父节点 . insertBefore（要插入的节点，父节点 . children[0]）
3、删除（removeChild）： //不能实现自己对自己的删除，要通过父元素。
要通过父元素删除：
语法：
var ul=document.querySelector("ul")
var li=document.querySelector("li")
ul.removeChild(li) //通过父元素删除
4、克隆（cloneNode() ）不常用： //可以称为浅拷贝，只克隆他的标签，
！！！！！如果想要克隆所有内容的话需要在函数参数位置加入true
22年9月28日
38.(1)、 `(反引号)与${}(内容写在{}内)结合使用
(2)、 BOM笔记（浏览器对象模型）：
BOM组成：
document：DOM文档对象模型
location：浏览器提供的操作方法
navigation：浏览器的版本
screen：浏览器的可视窗口
history：历史记录
window对象：
定义在全局作用域中的所有内容和方法、变量。。。。都是window对象成员。 //window是BOM中的顶级对象。一般情况省略不写。
入口函数（window.onload）： //让浏览器先行加载页面中的所有资源（标签、css、图片、视频、音频。。。。）,最后加载JS ，页面中只能出现一次入口，当出现多个是，只读取最后一个入口。
语法：
window.οnlοad=function()
{}
this指向：
1、在全局作用域下，this指向window。
语法：
<script>
console.log(this)
</script>
2、定义在全局作用域中的函数，this指向window
function fn(){
console.log(this)
}
3、在对象中，this指向当前对象本身。
4、在构造函数中的this指向New创建的对象。
5、在DOM事件中，this指向绑定事件的元素。
6、定时器中，this指向是window对象。
定时器：
1、延时定时器（setTimeout（function（）{}，延时时间单位毫秒））： //一次性的。
语法：
setTimeout（function（）{
console.log('你好！！')
}，延时时间单位毫秒）
清除，停止：
clearTimeout
2、定时器： //可以在规定的时间区间内一直执行
语法：
setInterval（function（){}，间隔时间）
清除，停止：
clearInterval
本地存储： //LocalStorage永久存储 SessionStorage会话存储 Cookies
概念：浏览器会将一部分数据存储到浏览器中
语法：
LocalStorage本地存储（永久存储） //大小20mb
SessionStorage会话存储 //大小5Mb
Cookies //存储的数据会有时间限制
特征：
1、将数据存储到本地后，可以刷新页面不会丢失数据。
2、本地存储中的数据类型是字符串，存储和获取是需要进行数据类型的转化。
3、注意，存储时密钥名不可重复， 重复时会被覆盖
函数封装：
// 存储数据
function setData(name,val){0
localStorage.setItem(name,JSON.stringify(val))
}
// 获取数据
function getData(name){
var a=localStorage.getItem(name)
if(a!=null){
return JSON.parse(a)
}else{
return []
}
}
SessionStorage会话存储： //当会话结束时会被清除，存储的数据只能在本页面中使用，不能够跨页面。
1、setltem（存储数据）：
语法（sessionStorage.setItem('vel',a)）： //vel为密钥，
var a=10000011
sessionStorage.setItem('sf',a)
2、getltem（获取数据）：
语法（sessionStorage.getItem）：
var a=sessionStorage.getItem('sf') //参数位置写已经存储的数据的密钥。
3、removeItrm（删除数据）：
语法：（sessionStorage.removeItrm）：
var a=sessionStorage.emoveItrm('sf')
4、clear（清空数据）:
语法：
sessionStorage.clear（） //清空所有存储的数据。
LocalStorage永久存储： //同样拥有SessionStorage的四种处理方式。永久存储的数据可以跨页面中使用。
1、复杂数据的内容存储时： //需要使用 JSON.stringify()方法的转化。
localStorage.setItem('密钥名'，JSON.stringify(变量名))
2、复杂数据的内容获取时： //也需要将获取回来的内容使用JSON.parse()方法转化
localStorage.getItem（'密钥名')
名=JSON.parse(名) //转化。
3、当获取的内容不存在本地存储中，会返回null。
模态框：
22年9月30日
39.（1）、事件：
鼠标事件：
点击事件（onclink）：
双击事件（ondbl）:
表单独有事件：
获取焦点onfocus：
失去焦点onblur：
自动获取焦点事件：input.focus() //这个效果一个页面中只能出现一次。
鼠标移入：onmouseover 鼠标移出：onmouseout
拖拽事件：
鼠标按下：onmusedown
鼠标移动：onmousemove
鼠标抬起：onmouseup
键盘事件：
键盘按下:onkeydown //键盘按下 也能触发长安效果，包括键盘中的功能键
键盘抬起：onkeyup
键盘长按：onkeypress
如何判断回车键：
触屏事件：
40.（1）、事件绑定：
事件监听（addEventListener）： //只是另一种事件绑定方法，事件监听时，事件名不需要on关键字.
语法：
div.addEventListener('click',function(){ //第一参数是指绑定事件中，该事件的类型，第二参数是驱动程序。第三参数填写为（false为事件冒泡，/true为事件捕获。）
alert('你好')
})
(2)、事件执行顺序： //由addEventListener方法的第三个参数决定，false事件冒泡，一般不屑，true为事件捕获。
事件捕获：由外向内； //冒泡前会先进行事件捕获。
事件冒泡：由内向外；
语法：
di1.addEventListener('click',function(){
alert('大')
},true)
事件对象event：
概念：
当一个事件被触发时，和这个事件相关的所有内容都会存到一个对象中，这个对象就算事件对象event
阻止事件冒泡（event.stopPropagation()）： //阻止事件冒泡时将该语法写入事件驱动程序中。
语法：
di1.addEventListener('click',function(event){ //function的参数为需要写event 也可以简写e e为了兼容高版本，event兼容低版本。
event.stopPropagation()
alert('大')
},true）
阻止默认事件e.preventDefault()：
语法：
di1.addEventListener('click',function(event){
e.preventDefault()
alert('大')
},true）
事件委托： //将子元素的事件，委托给父元素
原理：
点击子元素时会冒泡到父元素身上，所以将事件绑定给父元素，然后使用事件对象event去监听点击的是哪一个之元素。
事件委托的好处：
减少了DOM事件的绑定次数，让js添加的元素也可以拥有事件。
在事件委托中this和event.target区别：
this 事件绑定给谁，this就指向谁。
event.targrt 谁触发事件，就指向谁。
语法：
ul.addEventListener('click',function(event){ //event.target将this替换掉。
event.target.style.background='red';
})
扫一扫
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
