JavaScript
书写位置
行内：
<body>
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
内嵌：
<head>
<script>alert="lalalalalallla"</script>
</head>
引用外部：
<head>
<script src="my.js"></script>
</head>
注释：
// 单行注释
/* */ 多行注释（块注释，块级注释）
输入\输出：
prompt()：带有输入框的弹窗，默认值类型为字符型
console.log()：控制台输出
alert()：内容弹窗
变量：
var a： var为声明变量关键字，不使用的话为全局变量
a=12：赋值
var a,b,c,d,ab：可同时声明多个变量
var a=12：可同时声明变量并赋值，也可同时声明多个变量并赋值，也称为变量初始化
变量更新：同一个变量进行多次赋值后，存储的是最后一次赋给它的值。
特殊情况：
只声明，不赋值输出
var a;
console.log(a);
返回undefined
不声明不赋值输出
console.log(b);
会报错
不声明，只赋值输出
age=10;console.log(age);
输出为10（这是全局变量，不推荐使用）
变量名的命名规则：
只能包含大小写字母、数字，下划线、$符号及其组合，不能以数字开头，区分大小写，不能是var等关键字，尽量遵循驼峰命名法
数据类型：
只有当给声明好的变量赋值后，才能确定该变量的数据类型，且可以变化
简单数据类型：
number：数字型，不区分整数与小数
进制表示：
（默认会直接转换成十进制）
二进制：0，1
八进制：0-7，以0开头
十进制，0-9
十六进制：0-9，A-F，以0x开头
js数字范围：
number.max_value：表示数值的最大值，为1.7976……太长了，把这个放到alert里面自己看吧
number.min_value：表示数值的最小值，为5e-324
特殊值：
infinity：正无穷大
-infinity：负无穷大，就是无穷小
NaN: not a number，表示非数值
is NaN：判断值是否为非数字，是数字，返回false，是非数字，返回true
string：字符串型
‘string’：被单引号或双引号包围的数据为字符串
字符串嵌套：
引号遵循就近匹配原则
转义符
\n：换行
\b：空格
\\：反斜杠\
\'：单引号 '
\"：双引号 "
\t：tab 缩进
\b：一个空格，blank
变量名.length：返回变量长度（字符串个数）
变量 + 变量：字符串拼接（两个数值中间用+会进行求和计算）
也可以使用英文逗号分隔，不过输出时中间有空格
Boolean：布尔型
true参与数值运算时当1，false为0.
undefined：未定义类型
undefined与字符串相连当字符处理，参与数字运算返回NaN
null：表示空值
null与字符相连同上，参与数字运算当0
typeof 变量名：返回变量类型
prompt取得的值是字符型
Tip：在chrome浏览器f12的console界面，返回值呈蓝色表示数值型，黑色代表字符串，深蓝色表示布尔型，浅灰色表示undefined和null
字面量：是固定赋给变量的值
数据类型转换
一、转换成字符型
变量类型->字符（假设变量赋值为任意数字）
1、变量.toString();
2、String(变量或数据)
3、隐式转换
*变量 + ‘’
二、转换成数值型
*1、parseInt(变量或数据) //整数转换数值，小数取整；’120px’会去掉数字后面的本身不存在数值属性的数据并转换120为数值，rem120px返回值为NaN
2、parseFloat(变量或数据) //小数转换数值，细节同上
3、Number(变量或数据) //强制转换
4、运算符+-/ //隐式转换，注意+本身具有连接字符的意义存在，部分场景需要对字符进行强制转换后使用
转换布尔型：
Boolean()：空值、否定值会被转换成false，如 ‘’、0、NaN、null、undefined。其余值或状态都会转换成true
运算符：
+-*/%：加减乘除，最后一个为取余(取模)，因浮点数精度问题，没有特殊要求不要使用浮点数(小数)直接进行算数运算，包括判断是否相等
表达式：
由数字，运算符，变量等组成的式子成为表达式且有返回值；有等号时表达式运算右边的运算结果赋值给左边变量
前置递增\递减，后置递增\递减：
++和–为递增\递减运算符，放在变量前面称为前置递增\递减，放在变量后面成称为后置递增\递减。此运算符只能与变量配合使用。
++num：相当于num = num + 1，先加1，再返回值。var age=10; console.log(++age + 10); 结果为21
num++：相当于num = num + 1，先使用原值运行当前行代码，运行完最后再加1。var age=10; console.log(age++ + 10); 结果为20
比较运算符(关系运算符)：
<、>、>=、<=、==、!=、===、!==：依次为 小于、大于、大于等于、小于等于、判断是否相等，在一定条件下此符号默认会将字符串类型转换成数值型、不等、全等、不全等，后两个判断要求值和数据类型全部一致；如果使用判断条件成立，返回值为true，反之为false
逻辑运算符：
他是用来进行布尔值运算的，返回值也是布尔值
&&：逻辑与，两值为true，为true，有一个为false，结果为false
||：逻辑或，两个值有一个为true，值为true，都为false，值为false
!：逻辑非，取反，与true使用结果为false，与false用值为ture
逻辑中断(短路运算)：
原理：存在多个表达式或值时，左边所得的值可以确定结果时，不再继续运算右边的值
短路与：左边为真，返回右边的值；左边为假，返回左边的值
eq：123 && 456；返回值为 4560 && 456；返回值为 00 && 1+2 && 456 * 2342342；返回值为 0
短路或：左边为真，返回左边的值；左边为假，返回右边的值123 || 456 返回值为1230 || 456 返回值为4560 || 456 || 456 * 789 返回值为456
赋值运算符：
=、+=、-+、*=、/=、%=：依次为直接赋值\先加\减\乘\除\取余后再赋值
eq：num += 2 相当于num = num + 2
运算符优先级:
| 优先级 | 名称 | 举例 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++、–、！ |
| 3 | 算术运算符 | 先*/%，后+- |
| 4 | 关系运算符 | >、<、>=、<= |
| 5 | 等于判断运算符 | ==、!=、===、!== |
| 6 | 逻辑运算符 | 先&&后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
分支：
if分支：
基本结构：if (条件表达式) {执行语句} (单分支语句)
当条件为真时，则执行语句；条件为假时，跳出if语句，执行后面的代码
双分支语句：
结构：if (条件表达式) {执行语句1} else {执行语句2}
多分支语句：
if(条件表达式1){执行语句1}else if(条件表达式2){执行语句2}……else{执行语句n}
三元表达式：
条件表达式 ? 表达式1 : 表达式2
思路：当表达式值为真时，返回表达式1的值，否则返回2的值
switch分支语句：
基本语法：switch(表达式){case 值1: 执行语句1; break; case 值2: 执行语句2;break; … default: 执行语句n;}
思路：表达式与各个case后的值进行匹配，如果匹配成功，执行该case下的语句，否则继续向下匹配，没有匹配的，执行default后面的语句。
注意点：switch中的表达式是一个变量；匹配方式是全等，也就是值和数据类型全部一样；break不强制写入，但是会一直往下执行下一个case且依旧执行其后面的语句
Switch语句对结果的判断是不错的选择，适用于分支较多的案例
If适用于范围判断，分支较短的情况
循环：
for循环：
基本语法for (初始化变量; 条件表达式; 操作表达式) {循环体}
初始化变量：使用var声明的普通变量，通常用作计数器使用
条件表达式：用来决定每次循环是否继续执行，即终止条件
操作表达式：每次循环最后执行的代码，用于变换计数器的更新
断点调试：
chrome：f12->sources,f11：一步一步执行
实操1：
求1到100之和
求1到100之和的平均值
分别求1到100之间奇偶之和
求1到100之间能被三整除的数字之和
实操2：
求班级总分数和平均分
思路：1输入总人数;2输入每个学生的成绩;3求成绩之和与平均成绩
编程思路：使用prompt进行数据输入，使用alert实现最终输出
实操3：一行打印5个星号
双重for循环（嵌套）：
基本格式：for(初始化变量1; 条件表达式1; 操作表达式1){for(初始化变量2; 条件表达式2; 操作表达式2){循环体}}
while循环：
基本格式：while(条件表达式){循环体}注意计数器的存在和变化，防止死循环
do while循环：
基本结构：do {循环体}while(条件表达式)：与上面不同的是，先执行一次循环体，再进行判断，如果为真，继续执行循环体，直到判断为假，退出循环。同样注意计数器及其的变化
continue关键字：跳出本次循环，执行下一次循环
break关键字：跳出该循环结构
数组：
一组数据的集合，每个数据都是元素
创建数组：利用new 创建(空)数组var 数组名= new Array();
自定义数组：每个元素使用英文逗号隔开，最后一个不使用标点符号var 变量=[1,'2',true];
获取数组元素：通过索引（下标）获取元素，下标从0开始。如果使用没有元素个数的下标，会返回undefined。迪丽古力马尔扎哈var 变量=[1,'2',true];console.log(变量[索引号]);
遍历数组：使用循环的方式取出数组元素，这个方式叫遍历，注意下标范围，从0开始。
数组长度：获取数组元素个数数组名.length
新增数组元素：
1、可以通过修改数组长度（数组名.length）数组名.length = 大于原本数组长度的正整数;
增加长度后，由于没有值，新增进来的元素默认值是undefined。
*2、通过修改数组索引追加元素，也可以通过该方式修改已有元素数组名[下标号]=追加元素;
不要直接给数组名赋值，会变成普通变量
函数：
封装了可以重复使用的代码的代码块
声明函数
function 方法名(变量){执行语句}
变量可以写多个，用英文都逗好隔开，函数命名一般用动词，可以为空；且形参在传递完参数之后就没有任何值了，可以复用
调用方法：方法名(值);
值的个数要与该方法的变量数量相同，用英文都逗好隔开;多余形参个数会正常输出，剩下的的值会丢弃，少于形参会返回NaN
参数传递：
声明函数名后面小括号里面的变量为形参（形式参数），引用函数名后面小括号里面的变量或值称为实参（实际参数）
利用函数求任意两个数的和以及累加和
return：返回值
写在函数体最后，用来返回结果，并终止后面的代码执行
使用方法：return 需要返回的结果（变量/值/可以有结果的表达式）
求任意两个数的最大值
求数组中的最大值
利用return终止函数并且只能返回一个值
函数返回值的注意事项:
有终止后续后面代码的执行
只能返回最后一个值，包括在return同一行上用逗号分隔的变量，可以使用数组进行多个变量输出
每个函数都有返回值，如果有return则返回return后面的返回值，没有则返回undefined
break，continue，return的区别
break结束当前循环体
continue跳出本次循环，继续执行下次外层循环
return不仅可以推出循环，还可以返回return语句中的值，同时还可以结束当前函数体后续的代码
对象arguments的使用：
当不确定实参个数的时候，可利用函数arguments存储传递过来的实参，以伪数组的方式
伪数组：
1、具有数组的length属性
2、按照索引的方式进行存储
3、没有真正数组的方法
4、只有函数内置了对象arguments
利用函数求任意一组数的最大值
利用函数翻转数组reverse
利用函数封装冒泡排序
利用函数判断闰年
在一个函数里面可以调用另一个函数，将按顺序执行
输出2月份的天数
函数的声明
1、利用函数关键字自定义函数名：function 函数名(){}
2、匿名函数：此方式定义的函数没有函数名，引用方式使用变量名();的方式，也可以实现参数传递，返回的只是一个值；var 变量名 = function(){}
作用域
作用域：代码名字在某个范围内起作用，这个范围就是作用域，为了减少命名冲突
分类
全局作用域：整个script标签内或整个js文件中声明的变量
局部作用域：函数内声明的变量（函数作用域）
变量的作用域
分类
全局变量：在全局作用域下声明的变量；其中，未使用var声明的变量为全局变量
局部变量：在局部作用域下声明的变量；其中，函数的形参也可视为局部变量
从执行效率看：
全局变量只有关闭浏览器时才会释放内存资源，局部变量在执行完当前所在生效范围的程序块后就会释放内存
*块级作用域（es6）
使用{}内部声明的为块级作用域
作用域链
从本级作用域开始向上级一层一层查找本层需要的值或变量，遵循就近原则取值。
作用域链案例：
1、读程序
function f1(){
var num = 123;
function f2(){
console.log(num);
}
f2();
}
var num = 456;
f1();
读程序2
var a=1;
function fn1(){
var a=2;
var b='22';
fn2();
function fn2(){
var a=3;
fn3();
function fn3(){
var a=4;
console.log(a);
console.log(b);
}
}
}
fn1();
预解析
js解析器在进行解析代码的时候会进行两步操作：预解析和代码执行；js引擎会把js中所有var还有function提升到当前作用域的最前面
预解析
分类：
变量预解析（变量提升）
在当前作用域内，把所有已经声明(var)的变量提升到最前面,不提升赋值操作。
函数预解析（函数提升）
在当前作用域内，把所有已经声明(function)的函数提升到最前面，不调用函数。
代码执行
按照代码书写顺序从上到下执行
对象
官语：是一组无序的相关属性和方法的集合。
对象是由属性和方法组成
属性：事物的特征。
方法：事物的行为。
创建对象
可以通过字面量创建，new object关键字，构造函数创建对象
通过字面量创建
使用{}创建
eq：
var obj = {uname = '张三',age=18,sex='男',sayHi:function(){console.log('hi~');}}
对象的属性或者方法是采用键值对的方式创建{键(属性名):值(属性值)}，多个属性或方法中间用逗号分隔，方法冒号后面跟的是一个匿名函数
属性调用
使用对象名.属性名的格式
console.log(obj.uname);
或 对象名['属性名']
console.log(obg['age']);
方法调用
同理，对象的方法调用方式为对象名.方法名()
obj.sayHi();
关键字创建
直接上例子：
var obj = new object();
通过赋值的方式进行追加
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){console.log('hi~');}
构造函数创建
是把对象里面的一些相同的属性和方法抽象出来封装到函数里面
语法格式：
function 构造函数名(形参){this.属性名=值;this.方法名=function(){}}
调用方式：
var 变量=new 构造函数名(实参或值);
// 构造函数内的方法调用
变量.方法名(实参);
Tip：构造函数名的首字母要大写，不需要return，
遍历对象
for…in…for(变量in对象){循环体}
// eq:
for(var k in obj){console.log(obj[k])}
内置对象
对象分类：自定义对象、内置对象、浏览器对象
前两种是js基础，属于ecmascript，第三个为js独有
查文档
可在mdn查询js对象的相关信息，包括对象的属性和对象的方法
常用内置对象
math数学对象最大值
math.max(一组数字);求一组数字中最大的数
封装自己的数学对象
通过创建自定义对象可以模拟内置数学对象
math.PI //圆周率
math.floor() //向下取整(去小数点取整)
math.ceil() //向上取整(取小数点加一取整)
math.round() //四舍五入
math.abs() //绝对值
math.max() //最大值
math.min() //最小值
随机数math.rendmom(),取值范围为左闭右开
补充：开闭区间是一个数学概念，开区间使用符号小括号()表示，闭区间使用符号中括号[]表示，闭区间包含了两个端点，而开区间则不包含两个端点
取随机整数
// 得到两个数之间的整数，且包含这两个数
function getRandom(min,max){
return math.floor(math.random()*(max-min+1))+min
}
练习
猜数字
猜1到10之间会出现哪个数，猜中了，返回恭喜，猜错了，返回抱歉
变种：
猜数字
猜1到10之间会出现哪个数，用户给出的数字大于猜测数字，提示大了，并继续猜，反之提示小了，依旧继续猜，猜中，返回正确
参考：猜数字
Date日期对象
date是一个构造函数，需要使用new来调用
var date=new date();
当没有参数时，返回当前系统下的当前时间
参数格式：年月日使用逗号隔开（2008,08,08），或用横杠连接的字符串，时间时分秒用分号分隔（’2008-8-8 8:8:8’）
格式化日期
var date=new date();
console.log(date.getFullYear()); //返回当前年份
console.log(date.getMonth()); //返回月份减一的数字
console.log(date.getDate()); //返回当前日期
console.log(date.getDay()); //返回星期，从周日到周六的顺序，周日返回0（许多英语国家、犹太教、日本的习惯）
格式化时间
console.log(date.getHours()); //时
console.log(date.getMinutes()); //分
console.log(date.getSeconds()); //秒
总毫秒数（时间戳）
Data对象的起始时间为1970年1月1日（世界标准时间）（相关来源）
获得date总毫秒数，是距1970年1月1日0时0分0秒过去了多少毫秒
1、通过方法：valueOf() getTime()
2、实例化方式：var 变量= +new data();
3、H5新增：Date.now()
案例：倒计时
思路:使用时间戳，用将来的时间戳减去当前的时间戳，然后进行天时分秒转换
换算与公式：
1秒=1000毫秒
1分钟=60秒
1小时=60分钟
1天=24小时
天数=总秒数/60/60/24
小时=总秒数/60/60%24
分钟=总秒数/60%60
秒=总秒数%60
注意要取整，使用parseInt()
数组对象
创建数组：new Array();创建一个空数组，两个以上的参数为数组，一个参数不是数组；var arr=[1,2,3];字面量创建数组
检测是否是数组
1、instanceof逻辑运算符：判断变量是否为数组,是为true，否为false
使用方法:
(变量 instanceof Array)
2、Array.isArray(变量)：返回值为true和false
添加数组元素
push()：追加数组元素；且有返回值，为追加完成之后数组的长度；arr.push([参数1，[参数2，……]])
unshift()：前端插入数组元素；特性同上；arr.unshift([参数1，[参数2，……]])
删除数组元素
pop():删除最后一个数组元素；返回值为被删除的元素；arr.pop()
shift():删除第一个数组元素；特性同上；arr.shift()
案例：筛选数组
要求将数组[1500,1200,2000,2100,1800]中超过2000的删除，剩余的放到新数组中
数组元素排序
翻转数组reverse()：arr.reverse();
冒泡排序sort()：arr.sort();仅限个位数
冒泡排序方法完善：arr.sort(function(a,b){return a - b;});其中，a-b为升序排序，降序为b-a
数组索引方法：
indexOf(数组元素):返回该元素在数组中的索引号；从前往后查找，只返回第一个满足条件的索引号，没有满足条件的元素时，返回-1；arr.indexOf(‘zhangsan’)
lastIndexOf(数组元素)：返回该元素在数组中的索引号；从后往前查找，只返回第一个满足条件的索引号，没有满足条件的元素时，返回-1；arr.lastIndexOf(‘zhangsan’)
案例：数组元素去重
删掉数组['c','a','z','a','x','a','x','c','b',]中相同数组元素，只保留一个，并放到新数组中
思路：使用旧数组元素与新数组中的元素进行一一对比，有相同的，不进行添加，没有相同的，添加到新数组中
数组转换为字符串
toString()：将数数组转换为字符；arr.toString()
join([分隔符])：使用分隔符进行链接转换，分隔符须在单引号内填写，默认（空）使用逗号分隔
字符串对象
基本包装类型
基本包装类型：把简单数据类型包装成了复杂数据类型
js提供了三个特殊引用类型：string，number和boolean
字符串不可变
变量在有值的基础上重新赋值之后，原来的值不会被新值覆盖，新旧两个值都在内存中
根据字符返回位置
*字符串的所有方法，都不会修改字符串本身，操作完成会返回一个新的字符串
indexOf(要查找的字符，[起始位置])：从规定起始位置开始向后查找，默认从第一个字符开始
unindexOf（要查找的字符，[起始位置]）：从规定起始位置开始向前查找，默认从最后一个字符开始
案例：
查找字符串"abcoefoxyozzopp"中所有"o"出现的位置以及次数
根据位置返回字符串
charat(参数)：返回对应位置的字符
string(参数)：返回对应位置字符的ascii值，通常用于判断按键操作
str[参数]：H5新增
案例：
判断字符串"abcoefoxyozzopp"中出现最多的字符，并统计出现此数
补充：对象名['属性名']：可以判断该对象中有无该属性
参考：统计出现次数最多的字符
字符串拼接与截取
concat(str1,[str2,…])：用于在后面拼接两个或多个字符串，等效于使用+，后者用的更多
substr(参数1,参数2)：从参数1开始，参数2为要取的个数
slice(参数1,end)：从参数1开始，截取到end，end不取出
substring(参数1,end)：从参数1开始，截取到end，end不取出；不接收负值
替换字符串与字符串转换数组
replace(字符1,字符2)：将字符1替换为字符2；只将从左到右开始第一个匹配的字符替换掉
split(‘分隔符’)：将字符串转换为数组，分隔符根据字符串中的的分隔对应；与join的返回值相对应
eq：
str='red,black,yello,blue';
str.split(',')
//或
str2='red&black&yello&blue';
str2.split('&')
简单数据类型与复杂数据类型
基本数据类型或值类型，复杂类型又称为引用类型。
值类型：string，number，boolean，undefined，null（比较特殊，null的返回值为object）
引用类型：new创建的对象（系统对象，自定义对象），object，array，date等
堆栈
空间分配：
简单数据类型存放在栈中，复杂数据类型放在堆中。讲解参考
Tip：js中没有堆栈概念，只是为了便于理解代码执行，学习其他编程语言
这部分内容如果感兴趣可以参考C语言的数据结构相关知识
简单数据类型参数传递
复杂数据类型参数传递
apis
api:一种工具，是以接口的方式实现的。
web api：是针对浏览器的页面元素的api。
详细的api接口也可在mdn中查找
dom
处理页面标记语言的标准接口
专有名词：树
文档，一个页面就是一个文档，用document表示
元素，页面中所有的标签都是元素，用element表示
节点，页面中所有的内容都是节点，用node表示
获取元素
getElementByID(id)
获取元素对象
<div id="time">asdfasdf</div>
<script>
var timer = document.getElementByID('time');
console.log(timer);
</script>
Tip：因为html是从上往下加载的，所以要先写标签，然后在下面写script；id是大小写敏感的字符串；返回的是一个元素对象；console.dir()打印返回的元素对应的对象，可查看里面的属性和方法
getElementsByTagName()
获取带有指定标签名的对象的集合
<ul>
<li>空山新雨后，自挂东南枝。</li>
<li>欲穷千里目，自挂东南枝。</li>
<li>爹娘闻女来，自挂东南枝。</li>
<li>洞房花烛夜，自挂东南枝。</li>
<li>天生我材必有用，各种自挂东南枝。</li>
<li>人生在世不如意，不如自挂东南枝。</li>
</ul>
<ol id="ol">
<li>空山新雨后，自挂东南枝。</li>
<li>欲穷千里目，自挂东南枝。</li>
<li>爹娘闻女来，自挂东南枝。</li>
<li>洞房花烛夜，自挂东南枝。</li>
<li>天生我材必有用，各种自挂东南枝。</li>
<li>人生在世不如意，不如自挂东南枝。</li>
</ol>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
var olis = document.getElementsByTagName('ol');
console.log(olis[0].getElementsByTagName('li')); //还可以获取某个元素(父元素)内部的所有指定标签名的子元素element.getElementsByTagName(标签名);
</script>
Tig：返回的是获取元素对象的集合，以伪数组的方式存储（页面没有标签就是空伪数组）；可采用遍历的方式输出元素对象里面的对象；得到的元素的对象是动态的；还可以获取某个元素(父元素)内部的所有指定标签名的子元素element.getElementsByTagName(标签名);eq：ul.getElementsByTagName(‘li’);父元素必须是单个对象（必须指明具体是哪一个元素）获取的时候不包括父元素自己，如想实现使用父元素名，可以在父元素标签处设置一个同名id；
H5新增获取元素方法
1、document.getElementsByClassName(‘类名’);：根据class类名放回元素集合
<ul class="cul">
<li>空山新雨后，自挂东南枝。</li>
<li>欲穷千里目，自挂东南枝。</li>
<li>爹娘闻女来，自挂东南枝。</li>
<li>洞房花烛夜，自挂东南枝。</li>
<li>天生我材必有用，各种自挂东南枝。</li>
<li>人生在世不如意，不如自挂东南枝。</li>
</ul>
<script>
var lis = document.getElementsByClassName('cul');
console.log(lis);
</script>
2、document.querySelector(‘选择器’);：根据指定选择器返回第一个元素对象
<ul class="zgdnz">
<li>空山新雨后，自挂东南枝。</li>
<li>欲穷千里目，自挂东南枝。</li>
<li>爹娘闻女来，自挂东南枝。</li>
<li>洞房花烛夜，自挂东南枝。</li>
</ul>
<ul class="zgdnz">
<li>天生我材必有用，各种自挂东南枝。</li>
<li>人生得意须尽欢，不如自挂东南枝。</li>
</ul>
<ul id="SB">
<li>Are you ready kids?</br>准备好了吗？孩子们？</li>
<li>Aye, aye, captain!</br>是的，船长</li>
<li>I can't hear you!</br>太小声罗</li>
<li>Aye, aye, captain!</br>是的，船长</li>
<li>Ooh</br>哦~</li>
<li>Who lives in a pineapple under the sea?</br>是谁住在深海的大菠萝里</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>Absorbent and yellow and porous is he!</br>方方黄黄伸缩自如</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>If nautical nonsense be something you wish!</br>如果四处探险是你的愿望</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>Then drop on the deck and flop like a fish!</br>那就敲敲甲板让大鱼开路</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>Ready?</br>准备</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>SpongeBob SquarePants!</br>海绵宝宝</li>
<li>Ha, ha, ha</br>哈哈</li>
<li>Ha, ha, ha</br>哈哈</li>
</ul>
<script>
var lis = document.getElementsByClassName('zgdnz');
console.log(lis);
var lul = document.querySelector('.zgdnz');
console.log(lul);
var sb=document.querySelector('#SB');
console.log(sb);
</script>
Tip：注意在填写选择器时，以class命名的，使用 . + 名称，使用id命名的，使用 # + 名称；
3、document.querySelectorAll();：返回指定选择器的所有元素对象集合（伪数组）
<ul class="zgdnz">
<li>空山新雨后，自挂东南枝。</li>
<li>欲穷千里目，自挂东南枝。</li>
<li>爹娘闻女来，自挂东南枝。</li>
<li>洞房花烛夜，自挂东南枝。</li>
</ul>
<ul class="zgdnz">
<li>天生我材必有用，各种自挂东南枝。</li>
<li>人生得意须尽欢，不如自挂东南枝。</li>
</ul>
<script>
var lis = document.getElementsByClassName('zgdnz');
console.log(lis);
var lul = document.querySelector('.zgdnz');
console.log(lul);
var zgdnzall=document.querySelectorAll('.zgdnz')
console.log(zgdnzall);
</script>
获取body或html中的元素
获取body元素对象
document.body
获取html元素对象
document.documentElement
事件三要素
事件源，事件类型，事件处理程序
<button id="btn">空山新雨后</button> <!-- 事件源 -->
<script>
var btn=document.getElementById('btn'); //事件类型
btn.onclick = function(){alert('自挂东南枝。');} //事件处理程序
</script>
执行事件过程
1获取事件源
2注册事件（绑定事件）
3添加事件处理程序
<button id="btn">空山新雨后</button> <!-- 事件源 -->
<script>
var btn=document.getElementById('btn'); //获取事件源
btn.onclick/*绑定事件，注册事件*/ = function(){alert('自挂东南枝。');} //添加事件处理程序
</script>
操作元素-修改元素内容
element.innerText：从起始位置到终止位置的内容，但他会去除html标签，同时空格和换行也会去掉（不识别html标签）
<button>空山新雨后，</button>
<div>__________。</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
div.innerText = '自挂东南枝。';
}
</script>
元素可以不用添加事件，直接对element.innerText进行赋值
<button>空山新雨后，</button>
<div>__________。</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
div.innerText = '直接自挂东南枝。'; //可直接调用
</script>
element.innerText：从起始位置到终止位置的内容，包含html标签，同时保留空格和换行（识别html标签）
<button>空山新雨后，</button>
<div>__________。</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.onclick = function () {
div.innerHTML = '<strong>自挂东南枝。</strong>';//使用innerHTML
}
</script>
innerText和innerHTML的区别
element.innerText非官方发布的，不识别html标签；element.innerHTML是W3C组织推荐的，识别html标签（例子见上）。
这两个属性是可读写的，可以获取元素里面的内容，但是element.innerText会去除html标签，同时空格和换行也会去掉，element.innerHTML会保留html标签、空格和换行
<div>__________。</div>
<p>
spongebob
<span>SquarePants</span>
</p>
<script>
var div = document.querySelector('div');
var p=document.querySelector('p')
console.log(p.innerText);
console.log(div.innerHTML); //可以尝试将最后两行中p和div换换位置看一下效果
</script>
操作元素-修改元素属性
<button id="change">改为B站链接</button>
<a href="https://www.baidu.com">百度一下，你就知道</a>
<script>
var btn = document.getElementById('change');
var ln = document.querySelector('a');
btn.onclick = function () {
if (ln.innerHTML==='百度一下，你就知道') { //这里加了一个判断，通过判断是否与默认值相同来改变属性值
ln.innerHTML = '哔哩哔哩';
ln.href = 'https://wwww.bilibili.com';
btn.innerHTML='改为百度链接';
} else {
ln.innerHTML = '百度一下，你就知道';
ln.href = 'https://www.baidu.com';
btn.innerHTML='改为B站链接';
}
}
</script>
案例：分时问候
通过不同的时间来改变不同的图片和问候语
上午访问显示上午图片，显示上午好
下午访问显示下午图片，显示下午好
晚上访问显示晚上图片，显示晚上好
操作元素-修改表单属性
<button>按钮</button>
<input id="ipt" type="text" value="哈喽哇！">
<script>
var btn=document.querySelector('button');
var ipt=document.getElementById('ipt');
btn.onclick=function(){
ipt.value='客户，感受我们的下葬服务吧！';
}
</script>
可以发现，前面修改显示内容都是用innerHTML或innerText修改，但是表单内容是通过修改特定的属性值（value）来实现的，前者都是双标签，后者为单标签。
禁用按钮
<button>按钮</button>
<input id="ipt" type="text" value="哈喽哇！">
<script>
var btn=document.querySelector('button');
var ipt=document.getElementById('ipt');
btn.onclick=function(){
ipt.value='客户，感受我们的下葬服务吧！';
btn.disabled = true; //禁用按钮
}
</script>
this.disabled = true;也可实现相同的功能，this指向的是事件的调用者，上例中指向的就是btn
案例：密文显示输入密码
功能分析：用户名输入时正常显示，密码输入时默认隐藏，但有显示\隐藏切换按钮
<div class="box">
<input type="password" id="pwd">
<button id="tip">显示</button>
</div>
<script>
// var flag = 0; 这个变量是另一种方法的前置，详情在下面
var ipt = document.getElementById('pwd');
var btn = document.getElementById('tip');
btn.onclick = function () {
if (ipt.type === 'password') {
ipt.type = 'text';
this.innerHTML = '隐藏';
} else {
ipt.type = 'password';
this.innerHTML = '显示';
}
//这里可以换成另一个方式，使用一个变量来控制判断条件，注意这个变量要在全局下声明
// if (flag == 0) {
// ipt.type = 'text';
// this.innerHTML = '隐藏';
// flag = 1;
// } else {
// ipt.type = 'password';
// this.innerHTML = '显示';
// flag = 0;
// }
}
</script>
操作元素-修改样式属性
element.style行内样式操作
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="div">
</div>
<script>
var div=document.getElementById('div');
div.onclick=function(){
this.style.backgroundColor='yellow';
}
</script>
</body>
行内样式优先级高，适用于样式修改较少，实现功能简单的情况
案例：关闭图片
思路：利用css的显示和隐藏：display:none隐藏元素；display:block显示元素
案例：循环精灵图
思路分析：精灵图排列要有顺序，一般需要竖向排列，然后使用for循环
案例：显示\隐藏文本框文字
参考视频
element.className类名样式操作
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
.change{ /* 引用class类名以.开头 */
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
</div>
<script>
var div=document.getElementById('d1');
d1.onclick=function(){
this.className='change';/* 使用element.className调用类为其元素使用 */
}
</script>
</body>
案例：密码框格式提示正误
思路分析：1，焦点获得和焦点失去显示相应的提示
2，输入字符符合要求后显示正确提示，不符合要求提示相应不符合要求的信息
小结练习
1.登陆界面账号\密码显示隐藏内容。
2.京东关闭广告（直接隐藏）
3.新浪下拉菜单（鼠标悬浮显示菜单）
4.页面开关灯
排他思路
如果有同一组元素，想让他们实现同一个样式（功能），但是每次生效的都是同组中的某一个元素时
先把其他元素的样式（功能）清空，再进行某一个元素添加某个样式（功能）
利用循环
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btn = document.querySelectorAll('button');
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
for (var i = 0; i < btn.length; i++) {
btn[i].style.backgroundColor = '';
}
this.style.backgroundColor = 'pink';
}
}
</script>
案例1：百度换肤
<head>
<style>
body{
background-size: 1920px,1080px;
}
img {
height: 70px;
width: 140px;
}
</style>
</head>
<body>
<div>
<img src="img/2098/01.jpg">
<img src="img/2098/02.jpg">
<img src="img/2098/03.jpg">
<img src="img/2098/04.jpg">
<img src="img/2098/05.jpg">
<img src="img/2098/06.jpg">
</div>
<script>
var bgimg = document.querySelectorAll('img');
var bg = document.body;
for (var i = 0; i < bgimg.length; i++) {
bgimg[i].onclick = function () {
for(var i=0 ;i<bgimg.length;i++){
bg.background='';
}
bg.background=this.src;
}
}
</script>
</body>
（未完待续……）
更多内容：
