語法基礎(chǔ)
類型轉(zhuǎn)換
1,parseInt(),parseFloat(),Number()要傳參，toString()不傳參
字符串
charAt()返回傳入?yún)?shù)在字符串中的下標
charCodeAt()用法和charAt()一樣，返回字符的字符編碼
截取字符串方法
substring(),slice()第一個參數(shù)為開始位置，第二個為結(jié)束位置（參數(shù)是負數(shù)才有區(qū)別）
substr()第一個參數(shù)為開始位置，第二個為截取的字符個數(shù)
indexOf(),lastIndexOf()返回指定字符在字符串中的下標
trim()刪除前/后空格
對象
對象具有的屬性和方法：
1，constructor:構(gòu)造函數(shù)，用來創(chuàng)建當前對象的函數(shù)
2，hasOwnProperty(propertyName):用于檢查對象中是否具有某屬性，屬性名用字符串形式指定
3，isPropertyOf(object):傳入的對象是否是另一個對象的原型
4，toLocaleString():轉(zhuǎn)換成當?shù)氐淖址?/p>
5，toString():轉(zhuǎn)換成字符串
流程控制
1，++a和a++如果是單獨的一條語句兩者沒區(qū)別，做運算的時候才會有
2，foreach(for
in):如果擴展了原始數(shù)組，此方法就有問題了。建議忘記這種方法
3，switch使用的全等符做比較的
數(shù)組
1，判斷某對象是不是數(shù)組用Array.isArray(someObject)
2，join(),分割數(shù)組，括號中傳入分隔符，如不傳分隔符默認以空格分隔
3，數(shù)組操作方法
push()在數(shù)組末尾添加一項或多項，返回修改后的長度
pop()移除數(shù)組最后一項，返回移除的項并修改數(shù)組長度
unshift()在數(shù)組前端添加一項或多項，并返回修改后的長度
shift()移除數(shù)組最前面的一項，返回移除的項并修改數(shù)組長度
reverse()逆轉(zhuǎn)排序
sort()從小到大（不是轉(zhuǎn)換成數(shù)值而是字符串類型作比較，所以不適用數(shù)字數(shù)組大小排序）
concat()把參數(shù)組合成一個行數(shù)組，參數(shù)可以是數(shù)組也可以是字符串等
slice()截取數(shù)組指定部分（傳參下標確定哪些項）
splice()刪除；插入；替換（都是通過傳入的下標確定）
indexOf()------lastIndexOf()查找
10，數(shù)組迭代方法（下面的方法都會讓每一項執(zhí)行指定的函數(shù)）
every()---每一項都返回true，則返回true
some()---只要有一項返回true，返回true
filter()---返回true組成的數(shù)組
forEach()---沒有返回值
map()---返回每項函數(shù)的結(jié)果
函數(shù)
1，沒有方法重載，但是可以模擬。后面的同名函數(shù)會覆蓋前面的函數(shù)。
2，函數(shù)可以寫在調(diào)用之后（和變量不一樣，變量會是undefined，函數(shù)會正常執(zhí)行），但是必須是函數(shù)聲明而不是函數(shù)初始化語句
eg：函數(shù)聲明：function funName(){}函數(shù)初始化語句：var funName = function(){}
3，函數(shù)也可以作為參數(shù)傳遞給另一個函數(shù)，這樣必須去掉括號，只傳函數(shù)名
4，對象A想調(diào)用對象B的方法，給對象A添加屬性，值是對象B的方法。
5，在window下定義函數(shù)，就是給window添加了屬性，函數(shù)名是屬性名，函數(shù)是屬性值
6，我的函數(shù)習慣：寫在調(diào)用之前，用匿名函數(shù)賦值于變量的方式
7，包含兩個屬性：
length：希望接收參數(shù)的個數(shù)
prototype：后面會詳解，非常重要的屬性，其值不能枚舉
8，對于第4點，對象A調(diào)用對象B的方法，ES5添加了bind()方法能簡便實現(xiàn)
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的隨機數(shù)，不包含0和1，1位小數(shù)
面向?qū)ο?/h2>對象
萬物皆對象
1，數(shù)據(jù)屬性
對象屬性具有的屬性叫數(shù)據(jù)屬性
configurable----能否通過delete刪除，默認為true。通過var聲明的變量函數(shù)不能刪除，通過window生命的全局屬性可以刪除。
enumerable----能否通過for in枚舉。默認為true。
writable----能否修改屬性值。默認為true。
value----屬性值。默認為undefined（未初始化）。
2，設(shè)置或修改數(shù)據(jù)屬性（有該屬性就修改，沒有就設(shè)置）
Object.defineProperties()----2個參數(shù)，對象名、數(shù)據(jù)屬性集合
eg：var person = {
name: ‘Marry’,
age: 24
}
Object.defineProperties(person,{
name : {
value : 28,
configurable : ‘false,’
},
age : {
writable : ‘false’,
enumerable : ‘false,’
},
})
Object.defineProperty()----一次只能修改一個數(shù)據(jù)屬性，傳3個參數(shù)（可以忘記）
3，獲取數(shù)據(jù)屬性
Object.getOwnPropertyDescriptor()----2個參數(shù)，對象名、屬性名
eg：var person= {
name: ‘Marry’,
age: 24
}
varattrAttr = Object.getOwnPropertyDescriptor(person,’name’);
console.log(attrAttr.configurable);//true
console.log(attrAttr.value);//Marry
注：也可以在創(chuàng)建的對象的時候初始化數(shù)據(jù)屬性的值，步驟：創(chuàng)建空對象>>使用Object.defineProperties()方法初始化。
4，對象類型
創(chuàng)建對象
1，普通模式
一次創(chuàng)建一個對象，即構(gòu)造方法（通過new關(guān)鍵字）和對象字面量
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’);
缺點：創(chuàng)建對象，返回對象，有點啰嗦，麻煩（看著麻煩，不過倒是易懂~），為了解決這個問題，于是有了自定義構(gòu)造函數(shù)創(chuàng)建對象。
3，自定義構(gòu)造函數(shù)模式
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’);
構(gòu)造函數(shù)名首字母大寫（小寫也可以，為了好的習慣），必須通過new關(guān)鍵字；通過構(gòu)造函數(shù)創(chuàng)建的對象具有constructor屬性，該屬性指向構(gòu)造函數(shù)。在上例中person1.constructor== Person;//true
缺點：方法會在實例化的時候（在內(nèi)存中）重新創(chuàng)建一遍，函數(shù)也是對象，所以占內(nèi)存；這是其一，更不能接受的是不同的函數(shù)做同樣的事，這就太浪費了?？梢园逊椒ǚ旁跇?gòu)造函數(shù)外面，寫成全局函數(shù)，然后指向它。這樣就可以解決多個函數(shù)做一樣的事：
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’);
不過新問題又來了，如果對象需要多個方法，就要定義多個全局函數(shù)。為了解決這個問題，于是出現(xiàn)了原型模式創(chuàng)建對象。
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);
構(gòu)造函數(shù)是一個空函數(shù)，將所有屬性和方法添加到構(gòu)造函數(shù)的prototype屬性上。這樣解決了自定義構(gòu)造函數(shù)的問題?，F(xiàn)在實例化對象時，（在內(nèi)存中）方法只有一個。每個函數(shù)都具有prototype屬性，該屬性指向函數(shù)的原型對象。
BOM
window對象
1，窗口大小
outerWidth和outerHeight獲得瀏覽器窗口大?。ǔ斯雀瑁瑒e的瀏覽器在普分屏會有幾像素的偏差，但是這兩貨用處不大）
innerWidth和innerHeight獲得瀏覽器視口大小（不包含滾動條）window.innerWidth
2，打開窗口
window.open(‘url’,’方式’,’高寬，距離等屬性’);-----3個參數(shù)都是可選的
方式：_blank,_self-------新開標簽頁或者當前標簽頁中
如果有第三個參數(shù)，無論第二個參數(shù)是什么方式，都會新開窗口
3，計時器
setTimeout(),clearTimeout()-------setInterval(),clearInterval()
location對象
1，location.href == window.location.href
2，location.replace(‘url’)，會在當前標簽頁轉(zhuǎn)到新地址，但是不會生成歷史記錄，不能返回
3，location.reload()-----重載頁面（會從緩存中加載）
location.reload(true)-------重載頁面（從服務(wù)器加載）
navigator對象
檢測哪種瀏覽器
history對象
hidtory.go();參數(shù)如果是正數(shù)就前進，負數(shù)就后退
DOM
節(jié)點層次
代碼中的換行也會被當成節(jié)點（空白節(jié)點）
1，nodeName----返回元素標簽名
2，nodeType----返回節(jié)點類型
3，childNodes----子節(jié)點，其中保存了一個Nodelist對象
4，parentNode----父節(jié)點
5，previousSibling----哥哥節(jié)點（第一個子節(jié)點的previousSibling屬性值是null）
6，nextSibling----弟弟節(jié)點（最后一個子節(jié)點的nextSibling屬性值是null）
7，firstChild----第一個子節(jié)點（someNode.childNodes[0]）
8，lastChild----最后一個子節(jié)點（someNode.childNodes[someNode.childNodes.length-1]）
9，hasChildNodes()----檢查是否含有子節(jié)點。有，返回true；沒有，返回flase
節(jié)點操作
1，appendChild()----在尾部插入節(jié)點，參數(shù)表示將要插入的節(jié)點
2，insertBefore()----在指定位置插入節(jié)點，兩個參數(shù)，一個是新節(jié)點，一個是參照節(jié)點（將成為參照節(jié)點的哥哥節(jié)點）
3，removeChild()----移除節(jié)點，一個參數(shù)即將要移除的節(jié)點
4，replaceChild()----替換節(jié)點，兩個參數(shù)，一個是新節(jié)點，一個事將要被替換的節(jié)點
獲取節(jié)點
1，document.documentElement----獲得html元素
2，document.body----獲得body元素
3，document.URL----獲取當前頁面地址
4，document.forms----document.getElementsByTagName(‘forms’)----獲取所有表單
元素節(jié)點
1，nodeType == 1
2，nodeName為元素標簽名
3，nodeValue為null
4，parentNode是document或某元素
5，子節(jié)點可能是元素節(jié)點（element），文本節(jié)點（text），注釋節(jié)點（comment）----注意：實用的子節(jié)點只有3個，別的都不是子節(jié)點
6，每個元素節(jié)點都有屬性節(jié)點（但不是子節(jié)點），訪問、修改或設(shè)置屬性節(jié)點通過element.attributes----不能移除某屬性
7，元素特性操作getAttribute()，setAttribute()，removeAttribute()；獲取自定義屬性時用getAttribute()。因為別的都可以用對象的方式來替代，這樣更方便。element.style,elsment.className。
8，創(chuàng)建元素document.createElement(‘div’)；傳的參數(shù)是標簽名
文本節(jié)點
1，nodeType為3
2，nodeName為#text
3，nodeValue為文本內(nèi)容
4，沒有子節(jié)點
5，創(chuàng)建文本節(jié)點：document.createTextNode(‘參數(shù)’)；參數(shù)為文本內(nèi)容
注釋節(jié)點
1，nodeType為8
2，nodeName值為#comment
3，nodeValue為注釋內(nèi)容
4，沒有子節(jié)點
屬性節(jié)點
1，nodeType為11
2，nodeName為屬性名稱
3，nodeValue為屬性值
4，沒有父節(jié)點和子節(jié)點
H5DOM擴展
選擇器
1，querySelector()參數(shù)為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()代替
節(jié)點選擇
1，childElementCount----子節(jié)點個數(shù)（不包括空白節(jié)點和注釋節(jié)點）
2，firstElementChild----第一個子元素（非空白節(jié)點和注釋節(jié)點）
3，lastElementChild----最后一個子元素（非空白節(jié)點和注釋節(jié)點）
4，previousElementChild----哥哥元素（非空白節(jié)點和注釋節(jié)點）
5，nextElementChild----弟弟元素（非空白節(jié)點和注釋節(jié)點）
與類相關(guān)
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
文檔加載狀態(tài)
document的屬性readyState的值如果為loading表示文檔還在加載，如果是complete則表明文檔加載完畢。不適用于ajax。
if(document.readyState== ‘loading’){
//執(zhí)行操作，loading動畫等
}
元素大小
style不是萬能的
獲取或設(shè)置元素樣式最常見的是selector.style.attr如div.style.color，這種不能獲取外部樣式中的樣式，只能獲取行內(nèi)樣式；通過這種方式修改或設(shè)置元素樣式也只能修改在行內(nèi)樣式，行內(nèi)樣式優(yōu)先級高于外部樣式，從而達到修改或設(shè)置的目的。
偏移值
1，style對象方式
如上所說，假如要獲取div的高寬，如果元素高寬樣式?jīng)]有寫在行內(nèi)就獲取不到，通常會寫在外部樣式表中。如果就是寫在行內(nèi)樣式中，獲取的是content的高寬不含padding和border（由盒模型box-sizing決定包不包含padding和border）。能使用此方法修改元素高寬。
2，offsetWidth----獲取元素寬度，樣式寫在外部樣式中也能獲取到，不能以此修改高寬
3，offsetHeight----和offsetWidth一樣，獲取的是高度，也不能設(shè)置或修改元素高度
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申明
教程網(wǎng)絡(luò)上都是這么說的，但是這是屁話?。。∵€是做兼容吧
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級事件優(yōu)勢：1，可以添加多個事件，會按照先后順序執(zhí)行；2，明確冒泡還是捕獲
移除事件處理程序：
要把函數(shù)進行傳參才能移除
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----響應(yīng)事件的元素（等于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----文檔就緒函數(shù)，jQuery文檔就虛函數(shù)采用的就是這種
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;
事件委托
目的是為了提高性能，節(jié)約內(nèi)存。每個函數(shù)都是一個對象，對象越多，性能越低。利用事件委托一個函數(shù)可以少寫一些函數(shù)，達到減少內(nèi)存使用的目的。原理是利用了事件冒泡。
表單
獲取表單
1，傳統(tǒng)document.getElement….
2，document.querySelector….
3，document.forms----獲取頁面所有表單，是個類數(shù)組對象，[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----傳給服務(wù)器的值
?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(‘頁面顯示文本’,’傳遞到服務(wù)器的value值’);
selectbox.add(newOption,undefined);//undefined參數(shù)不可少
4，移除下拉框選項
selectbox.remove(index);//傳參表示移除第幾項
富文本
表單相應(yīng)字段屬性contenteditable設(shè)置為true就可以編輯了，適用于任何元素。
