1、JavaScript概述
1、什么是JavaScript
JavaScript简称JS，是一种专门运行于JS解释器/引擎中的解释型脚本语言
2、JS发展史
1、1992年Nombas公司开发了一款运行在网页中的脚本语言，名称为CMM（c--），后来更名为ScriptEase
2、1995年Netscape(网景)为自己的浏览器Navigator2.0开发了另一款脚本语言（LiveScript），更名为JavaScript
3、1996年，Microsoft为自己的IE3.0，发布了JavaScript的克隆版本JScript
4、1997年，Netscape找到了ECMA（欧洲计算机制造商协会），将JS提交给了ECMA。从此JS的核心更名为EMCA Script简称ES
JS的组成：
1、核心—EMCA Script：包含了JS的最基本的语法规范
2、文档对象模型（Document Object Model）简称DOM
允许JS操作HTML网页上的内容
DOM的规范是有W3C来制定的
3、浏览器对象模型（Browser Object MOdel）简称BOM
允许JS操作浏览器
2、使用JS（JS引用）
1、使用元素事件执行JS脚本代码
事件：用户在元素上所激发的行为操作
1、onclick事件：当用户点击元素时做的操作
语法：
<ANY onclick="JS脚本代码">
JS脚本代码：
console.log（'向控制台中输出的内容'）;
2、嵌入在网页中的<script></script>
语法：<script></script>在任何位置都可以
特点：
网页加载的时候就开始执行
document.write():向网页输出一句话
注意：如果通过按钮的单击事件执行document.write()的话，则会刷新网页内容
示例：
<script>
document.write("<h1>hello world<h1>")
<script>
3、将JS脚本写在外部的JS文件中
步骤：
1、创建JS文件（XXX.js）并编写脚本
2、在网页中对js文件进行引入
<script src="js文件路径">此处不能写js代码</script>
3、JS基础语法
1、语法规范
1、JS都是由语句组成的
1、由运算符，表达式，关键字组成的称为语句
2、严格区分大小写
3、每条语句必须以；分号表示结束
2、JS中的注释
1、单行注释：//注释内容
2、多行注释：/*注释内容*/
4、JS中的变量 和 常量
1、变量
1、声明变量的语法
声明：var 变量名;
赋值：变量名 = 值;
声明并赋值：var 变量名=值;
注意：
1、声明变量时，尽量使用var关键字，如果省略，也可以，但是容易处问题（全局污染）
2、声明变量但未赋值的话，默认值为undefined
2、变量名的命名规范
1、不能使用JS中的关键字或保留关键字
2、有字母，数字，下划线（_）和$组成
3、不能以数字开头
4、尽量不要重复
5、尽量见名知意
6、如无特殊需求（团队要求）的话，尽量使用小驼峰命名法
2、常量
1、什么是常量：一经声明就不允许修改的数据就是常量
2、语法
const 常量名 = 值;
注意：常量名采用全大写的形式
5、数据类型
1、作用：约束了数据在内存中所占空间大小问题的
2、JS数据类型分类
1、基本数据类型（值类型）
1、number类型
数字类型，可以表示32位的整数或64位的浮点数
整数：
表示十进制，八进制，十六进制
十进制：var num = 111；
八进制：var num = 010；
十六进制：var num = 0x10；
小数：
小数点计数法：var num = 123.456；
科学计数法：var num = 1.5e2；
2、string类型（所占内存为2-4字节）
字符串：都是由Unicode的字符，数字，标点组成的
1、查看字符的Unicode码(可以根据的Unicode码对应的二进制判断所占内存（多少字节）)
var str = "张三丰";
var uCode =str.charCodeAt(0).toString(2)
2、如果将Unicode码转换成对应的字符(只能转16进制的，如果是二进制或八进制需要先转换成16进制)
已知Unicode码：5f20
var str = '\u5f20';
console.log(str);
3、文中范围
'\u4e00'~'\u9fa5'
4、转义字符
\n: 换行
\t: 制表符
\": "
\': '
\\: \
3、boolean类型
布尔类型，只用于表示真（true）或假（false）
注意：
在参与数字运算时，true当做1运算，false当做0
4、查看数据类型
使用typeof() 或 typeof 都可以查看变量的数据类型
2、引用数据类型
3、数据类型转换
1、隐式转换
不同类型的数据在左加法运算时，会进行自动转换
1、字符串+数字：将数字转换为字符串
var num = 15；
var str = ‘18’；
var r = num+str；//1518
var r = '15'+18+15;//151815
var r = 15+18+'15';//3315
2、数字+布尔：将布尔转为数字做加法（true转为1，false转为0）
3、字符串+布尔：将布尔转为字符串做连接
var boo = true；
var str = ‘Hello’；
var r = boo+str；//trueHello
4、布尔+布尔：都转为数字做加法运算
2、强制转换（转换函数）
1、toString（）：将任意类型的数据转为字符串，并返回转换后的结果
语法：
var r = 变量.toString();
var r = 变量+'';
2、parseInt（）
作用：将指定的数据尽量转换为整数，如果实在无法转换的话，则返回NaN（Not a Number）
示例：
1、var r = parseInt（‘456’）；
r：456
2、var r = parseInt（‘123.556’）；
r：123
3、var r = parseInt（‘123Hello’）；
r：123
4、var r = parseInt（‘hello123’）；
r：NaN
3、parseFloat（）
作用：尽量将任意类型的数据转为小数，如果实在无法转换的话，那么结果为NaN
示例：
1、var r = parseFloat('3.14');
r:3.14
2、var r = parseFloat('3.14hello');
r:3.14
3、var r = parseFloat('hello3.14')
r:NaN
4、Number（）
作用：将任意类型的数据转为数字，只要包含非法字符，结果就是NaN
示例：
1、var r = Number('123hello');
r:NaN
6、运算符
1、算数运算符
1、+ - * / %
2、++ --
++：自增运算符，在自身基础上做+1操作
--：自减运算符，在自身基础上做-1操作
后缀：
var num = 10；
num++；
特点：先使用num的值，然后再做自增运算
var num = 10；
console.log(num++);输出10
console.log(num); 输出11
前缀：
var num = 10；
++um；
特点：先对变量进行自增，然后再使用变量的值
var num = 10；
console.log(++num);输出11
console.log(num); 输出11
练习：
var num = 5；
var result = num + ++num + num++ + ++num +num;
5 + (6)6 + 6(7) + (8)8 + 8
2、关系运算符（比较运算符）
> < >= <= == != === !==
1、10>5:true
2、'10'>5:true
运算符两端如果有一个是数字的话，那么另外一个会自动转换（通过Number）成数字，再进行比较
3、'10a' > 5:false
4、"10a" < 5:false
NaN除了 != 运算时为true，其他都为false
5、"10" > "5":false
比较的是字符1的ASCII 和 字符5的ASCII
6、"张三丰" > "张无忌"：false
比较三和无的Unicode码的大小
7、’10‘ == 10 ：true
===、判断数值和数据类型必须全相等时才返回true
!==、只要数值或数据类型中有一个不相等即返回true
3、逻辑运算符
！：逻辑非，等同于python中的not
&&：逻辑与，and
||：逻辑或，or
4、为运算符
1、按位与 &：两个数字的二进制进行比较，对应位都为1，则该结果为1，否则 为0
场合：奇偶性验证，将一个数与1按位求与，结果为1则为奇数，否则为偶数
7 & 1 =1
7:111
1:001
2、按位或 |：只要有1即为1，
3、按位异或^:不同则为1，相同则为0
场合：不借助第三方变换两个数字
示例:
var a = 3;
var b = 5;
a = a ^ b; 110
3:011
5:101
b = b ^ a; 011
b(5):101
a(6):110
a = a ^ b; 101
a(6):110
b(3):011
5、条件运算符（三目运算）
语法：？：
条件表达式 ？ 表达式1 ：表达式2;
当条件表达式的结果为true的时候，执行表达式1中的内容，并将表达式1的结果作为整体表达式的结果，否则执行表达式2
练习：
BMI计算器
1、分两次从弹框中输入数据
1、第一次：输入 身高（m）
2、第二次：输入 体重（kg）
2、计算bmi
bmi = 体重 /(身高*身高)
3、
如果bmi的值小于20，提示偏瘦
如果bmi的值大于25，提示偏胖
否则：提示正常
6、赋值运算符
+= -= *= /= ^=
a ^= b 等价于 a =
a^b
7、流程控制
1、程序控制结构
1、顺序结构
2、分支结构/选择结构
3、循环结构
2、分支结构
1、if结构
1、if结构
语法：
if（条件表达式）{
语句块；
}
2、if...else结构
语法：
if（条件表达式）{
语句块1；
}else{
语句块2；
}
3、if ...else if...结构
语法：
if（条件表达式）{
语句块1
}else if（条件表达式2）{
语句块2；
}else if（条件表达式n）{
语句块n；
}else{
语句块n+1；
}
练习：
1、分三次从弹框中输入年，月，日
2、判断该日是概念的第几天
2、switch结构
1、作用：等值判断
2、语法
switch（变量）{
case 值1：
语句块1；
break；//跳出switch结构，可以选
case 值：
语句块2；
break；//跳出switch结构，可以选
.......
default：
语句块n；
/*所有case都未匹配上时，才执行default*/
}
注意：
1、变量 和 case后的值的判断，采用===来判断的
2、break，如果省略break的话，则从匹配的case块开始，依次向下执行（执行下面所有case块的内容，或default块内容）直到遇见break或执行结束
3、练习：
从弹框中输入1-7任意一个数字表示1-星期日
输入1：今天吃红烧肉
输入2：今天吃红烧鱼
输入3：今天吃清蒸甲鱼
输入4：今天吃红烧皮皮虾
输入5：今天吃红烧排骨
输入6：今天休息
输入7：今天休息
其他：输入有误！
3、循环结构
1、作用：重复执行相同或相似的代码
2、循环的二要素
1、循环条件：循环从什么时候开始，到什么时候结束
2、循环操作：循环中要做的事情（要执行的代码）
3、while循环
1、语法
while（循环条件）{
循环操作
}
流程：
1、判断循环条件（boolean值/表达式）
2、如果条件为真，则执行循环操作
2.1、执行完操作后，再回来判断条件
3、如果条件为假，则退出循环
4、do...while循环
语法：
do{
循环操作；
}while（条件）；
流程
1、先执行循环操作
2、再判断循环条件
3、如果条件为真，再继续执行循环条件，当条件为假时结束循环
5、循环的流程控制
1、break：跳出循环结构
2、continue：结束本次循环，继续执行下次循环
6、for循环
1、while
打印1-100之间的所有数字
var i = 1;//循环条件的初始化
while(i <= 100){//循环条件的判断
console.log(i);//循环操作
i++;//更新循环条件
}
2、语法：
for（表达式1；表达式2；表达式3）{
循环操作；
}
表达式1：循环条件的初始化
表达式2：循环条件的判断
表达式3：更新循环条件
流程：
1、先执行表达式1，即循环条件初始化（执行1次）
2、判断表达式2的值，true 或 false
3、如果表达式2的结果为true则执行循环操作，如果为false则退出循环
4、执行循环操作后，再执行表达式3
5、再判断表达式2，同步骤2
for(var i = 1; i<=100; i++){
console.log(i)
}
7、循环嵌套
允许在一个循环中再出现另一个循环
for(var i=1; i<=10;i++){//外层循环
for(var j=1;j<1=0;j++){//内层循环
}
}
外层循环走一次，内层循环走一轮
8、函数-function
1、函数的声明
function 函数名(参数列表){
函数体
}
1、参数列表
参数列表，允许声明0或多个参数，多个参数的话使用，逗号隔开，没有默认参数
2、返回值
返回值是可选的，如果需要返回值的话，通过return 值；进行返回
2、函数调用
在任意JS的合法位置处，都允许做函数调用
函数名(参数列表);
3、由ES提供的函数（内嵌函数）
在网页中无需声明，就可以直接使用
parseInt（）/parseFolat（）/Number（）
1、isNaN（value）：判断value是否为非数字，返回true表示不是数字，返回false表示是数字
示例：
1、isNaN（1）//false
2、isNaN（‘1’）//false
3、isNaN（‘hello’）//true
2、eval（）：执行由字符串来表示的JS代码
4、局部变量与 全局变量
1、全局变量：一经声明，在JS的任何位置处都能使用的变量就是全局变量
1、在<script></script>内部在函数体外边
2、或则在函数内部不适用var声明的变量也是全局变量（不建议使用）
2、局部变量：使用var关键字，并且声明在function中的变量
局部变量的作用于只在声明的函数内，出了函数就不能使用
9、数组（在python中称为列表）
1、什么是数组
数组（Array）是一个用于保存批量数据的结构，即一个变量中允许保存多个数据。是按照线性结构的方式来保存数据的
说明：字符串与数组相加，会将数组准变为字符串
示例：
‘names’+['张无忌','张翠山','张三丰','金毛狮王']
names张无忌,张翠山,张三丰,金毛狮王
2、创建数组
1、创建一个空数组
var 数组名 = [];
2、创建数组并初始化元素
var 数组名 = [元素1，元素2，... ,...];
3、创建一个空数组：
var 数组名 = new Array（）;
4、创建数组并初始化元素
var 数组名 = new Array（元素1，元素2，... ,...）；
3、数组的使用
获取 或设置数组中的元素，一律都使用下标
下标范围：从0开始，到元素个数-1为止,如果超出下标不会报错，而是返回undefined
1、向获取元素的第二个元素
数组名[1];
2、为数组元素赋值
数组名[下标] = 值；
说明：如果下标越界，会将越界的下标赋值，前面的为undefined（空empty）
4、获取数组的长度
属性：length
用法：数组名.length;
使用场合：
1、配合循环，遍历数组中的每个元素
2、能够找到数组中，最新要插入元素的位置
5、关联数组
1、什么是关联数组
JS中数组分为索引数组 和 关联数组
索引数组：由数字做下标
关联数组：由字符串做下标
2、声明和使用关联数组
var names = [];
names['x'] = '西游记';
names['y'] = '红楼梦';
3、注意
length只能统计索引数组，不能统计关联数组
4、使用for ... in遍历数组
能够遍历数组中所有的数字下标和字符串下标
for(var 变量 in 数组){
变量：数组中所有的数字下标和字符串下标（变量为字符串）
}
6、数组的常用API
1、toString():将数组转换为字符串并返回
console.log(['aa','bb','cc'].toString())//aa,bb,cc
2、join（seperator）：返回一个由指定连接符连接的数组元素的字符串,连接符不能数\反斜杠，默认是逗号
console.log(['aa','bb','cc'].join('|'))//aa|bb|cc
3、concat
（arr，arr2，...）:拼接多个数组到一起，并返回拼接后的结果
注意：该函数并不会改变数组，而是返回拼接后的一个副本
4、reverse（）：反转
语法：arr.reverse()
注意：该函数会改变现有数组的结构
5、sort（）：排序，默认情况下，按照元素的Unicode码进行排序（升序）
注意：该函数会改变现有数组的结构
允许通过自定义的排序函数来指定数字的排序规则
语法：arr.sort(排序函数名);
1、指定排序函数
function sortAsc（a，b）{将数组的值依次传递给a，b
return a-b；//返回值大于0则交换a b的位置，
}
2、调用arr.sort(sortAsc)
3、使用匿名函数
arr.sort(function(a,b){a,b});
6、进出栈操作
栈式操作：提供了快速操作数组头部或尾部的方法
1、push（）：入栈，向数组的尾部添加新元素，并返回新数组的长度
2、pop（）：出栈，删除并返回数组尾部的元素
3、unshift（）：向数组头部增加新元素并返回新数组的长度
4、Shift（）：删除并返回数组头部的元素
7、二维数组
1、什么是二维数组
数组中的数组，在一个数组中的每个元素又是一个数组
2、声明二位数组
var names = [['aa','bb'],['cc',dd]];
names[0][1] = 'bb'
10、字符串-string
1、声明字符串
1、var str1 = '字符串1';
2、var str2 = String（’字符串2‘）；
3、var str3 = new String（’字符串3‘）；
2、length-属性
作用：返回当前字符串中字符的个数
3、常用函数-string API
1、大小写转换函数
1、toUpperCase（）：返回字符串的完全大写形式
2、toLowerCase（）：返回字符串的完全小写形式
2、获取指定位置的字符 或 Unicode码
1、charAt（index）：返回指定下标位置处的字符
2、charCodeAt（index）返回指定下标位置处的字符的Unicode码（十进制）
3、检索字符串
1、作用：查询子字符串在指定字符串中的起始下标
2、函数
1、indexOf（value，fromIndex）
value：要查询的子字符串
fromIndex：从哪个位置处开始查，如果省略的话，则从头查找
返回值：返回第一次出现子字符串的下标，如果为找到，则返回-1
2、lastIndexOf（value，fromIndex）
作用：查找value最后一次出现的下标
注意：该函数的查找方式是从后向前找
fromIndex如果省略，则将从字符串的最后一个字符处开始检索
示例：
'avcdbabcd'.lastIndexOf('cd',7)//7
说明：如果在下标为7的位置上匹配到字符串的头部，则会继续向后面判断剩余部分是否可以匹配到
4、截取子字符串
函数：substring（start，end）
作用：返回从start到end-1之间的子字符串，如果end省略表示截取到字符串的结尾
5、分割字符串
函数：split（seperator）
作用：将字符串，通过seperator拆分成一个数组
6、模式匹配
1、作用：配合正则表达式来完成字符串的查找和替换...
2、正则表达式
语法：/正则表达式/修饰符
示例：/\d{6}/gim
修饰符：
i：忽略大小写匹配（Ignorcase）
g：全局匹配（Global）
m：允许多行匹配（Multiple）
3、函数
1、replace（substr/regexp,replacement）
作用：使用replacement替换substr/regexp的内容，并返回一个替换后的字符串
2、match（substr/regexp）
作用：返回满足substr 或 regexp格式的字符串，将这些字符串放在数组中进行返回
3、serach（substr、regexp）
作用：返回满足substr或regexp格式的子字符串第一次出现的下标。如为未找到，则返回-1
注意：search函数不支持全局匹配，将自动忽略g
11、其他内置对象
1、JS的对象分类
1、内置对象—ES提供
String,Array,... ...
2、外部对象
1、window（BOM）浏览器对象
2、document（DOM）文档对象
3、自定义对象
function 就是一个自定义对象
2、RegExp对象
RegExp：Regular Expression - 正则表达式
1、创建RegExp对象
1、var regExp = /匹配模式/修饰符；
2、var regExp = new RegExp（‘匹配模式’，‘修饰符’）；
2、RegExp对象方法
1、regExp.test（string）
string：要验证的字符串，如果string符合regExp格式的话，返回true，否则返回false
3、Math对象
1、作用：执行与数学相关的运算和数据
2、属性：
Math.PI,
Math.E
3、函数
1、三角函数
Math.sin（x）
Math.cos(x)
Math.tan(x)
2、计算函数
Math.sqrt(x):开方
Math.log(x)：对数
Math.pow(x,y)：求x的有次方
3、数字比较函数
Math.abs(x)：绝对值
Math.max()：最大值
Math.min()：最小值
Math.random():返回0-1之间的随机小数，包括0但不包括1
Math.round(x):将x四舍五入
4、Date对象
1、创建Date对象
1、获取当前系统日期时间
var now = new Date（）；
2、初始化自定义日期时间对象
var date = new Date（‘2018//01/01’）;
2、函数
1、读取或设置当前时间的毫秒数
1、getTime（）：返回自1900-1-1 00:00:00以来的毫秒数
2、setTime(毫秒数):
2、读取时间分量函数
1、getFullYear（）：获取日期时间对象的年份
2、getYear（）：获取自1900年以来到当前日期时间对象所经过的年数
3、getMonth（）：返回0-11的数字来表示1-12月
4、getDate（）：返回当前日期对象对应的日
5、getDay（）：返回当前日期对象所对应的日期，0-6来表示星期日-星期六
6、获取时间
1、getHourse（）：
2、getMinutes（）：
3、getSeconds（）；
4、getMilliseconds（）：获取毫秒
7、转换为字符串
1、toString()
"Mon Aug 13 2018 12:14:38 GMT+0800 (CST)"
2、toLocaleString（）
"2018/8/13 下午12:14:59"
3、toLocalTimeString（）
"下午12:15:22"
4、tolocalDateString（）
"2018/8/13"
12、外部对象
1、BOM 和DOM
BOM：Browser Object Model-浏览器对象模型
DOM：Document Object Model-文档浏览器对象模型
2、BOM
1、作用：表示浏览器窗口，BOM提供了一个核心对象-window
2、window对象的使用
window对象会包含若干属性 和 方法
属性：document，location，history，navigator，screen
方法：alert（），prompt（），...
调用window对象的属性和方法时，可以省略window.不写
window中的对话框
1、警告框：window.alert()/ alert()
2、输入框：window.prompt()/ prompt()
3、确认框：window.confirm()/ confirm,按‘确认‘按钮的话，返回true，否则返回false
window中的定时器
1、定时器分类
1、周期性定时器：每隔一定时间就会执行一遍指定程序，返回执行
2、一次性定时器：在指定的时间间隔之后，只执行一次操作
2、周期性定时器
1、声明定时器
var ret = setInterval（fun，time）；
fun：要周期性执行的操作，可以是匿名函数
time：时间间隔周期，以毫秒为单位
ret：返回已经创建好的定时器对象（用于停止定时器）
2、清除定时器
clearInterval（timer）
timer：创建好的，要停止的定时器对象
3、一次性定时器
1、声明一次性定时器
var ret = setTimeout(fun,time);
fun：指定时时间间隔后要执行的操作
time：时间间隔，以毫秒为单位
ret：返回已经启动的定时器对象
2、清除定时器
clearTimeout（timer）；
timer：创建好的，要停止的定时器对象
Window的属性（了解）
1、screen：获取客户端显示器的相关信息
属性：
1、width/ height
2、availWidth/ availHeight
2、history：
1、作用：包含当前窗口所访问过的url地址
2、属性 和方法
1、属性
length：访问过的URL的数量
2、方法
1、back（）：后退
2、forward（）：前进
3、go（num）：去往历史记录中的第num个页面
go（1）相当于forward
go（-1）相当于back
3、location
1、作用：表示浏览器地址栏上的信息
2、属性和方法
1、href：表示当前窗口中正在浏览的网页的地址，如果href设置值的话，则相当于浏览器页面跳转的功能
2、reload（）：重新加载当前页面，等同于刷新
4、navigator
1、作用：包含浏览器的相关信息
2、属性
1、userAgent：显示浏览器相关信息（"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"）
3、DOM-document对象（重点）
1、document的概述
document对象，是DOM中的顶级对对象。封装了和HTML相关的属性，方法和事件。
在网页加载HTML的时候，会在内存中生成一棵节点树（DOM树），DOM树的根就是document
每个元素其实都是DOM树上的一个节点
DOM中所提供的操作：
1、查找节点的信息
2、读取节点的信息
3、修改节点的信息
4、删除节点的信息
5、创建节点的信息
2、查找节点
1、通过元素的id查找节点
var elem = document.getElementById（"元素ＩＤ"）;
元素ID：要获取的元素的ID
elem：所得到的元素的对象-DOM对象/元素，如果没有找到匹配的元素，则返回null
DOM对象的常用属性
1、innerHTML：获取 或设置当前DOM对象的HTML文本值,会获取标签
2、innerText：获取 或设置当前DOM对象的文本值,只获取文本不获取标签
3、value：获取 或设置表单控件对象的值
说明：value获取的值只是表单控件框中输入的值，设置值也只是设置表单控件框中的值，不会改变value的默认值
2、通过标签名查询
语法：document.getElementsByTagName(标签名);或则 elem.getElementsByTagName(标签名);
示例：
1、document>getElementsByTagName('p')//查找网页中所有的p元素
2、var div = document.getElementById('d1');
div.getElementsByTagName('p')//查找id为d1的div内部的p元素
返回值：由指定标签元素所组成的数组（列表）
3、通过元素的name属性值来查询节点(优先使用在 单选框 和 复选框中)
语法：document.getElementsByName()
返回值：返回由指定name值的元素所组成的数组
4、通过元素class值查询节点
语法：documnet.getElementsByClassName(className) 或 elem.getElementsByClassName(className)
返回值：由指定className值的元素组成的数组
5、根据节点的层级关系查询节点
1、parentNode：返回当前元素的父节点
2、childNodes：返回当前元素的所有子节点组成的数组（子节点元素节点，属性节点，文本节点（包括空格和回车）、注释节点，文档节点）
3、children:返回当前元素的子节点组成的数（子节点中只包含元素节点）
4、nextSibling：返回当前元素的下一个兄弟节点
5、nextElementSibing：返回当前元素的下一个兄弟元素节点
6、previousSibling：返回当前元素的上一个兄弟节点
7、previousElementSibling：返回当前元素的上一个兄弟元素节点
3、读取节点的信息
1、节点的类型
1、元素节点：表示页面上的一个元素
2、属性节点：表示页面上元素的一个属性
3、文本节点：表示页面上元素的一个文本内容（包含空格和回车）
4、注释节点：表示网页上的一个注释
5、文档节点：表示html文档
属性：nodeType
取值：
返回1：元素节点
返回2：属性节点
返回3：文本节点
返回8：注释节点
返回9：HTML文档（文档节点）
2、读取节点名称
属性：nodeName
返回值：
元素节点 和属性节点：返回元素名 或 属性名
文本节点：#text
文档节点：#document
注释节点：#comment
4、获取 或设置元素节点的方法
1、getAttribute（attrName）
作用：获取某元素指定的属性值
attrName：要获取的属性的名称
返回值attrName属性名对应的值
注意：获取的属性值，必须要在标签中编写出来，否则值为null
2、setAttribute（attrName，attrValue）
作用：修改指定属性的值
attrName：要修改的属性的名称
attrValue：要修改属性名的值
说明：setAttribute（"value","aa"）只会改变value的默认值，如果此时表单控件框中有值是不会被修改的。与getAttribute（）联合使用，不要和value属性混合使用。
3、removeAttribute（attrName）
作用：将attrName属性从元素中删除出去
练习：
1、网页中创建一个a标记，内容为 百度 ，链接地址为https://www.baidu.com
2、网页中创建一个按钮，文本为修改
3、点击按钮时，将超链接的文本修改为 腾讯，将超链接的地址修改为 http:www.qq.com
5、元素的样式
1、使用setAttribute（）设置class属性值
elem.setAttribute（“class”，”类选择器名称“）；
2、使用元素的className属性修改class值
elem.className="类选择器"；
3、自定义元素样式
elem.style.css属性 = 值 ；
注意：如果CSS属性名中包含-连字符的话，连字符要取消，并且-后面的第一个字符要变大写
elem.style.color = 'red';
elem.style.fontSize = "18px";
elem.style.borderRightColor = 'yellow';
6、增加节点
1、创建元素节点
var elem = document.createElement(”元素名“);
elem:表示创建好的DOM元素
2、增加节点
1、document.boby.appendChild(elem):向body中追加新元素elem，在body中的最后一个元素
2、parentNode.appendChild(elem)：将elem追加到parentNode的内部
parentNode：表示的是已经存在的一个元素
3、parentNode.insertBefore(newElem,oldElem)
将newElem元素插入到parentNode中oldElem之前
说明：创建一个元素节点，只能增加一次，不能多次增加该元素
7、删除节点：
删除节点只能由父元素来发起
1、document.body.removeChild(elem)：删除body中的elem元素
2、parentNode.removeChild(elem)：在parentNode中删除elem元素
4、事件
1、什么是事件：允许通过特殊的行为来激发的操作
2、常用的事件
1、鼠标事件
1、click：鼠标单击事件
2、mousevoer：鼠标进入元素时激发的事件
3、mousemove：鼠标在元素内移动时激发的事件
4、mouseout：鼠标从元素内移出时激发的事件
2、键盘事件
1、keydown：键位按下时的事件
2、keypress：键位按下时的事件
3、keyup：键位抬起时的事件
3、状态改变事件
1、load：当元素加载完毕时触发的事件
2、change：当元素发生改变时触发的事件,一般用在select下拉框中
3、focus：当元素获取焦点时触发的事件
4、blur：当元素失去焦点时触发的事件
5、submit：当表单被提交时触发的事件
注意：在为html元素绑定事件时，必须要在事件名前加 on
3、绑定事件的方式
1、在元素中绑定事件
<button onclick=""></button>
<input onblur="">
2、在js中动态的为元素绑定事件
<script>
var div = $("d1");
div.on事件名 = function（）{
}
div.onclick = function(){
}
</script>
或者
<script>
function func(){
}
var div = $("d1");
div.on事件名 = func；
</script>
4、事件行为详解
1、load事件
常用场合：当网页加载完毕时，要执行的操作
方式1：在元素中绑定事件
<body onload="函数（）"></dody>
方式2：JS中动态绑定事件
<script>
window.onload = function(){
//网页中其他元素加载完毕时，才会执行
var div = $("d1");
div.onclick = function(){
this:指的是绑定事件的元素
}
}
</script>
2、submit事件
功能：表单被提交时要触发的事件
注意：通过一个boolean的返回值，通知表单是否被提交，返回值为true可以提交表单，为false不能提交
<form onsubmit="return 函数（）">
3、focus事件
功能：当元素获取焦点时触发的事件
4、blur事件
功能：当元素失去焦点时触发的事件
5、事件对象（event对象）
1、什么是事件对象
事件对象中封装了事件中要用到的一些参数和一些操作
2、获取事件对象（event对象）
1、html元素中绑定事件
<ANY onclick="btnClick(event)">//event表示事件对象，是实参，不可修改
<script>
function btnClick(event){
//event表示事件对象，是形参，此处event可以修改，
}
</script>
2、使用JS动态绑定
<script>
d1.onclick = function(event){
}
</script>
3、事件对象的常用属性
1、事件源：触发当前事件的元素
获取事件源：
通过event.target获取事件源，返回DOM对象
2、鼠标事件
1、offsetX,offsetY
获取鼠标在 元素上的坐标，以元素的左上角（border内边缘）为（0,0）计算的
2、clientX,clientY
获取鼠标在网页上的坐标，以网页左上角为（0，0）计算的
3、screenX，screenY
获取鼠标在 显示器上的坐标点，以屏幕左上角为（0,0）计算的
3、键盘事件
1、event.key
得到按下键的字符
2、event.which :在keypress事件中 和在keydown事件中的含义不同
1、在keypress中
event.which：表示按下字符的ASCII码
2、在keydown中
event.which：表示的是键位码，只记录键位，不记录字符（大小写英文字母的键位码是相同的，一些数字和标点的键位码有可能是相同的）
4、事件冒泡
1、什么是事件冒泡
当激发了子元素的事件时，把父元素对应的事件也一并给执行了
场合：
1、必须是父子元素或具备层级关系的元素
2、为元素们设置了相同的事件
2、阻止事件冒泡
只让事件在当前元素中执行，不向上冒泡
event.stopPropagation();
jQuery
1、jQuery的简介
是一个轻量级的JS库-是一个封装好的JS文件。提供了更为简便的页面元素操作方式。
封装了 DOM，JS，CSS
核心理念： Write Less Do More
jQuery版本：
jQuery 3.3.1
jQuery 2.x：不再支持IE6,7,8
jQuery 1.11.x
2、使用jQuery
1、引入jQuery文件
<script src='文件路径'></script>
注意：引入文件的操作必须放在其他jQuery操作之前
2、使用jQuery
3、jQuery对象
1、什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的所有操作都只针对jQuery对象，其他对象不能使用（如DOM对象）
2、工厂函数 - $()
想要获取jQuery对象 或 转换为jQuery对象的话，就必须要使用工厂函数
3、DOM对象和jQuery对象之间的转换
DOM对象：以DOM的方式获取出来的节点对象，都是DOM对象，DOM对象只能使用DOM中所提供的方法和属性，是不能访问jQUery提供的属性和方法
jQuery对象：有jQuery封装而得到的对象。jQuery对象只能访问jQuery提供的属性和方法，是不能访问DOM提供的属性和方法
1、将DOM对象转换为jQuery对象
语法:var $obj = $(DOM对象)；
注意：在为jQuery对象起名的时候，最好在变量名称前 + $;
2、将jQuery对象转换为DOM对象
1、var dom对象 = jQuery对象.get(0);
2、var dom对象 = jQuery对象[0];
4、JS中创建对象（补充）
1、使用Object 直接创建对象
var newObj = new Object（）；
newObj.property = value1；//添加属性
newObj.method1 = function(){
//添加无参方法
}
newObj.method2 =function（arg）{
//添加含参方法
}
2、使用构造器创建对象
function 对象名（参数1，参数2，....）{
//只能使用this来访问或创建当前对象的成员
//使用参数为属性赋值
this.属性1 = 参数1；
this.属性2 = 参数2；
//创建方法
this.funName = function(){
}
}
使用对象
var obj1 = new 对象名（参数1，参数2，...）
3、使用JSON创建对象
1、什么是JSON
JSON：JavaScript Object Notation - JS对象的表现形式
JSON通常会作为轻量级的数据交换格式
JSON一般表示只有属性没有方法的对象
2、声明JSON对象
1、使用键值对的方式来声明数据，键表示该对象的属性，值表示该对象的值
2、所有的属性，必须用""双引号引起来，如果值是字符串的话，也必须用""双引号引起来，单引号有时不好用
3、属性和值之间用：隔开
4、多对属性之间用，隔开
5、JSON对象使用{}来表示
var person = {"name":"张无忌","age":25,"gender":"Male"}
5、jQuery选择器
1、作用：获取页面上的元素们，返回jQuery对象所组成的数组
语法：$（"选择器"）；
2、选择器的分类
1、基础选择器
1、ID选择器
用法：$("#ID值")
说明：返回HTML中指定ID的元素
2、类选择器
用法：$(".className")
说明：返回HTML中所有class为className的元素
3、元素选择器
用法:$("元素名称")
说明：返回HTML中所有指定标记的元素
4、通用选择器
用法：$("*")
说明：返回HTML中所有的元素
5、群组选择器
用法：$("selector,selector2,...")
说明：返回满足工厂函数内多有选择器的元素
2、层级选择器：
1、$("selector1 selector2"):后代选择器
2、$("selector1 > selector2"):子代选择器
3、$("selector1 + selector2")：相邻兄弟选择器
说明：匹配紧紧跟在selector1后面且满足selector2选择器的元素，如果selector1紧后面的元素不满足selector2时，则找不到
4、$("selector1 ～ selector2")：通用兄弟选择器
说明：匹配selector1后面且满足selector2选择器的所有元素
3、过滤选择器
1、基本过滤选择器
1、：first：只匹配到一组元素中的第一个
2、：last：只匹配到一组元素中的最后一个
3、：not（selector）：在一组元素中，将满足selector的元素排除出去
4、：odd：匹配 (奇数索引1,3,5,7,...）的元素
5、：even：匹配（偶数索引0,2,4，...）的元素
6、：eq（index）：匹配下标等于index的元素
7、：gt（index）：匹配下标大于index的元素
8、：lt（index）：匹配下标小于index的元素
2、内容过滤选择器
1、：contains（“text”）：匹配包含指定文本的元素
2、：empty：匹配空元素（不包含任何子元素以及文本）
3、：has（selector）：匹配含有指定选择器的元素
4、：parent：匹配本身是父元素的元素
3、可见性过滤选择器
1、：visible：匹配所有的可见元素
2、：hidded: 匹配所有不可见元素
4、状态过滤选择器
主要用在表单控件上
1、：enabled：匹配所有的可用元素
2、：disabled：匹配所有禁用元素
3、：checked：匹配所有被选中的元素（radio 和 checkbox）
4、：selected：匹配所有被选中的元素（select）
5、子元素过滤选择器
1、：first-child：匹配属于其父元素中的第一个子元素
2、：last-child：匹配属于其父元素中的最后一个子元素
3、：nth-child（n）：匹配属于其父元素的第n个子元素
说明：n>=0的任意一个数，（n+1）表示大于0的任意整数，但是不能写成（1+n），n需要写在表达式之前
4、属性选择器
使用元素的属性来匹配页面的元素
1、[attr]：匹配具有attr属性的元素
示例：$["id"]匹配所有具有id属性的元素
2、[attr=value]：匹配attr属性值为value的元素
示例：匹配页面中所有文本框
1、$(":text")
2、$("input[type='text']")
3、[attr!=value]
4、[attr^=value]：匹配attr属性值是以value字符开始的元素们
5、[attr$=value]：匹配attr属性值是以value字符结束的元素们
6、[attr*=value]：匹配attr属性值中包含value字符的元素们
6、jQuery操作DOM
1、基本操作
1、html（）：等同于DOM中的innerHTML
作用：读取或者设置jQuery对象中的HTML内容，无参数表示获取，有参数表示设置
2、text（）：等同于DOM中的innerText
3、val（）：等同于DOM中的value
4、属性操作
1、attr（）：
作用：读取或设置jQuery对象的属性值
示例：
1、$("#main").attr("id");：获取id属性值
2、$("#main").attr("class","redBack")；：设置class属性值为reBack
2、removeAttr（attrName）
作用：删除jQuery对象的指定属性
2、样式操作
1、attr（"class","className"）:为元素动态绑定class属性值
2、$obj.addClass("className")：追加类选择器
$obj.addClass("c1").addClass("c2").addClass("c3").html('测试文本')；
3、removeClass（”className“）：删除指定的类选择器
4、removeClass（）：删除所有的类选择器
5、toggleClass（”className“）：
样式切换
元素如果具有className选择器，则删除
元素如果没有className选择器，则添加
6、hasClass（”className“）：判断元素是否包含className选择器
7、css（”属性“，”值“）：为元素动态的设置某css属性和值
$obj.css("background-color",'red');
8、css(JSON对象)
$obj.css({
"color":"red",
"font-size":"32px",
});
3、遍历节点
1、children（） / children(selector)
获取jQuery对象的所有子元素或带有指定选择器的子元素
注意：以考虑子代元素，不考虑后代元素
2、next（）/ next(selector)
获取jQuery对象的下一个兄弟元素或满足selector的下一个兄弟元素
3、prev（） / prev(selcetor)
获取jQuery对象的上一个兄弟元素或满足selector的上一个兄弟元素
4、siblings（）/ siblings（selector）
获取jQuery对象的所有兄弟元素 或满足selector的所有兄弟元素
5、find（selector）
查找满足selector选择器的后代元素
6、parent（）
查找jQuery对象的父元素
4、创建和插入节点
1、创建对象
语法：$("创建内容")
示例：$("<div>文本内容</div>");
2、插入节点
1、内部插入
1、$obj.append（$new）：将$new作为$obj的最后一个子元素插入进来
2、$obj.prepend($new)：将$new作为$obj的第一个子元素插入进来
2、外部插入
1、$obj.after（$new）:将$new作为$obj的下一个兄弟元素插入进来
2、$obj.before（$new）:将$new作为$obj的上一个兄弟元素插入进来
5、删除节点
1、remove（）
语法：$obj.remove（）：删除$obj元素
2、remove（“selector”）: 按选择器删除元素
3、empty（）
语法：$obj.empty():清空$obj中所有的内容
6、替换和赋值（非重点）
1、替换
1、replaceWith
语法：$old.replaceWith($new)
使用$new元素替换$old元素
2、replaceAll
语法：$new.replaceAll($lod)
使用$new元素替换$old元素
2、赋值
1、clone（）
$new = $old.clone();
7、jQuery事件
1、页面加载后执行
HTML页面加载流程：
1、向服务器发送请求
2、接收服务器的相应
3、在内存中生成DOM树
4、渲染-显示内容到网页上
5、执行window.onload
jQuery处理的时候
1、向服务器发送请求
2、接收服务器的相应
3、在内存中生成DOM树
4、执行 加载后的 操作
5、渲染-显示内容到网页上
如何实现页面加载后执行：
1、$(document).ready(function(){
//页面的初始化操作，DOM树加载完成后就开始执行
});
2、$().ready(function(){
//页面的初始化操作，DOM树加载完成后就开始执行
});
3、$(function(){
//页面的初始化操作，DOM树加载完成后就开始执行
});
2、jQuery实现事件的绑定
1、方式1
$obj.bind("事件名称"，function（）{
//事件操作
//允许使用this来表示当前元素(dom对象)
})；
$obj.bind("事件名称"，function（event）{
//事件操作
//允许使用this来表示当前元素(dom对象),
//允许传递event对象，作为事件对象
})；
2、方式2
$obj.事件名（function（）{
//事件操作
//允许使用this来表示当前元素(dom对象)
}）；
$obj.事件名（function（event）{
//事件操作
//允许使用this来表示当前元素(dom对象)
//允许传递event对象，作为事件对象
}）；
8、jQuery动画
1、基本显示 和 隐藏
语法：
显示：$obj.show(); / $obj.show(duration);毫秒为单位
隐藏：$obj.hide(); / $obj.hide(duration);毫秒为单位
2、滑动式显示 和 隐藏
语法：
显示：$obj.slideDown() / $obj.slideDown(duration);毫秒为单位
隐藏：$obj.slideUp() / $obj.slideUp(duration);毫秒为单位
3、淡入淡出式显示 和 隐藏
语法：
显示：$obj.fadeIn() / $obj.fadeIn(duration);毫秒为单位
隐藏：$obj.fadeOut() / $obj.fadeOut(duration);毫秒为单位
JS&jQuery
猜你喜欢
转载自www.cnblogs.com/xdl-smile/p/9484892.html
今日推荐
周排行