语法基础

类型转换

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就可以编辑了，适用于任何元素。