語法基礎
類型轉換
1,parseInt(),parseFloat(),Number()要傳參甘萧，toString()不傳參
字符串
charAt()返回傳入?yún)?shù)在字符串中的下標
charCodeAt()用法和charAt()一樣漠烧，返回字符的字符編碼
截取字符串方法
substring(),slice()第一個參數(shù)為開始位置，第二個為結束位置（參數(shù)是負數(shù)才有區(qū)別）
substr()第一個參數(shù)為開始位置解寝，第二個為截取的字符個數(shù)
indexOf(),lastIndexOf()返回指定字符在字符串中的下標
trim()刪除前/后空格
對象
對象具有的屬性和方法：
1，constructor:構造函數(shù)艘儒，用來創(chuàng)建當前對象的函數(shù)
2聋伦，hasOwnProperty(propertyName):用于檢查對象中是否具有某屬性，屬性名用字符串形式指定
3界睁，isPropertyOf(object):傳入的對象是否是另一個對象的原型
4觉增，toLocaleString():轉換成當?shù)氐淖址?/p>
5，toString():轉換成字符串
流程控制
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()逆轉排序
sort()從小到大（不是轉換成數(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ù)的結果
函數(shù)
1恕沫，沒有方法重載，但是可以模擬纱意。后面的同名函數(shù)會覆蓋前面的函數(shù)婶溯。
2，函數(shù)可以寫在調用之后（和變量不一樣，變量會是undefined迄委，函數(shù)會正常執(zhí)行）褐筛，但是必須是函數(shù)聲明而不是函數(shù)初始化語句
eg：函數(shù)聲明：function funName(){}函數(shù)初始化語句：var funName = function(){}
3，函數(shù)也可以作為參數(shù)傳遞給另一個函數(shù)跑筝，這樣必須去掉括號死讹，只傳函數(shù)名
4，對象A想調用對象B的方法曲梗，給對象A添加屬性赞警，值是對象B的方法。
5虏两，在window下定義函數(shù)愧旦，就是給window添加了屬性，函數(shù)名是屬性名定罢，函數(shù)是屬性值
6笤虫，我的函數(shù)習慣：寫在調用之前，用匿名函數(shù)賦值于變量的方式
7祖凫，包含兩個屬性：
length：希望接收參數(shù)的個數(shù)
prototype：后面會詳解琼蚯，非常重要的屬性，其值不能枚舉
8惠况，對于第4點遭庶，對象A調用對象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ù)
面向對象
對象
萬物皆對象
1，數(shù)據(jù)屬性
對象屬性具有的屬性叫數(shù)據(jù)屬性
configurable----能否通過delete刪除权埠，默認為true榨了。通過var聲明的變量函數(shù)不能刪除，通過window生命的全局屬性可以刪除攘蔽。
enumerable----能否通過for in枚舉龙屉。默認為true。
writable----能否修改屬性值满俗。默認為true转捕。
value----屬性值。默認為undefined（未初始化）漫雷。
2瓜富，設置或修改數(shù)據(jù)屬性（有該屬性就修改鳍咱，沒有就設置）
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)建一個對象嵌屎，即構造方法（通過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’);
缺點：創(chuàng)建對象恍涂，返回對象宝惰，有點啰嗦，麻煩（看著麻煩再沧，不過倒是易懂~）尼夺，為了解決這個問題，于是有了自定義構造函數(shù)創(chuàng)建對象炒瘸。
3淤堵，自定義構造函數(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’);
構造函數(shù)名首字母大寫（小寫也可以，為了好的習慣）顷扩，必須通過new關鍵字拐邪；通過構造函數(shù)創(chuàng)建的對象具有constructor屬性，該屬性指向構造函數(shù)屎即。在上例中person1.constructor== Person;//true
缺點：方法會在實例化的時候（在內存中）重新創(chuàng)建一遍庙睡，函數(shù)也是對象，所以占內存技俐；這是其一乘陪，更不能接受的是不同的函數(shù)做同樣的事，這就太浪費了雕擂》纫兀可以把方法放在構造函數(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);
構造函數(shù)是一個空函數(shù)，將所有屬性和方法添加到構造函數(shù)的prototype屬性上。這樣解決了自定義構造函數(shù)的問題」現(xiàn)在實例化對象時球切，（在內存中）方法只有一個。每個函數(shù)都具有prototype屬性绒障，該屬性指向函數(shù)的原型對象吨凑。
BOM
window對象
1，窗口大小
outerWidth和outerHeight獲得瀏覽器窗口大谢琛（除了谷歌鸵钝，別的瀏覽器在普分屏會有幾像素的偏差，但是這兩貨用處不大）
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’)，會在當前標簽頁轉到新地址璧针，但是不會生成歷史記錄嚷炉，不能返回
3，location.reload()-----重載頁面（會從緩存中加載）
location.reload(true)-------重載頁面（從服務器加載）
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é)點）抵栈，訪問、修改或設置屬性節(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為文本內容
4倦零，沒有子節(jié)點
5误续，創(chuàng)建文本節(jié)點：document.createTextNode(‘參數(shù)’)；參數(shù)為文本內容
注釋節(jié)點
1扫茅，nodeType為8
2蹋嵌，nodeName值為#comment
3，nodeValue為注釋內容
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é)點）
與類相關
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不是萬能的
獲取或設置元素樣式最常見的是selector.style.attr如div.style.color，這種不能獲取外部樣式中的樣式掉房，只能獲取行內樣式茧跋；通過這種方式修改或設置元素樣式也只能修改在行內樣式，行內樣式優(yōu)先級高于外部樣式卓囚，從而達到修改或設置的目的瘾杭。
偏移值
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申明
教程網(wǎng)絡上都是這么說的夜赵，但是這是屁話Ｃ鞴鳌！寇僧！還是做兼容吧
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----響應事件的元素（等于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é)約內存描扯。每個函數(shù)都是一個對象，對象越多趟薄，性能越低绽诚。利用事件委托一個函數(shù)可以少寫一些函數(shù)，達到減少內存使用的目的杭煎。原理是利用了事件冒泡憔购。
表單
獲取表單
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----傳給服務器的值
?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參數(shù)不可少
4卷雕，移除下拉框選項
selectbox.remove(index);//傳參表示移除第幾項
富文本
表單相應字段屬性contenteditable設置為true就可以編輯了，適用于任何元素票从。
