原生JavaScript

获取body标签：document.body
获取HTML标签：document.documentElement
鼠标事件；onfocus   onblur

innerText、innerHTML、src、href、id、alt、title、可以直接更改元素的内容,但是更改元素的样式需要使用element.style.格式的方法

使用定位的元素不能使用margin:auto来居中

改变元素内容：element.innerHTML（可以改变任意标签当中的内容，表单元素只能通过value改变内容）
时间、日期：
var data=new Date();//调用时间函数
		var year=data.getFullYear();//返回日期年
		var month=data.getMonth()+1;//返回日期月，记得+1
		var day=data.getDate();//返回日期 日
		console.log('今天是'+year+'年'+month+'月'+day+'日');//字符串能和变量通过+拼接在一起
var a=data.getDay();//可以返回星期几的数组下标，星期天为0，星期数组需要自己定义
var h=data.getHours()//可以获取当前的小时
var h=data.getMinutes()//可以获取当前的分钟
var h=data.getSeconds()//可以获取当前的秒数
this指向的是函数的调用者

判断一个元素的状态可以通过一个变量是否等于1来判断
Element.className可以改变元素的类名或者增加元素的类名（不需要style）
数组的排他思想：用for循环给数组里的每个元素绑定事件，在事件里先用for循环来把全部元素的效果都去掉，再给当前事件的元素this增加效果
字符串需要在单引号或者双引号之中，字符串与变量之间需要通过+来拼接，变量前后都需要完整的引号，变量不需要引号，（‘字符串’+变量+‘字符串’）
判断一个复选框是否被选中可以通过true和false来判断
获取表单元素之后可以通过text1.value.length来判断表单元素里面值的长度

