js笔记啊

基础

var 声明一个变量，临时存储数据的载体
数据类型 计算机识别的数据格式
Elements 基础原理~~~标签元素
Network网络
Sources 来源
Performance 性能
Application 应用，应用程序
Security 安全性，保证
Audits 审计
Memory 记忆，内存

alert()浏览器警告弹出框
console.log(控制台  日志)
document.write()网页的内容中打印输出的内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14

基本数据类型 原始值

Number、Stirng、Boolean、Null、Underfined这些基本数据类型，他们的值直接保存在栈中;
1

引用值

Object、Function、Array、Date、RegExp这些引用类型，他们的引用变量储存在栈中，
通过指针指向储存在堆中的实际对象
1
2

区别

@import url(“路径”);css样式属性，写在第一行
Link 是html自带的标签属性

变量的使用：

var a; 声明一个变量，空变量
a = 111; 赋值为111
var b = 123; 声明一个变量，同时给赋值为123；
b = 234; 变量名 = 值；值 赋给 变量
a = b; 取值：通过变量名就表示这个变量的值 变量a重新赋值 ,吧b的值赋给a; 
		重新赋值就是修改
var c = a+b;
console.log(c);		234+234;
1
2
3
4
5
6
7
8

变量赋值：= 右边赋给左边的变量;

变量名的命名规则：

字母、下划线_ 、$、为开头
区分大小写
变量名必须放在同一行
长度不超255
不可以使用空格和其他标点符号，不能以数字开头
不能使用关键词和保留词

undefined 未定义
（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。
boolean 布尔
null 空的 无效的
object 对象
function 函数 代码段，功能
typeof ()	获取数据类型
null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。
null == undefined true
NaN == NaN false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

关系运算符

关系运算符：>  <  >=  <=  ==  ===  !=  !==
只比较一种情况
用于比较两个值是否满足某种条件
会隐式转化为number
所有关系运算符都返回布尔值
==表示相似，	数值大小相等，类型可以不相等
===表示恒等于 	数值大小相等并且类型也相等
1
2
3
4
5
6
7

js运行规则

·执行顺序
顺序执行，自上往下，由外到内
解释执行，解释一行执行一行
1
2
3

第二节–运算符、、

• 运算过程中的隐式类型转换:
  特殊，string与boolean比较，即便看起来一样 也返回false。

• 算术运算符 中都转化为number，，但是加号特殊
  +（加） -（减） *（乘） /（除） %（求余）

• 赋值运算符 =
  作用就是把右侧的值赋予左边的变量
  和算数运算符一样只有+号特殊，其余都会转化为number
  复合操作 +=、-=、*=、/=、%= 累加 累减

• 自增自减运算符 转化为number

• 自增自减运算符++ –

• 对一个变量的自增 自减

• ++、–在前先自加减操作 然后进行运算 在后先运算再自加自减

• 在同一个语句，既有在前 还有在后 ，就不是从左到右的执行顺序了，在前的先运算了，运算了就变了

• 当场打印和当场取值就不进行运算就，打印出来值啦

• 后边的值取，取的是前边的运算结果

• 比较运算符/关系运算符 类型转换为number让后去比较

• 用于两者之间的对比 对比的结果是布尔值的形式

• (大于) <(小于)

• = (大于等于) <= (小于等于)

• == (相似) 不考虑类型只考虑值的大小
• ===(恒等于) 类型不一样则为false 类型一样则判断值大小,都一样则为true
• 有一个不一样则为false;
• != (不相等 值不相等就成立) !== （完全不相等 值不相等 或者类型不相等 都成立）

! 特殊，，，逻辑里的条件，也就是关系运算，换成number比较，

逻辑运算符	做条件用的返回结果是布尔值 ，逻辑里放的还是关系运算符，所以返回的时
布尔值
	&& 并且 两个条件 都符合时才为true   
	指使用 两个条件  条件1&&条件2  
	两个条件都满足 返回true 否则返回false
	逻辑运算符   ||    表示 或者
	指使用 两个条件  条件1||条件2  
	两个条件有一个满足 返回true 
	两个条件都不满足返回false
逻辑运算符	不做条件用时，短路语句,只是单纯的用逻辑，返回的是数值，
	&& 遇到假，返回假---如果只有2位，第一位为真，只能返回第二位啦，别无选择
	|| 遇到真，返回真， 如果只有2位，第一位为假，只能返回第二位啦。
	别无选择
	！表反义  非  取反 
	逻辑非（！）操作符首先通过Boolean()函数将它的操作值转换为布尔值，然后求反。
	不会转换成数字类型的
三目运算符:
	//条件?条件成立时执行的语句:条件不成立时运行的语句(可以无限添加条件)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

案例:

	var a = 0;
	a++;  先加
	console.log(a)  再取值 为1
	var b = 0;
	console.log(++b); 先自加运算，后取值
	console.log(b++); 先取值后再加加
	看有没有等号。有等号先赋值，没等号，就运算完了。。。
		var a = 1;
		    b = 2;
		   c = a-- + --a; 
		console.log(c);
		前面a 先取值1，再--
		后面的a是重新取值，取的是前面的a--后的值，--0就等于-1；啊
		所以结果是c =1 + -1;
		c = 0;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

