javaScript学习笔记

js学习笔记

js组成部分：ECMAScript标准规范，DOM文档对象模型，控制标签，BOM浏览器对象模型，控制浏览器

标签获取：
document.getElementById(’’); //通过id名获取元素，只能获取一次，再用只能重新获取
?
标签的修改：
? 添加内容：innerHTML方法

document.getElementById('').innerHTML="需要添加的内容"；
	document.getElementById('').style.backgroundColor="green"；	//修改css样式，backgroundColor不

可用连字符，只需将后面的首字母大写即可
?

document.getElementById('').style.cssText=""；		//添加多条css样式，即复合写法，写法和css一样，不能省略连字符

声明变量：

	let guagua = document.getElementById('');	//使得guagua变量代替document.getElementById('')

数据类型

js数据类型有7种：
? nubmer：数字型
? string： 字符型
? boolean：布尔型
? null： 空对象
? undefined：未定义
? symbol： 符号
? 以上6种属于基础类型
? object： 对象，一种复杂类型

typeof：可以简单的判断数据类型，没有能准确判断的,null和function函数不能判断
Object.prototype.toString.call（）	//最好的判断数据类型方法	
instanceof

获取元素节点的其他方式

let boxS = document.getElementsByClassName('box');	通过class名获取元素，因为class不唯一，所以一般为复数,低版本IE不支持
boxS[0].innerHTML = "1" 	通过下标选择第几个‘box’

let boxS = document.getElementsByTagName('div');	通过标签名获取元素，因为标签不唯一，所以一般为复数

let boxS = document.getElementsByName('div');	通过Name名获取元素，因为不唯一，所以一般为复数

let boxS = document.querySelectorAll('body div/body div.box名位box的div');	通过选择器获取元素
let boxS = document.querySelector('body div/body div.box名位box的div');	通过选择器获取元素,只取第一个获取的元素

getComputedStyle()	获取标签的css属性，不兼容ie8及以下浏览器
box标签 . currentStyle	ie8及以下浏览器使用，但不兼容谷歌浏览器,无需加括号

注注注注注注：其他获取元素为复数的方法，获取的是一个集合，不是元素，必须通过下标来明确是哪一个元素

ById,querySelectorAll,querySelector为静态获取，其余为动态获取

======================================================================================

声明变量

var //es5及其以前使用的，弊端，定义全局变量会成为顶层/全局对象window属性上，会污染window，同一作用域可声明多次
let //es6使用，弥补var污染window的缺陷，不会成为window的属性。特性：参与声明的变量在同一作用域只能声明一次，多次会报错
const //特性与let一样，声明常量，必须立刻赋值，不允许二次更改值,本质是变量存储的内存地址不变,像数组和对象是可以改变值的

与变量息息相关的是作用域
作用域：变量起作用的范围，全局作用域，函数作用域，块作用域
变量的查找，由内向外，从自己出发查找，有全局作用域只有一个不同的全局全局变量是互通的
方法都是挂载在对象上的

if语句

if ( 判断条件 ) {		//判断条件的结果是boolean   true或false
			//只有6个值是假值：0，""，false，undefined，null，NaN。"0"，"false"……不是假值，是字符串，字符串内容不为空，为真
}else{			//注：颜色和地址是不能作为判断条件的，颜色和地址，有多种表示方法

}

比较符号：>，<，>=，<=，==等于，当2个参数数据类型不同时，会发生类型转换，，!=，===全等于，数值和数据类型都相等，不会发生类型转换，!==

if ( 判断条件 ) {		//多分支判断

}else if {

}else if {

}else{

}

switch( 需要判断的变量){			//前提条件：1.必须要有判断的变量是不变的
	case : 判断条件			//前提条件：2.必须判断的是===全等于才可以用
		break;
	case : 判断条件

		break;
	defaule:其余条件下

		break;

}

三目运算：判断条件 ？真，执行 ：假，执行 当if只有真假判断，且真假有且只有一条语句的时候使用

===================================================================================

for循环

for( let i = 0 ; i < 循环条件的终点 ；i++ ){	//for(声明变量：记录次数；判断条件；自增)
	
}

多层循环每个循环的变量都不能一样

coutinue		停止当前循环
break		终止循环

不确定判断次数时用while
while ( 判断条件 )  {		//先判断再执行
	循环体
	自增
}

