语法基础
类型转换
1,parseInt(),parseFloat(),Number()要传参，toString()不传参
字符串
charAt()返回传入参数在字符串中的下标
charCodeAt()用法和charAt()一样，返回字符的字符编码
截取字符串方法
substring(),slice()第一个参数为开始位置，第二个为结束位置（参数是负数才有区别）
substr()第一个参数为开始位置，第二个为截取的字符个数
indexOf(),lastIndexOf()返回指定字符在字符串中的下标
trim()删除前/后空格
对象
对象具有的属性和方法：
1，constructor:构造函数，用来创建当前对象的函数
2，hasOwnProperty(propertyName):用于检查对象中是否具有某属性，属性名用字符串形式指定
3，isPropertyOf(object):传入的对象是否是另一个对象的原型
4，toLocaleString():转换成当地的字符串
5，toString():转换成字符串
流程控制
1，++a和a++如果是单独的一条语句两者没区别，做运算的时候才会有
2，foreach(for
in):如果扩展了原始数组，此方法就有问题了。建议忘记这种方法
3，switch使用的全等符做比较的
数组
1，判断某对象是不是数组用Array.isArray(someObject)
2，join(),分割数组，括号中传入分隔符，如不传分隔符默认以空格分隔
3，数组操作方法
push()在数组末尾添加一项或多项，返回修改后的长度
pop()移除数组最后一项，返回移除的项并修改数组长度
unshift()在数组前端添加一项或多项，并返回修改后的长度
shift()移除数组最前面的一项，返回移除的项并修改数组长度
reverse()逆转排序
sort()从小到大（不是转换成数值而是字符串类型作比较，所以不适用数字数组大小排序）
concat()把参数组合成一个行数组，参数可以是数组也可以是字符串等
slice()截取数组指定部分（传参下标确定哪些项）
splice()删除；插入；替换（都是通过传入的下标确定）
indexOf()------lastIndexOf()查找
10，数组迭代方法（下面的方法都会让每一项执行指定的函数）
every()---每一项都返回true，则返回true
some()---只要有一项返回true，返回true
filter()---返回true组成的数组
forEach()---没有返回值
map()---返回每项函数的结果
函数
1，没有方法重载，但是可以模拟。后面的同名函数会覆盖前面的函数。
2，函数可以写在调用之后（和变量不一样，变量会是undefined，函数会正常执行），但是必须是函数声明而不是函数初始化语句
eg：函数声明：function funName(){}函数初始化语句：var funName = function(){}
3，函数也可以作为参数传递给另一个函数，这样必须去掉括号，只传函数名
4，对象A想调用对象B的方法，给对象A添加属性，值是对象B的方法。
5，在window下定义函数，就是给window添加了属性，函数名是属性名，函数是属性值
6，我的函数习惯：写在调用之前，用匿名函数赋值于变量的方式
7，包含两个属性：
length：希望接收参数的个数
prototype：后面会详解，非常重要的属性，其值不能枚举
8，对于第4点，对象A调用对象B的方法，ES5添加了bind()方法能简便实现
eg:varsayColor = function(){//这是全局对象的方法
alert(this.color);
}
var myO = {color:’red’};//定义一个对象
var myOColor = sayColor.bind(myO);//这样就可以了
myOColor();//弹出red
Math对象
min(),max(),ceil()--向上取整,floor()—向下取整,round()—四舍五入
random()—0~1的随机数，不包含0和1，1位小数
面向对象
对象
万物皆对象
1，数据属性
对象属性具有的属性叫数据属性
configurable----能否通过delete删除，默认为true。通过var声明的变量函数不能删除，通过window生命的全局属性可以删除。
enumerable----能否通过for in枚举。默认为true。
writable----能否修改属性值。默认为true。
value----属性值。默认为undefined（未初始化）。
2，设置或修改数据属性（有该属性就修改，没有就设置）
Object.defineProperties()----2个参数，对象名、数据属性集合
eg：var person = {
name: ‘Marry’,
age: 24
}
Object.defineProperties(person,{
name : {
value : 28,
configurable : ‘false,’
},
age : {
writable : ‘false’,
enumerable : ‘false,’
},
})
Object.defineProperty()----一次只能修改一个数据属性，传3个参数（可以忘记）
3，获取数据属性
Object.getOwnPropertyDescriptor()----2个参数，对象名、属性名
eg：var person= {
name: ‘Marry’,
age: 24
}
varattrAttr = Object.getOwnPropertyDescriptor(person,’name’);
console.log(attrAttr.configurable);//true
console.log(attrAttr.value);//Marry
注：也可以在创建的对象的时候初始化数据属性的值，步骤：创建空对象>>使用Object.defineProperties()方法初始化。
4，对象类型
创建对象
1，普通模式
一次创建一个对象，即构造方法（通过new关键字）和对象字面量
2，工厂模式
function createPerson(name,age,sex){
varo = {
name: name,
age: age,
sex: sex
}
return o;
}
window.person1 = createPerson(‘Marry’,20,’women’);
window.person2 = createPerson(‘Jim’,24,’man’);
缺点：创建对象，返回对象，有点啰嗦，麻烦（看着麻烦，不过倒是易懂~），为了解决这个问题，于是有了自定义构造函数创建对象。
3，自定义构造函数模式
functionPerson(name,age,sex){
this.name= name;
this.age= age;
this.sex= sex;
this.sayName= function(){
console.log(‘Myname is ’ + this.name);
}
}
window.person1 = new Person(‘Marry’,20,’women’);
window.person1 = new Person(‘Jim’,24,’man’);
构造函数名首字母大写（小写也可以，为了好的习惯），必须通过new关键字；通过构造函数创建的对象具有constructor属性，该属性指向构造函数。在上例中person1.constructor== Person;//true
缺点：方法会在实例化的时候（在内存中）重新创建一遍，函数也是对象，所以占内存；这是其一，更不能接受的是不同的函数做同样的事，这就太浪费了。可以把方法放在构造函数外面，写成全局函数，然后指向它。这样就可以解决多个函数做一样的事：
var sayName = function(){
console.log(‘Myname is ’ + name);
}
functionPerson(name,age,sex){
this.name= name;
this.age= age;
this.sex= sex;
this.sayName= sayName;
}
window.person1 = new Person(‘Marry’,20,’women’);
window.person1 = new Person(‘Jim’,24,’man’);
不过新问题又来了，如果对象需要多个方法，就要定义多个全局函数。为了解决这个问题，于是出现了原型模式创建对象。
4，原型模式
functionPerson(name,age){}
Person.prototype.name= name;
Person.prototype.age= age;
Person.prototype.sayName= function(){
console.log(this.name);
};
var person1 = new Person(‘Marry’,20);
var person2 = new Person(‘Jim,24);
构造函数是一个空函数，将所有属性和方法添加到构造函数的prototype属性上。这样解决了自定义构造函数的问题。现在实例化对象时，（在内存中）方法只有一个。每个函数都具有prototype属性，该属性指向函数的原型对象。
BOM
window对象
1，窗口大小
outerWidth和outerHeight获得浏览器窗口大小（除了谷歌，别的浏览器在普分屏会有几像素的偏差，但是这两货用处不大）
innerWidth和innerHeight获得浏览器视口大小（不包含滚动条）window.innerWidth
2，打开窗口
window.open(‘url’,’方式’,’高宽，距离等属性’);-----3个参数都是可选的
方式：_blank,_self-------新开标签页或者当前标签页中
如果有第三个参数，无论第二个参数是什么方式，都会新开窗口
3，计时器
setTimeout(),clearTimeout()-------setInterval(),clearInterval()
location对象
1，location.href == window.location.href
2，location.replace(‘url’)，会在当前标签页转到新地址，但是不会生成历史记录，不能返回
3，location.reload()-----重载页面（会从缓存中加载）
location.reload(true)-------重载页面（从服务器加载）
navigator对象
检测哪种浏览器
history对象
hidtory.go();参数如果是正数就前进，负数就后退
DOM
节点层次
代码中的换行也会被当成节点（空白节点）
1，nodeName----返回元素标签名
2，nodeType----返回节点类型
3，childNodes----子节点，其中保存了一个Nodelist对象
4，parentNode----父节点
5，previousSibling----哥哥节点（第一个子节点的previousSibling属性值是null）
6，nextSibling----弟弟节点（最后一个子节点的nextSibling属性值是null）
7，firstChild----第一个子节点（someNode.childNodes[0]）
8，lastChild----最后一个子节点（someNode.childNodes[someNode.childNodes.length-1]）
9，hasChildNodes()----检查是否含有子节点。有，返回true；没有，返回flase
节点操作
1，appendChild()----在尾部插入节点，参数表示将要插入的节点
2，insertBefore()----在指定位置插入节点，两个参数，一个是新节点，一个是参照节点（将成为参照节点的哥哥节点）
3，removeChild()----移除节点，一个参数即将要移除的节点
4，replaceChild()----替换节点，两个参数，一个是新节点，一个事将要被替换的节点
获取节点
1，document.documentElement----获得html元素
2，document.body----获得body元素
3，document.URL----获取当前页面地址
4，document.forms----document.getElementsByTagName(‘forms’)----获取所有表单
元素节点
1，nodeType == 1
2，nodeName为元素标签名
3，nodeValue为null
4，parentNode是document或某元素
5，子节点可能是元素节点（element），文本节点（text），注释节点（comment）----注意：实用的子节点只有3个，别的都不是子节点
6，每个元素节点都有属性节点（但不是子节点），访问、修改或设置属性节点通过element.attributes----不能移除某属性
7，元素特性操作getAttribute()，setAttribute()，removeAttribute()；获取自定义属性时用getAttribute()。因为别的都可以用对象的方式来替代，这样更方便。element.style,elsment.className。
8，创建元素document.createElement(‘div’)；传的参数是标签名
文本节点
1，nodeType为3
2，nodeName为#text
3，nodeValue为文本内容
4，没有子节点
5，创建文本节点：document.createTextNode(‘参数’)；参数为文本内容
注释节点
1，nodeType为8
2，nodeName值为#comment
3，nodeValue为注释内容
4，没有子节点
属性节点
1，nodeType为11
2，nodeName为属性名称
3，nodeValue为属性值
4，没有父节点和子节点
H5DOM扩展
选择器
1，querySelector()参数为css选择器，所以要加“#”或“.”如果是元素就不加，选取第一个元素。
eg：document.querySelector(‘p’)-----获取第一个p元素
document.querySelector(‘.my-div’)----获取第一个class为my-div的元素
document.getElementById(‘banner’).querySelector(‘.my-p’)----获取id为banner下面第一个class为my-p的元素
2，querySelectorAll()用法一样，不过选取的不是第一个元素而是多个元素
3，matchesSelector()检查某元素是否具有某特性（id，class之类）
eg：document.getElementById(‘my-div’).matchesSelector(‘.select’);----如果id为my-div的元素具有class.select返回true否者返回false。
注意兼容：ie — msMatchesSelector()chrome – webkitMatchesSelector()
firefox— mozMatchesSelector()opera – oMatchesSelector()
推荐使用classList.contains()代替
节点选择
1，childElementCount----子节点个数（不包括空白节点和注释节点）
2，firstElementChild----第一个子元素（非空白节点和注释节点）
3，lastElementChild----最后一个子元素（非空白节点和注释节点）
4，previousElementChild----哥哥元素（非空白节点和注释节点）
5，nextElementChild----弟弟元素（非空白节点和注释节点）
与类相关
1，document.getElementsByClassName()
2，classList----返回类名集合（字符串）
2.1add()remove()toggle()contains()----是否含有
eg：div.classList.add(‘d1’)----添加d1类
div.classList.remove(‘d1’)----移除d1类
div.classList.toggle(‘d1’)----切换d1类
div.classList.contains(‘d1’)----如含有类d1返回true，反之返回false
文档加载状态
document的属性readyState的值如果为loading表示文档还在加载，如果是complete则表明文档加载完毕。不适用于ajax。
if(document.readyState== ‘loading’){
//执行操作，loading动画等
}
元素大小
style不是万能的
获取或设置元素样式最常见的是selector.style.attr如div.style.color，这种不能获取外部样式中的样式，只能获取行内样式；通过这种方式修改或设置元素样式也只能修改在行内样式，行内样式优先级高于外部样式，从而达到修改或设置的目的。
偏移值
1，style对象方式
如上所说，假如要获取div的高宽，如果元素高宽样式没有写在行内就获取不到，通常会写在外部样式表中。如果就是写在行内样式中，获取的是content的高宽不含padding和border（由盒模型box-sizing决定包不包含padding和border）。能使用此方法修改元素高宽。
2，offsetWidth----获取元素宽度，样式写在外部样式中也能获取到，不能以此修改高宽
3，offsetHeight----和offsetWidth一样，获取的是高度，也不能设置或修改元素高度
4，offsetLeft----offsetTop，获取元素距离文档顶部和左边的值。td是例外，是距离table
5，图解：
视口大小
clientWidth和clientHeight----获取适口大小
元素视口大小和offsetWidth，offsetHeight的值一样，浏览器视口大小会去掉被滚动隐藏的部分和滚动条。
document.documentElement.clientWidth----浏览器视口宽度
document.documentElement.clientHeight----浏览器视口高度
使用window.innerWidth,window.innerHeight更方便
滚动条
滚动条距离顶部的距离
document.body.scrollTop----没有DTD申明
document.documentElement.scrollTop----没有DTD申明
教程网络上都是这么说的，但是这是屁话！！！还是做兼容吧
var scrTop =document.body.scrollTop || document.documentElement.scrollTop;
事件处理
DOM0级
添加事件处理程序：
var btn =document.querySelector(‘button’);
btn.onclick =function(){
console.log(this.id);
}
移除事件处理程序：
btn.onclick =null;
DOM2级事件
添加事件处理程序：
var btn =document.querySelector(‘button’);
btn.addEventListener(‘click’,function(){
console.log(this.id);
},flase);//flase表示冒泡，true表示捕获
btn.addEventListener(‘click’,function(){
console.log(‘第二个事件程序’);
},flase);
DOM2级事件优势：1，可以添加多个事件，会按照先后顺序执行；2，明确冒泡还是捕获
移除事件处理程序：
要把函数进行传参才能移除
var btn =document.querySelector(‘button’);
var showId =function(){
console.log(this.id);
}
添加事件处理程序：
btn.addEventListener(‘click’,showId,false);
移除事件处理程序：
btn.removeEventListener(‘click’,showId,false);
事件对象
有用的就这3个：
event.preventDefault();----阻止默认行为
event.stopPropagation();----阻止冒泡或捕获
event.currentTarget----响应事件的元素（等于this）
事件类型
1，load----加载完毕，可用于页面（window），窗体（iframe），图像（img）
页面加载：
HTML事件：
DOM2级事件：window.addEventListener(‘load’,function(){console.log(‘loaded’)},false);
图像加载：
HTML事件：
DOM2级事件：
document.querySelectorAll(‘img’).addEventListener(‘load’,function(){
console.log(‘loaded’)
},false);
2，resize----改变窗口
window. addEventListener(‘resize,function(){console.log(‘resized)},false);
3，scroll----当文档滚动
4，focusin----获得焦点
5，focusout----失去焦点
6，click----点击
7，dblclick----双击
8，mouseenter----鼠标位于元素上（不冒泡）
9，mouseleave----鼠标离开元素（不冒泡）
10，mousemove----鼠标在元素上移动
11，mousewheel----鼠标滚轮滚动
12，keydown----按下键盘上的某个键（keycode，返回物理键码）
13，keyup----松开键盘上的某个键
14，keypress----按下键盘上的某个键（返回字符串）
15，contextmenu----浏览器默认上下文菜单
eg：window.addEventListener('contextmenu',function(event){
event.preventDefault();//取消默认上下文菜单显示
},false);
16，DOMContentLoaded----文档就绪函数，jQuery文档就虚函数采用的就是这种
17，还有表单事件
鼠标坐标
1，clientX、clientY----鼠标在可视窗口的坐标
2，pageX、pageY----鼠标相对于整个页面的坐标
3，screenX、screenY----鼠标相对于电脑屏幕的而坐标
eg：functionshowCoords(event){
var span = document.getElementsByTagName("span");
span[0].innerHTML = event.clientX;
span[1].innerHTML = event.clientY;
}
document.onmousemove= showCoords;
事件委托
目的是为了提高性能，节约内存。每个函数都是一个对象，对象越多，性能越低。利用事件委托一个函数可以少写一些函数，达到减少内存使用的目的。原理是利用了事件冒泡。
表单
获取表单
1，传统document.getElement….
2，document.querySelector….
3，document.forms----获取页面所有表单，是个类数组对象，[0]表示第一个表单
4，document.forms[‘form2’]----获取name为form2的表单
提交表单
1，点击type为submit的按钮
2，点击type为image的按钮
3，document.forms.submit()----提交所有表单
4，验证提交
varmyForm = document.forms[0];
myForm.addEventListener(‘submit’,function(event){
//如果不合法
event.preventDefault();
},false);
表单重置
1，点击type为reset的按钮
2，form.reset()
表单字段
表单元素属性
☞disabled----禁用
☞readOnly----只读
☞type----类型
☞value----传给服务器的值
☞options[index]----selected元素特有，下拉选项
☞selected----选中下拉框中的opeions项
document.forms[0].value=”123”
document.forms[0].disabled=true
document.getElementsByTagName(“select”).options[0].selected= true;
表单事件
1，change() ----input和textarea的值变化时；select元素更改选择项时
2，forcusin，focusout----聚焦和失焦事件
3，添加下拉框选项
var newOption = new Option(‘页面显示文本’,’传递到服务器的value值’);
selectbox.add(newOption,undefined);//undefined参数不可少
4，移除下拉框选项
selectbox.remove(index);//传参表示移除第几项
富文本
表单相应字段属性contenteditable设置为true就可以编辑了，适用于任何元素。
