javascript
1.变量
1.1概念
变量源于数学，是计算机语言中存储计算结果或表示值抽象概念
计算机有个地方叫内存，变量都会将值存入到内存中，变量就是指向这个值的名字
1.2命名规则
1. 由字母数字下划线和$组成
2. 不能以数字开头
3. 严格区分大小写
4. 不能使用关键字和保留字关键字和保留字
ECMA-262第3版描述的关键字
| break | do | instanceof | typeof |
|---|---|---|---|
| case | else | new | var |
| catch | finally | return | void |
| continue | for | switch | while |
| debugger* | function | this | with |
| default | if | throw | delete |
| in | try |
ECMA-262第3版描述的保留字
| abstract | enum | int | short |
|---|---|---|---|
| boolean | export | interface | static |
| byte | extends | long | super |
| char | final | native | synchronized |
| class | float | package | throws |
| const | goto | private | transient |
| debugger | implements | protected | volatile |
| double | import | public |
ECMA-262第5版本非严格模式
| class | enum | extends | super |
|---|---|---|---|
| const | export | import |
ECMA-262第5版严格模式
| implements | package | public | interface |
|---|---|---|---|
| private | static | let | protected |
| yield |
2.数据类型
2.1字符串string
- 概念：由零个或者多个16位Unicode字符组成的字符序列。
- 定义方式：使用单引号‘‘和双引号""定义字符串
单双引号的特点
- 单双引号没有区别，都不解析变量
- 单双引号可以相互嵌套
- 不可以嵌套自身，除非使用转义字符\转义
// 单引号
var str1 = ‘老板，瓜甜吗？‘;
// 双引号
var str2 = "滚犊子，这是苦瓜";
// 关于单引号嵌套双引号
var str3 = ‘王健林说："先定一个小目标，先赚它一个亿"‘;
// 双引号嵌套单引号
var str4 = "俊哥说自己很‘帅‘，大家都笑了";
// 关于嵌套自身
var str5 = ‘‘单引号‘‘ // 最外层的一组单引号定义字符串，内层的一组单引号作为普通单引号字符串，为了避免语法报错和歧义，使用转义字符转义特点：
1. 字符串是不可以改变的，一旦创建，值不能改变，如果改变，要先销毁原来的字符串，用新值填充
var name = ‘俊哥‘; name += ‘很帅‘; // 俊哥很帅
2.转为字符串```
第一种方法：
str.toString()
除null和undefined之外，所有的数据都可以通过 数据.toString()转为字符串
//会报错
第二种方法：
String():将任何值都可以转为字符串
对象=>字符串：[Object Object]
其他数据=>原型输出```
3.特殊字符串| \n | 换行 |
|---|---|
| \t | 制表符 |
| \r | 回车 |
| \ | 斜杠(\有转义的意思，需要展示,使用\转义自身) |
| \unnnn | 16进制代码nnnn表示一个Unicode字符(n为0-F) |
?2.2 数值（Number）
1. 整数
// 十进制
var num1 = 12;
// 八进制(第一位必须是0)
// 0 1 2 3 4 5 6 7 10 11 12 13 14 15 16 17 20 21 22 23 24
var num2 = 070; // 等价于 十进制56
注意：八进制在严格模式下报错
// 十六进制(第一位必须是0x)
// 0 1 2 3 4 5 6 7 8 9 a b c d e f 10
var num3 = 0xA; // 等价于 十进制10
注意：八进制和十六进制的数值最终都会转换为十进制数值进行 算数计算2. 浮点数
var num1 = 1.1;
var num2 = 0.8;
var num3 = .4; // 不推荐
注意：
1. 0.1 + 0.2 = 0.30000000000000004
2. 0.8 - 0.2 = 0.20000000000000007
这是基于IEEE754的数值进行计算的通病，有计算损耗
所以：请不要使用浮点数进行精确计算3. NaN(Not a Number)
概念：表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）
3 - ‘a‘ // 不知道结果，NaN
4 * ‘b‘ // 不知道结果，NaN
5 / ‘z‘ // 不知道结果，NaN
4 + ‘x‘ // 结果：4x（此时+ 是连接运算符）4. 其他数据转换为数值
- Number转换规则
字符串=>数值 ‘‘=>0 纯数字字符串=>原型输出(***) 普通字符串=>NaN(***) ‘0xf‘=>15(支持十六进制字符串转换为十进制) 布尔值=>数值(***) true=>1 false=>0 数值=>数值 原型输出 null=>0(***) undefined=>NaN(***) 对象=>数值 调用对象的valueOf()方法进行检测，检测结果是NaN 继续调用对象toString()方法，再按前面的规则返回字符串值
- parseInt转换规则
```
从第一个字符开始查找，直到找到第一个非法数字截止，找到的即是转换结果
‘abc‘=>NaN
‘23ab‘=>23
true=>NaN
null=>NaN
‘32.18‘=>32
undefined=>NaN
特殊：
‘0xf‘=>15(可以转换16进制)
进制之间的转换
parseInt(‘10‘,2) // 2
parseInt(‘10‘,8) // 8
parseInt(‘10‘,10) // 10
parseInt(‘10‘,16) // 16
parseInt(‘AF‘,16) // 175
```
- parseFloat转换规则
从第一个字符开始查找，直到找到第一个非法字符（除数字和第一个小数点）截止，找到的即是转换结果 ‘abc‘=>NaN ‘23ab‘=>23 true=>NaN null=>NaN undefined=>NaN 25=>25 ‘32.18‘=>32.18
?
2.3 布尔值（Boolean）
true：真
false：假
只有以下7个值转换为布尔值为假，其他为真
‘‘ //空字符 0 0.0 NaN false null undefined
2.4 未定义（undefined）
- 未定义的变量
- 定义但是未赋值的变量
// 定义但是未赋值
var str;
console.log(str); // undefined
// 由typeof 检测未定义的变量
console.log(typeof abc); // undefined
如果不用typeof检测，直接打印输出一个未定义的变量，在JS中会直接报错注意：两种未定义的情况
console.log(a); //如果a在整个代码中都未定义过，那么JS报错a is not definedconsole.log(a); //程序都是顺序执行，虽然a还是未定义，但是整个代码中有a的存在，程序不会报错，执行出来是undefined
var a;
跟函数比较相似
浏览器在执行script代码的时候，先将script内部的函数和变量值全部"登记"，然后才去执行具体的每一行代码
执行到console.log(abc)的时候，没有"登记"过abc，则abc直接报错，说没有定义该变量，而且终止了代码的执行
执行到第一个console.log(a)的时候，曾经"登记"过a变量，但是a变量在下面定义的，于是浏览器认为说a属于定义了但是未赋值的状态，就赋值为undefined， 不会报错
函数跟变量不一样的地方是：
函数提前登记之后，可以直接提前调用，但是变量值提前调用只是不报错，拿不到下面定义的值2.5 对象（object）
- null
console.log(typeof null);
- array数组
var arr = [‘a‘,‘b‘,‘c‘]; console.log(typeof arr);
- 对象
var obj = {}; console.log(typeof obj);
属性Object.keys(传入的对象); 并且以数组形式输出
var obj = {a:1,b:2,c:3}
Object.keys(obj) //[‘a‘,‘b‘,‘c‘]2.6 函数（function）
function demo(){}console.log(typeof demo); // function3. 运算符
3.1 算术运算符
1. 普通算数运算符: + - * / %
var num1 = 8;
var num2 = 5;
console.log(num1 + num2); // 13
console.log(num1 - num2); // 3
console.log(num1 * num2); // 40
console.log(num1 / num2); // 1.6
console.log(num1 % num2); // 3 等价于 8/5=1...3
注意：当/ % 的除数为0时,5/0 5%0 测试结果为Infinity Infinity 无穷大的意思
当/ % 的除数为0时 测试类型是 typeof(5/0) 或typeof(5%0) 为NaN2. 特殊算数运算符: ++ --
- 认识++和--
// ++:让自身自增1
var num1 = 5;
num1++;
console.log(num1); // 6
var num2 = 8;
++num2;
console.log(9);
// --:让自身自减1
var num3 = 4;
num3--;
console.log(num3); // 3
var num4 = 2;
--num4;
console.log(num4); // 1
总结：
1.i++,i-- 是先运算在+ -
++i，--i是先+ -,再运算
2. 不管++在变量之前，还是在变量之后，都是让自身增加1
不管--在变量之前，还是在变量之后，都是让自身减小1- 区分++/--在前和在后的区别
var num1 = 5;
// num1++:++在变量num1之后，先执行console.log,再执行自身自增1
console.log(num1++); // 5
console.log(num1); // 6
var num2 = 3;
// ++num2:++在变量num2之前，先执行自身自增1，在执行console.log
console.log(++num2); // 4
console.log(num2); // 4
// 举例
var num3 = 4;
var num4 = 8;
// 解释：num4++(++在后)，num4会先和num3运算得出计算结果，然后自身再自增1为9，所以+运算的结果是12，运算结束num4的值变为9
console.log(num3 + num4++); // 12
console.log(num3,num4); // 4 9
总结：
2. ++在变量前，先自增1再运算
++在变量后，先运算再自增1
--在变量前，自减1再运算
--在变量后，先运算再自减1
==============================================
注意：这里大家会考虑，都算完了，再自减1有毛线的作用?
减1之后，对之后的运算会产生影响，请看例子
var num5 = 1;
var num6 = 3;
console.log(num5 + num6++ + num6); // 1 + 3 + 4 = 8
第一个+运算执行的是：1 + 3
num6++:自身自增1
第二个+运算执行的是：4 + 4(中间num6++，num6变为了4)
==============================================3.2 赋值运算符 = += -= *= /= %=
// 将4赋值给num变量
var num = 4;
console.log(num); // 4
// 将num1自增5，再赋值给自身
var num1 = 3;
num1 += 5; // 等价于 num1 = num1 + 5
console.log(num1); // 8
// 将num2自减5，再赋值给自身
var num2 = 14;
num2 -= 5; // 等价于 num2 = num2 - 5
console.log(num2); // 9
// 将num3自乘5，再赋值给自身
var num3 = 3;
num3 *= 5; // 等价于 num3 = num3 * 5
console.log(num3); // 15
// 将num4自除5，再赋值给自身
var num4 = 10;
num4 /= 5; // 等价于 num4 = num4 / 5
console.log(num4); // 2
console.log(typeof 7/0) //NaN
// 获取num5跟5取余的结果，再赋值给自身
var num5 = 13;
num5 %= 5; // 等价于 num5 = num5 % 5
console.log(num); // 3
console.log(typeof 7%0) //NaN3.3 比较运算符 == === != !== > < <= > >=
1. 相等比较:== ===
var num1 = 3;
var num2 = 3;
console.log(num1 == num2); // true
var num3 = 4;
var num4 = 2;
console.log(num3 == num4); // false
var num5 = 7;
var num6 = ‘7‘;
// ==:只比较值大小，不比较类型
console.log(num5 == num6); // true
var num7 = 7;
var num8 = ‘7‘;
// ===:比较值和类型，都相等结果为true
console.log(num7 === num8); // false
// 特例
console.log(null == undefined); // true
console.log(null === undefined); // false
null==0 //false
0==undefined //false2. 不相等比较: != !==
var num1 = 4;
var num2 = 5;
console.log(num1 == num2); // false
// num1和num2不相等返回true
console.log(num1 != num2); // true
var num3 = 3;
var num4 = ‘3‘;
console.log(num3 === num4); // false
// num3和num4值和类型有一个不相等返回true
console.log(num3 !== num4); // true3. 大于小于比较: > >= < <=
var num1 = 5;
var num2 = 19;
console.log(num1 > num2); // false
// num1>num2成立或者num1==num2成立都可以返回true
console.log(num1 >= num2); // false
console.log(num1 < num2); // true
// num1<num2成立或者num1==num2成立都可以返回true
console.log(num1 <= num2); // true3.4 逻辑运算符
1. 逻辑与:&& - 两真为真，其余都为假
console.log(true && true) // true
console.log(true && false) // false
console.log(false && true) // false
console.log(false && false) // false本质是：
// 将&&两侧的值"隐式"转为布尔值进行判断
console.log(3 && ‘a‘) // a
console.log(‘abc‘ && 23) // 23
console.log(‘abcd‘ && null); // null
console.log(0 && ‘么么哒‘) // 0
***console.log(undefined && null) // undefined******注意：
如果&&两侧都为真，那么以后面的为结果；
如果&&两侧都为假，那么以前面的为结果。
2. 逻辑或:|| - 两假为假，其余都为真
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false);// false本质是：
console.log(23 || 8); // 23
console.log(‘ab‘ || null) // ab
console.log(undefined && ‘萌萌哒‘); // 萌萌哒
console.log(null && undefined); // undefined*注意:
如果||两侧都为真，那么以前面的为结果
如果||两侧都为假，那么以后面的为结果
3. 取反
console.log(!true); // false
console.log(!false);// true本质是：
console.log(!23); // false
console.log(!null); // true
console.log(!0); // true3.5 条件运算符（三元运算符）
var result = 布尔值 ? 布尔值为真走这 : 布尔值为假走这;
var result = 5 > 3 ? ‘婚姻大事全凭父母做主‘ : ‘小女子还想侍奉父母两年‘;
console.log(result); // 婚姻大事全凭父母做主3.6 特殊的+：连接运算符
1.特殊1：+
var num1 = 3;
var num2 = ‘a‘;
var num3 = 8;
console.log(num1 - num2); // NaN
console.log(num1 * num2); // NaN
console.log(num1 / num2); // NaN
// +两边有非数字‘a‘,取连接运算
console.log(num1 + num2); // 3a
// +两边是纯数字，取加法运算
console.log(num1 + num3); // 11
var num4 = 5;
num4 += 13; // num4的值为18
num4 += ‘abc‘; // num4的值变为18abc2. 特殊2：- * /
var num1 = 12;
var num2 = ‘5‘；
console.log(num1 - num2); // 7
console.log(num1 * num2); // 60
console.log(num1 / num2); // 2.4
console.log(num1 % num2); // 2
总结：
除+之外，其余的运算符，在进行纯数字运算的时候，正常运算3.特殊的+
var num1 = ‘5‘；
// 将字符串类型的num1变为数字
console.log(+num1); // 5
console.log(+num1+12); // 17
console.log(3+ +num1); // 8
总结：
在纯数字字符串前多写一个+，可以将字符串类型的数字变为数值类型的数字3.7 运算符优先级
| 优先级 | 运算符 |
|---|---|
| 12 | 成员访问(obj.username)、数组访问(arr[1])、new(new Person)、函数调用(demo()) |
| 11 | 后置递增(num++)，后置递减(num--) |
| 10 | 取反(!) 前置递增(++num) 前置递减(—num) typeof void delete |
| 9 | 乘法(*) 除法(/) 取余(%) |
| 8 | 加法(+) 减法(-) |
| 7 | < <= > >= in instanceof |
| 6 | == != === !== |
| 5 | 逻辑与(&&) |
| 4 | 逻辑或(||) |
| 3 | 三元运算符(? :) |
| 2 | 赋值运算符(= += -= *= /= %=) |
| 1 | 逗号(,) |
4.流程控制
4.1 顺序分支
代码从上向下执行
4.2 条件分支
1. if条件分支（具体值和范围判断都可）
// 定义变量
var age = 24;
// 只有if判断
if (age < 18) {
console.log(‘小弟弟，你好小‘);
}
// if...else...判断
if (age < 18) {
// 当年龄小于18岁的时候，执行此段代码
console.log(‘年龄小于18岁‘);
} else {
// 当年龄大于等于18岁的时候，执行此段代码
console.log(‘年龄大于18岁‘);
}
// if...else if...else...
if (age < 18) {
console.log(‘年龄小于18岁‘);
} else if (age >= 18 && age < 24) {
console.log(‘年龄在18(包含)到24(不包含)岁之间‘);
} else if (age >= 24 && age < 30) {
console.log(‘年龄在24(包含)到30(不包含)岁之间‘);
} else {
console.log(‘年龄大于等于30岁‘);
}2. switch语句（具体值判断）
// 将数值转换为具体的星期
var week = 3;
switch (week) {
case 1:
console.log(‘星期一‘);
break;
case 2:
console.log(‘星期二‘);
break;
case 3:
console.log(‘星期三‘);
break;
case 4:
console.log(‘星期四‘);
break;
case 5:
console.log(‘星期五‘);
break;
case 6:
console.log(‘星期六‘);
break;
case 7:
console.log(‘星期日‘);
break;
default:
console.log(‘输入的数据有误‘);
}利用break进行合理的合并处理
var month = 1;
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
console.log(‘31天‘);
break;
case 4:
case 6:
case 9:
case 11:
console.log(‘30天‘);
break;
case 2:
console.log(‘28天‘);
break;
default:
console.log(‘输入的月份有问题‘);
}
月份是1 3 5 7 8 10 12的时候，程序输出31天，并break(打断)，不再执行下面的代码
月份是4 6 9 11的时候，程序输出30天，并break(打断)，不再执行下面的代码
如果都不是，程序输出"输入的月份有问题"
if (month == 1) {
} else if (month == 2) {
} else if (month == 3) {
}4.3 流程控制－循环语句
1. for循环
for (var i = 0; i < 10; i++) {
console.log(i);
}2. while循环
var i = 0;
while (i < 10) {
console.log(i);
i++;
}3. do...while循环
var i = 0;
do {
console.log(i);
i++;
} while (i < 10);
无论条件是否成立，都先执行一次do中的代码4. break和continue语句
***break 如果在多层循环嵌套中，是终止当前层循环
*continue 是跳出当前循环，继续执行当前层循环的下一次循环
// break:终止循环
for (var i = 0; i < 10; i++) {
if (i == 4) {
break;
}
console.log(i);
}
// 最终的结果是：0 1 2 3
// 跳过当前循环继续执行下一次的循环
for (var i = 0; i < 10; i++) {
if (i == 4) {
continue;
}
console.log(i);
}
// 最终的结果是：0 1 2 3 5 6 7 8 95.函数
5.1 功能（为什么用）
- 减少代码重复书写的次数
- 提升开发效率，缩短开发时间
5.2 函数定义
1. 函数申明
// 1.定义普通函数
function demo(){
console.log(‘第一种定义函数方式‘);
}
// 调用函数
demo();2. 匿名函数
// 使用1：函数表达式
var fun = function(){
console.log(‘第二种定义函数方式‘);
}
// 匿名函数第一种调用方式
fun();
// 使用2：匿名函数自调用
(function(){
console.log(‘匿名函数自调用‘);
})();
// 使用3：作为其他函数的参数
setTimeout(function(){
console.log(‘1s之后显示在控制栏‘);
}, 1000)3. 使用Function构造函数
var fun = new Function(‘x‘,‘y‘,‘console.log(x+y)‘);
fun(3,8)4. 箭头函数(ES6)
// 下面三个函数是一致的
var fun = function(a,b){return a+b;}
var fun = (a,b)=>a+b;
var fun = (a,b)=>{return a+b};
// 调用函数
fun(3,9);5.3 特点
函数名定义规则
- 由字母数字下划线$组成
- 不能以数字开头
不能使用系统关键字和保留字命名
定义函数而不调用没有意义
调用特点：同一个
``````
``````
// 一个页面中可以有多个
/
big over
big out
small over
big over
small out
big out
big over
big out
/
// 此时触发了多次
```onmouseenter/onmouseleave 只触发一次
//同样的html big.onmouseenter = function () { console.log("移入大盒子"); } big.onmouseleave = function () { console.log("移出大盒子"); } small.onmouseenter = function () { console.log("移入小盒子"); } small.onmouseleave = function () { console.log("移出小盒子"); } /* 移入大盒子 移入小盒子 移出小盒子 移出大盒子 */ //此时触发了一次onmousedown/onmouseup
onmousemove
3.2键盘事件
1.onkeydown 键盘按下
2.onkeyup 键盘弹起
3.onkeypress 键盘按下
e.key // 获取输入的值 不支持IE8- e.keyCode // 获取对应值的ASCII码值onkeydown / onkeypress的区别
onkeydown和onkeyup 可以获取键盘上所有的字符 所有字母都按小写字母计算ASCII码值，也是就是A a 都按照65计算，如果是小键盘的1和大键盘的上1 ASCII码值还不一样，大键盘的1的ASCII码值49 ，而小键盘的1，则以97输出 onkeypress 只能获取数字，字母，字符只能获取空格和回车 字母区分大小写计算ASCII码值，大键盘小键盘的数字键的ASCII码值保持一致3.3 window事件
onscroll
onload
onload:当页面加载完成的时候，执行的事件 注意： 1. HTML标签在后，script获取对象在前，获取不到对象 2. 页面图片，音视频等资源异步加载，不能直接获取图片，音视频相关数据，需要进入浏览器以后再刷新一下才能获取，onload可以解决- onscroll
onscroll document.documentElement.scrollTop || document.body.scrollTop document.documentElement.scrollTop = 200 document.body.scrollTop = 100;4.onresize：浏览器大小改变的时候，执行的事件
```
1.改变大小(慢点改变，一直触发，快速改变，只触发几次)
只想改变一次var timer;
window.onresize = function () {
// 当窗口每次改变尺寸的时候，先清空定时器通过延时避免onresize多次执行
clearTimeout(timer);
// 开启定时器
timer = setTimeout(function () {
console.log(1);
}, 200);
}
```5.onerror 注意：触发onerror事件时候不能写onload事件
<img src="../images/11111.jpg" alt="手机"> <script> var img = document.querySelector("img"); img.onerror = function () { img.src = "../images/small.jpg"; } </script> // 如果img把图片路径引入错误的话，浏览器中会自动显示出alt属性的内容，为了增加用户体验性，我们会把出现错误的图片给替换掉，如果图片显示有误的话，就触发图片的onerror事件3.4 表单事件
onfocus：聚焦事件
onblur：失去焦点事件
获取用户输入的值：obj.value 单选和多选按钮是否选中：obj.checked- onchange: 改变事件
inputObj.onchange selectObj.onchange- onsubmit：提交事件
提交事件针对表单form.onsubmit- onreset: 重置事件
重置事件针对表单from.onreset- onselect: 当内容被选中的时候
3.5 阻止浏览器的默认行为
默认行为： a链接的跳转 input框的输入 提交重置按钮的 单击鼠标右键的菜单e ?e.preventDefault() : window.event.returnValue = false; //只能阻止默认行为，如果阻止input输入，input就不能输入内容，但是通过搜狗输入中文就可以，因为阻止的是浏览器的默认行为。 直接写return false也可以阻止浏览器的默认行为，但是return false 有很大的问题，而且return false以后的代码都不执行，所以不建议用3.5.1阻止a链接的默认行为
<a href="javascript:void(0);">百度</a> <a href="javascript:;">百度</a>3.6阻止冒泡
e ? e.stopPropagation() : window.event.cancelBubble = true;3.7事件绑定 addEventListener
如果写了两次相同的事件，只会执行最后的一次，因为同名的属性会被覆盖 可以添加事件绑定,或者移除事件绑定 /* * 添加绑定事件 * @param Object obj:绑定的事件对象 * @param String eventName:绑定的事件名称 * @param function callback:绑定事件执行的函数 * */ function addEvent(obj, eventName, callback) { if (obj.addEventListener) { obj.addEventListener(eventName, callback, false); } else { obj.attachEvent(‘on‘ + eventName, callback); } } /* * 移除绑定事件 * @param Object obj:移除绑定的事件对象 * @param String eventName:移除绑定的事件名称 * @param function callback:移除绑定事件执行的函数 * */ function removeEvent(obj, eventName, callback) { if (obj.removeEventListener) { obj.removeEventListener(eventName, callback, false); } else { obj.detachEvent(‘on‘ + eventName, callback); } }onclick,onmouseover,onkeydown,onload,onblur,事件称之为DOM0级事件 addEventListener(事件名称, 回调函数，true|false):DOM2级事件 事件名称：不需要加on 回调函数：触发了该事件，则自动执行回调函数 true|false: true:在捕获阶段执行 false:在冒泡阶段（默认） onclick的问题，通过addEventListener来解决 问题1：同名的事件会覆盖，通过addEventListener取消 问题2：obj.onclick=null addEventListener和removeEventListener():可以绑定指定的事件和取消指定的事件 问题3：有些事件只能通过addEventListener来增加 transitionend animationstart animationend3.8事件委托
- 注意：事件委托如果需要兼容IE8，需要把IE8支持的属性写到前面，否则会报错，其他兼容IE8的都是先写主流浏览器支持的属性 再写IE8 ，事件委托相反
IE8 || 主流浏览器 window.event.srcElement||e.target<ul class="menu"> <li>001</li> <li>002</li> <li>003</li> <li>004</li> <li>005</li> </ul> <script> window.onload = function () { var menu = document.querySelector(‘.menu‘); var list = document.querySelectorAll(‘li‘); var newLi = document.createElement(‘li‘); newLi.innerHTML = "006"; menu.appendChild(newLi); /*list.forEach(function (value,key) { list[key].onclick = function () { console.log(this.innerHTML); } })*/ // 这样无法获取到最后一个新添加的元素的innnerHTML menu.onclick = function (e) { // 事件委托 // IE8 || 主流浏览器 var obj = window.event.srcElement || e.target; if(obj.nodeName == "LI"){ console.log(window.event.srcElement.innerHTML || e.target.innerHTML); } } //通过这种事件委托，来获取新添加的元素的innerHTML } </script>3.9.DOM相关属性
鼠标事件对象 var e = ent || window.event; 浏览器的可视窗口区域 e.clientX e.clientY 距离页面的坐标 e.pageX e.pageY 距离鼠标点击的元素 e.offsetX e.offsetY 获取宽高 包括width+padding+border box.offsetWidth box.offsetHeight //获取宽高，包括width+padding clientWidth clientHeight //获取滚动内容的宽高 scrollWidth scrollHeight 获取HTML可视区域的宽高 document.documentElement.clientWidth document.documentElement.clientHeight 获取HTML整体页面的宽高 document.documentElement.scrollWidth document.documentElement.scrollHeight //子盒子到祖辈盒子的距离，如果祖辈盒子有定位，以祖辈盒子为准，如果祖辈没有定位，则以页面为准 small.offsetLeft small.offsetTop // 获取滚动距离 box.scrollLeft box.scrollTop // 修改滚动距离 box.scrollTop = 100; box.scrollLeft = 100 // 获取页面滚动距离 document.documentElement.scrollTop || document.body.scrollTop; document.documentElement.scrollLeft || document.body.scrollLeft;注意：只有scrollTop ,scrollLeft 可以赋值，其他属性只能获取
区别：
pageX pageY 是当页面有横纵滚动条是，是距离页面的，即使有的内容已经滚上（左）面，也可以测出距离页面的距离 clientX clientY 如果出现滚动条，只是测出当前可见区域的距离
1.获取鼠标点击位置距页面的左边距和上边距 e.pageX e.pageY 2.获取鼠标点击位置距浏览器的左边距和上边距 e.clientX e.clientY 3.获取鼠标点击位置距点击对象的左边距和上边距 e.offsetX e.offsetY 4.获取div的宽度和高度 div.offsetWidth div.offsetHeight 5.获取浏览器的宽度和高度 document.documentElement.clientWidth document.documentElement.clientHeight 6.获取页面的宽度和高度 document.documentElement.scrollWidth document.documentElement.scrollHeight 7.获取div的内容滚动的距离 div.scrollTop div.scrollLeft 8.设置div的内容滚动的距离 div.scrollTop=100 div.scrollLeft=100 9.获取页面的滚动距离 document.documentElement.scrollTop||document.body.scrollTop 10.设置页面的滚动距离 document.documentElement.scrollTop=100 document.body.scrollTop=100注意*有关函数的括号问题
function demo(){} 需要调用函数的时候 demo(); 如果直接写demo 那只是一个函数名，不会调用demo函数的 setTimeout(demo,1000); //1s之后执行demo函数 ，此时函数后不加括号 setTimeout(demo(),1000); //立即执行demo函数，定时器不起作用，小括号有立即执行的作用 如果函数需要小括号，因为有参数,需要把函数用引号引起来 setInterval(‘demo(obj,event)‘,1000);4.获取样式
js中只能获取到行内样式
兼容IE8 /* * 获取样式 * @param Object obj获取样式的对象 * @param Object attr:获取的css样式名称 * return 获取样式的值 * */ function getStyle(obj, attr) { return document.defaultView ? document.defaultView.getComputedStyle(obj, null)[attr] : obj.currentStyle[attr]; } // 调用，需要给attr加引号 console.log(getStyle(box, ‘backgroundColor‘)); 主流浏览器获取的颜色都转换成rgb值，IE8获取的是style样式里面写的属性值，写什么就是什么BOM - window
window属性
- 全局变量 window. 可以省略
```
var str = ‘坚持下来，你会收获不一样的人生‘;
console.log(str);
console.log(window.str);function demo(){
console.log(‘都已成年‘);
}
demo();
window.demo();
```screen：屏幕
screen.width:屏幕宽度 也就是分辨率的宽度
screen.height:屏幕的高度 也就是分辨率的高度
screen.availWidth:屏幕可用宽度 不包括底部菜单栏或侧面菜单栏
screen.availHeight：屏幕可用高度 不包括底部菜单栏或侧面菜单栏navigator: 获取浏览器相关信息
navigator.userAgent:获取代理信息
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36history：浏览器的历史对象
history.go(1|-1|0):前进(下一个页面)/后退(上一个页面)/刷新
history.length:历史记录location: 浏览器地址栏的信息
location
Location {href: "http://localhost:63342/work/JS/%E9%B9%BF%E7%91%B60…/7-1location.html?_ijt=o66094ti4bhjivqbd4qebug7op", ancestorOrigins: DOMStringList, origin: "http://localhost:63342", replace: ?, assign: ?, …}location.href:获取当前页面的URL地址http://localhost:63342/work/JS/%E9%B9%BF%E7%91%B601-17/7-1location.html?_ijt=o66094ti4bhjivqbd4qebug7oplocation.hash:获取锚点#锚点名location.origin:获取主机名+端口号http://localhost:63342location.reload():刷新location=‘url地址‘; 页面跳转到指定页面
window方法
open(窗口地址,‘‘,‘width=400,height=400,top=500,left=500‘)
window.open(URL,name,features,replace)
参数 描述 URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。 name 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 和 features 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。 replace 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。 close() 关闭 window.close() 关闭当前窗口 newName.close() 关闭newName窗口
moveTo(x,y):移动到指定位置
moveBy(x,y):每次指定多少距离
resizeBy(x,y):每次改变指定大小
resizeTo(width,height):每次改变到指定的宽高
alert()/confirm()/prompt() 弹出框/确认框/问答框
window.alert() / window.confirm()/window.prompt()
parseInt()/parseFloat()/Number()
setInterval()/setTimeout()/clearInterval()/clearTimeout()
JSON
格式：var json = {"username":"zhangsan","age":"20","sex":"男"};
?- JSON对象：只是保存数据的
- 跟js对象的区别：
- json对象 属性名必须加双引号
- json对象只负责保存数据，没有方法
?
- json对象只负责保存数据，没有方法
JSON转string
JSON.stringify(对象)- string 转 JSON
JSON.parse(字符串)jsonp
正常的ajax需要遵循同源策略，也就是调用后台数据的时候，需要写相对路径，如果写绝对路径，则访问不好使，例如 xhr.open(‘GET‘,‘http://localhost/work/Ajax/luyao02-02/1.php‘,true); 如果这么写，那么只能用localhost访问，不能用127.0.0.1访问，如果需要解决跨域问题，需要jsonp