do {			//先执行再判断
	循环体
}
while ( 判断条件 

---

运算符

一、算术运算符

%取余，+，-，*，/ 注//只有 + 才会出现字符串的拼接
NaN：not a number //当出现NaN时，一定是发生了非数字的数字运算，可以理解为坏掉的数值

a++ a-- //后置自增自减

a** 幂运算 例如：a**2 就是a的2次方

二、赋值运算
? = += -= *= /= %= **= ++ –

三、比较运算符（会发生隐式类型转换）

>     <     >=     <=     ==     !=     ===     !==

四、逻辑运算符
? //判断两边的booleon值
? && //逻辑与，两边都为真，如果左边为假则直接结束，右边不再运行，优先级高于逻辑或
? || //逻辑或，一假一真，如果右边为真，则直接结束，否则，继续运行右边的

toFixed() //保留小数位

函数

函数目的：伪为了把一些代码整理在一起，在将来执行（或者说重复使用）
函数 function（）{} 事件函数

函数：2大类：

具名函数和匿名函数
? 具名函数：function fn_name（）{ //声明函数
? }
? 若要使用函数，需要调用：例如：fn_name() 函数表达式，就是调用上面的函数
?

? 匿名函数：function (){} //不能单独存在，必须赋值给变量或事件
? let fn1 = function (){} 匿名函数赋值给fn1,但不是声明函数
? fn1（） 调用函数，

特殊匿名函数：（function(){}）（） //IIFE 立即执行的函数表达式

匿名函数和具名函数的区别：具名函数可以先调用再定义，而匿名函数就不可以 先使用再定义：叫变量提升行为

尽量不要使用全局变量
es5用自执行匿名函数解决，es6用{}解决，都是写在内部，内部的为块作用域

---

return的使用

函数的作用域是看它声明的位置，而不是调用的位置

function fn(){
? let a = 1;
? fn2( a ); //函数调用时传进去的是实参：实际存在的值
}
function fn2(b){ //b为形参 ：无实际的值
? console.log(值为${b})
}
fn() 调用，结果为：值为1

实参不确定，形参也不能确定，所以有了不定参
es5中的不定参：arguments[],通过下标获取第几个实参
es6中，没有不定参，但有剩余参数：…变量名，使用时不需要加点

函数正常执行结束会有返回值，默认为undefined
注：函数内执行到return立即结束，后面的值永远不会执行，并返回return后面的值给外界

---

获得焦点的事件

onchange //值改变，且失去焦点时触发
oninput //H5新增，es5不支持，值改变就触发
onfocus //获得焦点时触发
onblur //失去焦点时触发

箭头函数

let fn = () =>{} 箭头函数与function函数区别在于没有this, 一般用于回调函数
? 箭头函数只有一个参数时，圆括号可以不写，内部只有一条return语句时，花括号和return可以不写

---

classList的使用

classList.add(’’) //添加类名，通过逗号可一个个的传值
classList.remove(’’) //删除类名，通过逗号可一个个的传值
classList.toggle(’’) //判断是否有该类名，有则删除。无则添加
classList.contains(’’) //判断是否存在该类名，有则返回true,无则返回false

字符串

str.charAt(位置) //通过索引读取字符串中某个位置的字符可用下标来读取某个位置的字符
concat(str,str……); //字符串合并
indexOf(‘字符串’，开始查找位置) //索引，判断字符串中是否有某个字符（第一个出现的），有则返回下标，无则返回-1
charCodeAt(0) //在码表中，换算成10进制码
fromCharCode(String.(十进制码)) //和上面的相反，转换成图形
slice(a,b) //传区间[a,b)的参数,序号颠倒就不行，负值时倒着找
substring(a,b) //传区间[a,b)的参数,序号倒着写也可用
substr(a,b长度) //传从a开始，b长度的字符串
toUpperCase() //转大写英文
toLowCase() //转小写英文
replace(“a”,“A”) //将第一个替换成第二个
match() //返回匹配值所对应的属性
search() //返回对应的下标
split(’,’) //通过逗号分隔，字符串转数组，新数组

---

数组

let arr = [] //字面量声明
arr.concat([ ],[ ]) //数组的合并,合并到arr数组
delete arr[0] //删除数值的值，但位置还是保留着的
push() //数组最后位添加，且会返回出来
pop() //数组最后位删除一位，且会返回出来
unshift() //数组第一位添加，且会返回出来
shift() //数组第一位删除一位，且会返回出来
splice(开始位置，删除个数，添加) //数组元素的增删
sort(function(a,b){ //数组排序
? return a - b; 升序排序
? return b - a; 降序排序
})
sort((a,b) =>{
? return a - b; 升序排序
? return b - a; 降序排序
})
reverse() //反转数组，数组倒过来
join(符号) //通过符号连接成字符串

数组的方法（API）

Array.from() //将类数组转化位数组
filter(回调函数item=> return item%2 === 0 //条件) //筛选 把满足条件的每一项数据 放在一个新的数组，返回出来
find() //查找能匹配成功的 第一个 （不是数组）
findIndex() //跟find类型一样，不过不返回数据而是返回数据的序号
forEach(（value数据值，index，self）=>{}， 回调函数的this指向) //就是一个for循环，什么值都不返回，就是单独的迭代，无法终止
includes() //查找数组是否有该值，有则返回true，无则返回false
map（） //对数组的每一项都调用一次回调函数，返回一个全新的数组，全新的数组每一项数据都是回调函数的返回值
some（） //对数组的每一项调用一次回调，如果有一次满足回调条件则停止返回true
toString（） //转换为字符串
evety（） //和some相反，必须所有数据项都满足回调才返回true

json对象

let obj = { //创建对象
? “name”:‘帅哥’, //定义属性
? “age”:‘20’,
? ……
}

JSON.stringify() //json序列化为字符串
JSON.parse() //json反序列化为对象
数组适用场景：存储有序数据
对象适用场景：存储无序数据

展开运算符

… //三个点，展开运算符
for(let key下标 in obj对象) //适合用来循环json对象，会遍历原型链上的可枚举属性
for(let key 值 of arr数组) //用来循环数组/类数组 es6，只能遍历具有Iterator接口的对象

Math方法

abs() //取绝对值
floor() //向下取整
ceil() //向上取整
max() //取最大值
min() //取最小值
random() //随机值,区间 [0-1) //自定义随机区间 let random = (x , y) => {return Math.floor(Math.random() * (y - x + 1) + x)}
round() //四舍五入
trunc() //取整数位
pow() //幂函数,第一个值代表底数,第二个值代表指数
sin() //正弦，取弧度制
cos() //余弦，取弧度制
tan() //正切，取弧度制

1弧度=j角度 * Math.PI / 180

1角度 = Math.PI / 180

定时器

定时任务:1.隔固定时间做某一件事（一次性），2.无限次循环

setTimeout(() =>{console.log("这是执行的事")} , 延迟时间毫秒：1000 ):一次性定时器
setInterval(() =>{console.log("这是执行的事")} , 延迟时间毫秒：1000 ):多次执行的定时器

清除定时器

let timeId定时器Id值 = setInterval((a,b) =>{console.log("这是执行的事")} , 延迟时间毫秒：1000 ,a,b):多次执行的定时器
document.onclick = function(){	//清除
	clearTimeout(timeId定时器Id值);
}

timeId存储的是第几个定时器,即队列下标,可以通过队列下标清除定时器

多个定时器赋值给同个变量原来的定时器是不会消失的,都会执行,但清除该变量的定时器,清除的是最后绑定该变量的定时器
注意：

循环执行的定时器，在离开该页面时还会执行，所以可以通过onfocus事件获取焦点开启定时，onblur事件失去焦点清除定时器

闭包

闭包形成条件：
? 1.函数嵌套函数
? 2.内部函数使用父级函数内的变量或参数
函数执行完会销毁内部数据：生命周期
? 全局作用域：生命周期：永恒，全局变量：永恒
? 函数作用域：生命周期：即时性，一次就结束

闭包作用：一般用来做缓存的

Date对象

1970年
new Date() //获取当前本机时间,可加引号传日期参数，传参后就变成设定时间，let date = new Date("2019/1/1 ")，如果单纯是数字，则视为毫秒值，如果是毫秒值，则转为年月日
.getTime() //获取1970年开始到现在的毫秒值
Date.now() //获取1970年开始到现在的毫秒值
date.getFullYear() //获取年份
date.Month() //获取月份 0~11
date.Date() //获取日期
date.Day() //获取星期
date.Hours() //获取小时
date.getMinutes(0 //获取分钟
date.getSeconds() //获取秒钟
date.setTime() //以毫秒值设置Date对象

世界时
getTimezoneOffset()

转换本地时间格式
date.toLocaleString() //返回年月日时分秒
date.toLocaleDateString() //返回年月日
date.toLocaleTimeString() //返回时分秒
标准时间
date.toTimeString() //返回时分秒,所在的时间

requestAnimationFrame( ) //h5方法，请求动画化帧,接收一个回调函数,IE9及其以下不支持
cancelAnimationFrame() //取消请求动画帧

正则表达式

对象 用来匹配字符串
let str = “f5”;
let reg = / \d / 字面量定义
let reg = new RegExp(\d, ‘g’)函数定义, 第二个参数是修饰符
reg . test(str); 对象是正则，匹配str中是否有正则表达式 reg 定义的 \d 数字，有的话返回ture，否则返回false
str . match(reg) 对象是字符串，匹配成功返回包含匹配内容的数组，不成功返回null
reg.exec(str) 对象是正则，匹配成功返回一个数组，不成功返回null
str.search(reg) 对象是字符串，匹配成功返回位置索引，不成功返回-1

str.replace(reg) 对象是字符串，匹配成功使用替换字符替换掉匹配字符

元字符/转义字符

\ 将特殊意义的字符无意义化
\n 回车并换行
\r 回车到首字符
\t 制表符，tab键的效果

\d 数字
\D 非数字
\s 空格
\S 非空格
\w 字符（数字，字母，下划线）
\W 非字符
\b 独立部分（起始位置，末尾位置，\W）
. 匹配任意字符,除了有特殊转义符号的内容

---

量词

let a = / \d{5}/ {num} 将{num}前面字段重复num次
{ } >默认往多的匹配，具有贪婪的特性 { }？量词后面加问号，往少的匹配
{2,5} 最少2个，最多5个
{2 , } 最少2个
{2} 精确的2个

特殊的量词，有特殊的替代写法 满足匹配的条件后就不匹配了
{1,} => +
{0,1} => ?
{0,} => *

---

修饰词

对正则进行进一步的强调
i let reg = /abc/i ; 作用：英文不区分大小写
g let reg = /abc/g ; 作用：全局匹配，匹配字符串的所有字符 global
m let reg = /abc/m ; 作用：换行匹配
| let reg = /ab | cd/ 作用：左边所有ad或右边cd所有满足一项即可

---

子集和范围词

子集（） 划分整体 (?:你 | 我) 不捕获匹配，子集项不会保存在数组内
范围词 [ ] 范围词内都是或者关系 | ^：代表非
中文区间 [ \u4e00 - \u9fa5 ]

---

断言

（?=匹配模式） 正向肯定先行断言 正向：左边固定，匹配条件在右；反向：右边固定，匹配条件在左，因为有?，所以匹配不保存在数组
（?!匹配模式） 正向否定先行断言
（?<=匹配模式） 反向肯定先行断言
（?

---

起始和终止

^ 起始符 /^123$/ 字符串以1开头3结尾才可以匹配
$ 终止符

面向对象

三大特征：
? 封装性
? 继承性
? 多态性

---

new关键字

new 函数（）
? 1.new执行的函数生成了一个对象
? 2.new的函数内部this指向这个对象
? 3.new执行的函数生成这个对象，势函数的默认返回值

---

原型

构造函数 . prototype = {
? //需要写constructor : 构造函数， 指明原型的来源是构造函数
}

而用点的话就不需要写

---

改变this指向

可用于私有属性继承

call ( ) //改变函数在这个对象下面this指向
? 1.不传参数是默认指向window
? 2.传递参数：
? 第一个参数必须指向某个对象，可以设置为空对象，
? 函数的参数依次填写

apply ( ) //改变函数在这个对象下面this指向
? 1.不传参数是默认指向window
? 2.传递参数
? 第一个参数必须指向某个对象，可以设置为空对象，
? 第二个参数是数组

bind ( ) //和前两个区别是不会主动执行函数，是在函数被动执行时才主动取改变this指向
? 1.不传参数是默认指向window
? 2.传递参数：
? 第一个参数必须指向某个对象，可以设置为空对象，
? 函数的参数依次填写

---

es6面向对象写法

hasOwnProperty(’ 属性名 ') 判断一个属性是否在原型上
? 在原型链上的不是私有属性
? 在原型上的返回就时false，不管在哪一层原型上

instanceof 确定obj实例是否存在于构造函数的原型链上

es5和es6写法区别
? 1.class（es5是保留字，es6是关键字），es6定义一个类
? 2.es5原型上可以定义普通属性，但是不推荐
? 3.es6原型不可以定义普通属性，constructor以外的只能是函数

class Person{ //这是一个类
? constructor((name,age){ //私有属性
? this.name = name,
? this.age = age
? }
? //这之间不要添加任何符号，且constructor之外全是公有方法
? add(){}
}

---

原型继承

Person2继承Person1的原型

第一种
Person2 . prototype = Person1 . prototype //缺陷，改变Person2的原型Person1的原型也会改变

第二种
Person2 . prototype = new Person1({}) //缺陷，Person1的私有属性也会继承

第三种
function middle(){} //第三方 赋值继承，结合前2种方法
middle.prototype = Person1.prototype;
Person2.prototype = new middle();

第四种
for( var key in Person1.prototype){ //通过for in遍历Person1的对象赋值给Person1，缺陷：不能查找原型链的东西，只能查找一层
? Person2.prototype[ key ] = Person1.prototype[ key ]
}

深浅拷贝 es5

浅拷贝：引用型数据类型会把地址也拷贝过去

const obj1 = {
? a : 1,
? b : [‘a’,{ c : [ ’ h ’ ]} ]
}

function extend(obj1, deep){
? //deep 为true时，启定深拷贝，为false时，启动浅拷贝
? var obj = {};
? if(obj1 instanceof Array){
? //true 就是数组，obj就是数组
? obj = [ ];
? }
? for(var key in obj1){
? var value = obj1[ key ];
? //判断value是不是引用型，判断deep是true还是false
? obj[ key ] = (!!deep && typeof value === ‘object’ && value !== null) ? extend( value, deep) : value;
? }
? return obj;
}
const obj1 = extend（obj, true）; //传的参数为一个时，默认就时浅拷贝
obj2 . b . push( ’ x ’ );
console.log( obj1 );
console.log( obj2 )

JSON . stringify( obj1 ) //序列化函数，对象转为字符串json
JSON . parse( ） //反序列化函数，字符串json转为json对象
JSON . parse( JSON . stringify( obj1 ) );` //先转字符串JSON，再转对象JSON，可实现深拷贝

---

es6原型继承

class P1{
	constructor(x){
		this.x = x;
	}
	add(){
		console.log(this.x);
	}
}

class P2 extends P1{
	constructor(x){
		super(x)	//不写这一步，子类没有this
	}
	sum(){
		console.log('he')
	}
}
const op1 = new P1('1')
const op2 = new P1('2')
op1.add()
op2.add()

枚举和不可枚举 for in可遍历出不可枚举的属性，即会查找原型链 hasOwnproperty可区分，只返回可枚举的属性
枚举: 可遍历的 深紫色

不可枚举: 不可遍历的 浅紫色

静态属性

静态属性：只能被类调用的属性就是静态属性

es5静态属性写法
function  myclass(){}
myclass.daying = function(){			//通过点直接写
	console.log("这是一个静态方法")
}

es6	只有静态方法
class  myclass{
	constructor(){}
	static  daying(){		//通过static来写，相当于es5的点

	}
}

?

DOM节点

DOM 最小组成的单位是节点（node）
? 文档的树型结构（DOM树）就是由各种不同类型的节点组成

节点类型，最常见
documen：整个文档树的顶层节点
documenType：doctype标签 声明文档类型
element：网页中的各种标签
attribute：标签属性
text：标签之间或标签包含的文本
comment：注释节点
等等

只能读
obj.firstChild.nodeValue //返回一个字符串，当前节点本身的文本值，可读（只有文本节点和注释节点才返回文本值，其余返回null）
obj.textContent //返回当前节点和他所以后代节点内容文本，可读可写（自动忽略当前节点内部的html标签）
obj.nextSibling //返回当前节点后面紧跟的第一个同一级别的节点（如果没有同级节点则返回null）

可读可写
obj.nodeName //节点名称
obj.parentNode //返回父节点
obj.firstChild //返回当前节点的第一个子节点，没有返回null
obj.lastChild //返回当前节点的最后一个子节点，没有返回null
obj.childNodes //返回一个类似数组的对象，当前节点的所有子节点
obj.children //返回一个类似数组的对象，当前的标签节点

---

DOM方法

appendChild() //该方法接收一个节点对象作为参数，将其作为最后一个子节点插入当前节点
createElement( ’ p ’ ) //创建新的元素节点，需要接收一个标签参数vv
createTextNode() //创建文本节点
createComment() //创建注释节点
insertBefore() //添加到指定的节点前面，接受两个参数，第一个参数是要插入的节点，第二个参数是父节点内部的一个子节点
replaceChild() //替换节点，先找到父元素，该方法有2个参数，第一个是替换节点，第二个是被替换节点
removeChild() //移除节点
cloneNode() //用于克隆一个节点，接受一个布尔值作为参数，表示是否同时克隆子节点，返回出来一个新节点
? //false：浅复制，只是复制一个标签
? //深度复制：会把标签的相关信息一起复制，但不会复制属性

let oWrap = document.getElementById(‘wrap’);
let op = document.createElement(‘p’)
op.innerHTML = ‘你是谁’；
op.id = ‘text’;
op.style.color = ‘red’;
oWrap.appendChild(op);

---

获取元素宽高

getComputedStyle( ) ///获取元素所有属性
只读
offsetWidth //获取元素宽 元素实际宽度+内边距+边框 //出现滚动条会把滚动条计算在内
offsetHeight //获取元素高
offsetTop //获取元素外边距加定位值top的距离 取整数部分
offsetLeft //获取元素外边距加定位值left的距离 取整数部分

clientWidth / clientHeight //元素实际宽度+内边距 //出现滚动条会减去滚动条宽度
clientTop /clientLeft //元素的边框大小

---

滚动机制

window . innnerHeight //获取窗口的高度 不兼容低版本IE
window . innerWidth //获取窗口的宽度 不兼容低版本IE
document.documentElement.clientWidth //等同上面的宽度，不包括滚动条
document.documentElement.clientHeight //等同上面的高度，不包括滚动条

document.body.clientHeight //整个文档内容的高度

window . outerHeight / window . outerWidth //获取整个浏览器的宽高

滚动宽高
scrollWidth / scrollHeight //元素里面有内容：内容超出不隐藏：内容宽度+（左或上）内边距。内容超出隐藏：内容实际宽高度+内边距

可读可写
scrollTop / scrollLeft //元素内部滚动条到元素左边或上边的距离 滚动对象为document,打印对象为document.documentElement
onscroll //滚动事件
onresize //窗口发生改变事件

window事件，BOM

location对象
? 属性
? location.href //设置或返回完整的URL
? location.hash //设置或返回从#开始的URL
? location.host //设置或返回主机名和当前URL的端口号
? location.hostname//设置或返回当前URL的主机名
? location.pathname//设置或返回当前URL的路径部分
? location.port //设置或返回当前URL的端口号
? location.protocol //设置或返回当前URL的协议
? location.search //设置或返回从问号？开始的URL

方法
reload() 常用 重新加载文档 //传一个布尔值，false会判断服务器端文件是否改变，改变则从服务器相应数据给客户端重新加载文档，不改变则从客户端缓存加载文档，true会直接从服务器端相应文档给客户端。
replace(‘地址’) 新文档替换旧文档 //不能返回刷新前的页面，因为旧文档被替换了
assign(‘地址’) 加载新文档 //实现页面跳转

history对象
? 属性
? length //记录当前页面的history列表的长度
?

方法
back() //加载history列表中的前一个URL，back(-1)会返回当前页面的前一个页面，但上一页历史数据会重置，并刷新页面，back(0)，当前页面刷新
forward() //加载history列表中的后一个URL
go() //具备前两种功能，go(-1)前一页，go(1)后一页，区别是表单里的数据全部存在

navigator对象 //存储当前浏览器的版本信息

event事件对象

event对象的属性和方法包含了当前事件的状态
? 当前事件：指正在发生的事件
? 状态：与事件的性质有关
? 常规下：事件函数的第一个参数是事件对象
? 事件对象：记录本次触发事件相关信息

clientX / clientY //鼠标在浏览器可视区域点击的位置
pageX / pageY //鼠标在浏览器整个文档的点击位置， 不兼容低版本IE8及其以下，兼容写法：滚动高度（scorllTop）+client
target //事件源，事件发生的标签

obj.事件 = function( e ){
? var e = e || window.event;
? if(!e.pageY){
? console.log(document.documentElement.scorllTop + e.clientY);
? }else{
? console.log(e.pageY);
? }
}

---

H5拖拽

draggable = “true” //给元素启动h5拖拽
拖拽的生命周期
//拖拽元素
ondragstart //拖拽开始执行事件
ondrag //拖拽过程执行事件
ondragend //拖拽结束执行事件
//被拖拽元素接触的元素
ondragenter //拖拽元素进入执行事件
ondragover //拖拽元素进入过程执行事件
ondragleave //拖拽元素离开执行事件
ondrop //结束执行事件

e.dataTransfer //获取里面所携带的数据
火狐兼容

在ondragstart时间中添加e.dataTransfer.setData(“imgInfo”, item)

文档碎片

createDocumentFragement( ) 文档碎片,比普通的for循环添加标签性能好，普通的是创建一次渲染一次，文档碎片是一次性渲染
var oFragement = document.createDocumentFragement( ) 创建文档
for(var i = 0; i < 10; i++){
? var op = document.createElement(’ p ');
? oFragement.appendChild( op );
}
document.body.appendChild( oFragement )

DOM2级事件

DOM0级事件：所有浏览器都支持，事件处理程序是在元素的作用域中运行，是等号赋值

DOM2级事件：是用事件监听的方式写的：有三个步骤：1.事件捕获：事件从document对象沿着DOM树向下传播到目标节点
? 2.事件发生在目标节点身上，注册的事件在元素上运行
? 3.事件冒泡：从目标节点返回到document对象，所有事件都受到事件捕获支配，但不是所有事件都有冒泡

DOM0和DOM2都是事件绑定

1.在DOM元素中直接绑定
2.在js代码中绑定，即等号赋值
3.事件监听
?

obj . addEventListener(eventName, handle, useCapture)
	eventName：事件的名称（这里的事件没有on）
	handle：处理事件的函数，不需要加括号
	useCapture：布尔值类型，是否使用捕获，一般用false，默认为false冒泡模型，true为捕获模型

obj . attachEvent(eventName, handle)
	eventName：事件的名称（这里的事件有on）
	handle：处理事件的函数

obj . addEventListener("click事件"， function触发的函数)		//该方法不支持IE8及其以下
obj . attachEvent("onclick事件"， function触发的函数)		//IE8以下方法

事件解绑

obj . removeEventListener()	//IE8以上
obj . detachEvent()		//IE8及以下

DOM0 事件等于null

判断是否是IE8及以下
if ( !-[1, ] ) IE8以上为真，以下为假

---

事件冒泡和事件捕获

两者都有一个共同行为：事件传播

事件捕获：由根节点传播到事件元素节点

事件冒泡：由事件元素节点传播到根节点

DOM标准事件流的触发先后顺序：先捕获，在冒泡

阻止事件冒泡
e.stopPropagation() //IE8及其以上
event.cancelBubble = true //IE8及其以下

---

事件代理/事件委托

即把自己的事先找个替代对象
? 1.减少内存消耗
? 2.动态绑定事件

e.target事件发生源		//IE8及其以上
e.srcElement事件发生源	//IE8及其以下
nodeName	//节点名称

if(e.target.nodeName.toLowerCase() === "li"){}

滚轮事件

onscroll //滚动条事件
onmousewheel //滚轮事件
? 谷歌：e.wheelDelta //判断滚轮方向，下为负值，上为正值 可读可写
? 火狐：e.detail //判断滚轮方向。向下为正，向上为负

火狐是浏览器不支持滚轮事件
兼容写法：DOMMouseScroll //只能通过事件监听的方式写

兼容写法
统一用事件监听的方式写

if(obj.onmousewheel === null){
	if(!-[1,]){			//!-[1,]		低版本IE会解析出[1,undefined]加负号则会转为NaN,取反为true,主流浏览器则是[1]
		obj.attachEvent('onmousewheel', Fn);		//兼容低版本IE
	}else{
		obj.addEventListener('mousewheel', Fn);	//兼容大众浏览器
	}
}else{
	obj.addEventListener('DOMMouseScroll', Fn)		//兼容火狐
}

键盘事件

只有获取焦点的元素才能有键盘事件
onkeydown //按下键盘触发事件
onkeyup //松开键盘触发事件
onkeypress //按下有值的键盘触发事件，前两者先触发，中文输入不会触发

e.which //获取键值，IE8及其以下不能用
e.keyCode //获取键值，但不能获取鼠标键值

上：38
下：40
左：37
右：39

---

焦点事件

focus() //获得焦点
blur() //失去焦点

onfocus //获得焦点触发事件
onblur //失去焦点触发事件
onchange //内容发生改变且失去焦点触发事件
oninput //内容发生改变就触发事件

---

阻止默认事件

return false; //只能阻断DOM0级事件
e.returnValue = false; //IE8及其以下阻断事件
e.preventDefault() //DOM2级事件阻断 谷歌浏览器需要将false改为{passive:false}

oncontextmenu //右键点击事件

ajax

ajax是通过一个对象XMLHttpRequest() 发起请求 new出来的
? 在低版本IE里面是ActiveObject

ajax(无状态请求)就是用于页面提交局部数据刷新

xhr.open( ) //三个参数，第一个：发送方式；第二个：地址；第三个：布尔值（true异步请求）（false同步请求）

发送数据的方式：get post 都能做
? 增加：POST
? 删除：DELETE
? 修改：PUT
? 查询：GET

const xhr = new XMLHttpRequest( );
	xhr.open("GET", "http://www.baidu.com", true);		//通过open方法，跟后台交互

xhr.send()					//请求需要正式发送

xhr.onload = () => {				 //监听	结束行为
	if ( readyState === 4 ){ 			//readyState判断我们操作是否正确
		if ( 200 <= xhr.status && xhr.status < 300 || xhr.status === 304 ){		//确定http状态码
			xhr.responseText		//数据就在这个对象下面
			JSON.parse ( xhr.responseText ) 	//反序列化，将JSON序列化的字符串转为JSON对象
		}
	}	
}

xhr.onreadystatechange = () => {			//也是监听
	if ( readyState === 4 ){}
}		

?

GET发送，为？，直接写在地址后面,请求数据量小,缓存,看的见,通常<=32k

POST发送，需要写头部信息,请求数据量大, 不会出现缓存的情况,网站中的url看不到, 请求数据<=2G
? xhr.setRequestHeader(‘Content-Type’,“application/x-www-form-urlencoded”) //头部信息
? xhr.send(“user = sxd & pwd = 123”);

jQuery框架写

$.ajax({
	url: "",		//请求的地址
	method: "GET"	//发送的方式
	data: {		//发送数据
		user : "sxd"
		pwd: 123
	},
	success(){}	//成功 就走到这里
})

---

跨域

一个域名的组成：
? 协议 子域名 主域名 端口号 请求资源地址
? http:// www .abc.com ：8080 / script/app.js

同一域名 允许
同一域名，不同端口 不允许
同一域名，不同协议 不允许
域名和域名对应的相同IP 不允许
不同域名 不允许

解决跨域的方法：
? 1.jsonp
? 2.cors (资源共享，服务器解决方案)后台程序 设置对应的域进行访问)

? 3.Nginx反向代理

? 4.webpack的proxy代理

cookie

? cookie 主要有3个方面
? 1.会话的一个状态管理（登录状态，购物车……）
? 2.个性化设置（自定义设置，主题等）
? 3.浏览器行为的追踪

cookie：大小上限4KB
? 时间限制，默认是一次会话时间，关闭浏览器就没了
? expires //设置会话时间

数据本地存储：
? sessionStorage //存储的信息只能再会话期间使用，暂时性的
? localStorage //浏览器关闭，数据任然存在
? 共同点：都是window的属性
? 通过对象设置，获取，移除 时间限制为一天

document.cookie = “name = 乌拉； expires = ”+ new Date(new Date.getTime() +24*60*60*1000)

---

localStorage

本地存储：
? localStorage 永久性
? 设置：setItem()
? 获取：getItem()
? 删除：removeItem() clear() 一次性清除所有
window.localStorage.setItem(“name”, “乌拉”)

jQuery

$(“select选择器”) . action执行对元素的操作

$("").hide(speed隐藏或显示速度 , callback是speed执行完后执行的函数名)

css的使用
css() //单个值css(“width”, “100px”), 多个值用对象css({width: “100px”,height: “100px”})

隐藏和显示
hide() //隐藏
show() //显示
toggle() //隐藏就显示，显示就隐藏

淡入淡出
fadeIn() //淡入
fadeOut //淡出
fadetoggle //淡入就淡出，淡出就淡入

滑动
slideDown() //向下滑动
slideUp() //向上滑动
slideToggle()

动画
animate({
? left:‘250px’,
? width:‘150px’ //width: ‘+=150px’ 是在该元素当前值的基础上加150
})

属性的动画值也可设置为show，hide，toggle， 列如：height : toggle

停止
stop(stopAll,goToEnd) //停止，适用于所有jQ效果函数
? stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行
? goToEnd 参数规定是否立即完成当前动画。默认是 false。

attr() //设置或返回属性
removeAttr() //删除属性
html() //设置或返回

addClass() //添加类名
removeClass //移除类名
toggleClass

eq就是下标

DOM -->JQ == > $(DOM对象) JQ不能使用原生js的方法
JQ --> DOM ==> JQ对象.get(序号) / JQ对象[序号]

each(function(index, value){}) //遍历

添加自定义属性
data(“name”, “value”) 自定义
data(“name”) 查找

筛选
hasClass( ‘box’ ) //通过确定类名有则true，无则false
is() //匹配集合有该元素则true，无则false
filter(".boc") //选择器筛选标签
has() //子代具有特定元素的标签,参数为特定元素

文档处理
append() //插入节点到最后面
prepend() //插入节点到最前面
appendTo() //将指定元素添加到另一个元素内, a.append(“b”)，将a添加到b内
after() //添加一个兄弟节点
wrap() //添加父级节点
nowrap() //删除父级节点
remove() //删除匹配的节点
empty() //删除匹配节点的所有子元素
clone() //克隆节点

元素尺寸
width() //获取元素宽,不包括边距和边框
height() //获取元素高

innerWidth() //获取元素宽,包括内边距
innerHeight() //获取元素高

outerWidth() //获取元素宽,包括内边距和边框
outerWidth() //获取元素高

$(document).width() / height()//获取文档的宽度或高度

$(window).width() / height() //获取浏览器可视区域宽度或高度

向上遍历
parent() //向上查找父元素
parents() //向上查找祖先元素,直到根标签
obj.parentsUntil(‘obj1’) //查找obj到obj1之间的祖先元素

向下遍历
children() //向下查找所有直接子元素,可写参数,列如:children(‘p.1’),即是返回类名为1的p标签直接子元素
find() //向下查找所有后代元素,同样也可写参数与children写法一样

同级遍历
siblings() //同级查找所有同级元素,可写参数
同级向下
next() //同级查找被选元素的下一个同级元素
nextAll() //同级查找所有被选元素的所有向下跟随的同级元素
obj.nextUntil(‘obj1’) //同级查找obj到obj1之间的同级元素
同级向上
prev() //同级查找被选元素的上一个同级元素
prevAll() //同级查找所有被选元素的所有向上跟随的同级元素
obj.prevUntil(‘obj1’) //同级查找obj到obj1之间的同级元素

过滤
first() //返回被选元素的第一个子元素,可写参数
last() //返回被选元素的最后一个子元素,可写参数
eq() //返回被选元素指定索引的元素
filter() //筛选,规定一个标准,满足返回,不满足则从该集合中删除

not() //反筛选,规定一个标准,满足则从该集合删除,不满足则返回

事件
on(“click.a”, function(){}) //添加事件 通过点可设置类名
off(“click”) //解绑

on(“事件名”, “子元素”, 执行函数) //相当于事件代理，index()可访问下标

one() //只执行一次

hover(执行函数，执行函数) //鼠标移入移出，一个参数，移入移出共用一个函数

---

扩展

$.extend({
? x: 10
})

$.fn.extend({
? zhaoge : function(){}
})

结构赋值

解构赋值：模式匹配：只要等号两边的模式相同，左边的变量就会被赋予对应的值
let [a, b, c] = [1, 2, 3]
相当于let a = 1,
? b = 2.
? c = 3;

---

默认值
let [a, b=1] = [1] //结果a = 1, b = 1 被赋予默认值的变量不会被改变，除null之外

symbol

只能转为字符串和布尔值
每一个Symbol都不一样
写法
1.let a = {}
let b = Symbol()
a[b] = “sxd”

2.a = {
? [b]: “sxd”
}

3.Object.defineProperty(a对象, b属性名, {value:“sxd”})

Symbol for(“key”)， 会检测全局环境，即以字符串为参数先搜索有无该值对应的Symbol值，有则使用，无则新生成
key相等则对应的Symbol for()也相等

Symbol.keyFor() 用来查找一个Symbol值是否有登记信息，Symbol是没有登记信息的返回undefined，Symbol for生成的值是登记再全局作用域

set

类似于数组，和数组区别在于set数组成员是唯一的，没有重复的值
用处之一，数组去重
const s = new Set();
[1,2,3,3,4,5].forEach(x => s.add(x));
for(let i of s){
console.log(i)
}

简写
const set = new Set([1,2,3,3,4,5,6])
console(…set);
console.log(set.size) //数组长度,无length属性

---

## set方法

Array.from() 类数组转数组
add() 添加某个值
delete() 删除某个值
has() 判断有没有
clear() 清除所有
keys() 键名的遍历器 values() 键值的遍历器
entries() 键值对的变量
forEach()

weakSet() 和set类似，也是去重，不过它的成员只能是对象，不能是其他类型的值

Map() 将对象传统的方法是字符串–值，而Map则是值–值
set() //添加

get() //获取

promise

用于解决异步编程问题
异步要的是结果 只需要监听这个过程什么时候给结果
promise 一个容器，专门用来组织异步交互
? 容器的概念：
? 三个状态：
? 进行中 pending
? 成功状态 resolve
? 失败状态 reject
? promise过程无法取消
? 如果不设置回调函数，promise内部抛出的错误，不会反应到外部（这个回调函数的位置有点变化）

promise：
? 是构造函数，必须new执行
? 里面必须有一个回调函数参数才能启动promise
? 这个回调函数有两个参数：
? 第一个：resolve 成功
? 第二个：reject 失败

new Promise((resolve, reject) =>{
? setTimeout(() => {
? try{ //成功
? console.log(“A”);
? resolve(“异步事件1成功结束”); //这里结束就返回成功状态
? }catch(error){ //捕获报错，即使报错了，也不会阻碍后面代码的执行，所以一般在Promise最后面加上catch()，来捕获
? reject(error);
? }
? }, 1000);
? /*
? 这样就完成了一个正常的异步事件1
? */
}).then(msg) => { //then：监听成功还是失败，then()方法执行完之后，返回一个全新的promise对象
? //msg：事件1成功时resolve方法传来数据， 异步事件1成功结束
? setTimeout(() => {
? console.log(“B”);
? }, 50)
? }, (msg) => { //报错时reject传来数据
? console.log(msg)
? })

H5加密

encodeURI( string ) //将字符转化为新字符串，加密，除A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ’ ( ) #之外都可加密
decodeURI( str ) //将encodeURI加密的新字符串解码

btoa和atob //对数据进行 编码 编译成 data base64编码格式，对中文不能编码，徐先将数据编码成url编码，在btoa编码base64编码格式
btoa( str ) //对数据加密
atob( str ) //对数据解密

地理信息

navigator.geolocation 单次定位请求

这里面请求成功的时候，返回出对应的值。请求失败的时候，也返回出错误的信息。
?
navigator.geolocation
? 单次定位请求 ：getCurrentPosition(请求成功,请求失败,数据收集方式)
? 请求成功函数
? 经度 : coords.longitude
? 纬度 : coords.latitude
? 准确度 : coords.accuracy
? 海拔 : coords.altitude
? 海拔准确度 : coords.altitudeAcuracy
? 行进方向 : coords.heading
? 地面速度 : coords.speed
? 请求的时间: new Date(position.timestamp)

请求失败函数
? 失败编号 ：code
? 0 : 不包括其他错误编号中的错误
? 1 : 用户拒绝浏览器获取位置信息
? 2 : 尝试获取用户信息，但失败了
? 3 : 设置了timeout值，获取位置超时了

数据收集 : json的形式
? enableHighAcuracy : 更精确的查找，默认false
? timeout : 获取位置允许最长时间，默认infinity
? 允许几秒钟，超过的时候就返回了3，获取位置超时了。
? maximumAge : 位置可以缓存的最大时间，默认0
? 多少秒之后，把对应的内容清空， 这里因为每次都是不段地在请求。
?

多次定位请求
多次定位请求 : watchPosition
? 移动设备有用，位置改变才会触发
? 配置参数：frequency 更新的频率
关闭更新请求 : clearWatch 与定时器一样，都是可以进行清除

移动端事件

2、移动端触屏事件
? a)ontouchstart 手指按下触发
? b)ontouchmove 手指移动触发
? c)onTouchend 手指抬起触发

3、PC端事件和移动端事件的区别
? a)通过on的方式添加touch事件在谷歌模拟器下无效
? b)通过on的方式添加事件会前后覆盖
? c)鼠标事件在移动端可以使用，但有300毫秒的延迟
4、事件监听
? a)addEventListener(‘不带on的事件名’,事件函数，是否冒泡 )事件绑定
? b)绑定多少个事件就执行多少个，不会存在前后事件覆盖的问题
? c)在谷歌模拟器下一直识别
? d)冒泡 从下往上，把事件一直向上传递，点击最下面的元素，最下面先执行
? e)捕获 从上往下，把事件一直向下传递，点击最上面的元素，最上面先执行

5、event对象
? a)标准事件函数默认的第一个参数
? b)是描述发生事件的详细信息

6、阻止默认事件
? a)事件默认行为：当一个事件发生的时候浏览器自己会默认做的事情
? b)比如正常情况下，鼠标可以拖拽图片，a标签跳转，手指长按可以选中文字，右键菜单等
? c)e.preventDefault( ) 阻止默认行为，且解决在IOS上有网页回弹的橡皮筋现象
? d)但网页上的所有滚动条失效
? e)一般不会阻止默认

7、阻止冒泡
? a) 在需要的时候的，标准用e.stopPropagation( ) 阻止冒泡问题，比如有时需要复制文本

8、事件点透问题
? a)PC端鼠标事件,在移动端也可以正常使用，事件的执行会有300毫秒的延迟
? b)问题的产生是，点击了页面之后，浏览器会记录点击下去的坐标
? c)300毫秒之后，在该坐标找到现在的元素，执行该事件

9、点透问题解决办法
? a)阻止默认事件，但在部分安卓机不支持
? b)不用a标签做页面跳转，用window.location.href做跳转，比如移动端淘宝
? c)在移动端不用鼠标事件

10、防止误触问题
? a)用JS做判断，手指移动就不跳转，没有移动，说明是点击，就跳转

11、获取手指信息
? a)touches 当前屏幕上的手指列表
? b)targetTouches 当前元素上的手指列表
? c)changedTouches 触发当前事件的手指列表
? d)获取手指的个数 e.changedTouches.length
? e)获取坐标 e.changedTouches[0].pageX