获取一个元素之后可以使用 元素名.getAttribute('属性来获取该元素的某个属性值，可以是自定义的index
获取一个元素之后可以使用 元素名.setAttribute('属性'，'值')来更改该元素的某个属性值，可以是自定义的index或者是class属性
获取一个元素之后可以使用 元素名.removeAttribute('属性'，'值')来移除该元素的某个属性值
自定义属性命名以data- 开头

利用结点层级关系获取元素：
结点分为：元素结点（标签），文本结点（文字，空格，换行），属性结点
元素.parentNode可以获得最近的父节点的元素，找不到则返回空
元素.children可以获取子元素结点，为一个数组,[0]代表第一个，[元素.length-1]表示最后一个
变量+字符串整体也是字符串
元素.nextElemtentSibling表示下一个兄弟元素
元素.previousElemtentSibling表示前一个兄弟元素
元素.nextSibling可以获取当前元素前后元素的对象集合

指定标签创建节点：a=document.createElement('li')，创建一个结点只能添加一次
添加节点：ul.appendChild(a)将一个结点添加到指定父节点的子节点末尾
添加节点2：ul.insertBefore(a,ul.children[0]):将一个结点添加到父节点下的一个子节点的前一个
获取文本框的内容(表单元素要用value，其他的用innerHTML)
删除父节点的某一个子节点：ul.removeChild(ul.children[0])：删除第一个子节点，如果父节点中没有子节点时再删除就会报错
复制结点：node.clonenode(true):复制node结点包括里面的全部内容
var datas=[{
    
    
			name:'1',
			subject:'0',
			score:'99',
		},{
    
    
			name:'2',
			subject:'0',
			score:'98',
		},{
    
    
			name:'3',
			subject:'0',
			score:'97',
		},{
    
    
			name:'4',
			subject:'0',
			score:'96',
		}];
用js创建对象数据时只能通过逗号隔开每个元素
for(k in obj){
    
    
k得到的是属性名（关键字）,obj[k]得到的是属性值（关键字对应的值）
}
例：
var a=[1,2,3,4]
		for(var k in a)
			{
    
    
				console.log(k,a[k]);k得到的是数组的下标，a[k]得到的是下标对应的值
			}

方法监听注册事件(同一个事件可以注册多个事件)：
eventTarget.addEventListener(type,listener[,useCapture])
type:事件类型字符串，比如click,mouseover,并且不用带on
listener:事件处理函数，事件发生时会调用该监听函数
useCapture:可选参数，是一个布尔值，默认值是false
方法：先获取元素
例：btn.addEventListener('click',function(){
    
    
	alert(22);
})
btn.addEventListener('click',function(){
    
    
	alert(33);
})
这种方法可以给一个元素绑定两个事件，会先弹出22，再弹出33

这种方法也能绑定事件，函数不用加括号
btn.addEventListener('click',fn)
function fn(){
    
    
alert(22);
btn.removeEventListener('click',fn);//移除绑定的事件，让原先的功能只执行一次
}

事件流分为捕获阶段（从上到下）和冒泡阶段（从下到上）
btn.addEventListener('click',function(){
    
    }，)如果第三个参数是true则处于捕获阶段，如果是false或省略则处于冒泡阶段
如果有嵌套着两个盒子，都绑定了点击事件，处于捕获阶段时会先执行上面盒子的功能再执行下面盒子的功能，冒泡则取反

事件对象：
btn.onclick=function(event){
    
    //event就是事件对象，事件对象只有有了事件才能存在，不需要我们传递参数，它包含了事件的一系列相关数据，可以自己命名
}
event.target可以返回触发事件的对象,this返回的是绑定事件的对象（有冒泡，不确定是谁触发了事件）
event.type可以返回事件的类型
阻止默认行为（让链接不跳转或者让功能不执行）,我们也可以利用return来阻止，return之后的代码不执行
event.preventDefault()
阻止冒泡：event.stopPropagation()（两个盒子嵌套，加在最下面盒子绑定的函数中）
event.clientX:返回鼠标相对于浏览器窗口可视区的x坐标
event.clientY:返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX:返回鼠标相对于文档页面的x坐标
e.pageY:返回鼠标相对于文档页面（距离最顶部）的Y坐标
e.screenX:返回鼠标相对于电脑屏幕的x坐标
e.screenY：返回鼠标相对于电脑屏幕的Y坐标


事件委托（事件委派，事件代理）
原理：不是给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，如何利用冒泡原理影响设置每个子节点。
例：给ul注册点击事件，如何利用事件对象的target来找到当前的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

鼠标事件：
禁止鼠标右键菜单：
document.addEventListener('contextmenu',function(e){
    
    
e.preventDefault();
})
禁止鼠标选中：selectstart
document.addEventListener('selectstart',function(e){
    
    
e.preventDefault();
})
mousemove:鼠标移动事件
mouseup:鼠标弹起事件
mouseover:鼠标移入事件
mouseout:鼠标移除事件
mousedowm:鼠标按下事件

键盘事件（addEventListener不用带on）：
onkeyup:按键弹起的时候触发
onkeydowm:按键按下的时候触发
onkeypress:按键被按下时触发，不识别功能键
keyup和keydowm事件不区分字母大小写，keypress事件区分字母大小写

键盘事件对象：
event.keyCode可以获得键盘按键的ascii码值
用keydown和keypress对文本框注册事件时，在事件触发时，文字还没有落入文本框中，所以要用keyup

窗口加载事件：window.onload=function(){
    
    }或者window.addEventListener('load',function(){
    
    })
作用：等窗口（页面）全部加载完之后再执行里面的功能和函数（由外部引入的js文件必须要写在window.onload中）
document.addEventListener('DOMContentLoaded',function(){
    
    })
作用：仅当DOM加载完成，不包括样式，图片等（当页面图片很多时可以节约时间）


调整窗口大小事件：window.onresize=function(){
    
    }
作用:当窗口大小发生变化时执行的功能
window.innerWidth可以得到当前屏幕的宽度

定时器：
设置定时器：setTimeout()和setInterval()
window.setTimeout(调用函数，[延迟的毫秒数]):设置一个定时器，当时间到了之后调用函数window可以省略，调用的函数可以是匿名函数，
也可以是有名函数，不用加括号，加括号代表直接调用，不加代表把函数名当成参数传入
例：var time1=setTimeout(function(){
    
    
alert(22);
},2000)//2s之后弹出22,把定时器命名为time1，不影响执行效果
回调函数：上一件事情做完再做另一件事，例如：点击完弹出22
清除定时器：clearTimeout(定时器名字)
setInterval():每隔一段这个时间，就去调用一次回调函数（例：倒计时效果）
clearInterval(定时器名)可以删除setInterval()设置的定时器
给在函数内部定义的计时器命名为局部变量，必须定义成全局变量（变量名=null）例：点击一个按钮之后开始计时器，点击另一个关闭计时器，必须用全局变量

同步：单线程   异步：多线程			回调函数为异步任务
js的执行机制：先执行同步任务，再执行异步任务

location对象的属性：
location.href：获取或者设置整个URL（可以通过这个跳转到想要的页面）
location.host：返回主机域名
location.port返回端口号
location.pathname返回路径
location.search返回参数(可以在不同的页面之间传递参数)
location.hash返回片段，锚点，链接
location.assign('路径')可以实现跳转页面的功能，它记录浏览历史，可以实现后退功能

在不同的页面传递参数：在form中填写的文本框表单可以使用uname记录参数，submit表单可以跳转到action='路径'传递参数到别的页面当中，
用location.search可以获得这个参数,这个参数为？name='参数'，再用location.search.substr(1)可以去掉开头的问号，
再用split('=')可以把等号两边分隔为数组，取数组的第二个即可

navigator对象：navigator对象包含有关浏览器的信息（常用userAgent）

offset：可以动态的得到某些元素的位置，大小，但是返回的数值不带单位
element.offsetParent:返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body（parentNode返回的是上一级的父亲，不管有没有定位）
element.offsetTop:返回元素相对带有定位父元素上方的偏移，没有父亲或者定位则以body为准
element.offsetLeft:返回元素相对带有定位父元素左边框的偏移
element.offsetWidth:返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight：返回自身包括padding、边框、内容区的高度，返回数值不带单位
offset适合用来获取元素大小位置，想要给元素更改值，则需要用style来改变
offset系列只能获取值并且进行计算而不能赋值，style系列只能赋值，而不能进行计算

元素可视区client:
element.clientTop:返回元素上边框大小
element.clientLeft：返回元素左边框大小
element.clientWidth:返回自身包括padding、内容区的宽度、不含边框，返回值不带单位
element.clientHeight：返回自身包括padding、内容区的高度，不含边框，返回数值不带单位


立即执行函数：不需要调用立马就能自己执行的函数
写法：(function(){
    
    })()或者(function(){
    
    }())
第二个小括号可以看作是调用函数，第一个小括号可以加入形式参数，第二个小括号可以传递实际参数

onresize事件:当尺寸发生变化时执行的函数
pageshow事件：当页面重新加载时执行的函数（解决某些浏览器的往返缓存问题），这个事件给window添加,给window注册事件对象时，
如果e.persisted返回的是true就是说如果这个页面是从缓存取过来的页面

scroll系列：
element.scrollTop:返回元素被卷去的上侧距离（滚动条盒子超过上边框内容的距离），返回数值不带单位
element.scrollLeft:返回元素被卷去的左侧距离（滚动条盒子超过左边框内容的距离），返回数值不带单位
element.scrollWidth：返回自身的实际宽度（包括超出盒子内容的宽度），不含边框，返回数值不带单位
element.scrollHeight：返回自身的实际高度（包括超出盒子内容的高度），不含边框，返回数值不带单位
overflow：auto:给超出内容的部分增加滚动条
onscroll：滚动事件

页面滚动事件：
需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document
页面被卷去的头部可以通过window.pageYOffset获得，左侧用window.pageXOffset获得
window.scroll(x,y):滚动窗口至文档中的特定位置，里面的x和y不带任何单位（0,0）代表返回到页面的最顶部

mouseenter：当鼠标移动到元素上时就会触发mouseenter事件，mouseover鼠标经过自身盒子会触发，经过子盒子也会触发，
mouseenter只会经过自身盒子触发，因为mouseenter不会触发冒泡

可以自定义给对象创建变量

Math.ceil(a)：如果a不是整数则向上取一位
Math.floor(a):如果a不是整数则向下取一位
Math.abs(a):对a取绝对值

可以把一个函数当成是参数传递给另一个函数，在这个函数最后一件事情结束之后调用传递进来的函数，此时这个函数为回调函数

如果想要轮播图的图片拥有滚动效果则需要在ul当中插入图片，而不是用数组记录下来图片的路径，并且让ul在一排显示，通过定位和改变坐标来实现轮播图滚动效果。
可以通过创建节点的方式判断ul里面装图片的li有几个来动态的增加li。无缝滚动原理：把第一张图片复制一份放在最后一张图片之后（可以使用clone函数和append函数来实现效果），
当图片到了最后一张时，点击下一张是先瞬间跳到第一张，然后再重头开始滚动。轮播图节流阀：防止轮播图按钮连续点击造成播放过快，
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。核心实现思路：利用回调函数，添加一个变量来控制，锁住和解锁函数

element.click():手动调用点击事件

移动端特效：
touchstart：手指触摸到一个DOM元素时触发（类似点击事件）
touchmove:手指在一个DOM元素上滑动时触发（类似鼠标移动事件）
touchend：手指从一个DOM元素上移开时触发
触摸事件对象e：
touches：正在触摸屏幕的所有手指的一个列表
targetTouches：正在触摸当前DOM元素上的手指的一个列表
changedTouches：手指状态发生了改变的列表，从无到有，从有到无变化
e.targetTouches[0].pageX可以获得手指的位置
e.preventDefault():阻止屏幕滚动的默认行为

轮播图如果使用translate改变坐标再使用transition添加过渡效果可以使图片拥有滚动效果
监听过渡完成的事件（过渡完成之后执行的功能）：transitionend

element.classList:可以返回元素的类名
element.classList.add('')：给元素追加一个类名，不会覆盖原来的类名
element.classList.remove('')：给元素删除类名
element.classList.toggle(''):给元素切换类名，第一次给元素加上类名，第二次是给元素去掉类名

本地存储（sessionStorage关闭浏览器删除数据，localStorage只能手动删除，其他页面也能使用存储在浏览器中的数据）：
sessionStorage.setItem(key,value):把数据存储在用户浏览器中
sessionStorage.getItem(key):获取数据
sessionStorage.removeItem(key)：删除数据
sessionStorage.clear():删除所有数据
localStorage.setItem(key,value):把数据存储在用户浏览器中
localStorage.getItem(key):获取数据
localStorage.removeItem(key)：删除数据
localStorage.clear():删除所有数据

change事件：当复选框发生了改变之后执行的功能