JQuery總結一：選擇器歸納

1、基本選擇器

選擇符      匹配元素

*           所有元素

id          給定ID的元素

element     給定類型的所有元素

.class      給定類的所有元素

a,b         與a或b匹配的元素

a b         a的后代元素中與b匹配的元素

a>b         a的直接子元素中與b匹配的元素

a+b         a的直接同輩元素中與b匹配的元素

a~b      a的同輩元素中與b匹配的元素

2、位置選擇器

選擇符                  匹配元素

a b:nth-child(index)    a的子元素中，第index個與b匹配的元素（從1開始計數）

a b:nth-child(even)     a的子元素中，第偶數個與b匹配的元素（從1開始計數）

a b:nth-child(odd)      a的子元素中，第奇數個與b匹配的元素（從1開始計數）

a b:nth-child(2n+2)     a的子元素中，第2n+2個與b匹配的元素（從1開始計數）,n為自然數

a b:nth-last-child()    同:nth-child()，從最后一個元素開始計數

a b:first-child         a的子元素中，第1個與b匹配的元素

a b:last-child          a的子元素中，最后一個個與b匹配的元素

:only-child             作為其父元素唯一一個子元素的元素

a b:nth-of-type()       同:nth-child()，只計同類元素

a b:nth-last-of-type()  同:nth-last-child()，只計同類元素

a b:first-of-type()     同:first-child()，只計同類元素

a b:last-of-type()      同:last-child()，只計同類元素

a b:only-of-type()      沒有同名元素的元素

3、屬性選擇器

選擇符             匹配元素

:input             所有<input>、<textarea>、<select>和<button>元素

:text              type=”text”的<input>元素

:password          type=”password”的<input>元素

:file              type=”file”的<input>元素

:radio             type=”radio”的<input>元素

:checkbox          type=”checkbox”的<input>元素

:submit            type=”submit”的<input>元素

:image             type=”image”的<input>元素

:reset             type=”reset”的<input>元素

:button            type=”button”的<input>元素

:enabled           啟用的表單元素

:disabled          禁用的表單元素

:checked           選中的復選框和單選按鈕

:selected          選中的<option>元素

5、過濾選擇器

選擇符                   匹配元素

:root                   文檔根元素

:header                 標題元素，h1~h6

:animated               動畫正在運行的元素

:contains(text)         包含文本text的元素

a:empty                 不包含子節點的a元素

a:has(b)                至少包含一個b元素匹配的a元素(返回父元素a而非子元素b)

:parent                 與:empty相反，返回包含子節點的元素

:hidden                 隱藏的元素，包括<input type="hidden">

:visible                可見元素

:focus                  獲得焦點的元素

:lang(language)         給定語言代碼的元素

:target                 URI標識符指向的目標元素，具體見：:target用法

6、用于結果集中的選擇器

選擇符          匹配元素

:first          結果集中的第一個元素，對應方法為first(),如$("a b:first")<==>$("a b").first()

:last           結果集中的最后一個元素，對應方法為last(),如$("a b:last")<==>$("a b").last()

:not(a)         結果集中不與a匹配的元素，對應方法為not(),如$("a b:not(c)")<==>$("a b").not(c)

:even           結果集中索引是偶數的元素(從0開始),如$("a b:even")

:odd            結果集中索引是奇數的元素(從0開始),如$("a b:odd")

:eq(index)      結果集中索引是index的元素(從0開始),對應方法是eq(index),如$("a b:eq(2)")<==>$("a b").eq(2)

:gt(index)      結果集中索引大于index的元素(從0開始),如$("a b:gt(2)")

:lt(index)      結果集中索引小于index的元素(從0開始),如$("a b:lt(2)")

JQuery總結二：DOM遍歷和事件處理

1、篩選元素

方法                  返回的元素

.filter(selector)     與selector匹配的元素

.filter(callbaxk)     callback中返回true的元素

.eq(index)            從0開始計數的第index個選中元素

.first()              選中元素中的第一個元素

.last()               選中元素的最后一個元素

.slice(start[,end])   從0開始計數的給定范圍內的選中元素

.not(selector)        與selector不匹配的元素

.has(selector)        與selector匹配的的后代元素

2、后代元素

方法                    返回的元素

.find(selector)         與selector匹配的后代元素

.contents()             子節點（包括文本節點）

.children([selector])   子節點，可傳入selector進行篩選

3、同輩元素

方法                                返回的元素

