最近重溫了《鋒利的jQuery》這本書，受益匪淺。
如果你和前端若只如初見，如果你和jQuery一見鍾情，一紙文字鋪滿了你相戀的他（她）的所有。
我把整理出來的知識點用網狀圖串聯了起來，並且每個部分分點概述，將一些類似的方法和屬性排列在一起。其實最重要的區塊就是5個部分。
根據用戶交互的基本流程，通常代碼是獲取元素，然後綁定相應的事件，接着觸發這個事件後可以選擇不同的交互方式。比如增加節點改變Dom，或者對某個元素設置動畫、亦或者進行aJax與後臺進行數據交互。
jQuery 選擇器總結（繼承CSS風格）#
常用
標籤、Id、class選擇器、羣組選擇器、後代選擇器（只有Id返回單個元素）
層次選擇器
後代選擇器
選取祖先所有的後代元素（後代包括孫、曾孫.....） A B
子元素選擇器
選取父元素的子元素（不包括子元素的子元素） A>B
後一個同輩元素
選取指定元素元素後一個同輩元素（集合） A+B 等價於next（）方法
後面的所有同輩元素
選取指定元素後面的所有同輩元素（集合） A~B 等價於nextAll（）方法
這裏將siblings（）方法與next（）和nextAll（）作對比，
siblings（）是選取匹配元素前後所有同輩元素，與位置無關，結果不包含自己本身
過濾選擇器
注意：在所有過濾選擇其中，只有 :first和 :last和 :eq（index）返回單個元素，其他都返回集合元素
基本過濾選擇器(index從0算起)
選擇首元素
:first
選擇末尾元素
:last
去除所有與給定選擇器匹配的元素
:not(selector)
索引匹配
- 索引從0開始，選擇索引是偶數的所有元素
:even //若匹配元素的子元素也匹配，也要計算在內
- 選擇索引是奇數的所有元素
:odd
- index從0開始，選擇索引等於index的元素
:eq(index)
- index從0開始，選擇索引大於index的元素
:gt(index) // gt是greater than的縮寫
- index從0開始，選擇索引小於index的元素
:lt(index)
選取所有的標題元素
例如h1,h2,h3等
:header
選取當前正在執行動畫的函數
:animated
選取當前獲取焦點的元素
:forcus
內容過濾選擇器
選取文本內容中含有text的元素
:contain(text)
選取含有選擇器所匹配的元素的元素
:has(selector)
選取含有子元素或者文本的元素
:parent //將文本元素計算在內
選取不包含子元素或者文本的元素
:empty //將文本元素計算在內
可見性過濾選擇器
選取所有不可見元素
:hidden //包括display：none 和 visibility：hidden
選取所有可見元素
:visible
屬性過濾選擇器
選取擁有此屬性的元素
[attribute]
選取屬性值爲value的元素
[attribute=value]
選取屬性值不爲value的元素
[attribute!=value]
選取屬性值以value開始的元素
[attribute^=value]
選取屬性值以value結束的元素
[attribute$=value]
選取屬性值中含value的元素
[attribute*=value]
選取屬性值等於value或者以value作爲前綴（value後跟着連字符“-”）的元素
[attribute|=value]
用屬性選擇器合併成複合選擇器
[attribute1][attribute]...
子元素過濾選擇器（index從1算起）###
選取每個父元素下的第index個子元素或者奇偶元素（index從1算起）####
//除了這三個參數，也可以寫n的表達式，比如3n+1，n從1開始
:nth-child(index,odd,even)
選取每個父元素下的第一個子元素
:first-child
選取每個父元素下的最後一個子元素
:last-child
這裏與基本過濾選擇器的：first和：last做對比，：first和：last只返回單個元素，且不是針對子元素。
選取某個元素是它父元素中的唯一的子元素
:only-child
表單對象屬性過濾選擇器
選取所有可用元素
：enabled
選取所有不可用元素
：disabled
選取所有被選中的元素（單選框、複選框）
：checked
選取所有被選中的選項元素（下拉列表中）
：selected
表單對象選擇器
選取所有的input、textarea、select和button元素
匹配表單內上述4種元素
$.('#form1:input')
只匹配input元素
$.('#form1 input')
匹配單行文本框
:text
匹配所有密碼框
:password
匹配所有的單選框
:radio
匹配所有的多選框
:checkbox
匹配所有的提交按鈕
:submit
匹配所有的圖像按鈕
:image
匹配所有的重置按鈕
:rest
匹配所有的按鈕
:button
匹配所有的上傳域
:file
匹配所有不可見元素
:hidden
jQuery事件總結
加載Dom事件
$(window).load() 或 $(document).ready()
事件綁定
常用綁定方法 bind(type [,data] , fn )
//type類型有blue、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress和error等
簡寫的事件
比如click，mouseover,和mouseout
合成事件
hover() 事件
hover()事件是mouseenter和mouseleave的合成事件
hover()和mouseover、mouseout有區別。後者光標進入綁定元素的子元素時，會觸發mouseout
toggle(fn1,fn2...)
用於模擬鼠標連續單擊事件第一次觸發fn1，第二次觸發fn2。依次觸發到最後一個，隨後重複對這幾個函數輪番調用
事件冒泡--阻止事件冒泡--事件對象
jQuery中不支持事件捕獲，需要事件捕獲應用js原生方法
阻止事件冒泡的方法
bind(type,function(event)) {} //事件對象
bind方法中傳入event對象並使用event.stopPropagation()
注意：如果你使用jQuery1.7版本或者更新，請使用on()方法，jQuery對綁定進行了封裝，替代了原來的delegate()、live()、bind()方法
阻止默認行爲
event.preventDefault()
兩者都阻止
在事件處理函數中return false即可
事件對象的屬性
獲取事件的類型
event.type
阻止默認的事件行爲
event.preventDefault()
阻止事件的冒泡行爲
event.stopPropagation
獲取觸發事件的元素
event.target
獲取光標相對於頁面的x座標和y座標
event.pageX 和 event.pageY
獲取鼠標單擊事件（click)中鼠標的左、中、右鍵
event.which分別返回1、2、3
移除事件
$.unbind( [type] [fn])
注意：如果你使用jQuery1.7版本或者更新，off()替代unbind()方法
模擬操作
有時需要模擬用戶操作來達到單擊效果，例如在用戶進入頁面後，就觸發click事件，而不需要用戶主動單擊。
$.trigger(type，[data]) //觸發綁定的事件，默認執行瀏覽器操作
$.triggerHandler() // 觸發綁定的事件，而不執行瀏覽器默認操作
jQuery-Dom總結
基本操作--查找、創建、插入、刪除、複製、替換、包裹（7種操作）##
查找元素節點
jQuery選擇器
查找屬性節點
$.attr()
創建元素節點
選擇器的形式
$("html")
創建文本節點 (與元素節點一起創建)
$("html") //將文本包含在html中
創建屬性節點(與元素節點一起創建)
$("html") //爲元素添加屬性
追加元素
在每個匹配元素的內部追加內容
$.append() 或$.appendTo()
在每個匹配元素的內部前置內容
$.prepend() 或$.prependTo()
在每個匹配元素之後插入內容
$.after() 或$.insertAfter()
在每個匹配元素之前插入內容
$.before() 或$.insertBefore()
刪除節點有三個方法
remove()、detach()、empty()
empty()不是真正意義上的刪除，只是清空節點內部內容
remove()、detach()
相同點：清除後會返回該節點的引用，即可以繼續插入該節點到Dom
不同點：detach()會保留節點綁定的事件、附加的數據
複製節點
$.clone（[true]） //傳入參數true可選，表示同時複製節點的綁定事件
替換節點
$.replaceWith() 和$.replaceAll() //前者A用B來替換 後者A替換所有的B
將匹配元素進行單獨的包裹
$.wrap() //A用B來包裹
將匹配元素用一個元素包裹
$.wrapAll 和 $.wrapInner
屬性操作--獲取與設置屬性、刪除屬性
獲取和設置屬性
$.attr() 和 $.attr({ })
刪除屬性
$.removeAttr()
樣式操作--獲取與設置樣式、添加樣式、刪除樣式、切換樣式、判斷是否含有某個樣式
獲取與設置樣式
其實就是用屬性操作中的$.attr()方法獲或設置class的值
追加樣式
$.addClass() //設置是替換，追加是保留原來的class基礎上增加
移除樣式
$.removeClass([class1] [class2]..)
//可以刪除多個class，參數之間空格。無參數表示刪除所有的class
切換樣式
$.toggleClass([class1] [class2].. ) //原來有傳入的樣式名，則刪除；無則添加
判斷元素是否有某個樣式
$.hasClass() //有則返回true 無則返回false
文本操作--設置與獲取HTML、文本和值
設置與獲取HTML
$.html()
文本
$.text() //通常用於內容標籤
值
$.val() //通常用於文本框 、下拉列表、單選框、多選框等；如果元素爲多選，則返回一個包含所有值得數組
遍歷訪問節點（常用於事件處理中）##
獲取匹配元素的所有子元素集合
$.children() //與$.parent()相反
這裏還有一個$.parents()的方法，獲得每個匹配元素的祖先元素，與parent()不同，獲得第一個父節點時並沒有停止查找，而是繼續查找最後返回多個節點
另一個$.closet()與$.parent()類似，不同的是closet()返回匹配元素的最近的一個父節點
取得匹配元素後面緊鄰的同輩元素
$.next() 後面緊鄰所有 $.nextAll()
取得匹配元素前面緊鄰的同輩元素
$.prev() 前面緊鄰所有 $.prevAll()
取得匹配元素前後所有的同輩元素
$.siblings()
在當前選中元素中找到符合條件的後代，返回的是子元素###
$.find()
在當前選中元素中找到符合條件的當前元素集合，返回的是當前元素
$.filter()
對 jQuery 對象進行迭代，爲每個匹配元素執行函數
$.each(function(){})
...省略的許多方法與jQuery選擇器類似
CSS-DOM操作
獲取或設置元素的樣式屬性
$.css()
獲取或設置元素的寬度或高度
$. width(value)和$.height(value)// $. css("width")也可以獲取元素寬度，但與元素的樣式設置有關，可能獲取到爲auto；
而$.width()獲取的是元素的實際寬度
關於元素定位常用的方法
獲取元素在當前視窗的相對偏移
$.offset().dir //dir 可以爲top right bottom left
獲取元素相對於最近一個position樣式屬性設置爲relative或者absolute父節點的相對偏移
$.position().dir //dir 可以爲top right bottom left
獲取元素的滾動條（假如有的話，通常是那些設置了overflow：auto的元素，而內容過長）距離頂端或左側的距離
$.scrollTop()
$.scrollLeft() //通常上下佈局的頁面document一般都會有滾動條，這時候使用 $(document).scrollTop()可以很方便獲取滾動條裏頁面頂部的距離
jQuery動畫總結
基本動畫 （速度參數 slow normal fast 自定義毫秒數）##
show()和hide() //顯示隱藏 兩者組合 toggle()
fadeIn() 和 fadeOut() //淡入淡出兩者組合 fadeToggle()
slideDown() 和slideUp //向下滑動顯示 向上滑動隱藏兩者組合 slideToggle()
自定義動畫
注意: css()方法並不會加入動畫隊列中，而會在動畫開始就立即執行，要在動畫執行完成後改變css樣式，可以將css()寫入回調函數中
animate 同時進行的動畫 只需傳入多個鍵值對
animate 進行分步動畫 只需按jQuery鏈式寫法就好
animate({ },speed,callback) //實現累加累減動畫只需在px前用+=或-=
停止正在進行的動畫
stop([clearQueue],[gotoEnd]) //默認情況下 clearQueue 接gotoEnd都是false
要點：
stop() 停止當前正在進行的動畫(只阻止鏈式動畫隊列中當前運行的那一步動畫)
-
stop(true，false) 停止當前的動畫隊列(正在進行+未進行，即鏈式動畫隊列)
使用情況：比如用戶將光標移入某個元素，動畫沒結束就移出了。
-
stop(true，true) 停止當前的動畫隊列，並讓動畫直接到達結束狀態
使用情況： 通常用於後一個動畫需要基於前一個動畫的末狀態的情況
判斷元素是否處於動畫狀態（避免動畫累計導致和用戶的行爲不一致）##
常用方法：
if(! $(element).is(":animated")){
//如果當前沒有進行動畫，則添加新動畫
}
延遲動畫的方法
delay(毫秒)
jQuery-ajax
說明：ajax僅做簡要總結，更多可參考jQuery中文參考文檔,包含了所有新版API或棄用API的說明。
jQuery.ajax([setting])方法
1.5.0以前版本
返回的是XHR對象
- type：類型， "POST"或“GET”，默認爲“Get”
- url：發送請求的地址
- data：是一個對象，連同請求發送到服務器的數據
- dataType： 預期服務器返回的數據類型。如果不指定，jQuery將自動根據HTTP包MIME信息來只能判斷，一般採用j- son格式，可以設置爲"json"
- success：是一個方法，請求成功後的回調函數。傳入返回後的數據，以及包含成功代碼的字符串
- error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象
1.5.0及更新版本
jQuery使用原生promise對象封裝了一個deffered對象，因此你可以新版可以寫成鏈式回調函數
。
$.ajax("test.html")
.done(function(){ alert("yes"); })
.fail(function(){ alert("no"); });
done()相當於success方法，fail()相當於error方法。採用鏈式寫法以後，代碼的可讀性大大提高。