输入语句: prompt() 弹出输入框

四节 数据类型转换

隐示类型转换：
	在算数运算，比较运算时，一元正负，
	一切数据都自动转换为number,但是在+，+=运算中,有一个变量类型是字符串,那就是字符串连接...
	所有运算都转换为number,除了+和+=特殊
	但是所有为条件的最终都为布尔值
	一切都转换城number ,不能转换成数字就是非数,NaN
	isNaN();不是数字的~~~~~数字类型
			专门判断 是不是NaN的方法,返回结果是布尔值

	NaN == NaN 不等于任何东西,包括自己
	一个用来判断是不是NaN
	一个用来判断NaN等不等于别的东西
强制类型转换：
	强制转换为字符串
	String();	所有的都可以转换为字符串
	toString();	转换为字符串，null和undefined 不可以用
	 toFixed();把数字类型，保留取整，自动四舍五入为字符串类型
	强制数字
	Number();	如果有非数字或undefined转换为NaN,null转换为0
	 parseInt(); 遇到非数字停止
	 parseFloat();	把字符串转换为浮点数，遇到第二个点或非数字结束
	强制布尔值：Boolean();
举例：
	var b = true;
	var str = b.toString();
	//表示把变量b强制转换为

	字符串，结果为转换后的字符串。。。
	//用一个变量str接受结果.toString()方法不能转换null,undefined..
	console.log(str);
	
	var a;
	var c = true;
	str = String(a);
	//括号相当于加工厂。
	// var a = "aaa123";	
	// var b;
	// var c = "123aaa"
	// var d = false;	
	// var e = "12.234.45aaa"
	// a = Number(a);//可以转换，但是没有值NaN
	// b = Number(b);//undefined   转化为 NaN
	// a = parseInt(a); 	//首位不是数字，，，就为NaN
	// c = parseInt(c);	//首位是数字，只取整数数字
	// d = parseInt(d);	//布尔值，甭能转换为数字，NaN.
	// e = parseFloat(e);	//取整数和带有一个小数点的数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

第五节 条件

if语法1		if(条件){条件成立才会执行的操作}
if语法2		if(条件){条件成立时才会执行的操作}else{条件不成立时执行的语句}
if语法3     if(条件1){条件1 成立执行}else if(条件2){条件2成立执行}else{条件1和条件2都不成立时执行}
//在if语句中，条件中~任意类型都自动转换成布尔类型
//默认转换为false的数据：0，undefined,NaN,""空串，unll
//number+"";数字转换为字符串
非0的在if语句中都自动转换为true
if语句判断条件，任意类型条件都自动转换为布尔值，
1
2
3
4
5
6
7
8

第六节 循环

知道循环次数一般情况都用for
for(循环变量；循环条件；循环变量的迭代){
	重复执行的语句
}

***
不知道循环次数一般用while,while里面放条件
while(){}
循环变量(初始变量)
循环条件(不满足条件继续循环，满足条件继续循环)
循环迭代(改变初始变量直到初始变量不满足条件为止，停止循环)

continue结束本次循环，继续下次循环，不会结束整个循环
break跳出整个循环
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第七节 函数

函数具有某个特定功能的代码段,可以重复调用，可以在任意位置调用
函数声明~function 函数名(){}
匿名函数~(function (){}());\\\\\(function (){})();
常用写法： !function(){}();

没有名字的函数，函数自身就相当于函数名
函数表达式~~~var fn = function (){}
函数的 形参 与 实参
形参：在创建/定义函数的时候 所需要的参数 实质是一个变量名
代表所需要的数据
实参：在调用函数的时候 所传的参数 实质是一个变量的值
将这个值赋值给对应的形参 参与函数体的运算
一个形参 对应 一个实参

函数的返回值如何获取   return的作用
return的作用 ： 结束这段程序 并返回所需结果
- 如果没有返回值 返回值默认是undefined
- return 结束这段程序，斌且返回结果
1
2
3
4

函数名()===return 后面的返回值,return的是值

作用域：
var b = 1; 全局变量
function fn(){
var a = 1; 局部变量
}

第八节 对象

• new出来的对象数组都是独一无二的，就算里面的值一样或者属性一样，==也是false
• 复杂数据类型是引用类型，类型一样，值不一样
• 指向的空间不同

对象、

一种数据类型，用属性和方法来描述复杂事物
对象的创建
	对象字面量	var obj = {}
	构造法	var obj = new Object();
	create创建对象，必须指定对象的原型
对象的增删改查
取值： phone.name 

赋值修改   phone.name=“oppoR11”;

删除属性  可以用delete() ;

例如  delete(phone.name);   //删除后就是undifined


对象的读取	对象.属性名 和  对象['属性名']
this永远指向最后调用它的对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第九节 数组

数组:
	复杂的数据类型，放在一起的数据集合