.next([selector])                   每個選中元素緊鄰的下一個元素，可傳入selector進行篩選

.nextAll([selector])                每個選中元素后的所有同輩元素，可傳入selector進行篩選

.nextUntil([selector],[filter])     每個選中元素之后、直至但不包含第一個和selector匹配的元素，可傳入filter進行篩選

.prev([selector])                   每個選中元素緊鄰的上一個元素，可傳入selector進行篩選

.prevAll([selector])                每個選中元素前的所有同輩元素，可傳入selector進行篩選

.prevUntil([selector],[filter])      每個選中元素之前、直至但不包含第一個和selector匹配的元素，可傳入filter進行篩選

.siblings([selector])                所有同輩元素，可傳入selector進行篩選

4、祖先元素

方法                                    返回的元素

.parent([selector])                     每個選中元素的父元素，可傳入selector進行篩選

.parents([selector])                    每個選中元素的所有祖先元素，可傳入selector進行篩選

.parentsUntil([selector],[filter])      每個選中元素的所有祖先元素、直至但不包含第一個和selector匹配的元素，可傳入filter進行篩選

.closest(selector)                      與selector匹配的第一個元素，從元素自身開始沿DOM數向上搜索祖先元素

.offsetParent()                         選中元素的第一個被定為的父元素(relative或absolute)

5、集合操作

方法                   說明

.add([selector])      將與selector匹配的元素添加原對象集合中

.addBack()            選中的元素加上JQuery內部棧中之前選中的元素

.end()                內部JQuery棧中之前選中的元素

.map(callback)        對每個選中調用回調函數callback之后的結果

.pushStack()          指定的元素

6、操作選中的元素

方法                   說明

.is(selector)          確定匹配的元素中是否有傳入的與selector匹配的元素

.index()               取得匹配元素相對其同輩元素的索引

.index(element)        取得匹配元素中與指定元素對象的DOM節點的索引

$.contains(a,b)     確定DOM節點a是否包含DOM節點b

.each(callback)        迭代匹配元素，對每個元素執行callback

.length                取得匹配元素的數量

.get()                 取得與匹配元素對應的DOM節點列表

.get(index)            取得匹配元素中與指定索引對應的DOM節點

.toArray()             取得與匹配元素對應的DOM節點列表

7.事件綁定

.ready(handler)                     DOM和CSS完全加載后之間handler

.on(type,[selector],[data],handler) 綁定type事件，并指定事件處理程序handler;如果指定selector則執行事件委托

.on(events,[selector],[data])       根據events對象的事件綁定多個事件處理程序

.off(type,[selector],handler)       解除on給元素綁定的事件處理程序

.bind(type,[data],handler)          綁定type事件，并指定事件處理程序handler

.one(type,[data],handler)           綁定type事件，并指定事件處理程序handler,handler被調用后立即解除綁定

.unbind([type],[handler])           解除bind給元素綁定的指定事件處理程序(不指定則解除所有指定)

.delegate(selector,type,[data],handler) 給與selector匹配的元素綁定type事件，并指定事件處理程序handler

.delegate(selector,handlers)        給與selector匹配的元素綁定type事件，并指定事件處理程序handlers

.undelegate(selector,type,[handler])解除delegate給元素綁定的指定事件處理程序

8.其它方法

方法                            說明

.trigger(type,[data])           觸發元素上的事件并執行事件的默認操作

.triggerHandler(type,[data])    觸發元素上的事件，但不執行事件的默認操作

$.proxy(fn,context)          創建一個新的在指定上下文中執行的函數。

JQuery總結三：DOM完全操作和動畫

1. 特性和屬性

方法                 說明

.attr(key)           取得特性key的值

.attr(key，value)    設置特性key的值為value

.attr(key，fn)       將fn的返回值作為key的值

.attr(obj)           根據傳入的鍵值對象參數設置特性的值

.removeAttr(key)     刪除特性key的值

.prop(key)           取得屬性key的值

.prop(key，value)    設置屬性key的值為value

.prop(key，fn)       將fn的返回值作為key的值

.prop(obj)           根據傳入的鍵值對象參數設置屬性的值

.removeProp(key)     刪除屬性key的值

.addClass(class)     為匹配元素添加傳入的類

.removeClass(class)  為匹配元素刪除傳入的類

.toggleClass(class)  對于匹配元素，如果存在類則刪除，不存在則添加

.hasClass(class)     匹配元素中至少一個包含傳入的類則返回true

.val()               獲取第一個匹配元素的value屬性值

