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的核心更名为 ECMA Script 简称为
ES
JS的组成：
1、核心 - ECMA Script
包含了JS的最基本的语法规范
2、文档对象模型
Document Object Model -> DOM
允许JS操作HTML网页上的内容
DOM的规范是由W3C来制定的
3、浏览器对象模型
Browser Object Model -> BOM
允许JS操作浏览器
使用JS
1、使用元素事件执行JS脚本代码
事件：用户在元素上所激发的行为操作
onclick 事件：
当用户单击元素时要做的操作
语法：
<ANY onclick="JS脚本代码">
JS脚本代码：
console.log('向控制台中输出的内容');
2、嵌入在网页中的<script></script>
语法：
<script></script>
特点：
网页加载的时候就开始执行
document.write() 向网页输出一句话
注意：如果通过按钮的单击事件执行document.write()的话，则会刷新网页内容
3、将JS脚本写在外部的JS文件中
步骤：
1、创建JS文件(xxx.js)并编写脚本
2、在网页中对JS文件进行引入
<script src="js文件路径"></script>
<script src="xxx.js">
console.log();
</script>
JS基础语法
1、语法规范
1、JS都是由语句来组成的
1、由运算符，表达式，关键字组成
2、严格区分大小写
console.log(); 正确
Console.log(); 错误
3、每条语句必须以 ; 表示结束
2、JS中的注释
单行注释：// 注释内容
多行注释：/* */
JS中的变量 和 常量
1、变量
1、声明变量的语法
声明：var 变量名;
赋值：变量名 = 值;
声明并赋值： var 变量名=值;
注意：
1、声明变量时，尽量使用var关键字，如果省略，也可以，但容易出问题
2、声明变量但未赋值的话，默认值为 undefined
2、变量名的命名规范
1、不能使用JS中的关键字或保留关键字
2、由字母，数字，下划线(_)和$组成
var u-name = "";错误
var u_name = "";正确
var $ = 35; 正确
3、不能以数字开头
4、尽量不要重复
5、尽量见名知意
var a;
var b;
var stuName;
var ab;
6、如无特殊需求的话，尽量使用小驼峰命名法
var age;
var stuAge;
2、常量
1、什么是常量
一经声明就不允许修改的数据就是常量
2、语法
const 常量名 = 值;
注意：
常量名采用全大写的形式
数据类型
1、作用
约束了数据在内存中所占空间大小问题的
2、JS数据类型分类
1、基本数据类型(值类型)
1、number类型
数字类型，可以表示32位的整数或64位的浮点数
整数：
表示十进制，八进制，十六进制
十进制：var num = 111;var num = 321;
八进制：var num = 010;
十六进制：var num = 0x22;
小数：
小数点计数法：var num = 123.456;
科学计数法：var num = 1.5e2;
2、string类型
字符串
都是由Unicode的字符，数字，标点组成的
1、查看字符的Unicode码
var str = "张";
var uCode=str.charCodeAt().toString(2)
2、如何将Unicode码转换成对应的字符??
已知Unicode码:5f20
var str = "\u5f20";
console.log(str);
3、中文范围
"\u4e00" ~ "\u9fa5"
4、转义字符
\n : 换行
\t : 制表符
\" : "
\' : '
\\ : \
3、boolean类型
布尔类型，只用于表示真(true)或假(false)
注意：
在参与数字运算时，true当作1运算，false当作0运算
var r = 365 + true ; // 366
var r = 27.58 * false; // 0
var r = true + false; // 1
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、数字 + 布尔 ：将布尔转为数字做加法
var boo = true;
var num = 15;
var r = boo + num; //16
3、字符串 + 布尔 ：将布尔转换为字符串做连接
var boo = true;
var str = "Hello";
var r = boo + str;//trueHello
4、布尔 + 布尔 ：都转换为数字做加法运算
var b1 = true;
var b2 = false;
var r = b1 + b2; //1
2、强制转换(转换函数)
1、toString()
将任意类型的数据转换成字符串，并返回转换后的结果
语法：
var r = 变量.toString();
var r = 变量+"";
2、parseInt()
作用：将指定的数据尽量转换成整数,如果实在无法转换的话，则返回NaN(Not a Number)
ex:
1、
var r = parseInt("456");
r : 456
2、
var r = parseInt("123.456");
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("35");
r : 35
2、
var r = Number("35.65");
r : 35.65
3、
var r = Number("35NIHAO");
r : NaN
运算符
1、算数运算符
1、+，-，*，/，%
5 / 2 ： 2.5
5 % 2 ： 1
2 % 5 ： 2
var num = 1234;
var ge = num % 10;
var shi = parseInt(num / 10) % 10
var bai = parseInt(num / 100) % 10;
var qian = parseInt(num / 1000);
2、++，--
++ ：自增运算符，在自身基础上做+1操作
-- ：自减运算符，在自身基础上做-1操作
前后缀：
var num = 10;
num++;
特点：先使用num的值，然后再做自增运算
var num = 10;
console.log(num++); 输出 10
console.log(num); 输出 11
var num = 10;
++num;
特点:先对变量进行自增，然后再使用变量的值
var num = 10;
console.log(++num); 输出 11
console.log(num);输出 11
var num = 5;
5 (6)6 6(7) (8)8 8
var result = num + ++num + num++ + ++num + num ;
结果：33
2、关系运算符(比较运算符)
>,<,>=,<=,==,!=,===,!==
1、10 > 5 : true
2、"10" > 5 : true
运算符两端如果有一个是数字的话，那么另外一个会自动转换(通过Number())成数字，再进行比较
3、"10a" > 5 : false
4、"10a" < 5 : false
NaN 除了 != 以外，其他比较都是false
5、"10" > "5" : false
比较的是 字符1的ASCII 和 字符5的ASCII
6、"张三丰">"张无忌" : false
三：19977
无：26080
7、"10" == 10 : true
=== : 判断数值和数据类型必须全相等的时候，结果才为真
!== : 数值 和 数据类型 任何一个不等的话，结果都为真
"10" !== 10 : true
"10" != 10 : false
3、逻辑运算符
!:逻辑非，等同于python Not
非真即假，非假即真
&&:逻辑与，等同于python and
||:逻辑或，等同于python or
4、位运算符
1、按位与 &
两个数字的二进制位进行比较，对应位都为1，则该位结果为1，否则为0
场合：奇偶性验证
7 & 1 : 1 奇数
7 : 111
1 : 001
6 : 110
1 : 001
2、按位异或 ^
不借助第三方变量交换两个数字时
var a = 3;
var b = 5;
a = a ^ b; a = 6
3:011
5:101
==============
110 : 6
b = b ^ a; b = 3
b: 5:101
a: 6:110
==============
011 : 3
a = a ^ b; a = 5
a: 6:110
b: 3:011
=================
101 : 5
5、条件运算符
单目运算符：++，--，!,-
双目运算符：+,-,... ...
三目运算符：? :
语法：? :
条件表达式 ? 表达式1 : 表达式2;
当条件表达式的结果为true的时候，执行表达式1中的内容，并将表达式1的结果作为整体表达式的结果。否则，则执行表达
式2的内容，并将表达式2的结果作为整体表达式的结果
6、赋值运算符
+=，-=，*=，/=，
var a = 5;
a += 5; // a=a+5
var a = 3;
var b = 5;
a ^= b; // a = a ^ b;
b ^= a; // b = b ^ a;
a ^= b; // a = a ^ b;
流程控制
1、程序控制结构
1、顺序结构
2、分支结构 / 选择结构
3、循环结构
2、分支结构
1、if 结构
1、if结构
语法：
if(条件){
语句块;
}
2、if ... else 结构
语法：
if(条件){
语句块1;
}else{
语句块2;
}
3、if ... else if ... 结构
语法：
if(条件1){
语句块1
}else if(条件2){
语句块2
}else if(条件n){
语句块n
}else{
语句块n+1
}
分支结构
1、if结构(略)
2、switch结构
1、作用
等值判断
2、语法
switch(变量){
case 值1:
语句块1
//break; //跳出switch结构 ，可选
case 值2:
语句块2
break; //跳出switch结构 ，可选
... ...
default:
语句块n
/*所有case都未匹配上时，才执行default*/
}
注意：
1、变量 和 case后的值的判断，采用 === 来判断的。
2、break，如果省略break的话，则从匹配的case块开始，依次向下执行(执行下面所有case块的内容 或 default的内
容),直到碰见break或执行结束为止
循环结构
1、作用
重复的执行相同或相似的代码
2、循环二要素
1、循环条件
循环从什么时候开始，到什么时候结束
2、循环操作
循环中要做的事情(要执行的代码)
ex:
1、控制台中输出100遍Hello World
条件：从第1遍开始 到 第100遍结束
操作：输出 Hello World
2、打印 1-100 之间所有的数字
条件：从第1遍开始 到 第100遍结束
操作：输出 条件 的值
3、while 循环
1、语法
while(循环条件){
循环操作
}
流程：
1、判断循环条件(boolean值/表达式)
2、如果条件为真，则执行循环操作
2.1 执行完操作后，再回来判断条件...
3、如果条件为假，则退出循环
ex:
1、打印 100 遍 Hello World
条件：从 1 开始 ，到 100 结束
操作：打印 Hello World
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 循环
语法：
for(表达式1;表达式2;表达式3){
循环操作
}
表达式1：循环条件的初始化
表达式2：循环条件的判断
表达式3：更新循环条件
流程：
1、先执行表达式1,即循环条件初始化(执行1次)
2、再判断表达式2的值，true 或 false
3、如果为true，则执行循环操作
如果为false，则退出循环结构
4、 执行完循环操作后，再执行表达式3
5、再判断表达式2，同步骤2...
3、循环嵌套
允许在一个循环中再出现另一个循环
for(var i=1;i<=10;i++){ // 外层循环
for(var j=1;j<=10;j++){ //内层循环
}
}
外层循环走一次，内层循环走一轮
函数 - function
1、函数的声明
function 函数名(参数){
函数体
}
1、参数
参数列表，允许声明0或多个参数，多个参数的话，使用 , 隔开即可
2、返回值
返回值是可选的，如果需要返回值的话，通过 return 值 ; 进行返回
2、函数调用
在任意JS的合法位置处，都允许做函数调用
函数名(参数列表);
函数
1、由ES提供的函数
在网页中无需声明，就可以直接使用
已学：parseInt() / parseFloat() / Number()
1、isNaN(value)
判断value是否为非数字
true:不是数字
false:是数字
2、eval()
执行由字符串来表示的JS代码
2、局部变量 与 全局变量
1、全局变量
一经声明后，在JS的任何位置处都能使用的变量就是全局变量
1、
<script>
var uname = "sanfeng.zhang"; //全局变量
function show(){
console.log(uname); //输出 sanfeng.zhang
}
</script>
2、
<script>
function show(){
uname = 'sf.zh';//全局变量,容易出问题
}
</script>
推荐：
全局变量声明的时候
1、使用 var 关键字
2、一律放在<script>中，所有function之外
2、局部变量
使用var关键字，并且声明在 function 中的变量就是局部变量
局部变量的作用域只在声明的函数内，出了函数就不能使用
数组
1、什么是数组
数组(Array)是一个用于保存批量数据的结构，即一个变量中允许保存多个数据。是按照线性结构的方式来保存数据的
2、创建数组
1、创建一个空数组
var 数组名 = [];
2、创建数组并初始化元素
var 数组名 = [元素1,元素2,... ...];
3、创建一个空数组
var 数组名 = new Array();
4、创建数组并初始化元素
var 数组名 = new Array(元素1,元素2,... ...);
3、数组的使用
获取 或 设置数组中的元素，一律都使用下标
下标范围：从0开始，到元素个数-1为止
1、想获取数组中的第2个元素
数组名[1]
2、为数组元素赋值
数组名[下标] = 值;
4、获取数组的长度
属性：length
用法：数组名.length
ex:
var names = ["鸣人","佐助","小樱","卡卡西"];
console.log(names.length);//4
使用场合：
1、配合循环，遍历数组中的每一个元素
2、能够找到数组中，最新要插入元素的位置
var names = ["鸣人","佐助","小樱","卡卡西"];
names[names.length] = "纲手";
5、关联数组
1、什么是关联数组
JS中数组分为索引数组 和 关联数组
索引数组：由数字做下标
关联数组：由字符串做下标
2、声明和使用关联数组
var names = [];
names["xyj"] = "西游记";
names["hlm"] = "红楼梦";
names["shz"] = "水浒传";
console.log(names["hlm"]);
3、注意
length 只能统计出索引数组的长度，而关联数组则不包含在内
4、使用 for ... in 遍历数组
能够遍历数组中所有的数字下标和字符串下标
for(var 变量 in 数组){
变量：数组中所有的数字下标和字符串下标
}
6、数组的常用API
1、toString()
作用：将数组转换为字符串并返回
2、join(seperator)
作用：返回一个由指定连接符连接的数组元素的字符串
参数 seperator ：连接符
3、concat(arr1,arr2,...)
作用：拼接多个数组到一起,并返回拼接后的结果
语法：arr.concat(arr1,arr2,...)
注意：该函数并不会改变数组，而是返回拼接后的一个副本
4、reverse()
作用：反转
语法：arr.reverse()
注意：该函数会改变现有数组的结构
5、sort()
1、作用
对先用数组进行排序
默认情况下，按照元素的Unicode码进行排序(升序)
2、注意
该函数会改变现有数组的内容
3、允许通过自定义的排序函数来指定数字的排序规则
语法：
arr.sort(排序函数);
1、指定排序函数
var nums = [38,6,121,76,65,23,1128];
function sortAsc(a,b){
return b - a;
}
nums.sort(sortAsc);
6、进出栈操作
栈式操作：提供了快速操作数组头部或尾部的方法
1、push()
入栈，向数组的尾部添加新元素，并返回新数组的长度
names.push("张无忌");
等同于
names[names.length] = "张无忌";
2、pop()
出栈，删除并返回数组尾部的元素
3、unshift()
向数组的头部增加新元素并返回新数组长度
4、shift()
删除并返回数组头部的元素
7、二维数组
1、什么是二维数组
数组中的数组，在一个数组中的每个元素又是一个数组
2、声明二维数组
var names = [
["贾乃亮","王宝强","陈羽凡"],
["李小璐","马蓉","白百合"]
];
console.log(names[1][1]);
字符串 - string
1、声明字符串
var str1 = "字符串1";
var str2 = String("字符串2");
var str3 = new String("字符串3");
2、length - 属性
作用：返回当前字符串中字符的个数
3、常用函数 - String API
1、大小写转换函数
1、toUpperCase()
返回字符串的完全大写形式
2、toLowerCase()
返回字符串的完全小写形式
ex:
var str = "Hello World";
console.log(str.toUpperCase());
// HELLO WORLD
2、获取指定位置的字符 或 Unicode码
1、charAt(index)
返回指定下标位置处的字符
var msg = "Hello World";
var r = msg.charAt(6);
r : W
2、charCodeAt(index)
返回指定下标位置处的字符的Unicode码(十进制)
var msg = "Hello World";
var r = msg.charCodeAt(6);
r : W的ASCII码
3、检索字符串
1、作用
查询子字符串在指定字符串中的起始下标
2、函数
1、indexOf(value,fromIndex)
value : 要查询的子字符串
fromIndex : 从哪个位置处开始查，如果省略的话，则从头查找
返回值：返回第一次出现子字符串的下标，如果未找到，则返回-1
2、lastIndexOf(value,fromIndex)
作用：查找value最后一次出现的下标
注意：该函数的查找方式是从后向前找
4、截取子字符串
函数：substring(start,end)
作用：返回从start到end-1之间的子字符串，如果省略end的话，则截取到末尾
String 对象
1、分割字符串
函数：split(seperator)
作用：将字符串，通过 seperator 拆分成一个数组
ex:
var msg="张三丰|男|65|19000102";
var arr = msg.split("|");
console.log(arr);
2、模式匹配
1、作用
配合着正则表达式来完成字符串的查找和替换...
2、正则表达式
语法：/正则格式/修饰符
ex:/\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、search(substr/regexp)
作用：返回满足substr 或 regexp 格式的子字符串第一次出现的下标。如未找到，则返回-1
注意：search函数不支持全局匹配，将自动忽略g
其他内置对象
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 = /匹配模式/修饰符;
var reg1 = /microsoft/g;
var reg2 = /\d{2,6}/g;
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 的 y 次方
3、数值比较函数
Math.abs(x) : 绝对值
Math.max(a,b,c,d,e,f,g):获取最大值
Math.min(a,b,c,d,e,f,g):获取最小值
Math.random() : 返回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()
返回自1970-1-1 00：00：00 以来到 date 之间所经过的毫秒数
2、setTime(毫秒数)
2、读取时间分量函数
1、getFullYear()
获取日期时间对象的年份
2、getYear()
获取子1900年以来到当前日期时间对象所经过的年数
3、getMonth()
返回 0-11 的数字来表示 1-12月
0 : 1月
1 : 2月
...
11 : 12月
4、getDate()
返回当前日期时间对象所对应的日
5、getDay()
返回当前日期时间对象所对应的星期?
返回 0-6 来表示星期日 - 星期六
0 : 日
1 : 一
... ...
6 : 六
6、获取时间
getHours() : 获取 小时
getMinutes() : 获取分钟
getSeconds() : 获取秒
getMilliseconds() : 获取毫秒
7、转换为字符串
1、toString()
2、toLocaleString()
3、toLocaleTimeString()
4、toLocaleDateString()
外部对象
1、BOM 和 DOM
BOM：Browser Object Model - 浏览器对象模型
DOM：Document Object Model - 文档对象模型
2、BOM
1、作用
表示整个浏览器窗口
BOM提供了一个核心对象 - window
2、window 对象的使用
1、属性 和 方法
window对象会包含若干属性 和 方法
属性：
document,location,history,...
方法：
alert() , prompt()
调用window对象的属性和方法时，可以省略window不写
2、window 中的对话框
1、警告框
window.alert() / alert()
2、输入框
window.prompt() / prompt()
3、确认框
window.confirm() / confirm()
按 "确定" 按钮的话，则返回true
其余的操作均返回 false
3、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);
3、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
显示浏览器相关信息
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：要获取的元素的ID
elem:所得到的元素的对象 - DOM对象/元素
如果没找到匹配的元素，则返回null
DOM对象的常用属性：
1、innerHTML
获取 或 设置当前DOM对象的HTML文本值
2、innerText
获取 或 设置当前DOM对象的文本值
3、value
获取 或 设置表单控件对象的值
3、读取节点的信息
1、节点的类型
1、元素节点
表示页面上的一个元素
2、属性节点
表示页面上元素的一个属性
3、文本节点
表示页面上元素中的一个文本内容
4、注释节点
表示网页上的一个注释
5、文档节点
表示html文档
属性：nodeType
值：
返回1 ：元素节点
返回2 ：属性节点
返回3 ：文本节点
返回8 ：注释节点
返回9 ：文档节点
2、节点的名称
属性：nodeName
元素节点 和 属性节点：元素名 或 属性名
文本节点：#text
文档节点：#document
注释节点：#comment
4、获取 或 设置元素节点的属性
1、getAttribute(attrName)
作用：获取某元素指定的属性值
attrName:要获取的属性的名称
返回值：attrName属性名对应的值
注意：获取的属性值，必须要在标记中编写出来，否则值为null
2、setAttribute(attrName,attrValue)
作用：修改指定属性的值
attrName:要修改的属性名
attrValue:要设定的值
3、removeAttribute(attrName)
作用：将attrName属性从元素中删除数去
DOM
1、元素的样式
1、使用setAttribute()设置class属性的值
elem.setAttribute("class","类选择器");
2、使用元素的 className 属性修改class值
elem.className="类选择器";
3、自定义元素样式
elem.style.css属性=值;
注意：
如果css属性名中包含 - 的话，连字符(-)要取消，并且 - 后面的第一个字符要变大写
ex:
$("d1").style.color = "red";
$("d1").style.fontSize="18px";
$("d1").style.borderRightColor="yellow";
2、查询节点
1、通过id查询
var elem=document.getElementById("id");
2、通过标签名查询
语法:document|elem.getElementsByTagName(标签名)
document.getElementsByTagName(标签名)
elem.getElementsByTagName(标签名)
ex:
1、document.getElementsByTagName("p")
2、
var div = document.getElementById("d1");
div.getElementsByTagName("p")
返回值：由指定标签元素所组成的数组
3、通过元素的name属性值来查询节点
优先使用在 单选按钮 和 复选框中的
语法：document.getElementsByName(name)
返回值：返回由指定name值的元素所组成的数组
4、根据元素的class值查询节点
语法：document|elem.getElementsByClassName(className)
返回值：由指定className值的元素所组成的数组
5、根据节点的层级关系查找节点
1、parentNode
返回当前元素的父节点
2、childNodes
返回当前元素的所有子节点
注意：该属性会获取到元素节点，文本节点(包含空格和回车)以及注释节点
3、children
返回当前元素的所有子节点(元素节点)
4、nextSibling
返回当前元素的下一个兄弟节点
5、nextElementSibling
返回当前元素的下一个元素兄弟节点
6、previousSibling
返回当前元素的上一个兄弟节点
7、previousElementSibling
返回当前元素的上一个元素兄弟节点
3、增加节点
1、创建元素节点
var elem=document.createElement("元素名");
elem:表示创建好的DOM元素
2、增加节点
1、document.body.appendChild(elem)
向body中追加新元素elem
2、parentNode.appendChild(elem)
parentNode:表示的是已存在的一个元素
将elem追加到parentNode的内部
3、parentNode.insertBefore(newElem,oldElem)
将newElem元素插入到parentNode中oldElem之前
4、删除节点
删除节点只能由父元素来发起
1、document.body.removeChild(elem);
删除body中的elem元素
2、parentNode.removeChild(elem);
在 parentNode 中删除 elem 元素
事件
1、什么是事件
允许通过特殊的行为来激发的操作
2、常用的事件
1、鼠标事件
click ：鼠标单击事件
mouseover ：鼠标进入到元素时激发的事件
mousemove ：鼠标在元素内移动时激发的事件
mouseout ：鼠标从元素内移出时激发的事件
2、键盘事件
keydown ：键位按下时的事件
keypress：键位按下时的事件
keyup ：键位抬起时的事件
3、状态改变事件
load ：当元素加载完毕时触发的事件
change ：当元素发生改变时触发的事件
focus ：当元素获取焦点时触发的事件
blur ：当元素失去焦点时触发的事件
submit ：当表单被提交时触发的事件
注意：当为html元素绑定事件时，必须要在事件名称前加 on
1、为某元素绑定load事件 -> onload
2、为某元素绑定focus事件 -> onfocus
3、绑定事件的方式
1、在元素中绑定事件
<button onclick=""></button>
<input onblur="" onfocus="" onclick="">
2、在js中动态的为元素绑定事件
<script>
var div = $("d1");
div.on事件名=function(){
}
div.onclick=function(){
}
</script>
4、事件行为详解
1、load 事件
常用场合：当网页加载完毕时，要执行的操作
方式1：在元素中绑定事件
<body onload="函数()"></body>
方式2：JS中动态绑定
<script>
window.onload = function(){
}
</script>
事件
1、事件行为
1、load 事件
2、submit 事件
功能：表单被提交时要触发的事件
注意：通过一个boolean的返回值，通知表单是否被提交
返回值：true，可以提交表单
返回值：false，不能提交表单
3、focus 事件
功能：当元素获取焦点时要触发的事件
4、blur 事件
2、事件对象 (event对象)
1、什么是事件对象
事件对象中封装了事件中要用到的一些参数和一些操作
2、获取事件对象(event对象)
1、html元素中绑定事件
<ANY onclick="btnClick(event)">
<script>
function btnClick(event){
//event表示事件对象
}
</script>
2、使用JS动态绑定
<script>
d1.onclick=function(event){
}
</script>
3、事件对象的常用属性
1、事件源
事件源：表示触发当前事件的元素
获取事件源：
通过 event.target 获取事件源
返回DOM元素
2、鼠标事件
1、offsetX，offsetY
获取鼠标在 元素上 的坐标点
以元素的左上角为(0,0)计算的
2、clientX，clientY
获取鼠标在 网页上 的坐标点
以文档的左上角为(0,0)计算的
3、screenX，screenY
获取鼠标在 显示器上 的坐标点
以显示器的左上角为(0,0)计算的
3、键盘事件
1、event.key
得到 按下的 字符
在 keypress 中 和 keydown 中
1、在 keypress 中
event.which : 表示按下字符的ASCII码
2、在 keydown 中
event.which : 表示的 键位码 ，只记录键位，不记录字符(大小写英文字符的键位码是相同的，一些数字和标点的
键位码有可能是相同的)
4、事件冒泡
1、什么是事件冒泡
当激发子元素的事件时，把父元素对应的事件也一并给执行了
场合：
1、必须是父子元素或具备层级关系的元素
2、为元素们设置了相同的事件
2、阻止事件冒泡
只让事件在当前元素中执行，不向上冒泡
event.stopPropagation();