作用：方便进行管理 ，操作
	var arr = new Array();创建一个空数组	构造法
	var arr = []; 		字面量法
	length	属性	代表这个数组的长度
用法：数组.length   获取数组的长度
对数组元素的读取	数组名[下表]   通过数据在数组中的序号(下标/索引)啊
arr.length = 0;		数组的清空

数组使用
数组方法：
	push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
	pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

	shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
	unshift:将参数添加到原数组开头，并返回数组的长度 。
			
	删除方法：改变原数组
	splice(删除下标之后的);		返回的是删除的数组，  改变原数组	所以原数组就是~删除出来剩下的数组的数组，

	splice(开始下标startIndex，删除的长度length);		返回值是一个数组  保存  所删除的元素
	插入方法：

	splice(插入的位置,删除的长度,插入的元素);		删除长度为0，返回值是一个空数组
	替换方法：

	splice(替换的位置，删除的长度，替换的元素);		返回值是一个数组  保存  所删除的元素
	颠倒数组：改变原数组

	reverse();		返回颠倒后的数组
	sort();		不传参数按照unicode编码排序，从小到大
				传参数根据	return值来决定，如果是负数则调换位置,如果为正数则不调换位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

不改变原数组的

	删除方法：
	slice(2,5);	从数组中 截取下标， 从2 开始，到5，不包括5		返回的是截取到的数组，不改变原数组
	slice(2);	从下标2开始全部截取啦，返回截取出来的数组，不改变原数组

	join("拼接");		将数组通过指定参数 字符合并为字符串，不传参数默认,号~~~~~不改变原数组
	通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串
	function repeatString(str, n) {return new Array(n + 1).join(str);}

	indexOf("要查找的元素",开始位置，不写位置默认0);			找下表~~~~~不改变原数组
		console.log(a.indexOf(3,(a.indexOf(3)+1)));
	数组名.indexOf("元素",第一个的下标加1);
	
	第一个数组.concat(第二个数组);		返回合并后的新数组		可以多个合并
	concat方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当作一项添加到arrCopy2中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

+ Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数，没有返回值，直接改变原数组，注意和map方法区分
let arr = [1, 2, 3, 4, 5]
   num.forEach(x => x*2)
   // arr = [2, 4, 6, 8, 10]  数组改变,注意和map区分
	
+ Array.map()
		此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
		let arr = [1, 2, 3, 4, 5]
	    let newArr = arr.map(x => x*2)
	    //arr= [1, 2, 3, 4, 5]   原数组保持不变
	    //newArr = [2, 4, 6, 8, 10] 返回新数组
			
			
+ Array.filter()
		此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回
		let arr = [1, 2, 3, 4, 5]
	    const isBigEnough => value => value >= 3
	    let newArr = arr.filter(isBigEnough )
	    //newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组
	
+ Array.every()
	此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false：	
	let arr = [1, 2, 3, 4, 5]
    const isLessThan4 => value => value < 4	
    const isLessThan6 => value => value < 6	
    arr.every(isLessThan4 ) //false	
    arr.every(isLessThan6 ) //true

+ Array.some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
	案例：var arr = [1, 2, 3, 4, 5];
	var arr2 = arr.some(function(x) {
	return x < 3;
	}); 
	console.log(arr2); //true
	var arr3 = arr.some(function(x) {
	return x < 1;
	}); 
	console.log(arr3); // false

+ Array.reduce()和 reduceRight()
	这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值
	reduce()方法从数组的第一项开始，逐个遍历到最后
	而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

第十节 时间对象:

创建时间对象  var sj = new Date();
获取一个月中的某一天  getDate();
获取月份	getMonth();	0是一月
获取年		getFullYear();
获取月		getMonth()+1;

获取日		getDate();
获取星期	getDay();
获取时		getHours();
获取分		getMinutes();
获取秒		getSeconds();