.val(value)          設置每個匹配元素的value屬性

2. 內容操作

方法            說明

.html()         獲取第一個匹配元素的HTML內容

.html(value)    將每個匹配元素的HTML內容設置為value

.text()         獲取所有匹配元素的文本，以字符串返回

.text(value)    將每個匹配元素的文本設置為value

3. CSS和尺寸相關

方法                   說明

.css(key)            取得屬性key的值

.css(key,value)      設置key的值為value

.css(obj)            根據傳入的鍵值參數設置CSS的屬性值

offset()             返回第一個匹配元素相對于視口的坐標（單位是像素）

.position()          返回第一個匹配元素相對.offsetParent()返回元素的坐標（單位是像素）

.scrollTop()         返回第一個匹配元素的垂直滾動位置

.scrollTop(value)    設置每個匹配元素的垂直滾動位置

.scrollLeft()        返回第一個匹配元素的水平滾動位置

.scrollLeft(value)   設置每個匹配元素的水平滾動位置

.height()            返回第一個匹配元素的高度

.height(value)       設置每個元素的高度

.width()             返回第一個匹配元素的度

.width(value)        設置每個元素的寬度

.innerHeight()       返回第一個匹配元素的高度（包含內邊距，不包含邊框）

.innerWidth()        返回第一個匹配元素的寬度（包含內邊距，不包含邊框）

.outerHeight([includeMargin])   返回第一個匹配元素的高度（包含內邊距和邊框，bool為true，則包含外邊距，反之不包含）

.outerWidth([includeMargin])    返回第一個匹配元素寬度（包含內邊距和邊框，bool為true，則包含外邊距，反之不包含）

4. DOM插入

方法                           說明

.append(content)    在每個匹配元素內部的末尾插入content

.appendTo(selector) 將匹配元素插入到與selector匹配的元素的內部的末尾

.prepend(content)   在每個匹配元素內部的開頭插入content

.prependTo(selector)    將匹配元素插入到與selector匹配的元素的內部的開頭

.after(content) 在每個匹配元素外部的后面插入content

.insertAfter(selector)  將匹配元素插入到與selector匹配的元素的外部的后面

.before(content)    在每個匹配元素部的前面插入content

.insertBefore(selector) 將匹配元素插入到與selector匹配的元素的外部的前面

.wrap(content)  匹配的每個元素包含在content中

.wrapAll(content)   匹配的每個元素作為一個整體包含在content中

.wrapInner(content) 匹配的每個元素的內部內容包含在content中

.unwrap()   刪除元素的父元素（反操作）

5. 替換、刪除和復制

方法                    說明

.replaceWith(content)   將匹配的元素替換為content

.replaceAll(selector)   將與selector匹配的元素替換為匹配的元素

.empty()                刪除每個元素的子節點

.remove([selector])     從DOM中刪除節點，selector可以用于篩選

.detach([selector])     從DOM中刪除節點，selector可以用于篩選，并保留JQuery給元素添加的數據

.clone([withHandlers],[deepWithHandlers])   返回匹配元素的副本，也可以復制事件處理程序

6.數據

方法                          說明

.data(key)                    獲取第一個匹配元素的key鍵對應的數據

.data(key,value)              設置每個元素關聯的key對應的數據值為value

.removeData(key)              刪除每個元素與key鍵關聯的數據

.show()                       顯示匹配元素

.show(speed,[callback])       通過高度、寬度和透明度動畫顯示匹配元素

.hide() 隱藏匹配元素

.hide(speed,[callback])       通過高度、寬度和透明度動畫隱藏匹配元素

.toggle([speed],[callback])   顯示或隱藏匹配元素

.slideDown([speed],[callback])  以滑入方式顯示匹配元素

.slideUp([speed],[callback])    以滑出方式隱藏匹配元素

.slideToggle([speed],[callback])以滑動方式顯示或隱藏匹配元素

.fadeIn([speed],[callback])     以淡入方式顯示匹配元素

.fadeOut([speed],[callback])    以淡出方式隱藏匹配元素

.fadeToggle([speed],[callback]) 以淡入淡出方式顯示或隱藏匹配元素

.fadeTo(speed,opacity,[callback])調整匹配元素的透明度

7. 自定義動畫

方法                                        說明

.animate(attrs,[speed],[easing],[callback]) 針對指定的css屬性自定義動畫

.animate(attrs,options)                     .animate的底層接口，支持隊列控制

8. 隊列操作