var time = new Date("2019-10-1 00:00:00").getTime();
var time = new Date(2019,9//数字9就是10月,1,00:00:00).getTime();
	//获取未来时间到1970年的毫秒数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第十一节 算术对象

取整的方法：
Math.ceil() 	向上取整
Math.floor() 	向下取整
Math.round()	四舍五入
Math.random() 	(0~1)之间的随机小数
Math.floor(Math.random()*11); 		包括0-10，适用于从0开始或从1开始
Math.floor(Math.random()*(max - min+1)+min)		
包括min   包括max		万能公式，任意数之间的整数

Math.abs();   	绝对值
Math.max();		返回最大值
Math.min(); 	返回最小值
Math.pow();
1
2
3
4
5
6
7
8
9
10
11
12
13

第十二节

字符串对象 一切类型的本质都是对象

创建:
	var str = new String("abcdefg");		//构造函数法(就是通过工厂 加工一个)
	var str = "abcdefg";	//字面量法
属性: length
方法:
	str.charAt(下标);
	str["下标"];						通过下标找相对应的字符		如果没找到返回空字符串
	
	str.charCodeAt(下标);		通过下标找相对应的字符的Unicode编码		如果没找到返回NaN
	
	String.fromCharCode(98,563,21)	通过unicode编码查找	返回相对应的元素

	把字符串分割成数组的方法
	str.split("分割的参照元素");	返回分割后的数组
	如果切割内容位于字符串首位，则切割完，会在，切割的位置加一个空字符串
	var str = "AA BB CC DD EE FF";	alert(str.split(" "，3));结果：AA,BB,CC 

	只传一个参数，就截取参数之后全部截取,不改变原数组
	str.slice(start,end); 
	start和end如果为负数，就倒着数，让后截取
	 如果中间没有就返回空字符串

	str.substring(start,end); // 或 str.substring(4,2);
	不包括end
	//start和end两者中的较小值作为子字符串的起始点。
	如果start或end为NaN或者为负数，那么 将会 替换为0。

	str.substr(起始位置,截取长度);  从下标 2 开始 截取长度为 ,负数从倒数第负几位开始截取,然后长度
	
	str.concat("ABCDEF","ABC"); 	相当于字符串链接

	str.toLowerCase();		//大写字母变小写字母
	str.toUpperCase();			小写字母变大写字母

	str.indexOf("要查找的元素");通过元素找下标  第一次出现字符的位置。如果没有找到 则返回-1
	str.indexOf("要查找的元素",开始查找的位置)
	str.lastindexOf("要查找的元素");	从后往前找
	replace("被代替的元素","替代的元素")字符串替换

	/转义符号/
	var str = '\'小\'明'	相当于把引号当成了字符串，没有js效果啦
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

第十三节 BOM对象 抓紧背单词

document 对象，文档对象；
location 对象，浏览器当前URL信息；
navigator 对象，浏览器本身信息；
screen 对象，客户端屏幕信息；
history 对象，浏览器访问历史信息；
怨声载道啊
Firefox:Gecko引擎
Safari:WebKit引擎
Chrome:blink引擎
IE:Trident引擎
欧鹏：presto引擎，现在也是blink

window对象  window对象是是指浏览器窗口。它是当前页面的顶层对象
window属性

	了解~window.screenX 	window.screenY  		表示浏览器窗口距离屏幕左上角的距离
	常用~window.innerHeight   window.innerWidth  表示获取浏览器可视窗口的宽度和高度
	了解~window.scrollX 水平		window.scrollY垂直 
	页面最顶部滚动距离、
滚动事件监听
	window.onscroll

window方法

	setTimeout(函数，时间) 只执行一次
	setInterval(函数，时间) 无限执行

	返回一个数字 为定时器的序号

	clearTimeout/clearInterval(定时器名称) 清除定时器

	confirm("提示文字"); 点确定返回true  点击取消返false          确认框`
	prompt("提示信息","默认值");

	window.open("打开地址"，"打开的方式","屏幕宽高");	打开新的浏览器窗口
	window.open("https://www.baidu.com","_blank","width=500,height=500");
	window.close();关闭窗口

	window.scrollBy();	滚动多少像素
	window.scrollTo(); 	滚动到多少像素
	btn.onclick = function(){
		window.scrollTo({
		left:0,
		top:0,
		behavior:"smooth"//平滑滚动
		//表现
		});
		}
	对象遍历：
		for(var i in obj){
			console.log(obj[i]);
		}

		
navigator对象
	navigator.userAgent 	返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息以及操作系统信息。
	var ua = navigator.userAgent   
	用indexOf()方法检测是不是iPhone Android
	检测是什么浏览器 Chrome 谷歌 Trident IE  Firefox  	Safari
history对象
	history.forward();  前进
	history.back();  后退
	history.go(-2);  跳转到指定页面
	history.go();  刷新页面
location对象
	获取当前url的信息
	location.protocol  获取本地文件的协议————了解的
	location.protocol = "http:"		改变当前的协议
重点
	location.href 获取前页面的地址栏
	location.href = 'url地址'   //跳转页面
	location.search 返回查询字符串
	location.reload(true)  刷新的方法 不使用缓存 ( 类似于重新打开 )
片段标识符	
	常用做目录
	在网址最后添加#name
	自动跳转到a标签name相同的地方
	location.hash
	  找片段标识符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

第十四 节 DOM 重新整理一次、

节点类型
	元素节点
	属性节点
	文本节点
	注释节点
	文档节点

节点的通用属性
	nodeType 	返回节点类型
	nodeName	返回节点名字大写的
	nodeValue	返回节点的文本值，可读可写
	textContent  返回当前节点和他所有后代节点的文本，忽略标签
				是可读可写，放入标签不会生效，会当成文本内容
1
2
3
4
5
6
7
8
9
10
11
12
13

节点关系属性

节点
	ul>li:first-child{}
	ul>li:last-child{}
	ul li:nth-child(1){}
	兄弟节点
	nextSibling/previousSibling			下/上一个兄弟节点，没有返回null
	父级节点
	parentNode	返回父级节点
	parentElement	返回父元素节点
	子节点
	firstChild/lastChild	第一个/最后一个子节点，没有返回null
	childNodes		返回所有子节点，是一个伪数组
1
2
3
4
5
6
7
8
9
10
11
12

元素节点

	firstElementChild
	lastElementChild	返回第一个/最后一个子元素节点，没有返回null
	previousElementSibling	上一个兄弟元素节点
	nextElementSibling	下一个兄弟元素节点
	*Element.children   元素节点的子节点元素
		伪数组，只有length属性
	<button>默认是submit重置</button>
1
2
3
4
5
6
7

节点的通用方法

	cloneNode();	克隆节点，默认不复制子节点，传true复制子节点
					复制的节点不包括添加在改元素的事件，要通过appendChild把复制节点添加到文档中去，

	insertBefore();	将一个节点添加到指定位置，传2个参，第一个为要添加的
					节点，第二个将新节点添加到此节点之前，第二个不写，默认
					插入到当前节点的最后

	ele.remove();		移除当前节点
	removeChild();	表示从父元素中移除该子节点
	replaceChild() 表示替换法当前节点某个子节点。第一个值是新节点。第二个值是要替换的节点
	replaceWith() 替换当前节点。
	
	插入
	append();	给元素最后添加一个或多个子节点
	prepend();	给元素子最前添加一个或多个子节点
	appendChild();	给元素子节点后面添加子节点，只可以写一个参数
	before();	给当前节点前面添加一个或多个节点
	after();	给当前节点后面添加一个或多个节点
	insertAdjacentHTML  html内容	
	insertAdjacentText  文本内容
	案例：
		ele.insertAdjacentHTML("afterBegin"," <h1>在文本前容器内插入内容</h1>)
		ele.insertAdjacentHTML("beforeEnd","<h2>在文本后容器内插入内容</h2>)
		ele.insertAdjacentHTML("beforeBegin","<h4>在文本前容器外插入内容</h1>)
		ele.insertAdjacentHTML("afterEnd","<h5>在文本后容器外插入内容</h2>");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

元素节点的属性：

	ele.id    	返回当前元素的id名
	ele.tagName  	返回当前元素的标签名(大写的)

	ele.className 	返回当前元素的类名，可读可写
	案例~添加类名
	box.className = "active"	更改类名用
	box.className += " active"	添加类名 用   添加了一个字符串,也就是新类名
	清空类名
	box.className = ""
	
	ele.classList 	返回当前元素的所有类名，伪数组形式的
		此属性的3个方法
		add()：增加一个 class。
		remove()：移除一个 class。
		toggle()：将某个 class 移入或移出当前元素，没有就添加有就移除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

元素宽高的获取

	Element.clientWidth  Element.clientHeight 	
	clientWidth = content + padding*2	
	不算入margin和border。只对块元素生效。
	
	ele.offsetwidth   element.offsetHeight		
	offsetWeight=content+padding2+border2
	返回元素本身的宽高，算入padding和border。
			
	可视窗口的宽高
		window.innerHeight/Widht 标准模式
	标准模式下任意浏览器都
	可视区的宽高  不带边框
		document.documentElement.clientWidth/clientHeight  

	文档的宽高： 带边框尺寸
	document.documentElement.offsetWidth/offsetHeight  	
	怪异模式下的浏览器   高版本向低版本兼容
	document.body.offsetWidth/offsetHeight	
	document.body.clientWidth/clientHeight 

	ele.offsetParent	返回当前元素最近的定位父级元素
	ele.offsetLeft	ele.offsetTop
	返回该元素距离offsetParent的水平位移和垂直距离。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

js窗口宽高属性

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

clientHeight vs offsetHeight vs scrollHeight区别

clientHeight=元素的高度+垂直填充。
offsetHeight= 元素的高度 + 垂直填充 + 上下边框 + 水平滚动条（如果可用）。
scrollHeight= 元素内容的高度（包括在屏幕上不可见的内容）+ 垂直填充。
1
2
3

滚动条高度的获取

	window.pageXOffset/pageYoffset   标准浏览器  滚动条的滚动距离
	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;   兼容标准模式和ie低版本
	//获取页面滚动条高度
	ele.scrollTop，ele.scrollLeft  
	元素垂直滚动条的滚动像素
	元素水平滚动条的滚动像素可读可写
1
2
3
4
5
6

鼠标事件获取坐标的属性

	clientX/clientY		鼠标事件中触发时距离可视窗口左上角的距离
	pageX/pageY			鼠标事件触发时，距离整个文档的左上角距离
	offsetX/offsetY 	鼠标事件距离目标节点的左上角的坐标	
1
2
3

获取属性节点的操作

	ele.attributes	获取HTML标签里面的所有属性
	
	ele.属性 (只获取标准属性)
	案例：ele.id 	a.href	ele.className

	ele.getAttribute("class");		
		返回属性值，既可以获取标准属性也可以获取自定义属性,只限于行内
	
	H5中规定自定义属性需要以  data- 开头做属性名并且赋值
	element.dataset.属性   IE11才开始支持，获取所有data-开头的所有属性
	
	ele.setAttribute("属性名","属性值")   用于添加或者修改属性。

	element.hasAttribute("属性名");  判断元素里面有没有对应的属性名
	
	ele.removeAttribute("属性名");	移除指定属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

获取css样式操作

ele.style.attr    这个一个可读可写的属性仅限于行内样式
案例	div.style.background

获取非行内样式                               
封装成方法时，要用[]来读取变量，不可以直接用.
直接读取相当于获取里面属性名，现在解析成一个变量

(获取层叠后的样式要做兼容处理)
标准：window.getComputedStyle(ele).background获取的是层叠之后的样式
老IE: ele.currentStyle.attr   老版本Ie获取的方法
current现在的最近的

也可以获取伪元素的行内样式，第一个参数是想获取的元素，第二个参数可选
案例  var bg = window.getComputedStyle(box,"::after").backgroundColor;
1
2
3
4
5
6
7
8
9
10
11
12
13
14

document节点的属性

	document.documentElement 	返回html
	document.body/head/title可读可写/charset
	document.links属性返回当前文档所有设定了href属性的a
1
2
3

document节点方法

	获取
	document.getElementById();		通过id获取元素
	document.getElementsByClassName();
		通过类名获取元素，获取到的是伪数组
	document.getElementsByTagName();	
		通过标签名获取元素，获取到的是伪数组
	document.querySelectorAll();	
		获取指定选择器的元素，获取到的是伪数组
	document.querySelector();	通过指定选择器获取元素，只获取一个
	创建
	document.createElement(元素);					创建元素节点
	document.createComment("字符串为注释内容");		创建注释节点
	document.createTextNode("文本节点的内容");		创建文本节点
	document.createAttribute(属性);					创建属性节点
	setAttribute("属性名","属性值");可以自定义		一般都用这个



事件集合
	整理集合https://blog.csdn.net/qq_23389687/article/details/80166843
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

事件模型

	true/false;
	
	绑定事件放在循环里就要考虑会不会闭包
1
2
3

事件绑定的3种方式

		1.行内绑定		只有冒泡阶段	解绑只能去行内删除
		2. 0级事件   on+type(onclick) 只有冒泡阶段，不可以同时绑定2个相同事件  解绑 onclick = null;
		3. 2级事件	
			addEventListener("事件类型",传fn名字,布尔值)
			第三个参数可选，默认false，表示冒泡阶段，改为true是表示捕获事件   可以绑定多个事件，
			解绑  Element.removeEventListener("事件类型",传fn名字,布尔值)

			ele.attachEvent("on"+type,handler);	老版本ie绑定事件
			ele.detachEvent("on"+type,handler)	老版本ie移除事件
			只有冒泡阶段

			this.指向不同，标准浏览器指向绑定事件的元素
			ie指向wnidow
1
2
3
4
5
6
7
8
9
10
11
12
13

事件对象 保存了当前事件触发时的一些事件信息

	||或运算符赋值时，如果前面为真就赋值为前边，前边为假，就赋值后面的
	//兼容
	标准浏览器直接在事件处理函数里面传入一个形参就可以使用事件对象
	老版本ie需要使用window.event
	var e = ev || window.event
	
	//什么是冒泡
	//什么是捕获
	一件事情发生后会在父子结构的元素之间相互传递，
	第一个阶段捕获，从window对象传递到目标节点
	第二个阶段目标，事件在目标节点上触发
	第三个阶段冒泡，从目标节点返回到window对象
1
2
3
4
5
6
7
8
9
10
11
12

事件委托 利用冒泡的原理，把子级事件委托给父级执行，

	新创建的不可以添加点击事件，给父级委托
	事件委托的时候用,判断目标原的className是否是点击的节点，是的话就
	可以进行进一步操作,
	e.target;			返回触发事件的目标节点
	e.currentTarget;	返回绑定事件的节点
	IE中返回目标节点，要用event.srcElement
1
2
3
4
5
6

鼠标事件

	click 单击事件
	dblclick 双击事件
	mousedown
	mouseup
	mousemove	

	mouseenter	只作用于目标元素，
	mouseleave
	
	而mouseover 作用于目标元素及其后代元素
	mouseout
	
	所以 无脑用 mouseenter就可以了，因为进入子元素，必定会经过父元素
1
2
3
4
5
6
7
8
9
10
11
12
13

HTML事件：

1-onload=function(){}               (页面加载后触发)
页面 加载完成后 触发常用于处理文档的加载完成后 识别js代码的功能
onresize=function(){}   (窗口或者框架的尺寸被调整时触发)

onscroll=function(){}   窗口或者元素滚动滚动条的时候触发

onunload (用户退出页面时触发)

阻止冒泡：	
      w3c的方法是e.stopPropagation()，
      IE则是使用e.cancelBubble = true  

阻止默认事件：a标签的跳转，元素上的文字和图片的选中，右键菜单 contextmenu	右键事件，reset,submit
		w3c的方法
		e.preventDefault();	 	取消默认事件，普通浏览器，推荐使用
		e.returnValue = false;		ie低版本

		return false;	阻止默认事件的行为	
 		原生js，只会阻止默认行为，不会停止冒泡
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

滚轮事件

	//兼容非火狐,滚轮事件
		document.onmousewheel = function(e){
			var e = e || window.event;
			if(e.wheelDelta > 0 ){
				//三角洲*          del ta//l发哦的音
				console.log("向上");
			}else{
				console.log("向下");
			}
		}
		//兼容火狐
		document.addEventListener("DOMMouseScroll",function(e){
			var e = e || window.event;
			if(e.detail < 0){
			de tail
				//detail细节闲情
				console.log("向上");
			}else{
				console.log("向下");
			}
		});	
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

键盘事件

	keypress键盘按下抬起
	keydown
	keyup

聚焦和失焦事件focus焦点中心/blur模糊失焦
change改变,当input框的内容发生改变时，失焦时才会改变   
resize	窗口大小改变时触发
浮动了，再提升层级提不起来
1
2
3
4
5
6
7
8

dom Api

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置
1

第十五节 js运动

缓冲王美

function move(obj,json,fn){
	clearInterval(obj.timer);
	var ic = null;
	var speed = null;
	 obj.timer = setInterval(function(){
		var bol = true;
		for(var attr in json){
			if(attr == 'opacity'){
				ic = parseFloat(getStyle(obj,attr))*100; // 是透明度要放大100倍
			}else{
				ic = parseInt(getStyle(obj,attr));	//初始的位置
			}
			speed = (json[attr] - ic) / 12; //缓冲版本，当速度
			speed = speed>0?Math.ceil(speed):Math.floor(speed);
		if(ic != json[attr]){//如果起始不等于结束，就一直执行啦
				bol = false;
			if(attr == 'opacity'){
				obj.style[attr] = (ic+speed) / 100;
				obj.style.filter = 'alpha(opacity = '+ic+')';
			}else{
				obj.style[attr] = (ic+speed) + 'px';
			}
		}
	}
	if(bol){	
		clearInterval(obj.timer);
		fn&&fn();
			}
	},10);
}
```javascript

匀速王美

```javascript
function constantSpeedMove(ele,speed,json,fn){
	clearInterval(ele.tt);
	ele.tt = setInterval(function(){
		var is=1;
		for(var attr in json){
			console.log(speed)
			var sd = speed;
			var end = json[attr];
			sd = (end -  parseInt(getStyle(ele,attr)))>0?sd:-sd;
			var ic = parseInt(getStyle(ele,attr));
			console.log(end,ic,sd)
			if (ic!=json[attr]) {
				is=0
				ic += sd;
				if(sd>0&&ic>=end||sd xiaoyu 0&&ic<=end){	ic = end;	}
				ele.style[attr] = ic + 'px';
			}
		}
		if(is){clearInterval(ele.tt); fn&&fn()}
	},200);
}
function getStyle(ele,attr){
	return ele.currentStyle?ele.currentStyle[attr]:getComputedStyle(ele,null)[attr];
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

第十六节 ajax

Ajax的原理 :
无刷新实现前后端数据交互
优点:
1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。
2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。
并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少多余的请求，和响应对服务器 造成的负担。

ajax的使用和实现的步骤
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)监控响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化) 对象已建立，尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

status属性 代表请求发送后 服务器的状态

• 200:操作成功
• 304:缓存
• 404:Not found 文件未找
• 403:没有权限
• 501:服务器识别错误

一般get用于请求数据，post用于传输数据

get请求

请求数据以?分割URL和传输数据，参数之间以&相连
xhr.open(  “get” , ”服务器文件路径/?名称=值” ,  true  )
提交数据不安全
1-有缓存问题
2-GET 请求不应在处理敏感数据时使用(如密码登陆) 会将提交的参数拼接到请求的路径里 造成数据泄露 
3-GET 请求的参数有长度限制   大小 4kb
4-GET 请求保留在 浏览器历史记录 中
5-GET 请求 只应当用于获取 数据时请求
1
2
3
4
5
6
7
8

post请求

提交数据无限制
设置请求头
提交数据放在send()里面
提交数据安全
post请求和get请求基本上都一样，只有设置请求行、请求头和请求体的时候不一样
1
2
3
4
5

GET提交的数据会放在URL之后，以?分割URL和传输数据，参数之间以&相连，如EditPosts.aspx?name=test1&id=123456.
POST方法是把提交的数据放在HTTP包的Body中.
区别2.
GET提交的数据大小有限制（因为浏览器对URL的长度有限制），
而POST方法提交的数据没有限制.
GET方式提交数据，会带来安全问题，比如一个登录页面，通过GET方式提交数据时，用户名和密码将出现在URL上，
如果页面可以被缓存或者其他人可以访问这台机器，就可以从历史记录获得该用户的账号和密码.

post方式 提交数据是在浏览器内部 相对较安全

xhr.send(“提交请求所需要的参数”) 
function oAjax(method,url,data,fn){
	var xhr=null;
	 try{		
 		xhr = new XMLHttpRequest();//在try里面发生错误，不会执行错误后的try里面的代码。consoerle.log(f)
	 }catch(er){
	 		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	 	}
//get请求把传递的参数放在 请求的路径的？号后面 再加一个时间除chue 用&拼接加字符串"t=new Data()"
	if(method == "get"&&data){
		url = url + "?" + data+"&t="+new Date();
	}else if(method == "get"&&data==""){
		url = url + "?&t="+new Date();
	}
	xhr.open(method,url,true);
	xhr.onreadystatechange = function(){
		if(xhr.readyState==4 && xhr.status==200){
			fn(xhr.responseText);
		}
	}
	if(method == "post"){
		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xhr.send(data);
		}else{
			xhr.send();
		}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

十七节 json

JSON是一种传输数据的格式(以对象为样板，本质上就是对象，但用途有区别，对象是本地用的，josn是用来传输的)
JSON.parse() string–>json
JSON.stringify() json–>string

jsonp 跨域请求原理

同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。
jsonp是如何突破同源策略的限制实现跨域的

<"script" src=XXX> JSONP 和 AJAX 相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX 属于同源策略，JSONP 属于非同源策略（跨域请求）。

JSONP 优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持 get 方法具有局限性,不安全可能会遭受 XSS 攻击。

点击按钮的时候，创建了一个script标签(即会发送一个get请求到src指向的地址)，src地址是"localhost:3000/article-list",
这个src地址，就是我们请求的服务端接口。注意，这里我们有是那个参数，name,age和callback，name和age不说了，这跟我们平时普通的get请求参数无异。
主要说下callback这个参数，callback参数就是核心所在。为什么要定义callback呢？首先我们知道，这个get请求已经被发出去了，
那么我们如何接口请求回来的数据呢，callback=func则可以帮我们做这件事。
————————

需要注意的是，callback参数定义的方法是需要前后端定义好的，具体什么名字，商讨好就可以了。
jsonp的整个过程就类似于前端声明好一个函数，后端返回执行函数。执行函数参数中携带所需的数据，
九种跨域请求

CORS 支持所有类型的 HTTP 请求，是跨域 HTTP 请求的根本解决方案；
JSONP 只支持 GET 请求，不支持post put delete ,不安全xss攻击
JSONP 的优势在于支持老式浏览器，以及可以向不支持 CORS 的网站请求数据；
不管是 Node 中间件代理还是 nginx 反向代理，主要是通过同源策略对服务器不加限制；
日常工作中，用得比较多的跨域方案是 cors 和 nginx 反向代理。

cookie、session、localStorage分别是什么？有什么作用？

一、cookie

cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用 「document.cookie」查看你当前正在浏览的网站的cookie。
cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie，这是最常见的做法。
（打开一个网站，清除全部cookie，然后刷新页面，在network的Response headers试试找一找set-cookie吧）
每次网络请求 Request headers 中都会带上cookie。所以如果 cookie 太多太大对传输效率会有影响。
一般浏览器存储cookie 最大容量为4k，所以大量数据不要存到cookie。
设置cookie时的参数：

path：表示 cookie 影响到的路径，匹配该路径才发送这个 cookie。expires 和 maxAge：告诉浏览器 cookie 时候过期，maxAge 是 cookie 多久后过期的相对时间。
不设置这两个选项时会产生 session cookie，session cookie 是 transient 的，当用户关闭浏览器时，就被清除。一般用来保存 session 的 session_id。
secure：当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效
httpOnly：浏览器不允许脚本操作 document.cookie 去更改 cookie。一般情况下都应该设置这个为 true，这样可以避免被 xss 攻击拿到 cookie。[cookie 参数][简述 Cookie 是什么]

二、session

当一个用户打开淘宝登录后，刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢？这里就使用了session保存状态。用户在输入用户名密码提交给服务端，
服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。
创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。
cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。
当然有时候说到 session 也指服务器里创建的那个和用户身份关联的对象。

三、localStorage

localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
不参与网络传输。
一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

十八节

作用：电脑硬盘上存储数据的
运行在：服务器环境
使用cookies存储永久数据存在一下问题
1、cookies的大小限制在4kb，不适合大量存储数据
2、浏览器还限制站点可以在用户计算计上存储的cookie的数量
3、cookies是随HTTP事务一起被发送的，因为会浪费一部分宽带

用法：document.cookie 获取当前页面的cookie存储的数据
存的格式是字符串 ‘key=value’;‘key=value’

// 取出来数据
// var cookie = document.cookie;

function setCookie(n,v,t){
	/*n：存数据的名称
	  v: 存的数据
	  t: 存的天数
	*/
	var date = new Date()
	date.setDate(date.getDate()+t) //修改当前的日期
	document.cookie = n+"="+v+";expires="+date;
}

//取cookie
console.log( getCookie("users") )
function getCookie(n){
	//将所有的cookie所存的字符串 通过 ;+空格 分割成数组	
	var arr = document.cookie.split("; ") 
	for (var i = 0; i < arr.length; i++) {
		var arr1 = arr[i].split("=")  //"users = 高雅琨"
		if(n==arr1[0]){
			return arr1[1]
		}
	}
}
//删除

function romoveCookie(n){
	setCookie(n,"",-1)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30