jQuery 選擇器

選擇器                  實例                                   選取

*                          $("*")                                 所有元素

#id                        $("#lastname")                     id="lastname" 的元素

.class                     $(".intro")                           所有 class="intro" 的元素

element                 $("p")                                 所有 <p> 元素

.class.class             $(".intro.demo")                  所有 class="intro" 且 class="demo" 的元素

:first                            $("p:first")                          第一個 <p> 元素

:last                      $("p:last")                           最后一個 <p> 元素

:even                     $("tr:even")                         所有偶數(shù) <tr> 元素

:odd                      $("tr:odd")                          所有奇數(shù) <tr> 元素

:eq(index)              $("ul li:eq(3)")                            列表中的第四個元素（index 從 0 開始）

:gt(no)                  $("ul li:gt(3)")                            列出 index 大于 3 的元素

:lt(no)                   $("ul li:lt(3)")                      列出 index 小于 3 的元素

:not(selector)         $("input:not(:empty)")          所有不為空的 input 元素

:header                  $(":header")                         所有標題元素 <h1> - <h6>

:animated                                                             所有動畫元素

:contains(text)        $(":contains('W3School')")    包含指定字符串的所有元素

:empty                  $(":empty")                         無子（元素）節(jié)點的所有元素

:hidden                  $("p:hidden")                       所有隱藏的 <p> 元素

:visible                  $("table:visible")                  所有可見的表格

s1,s2,s3                 $("th,td,.intro")                    所有帶有匹配選擇的元素

[attribute]                     $("[href]")                           所有帶有 href 屬性的元素

[attribute=value]    $("[href='#']")                      所有 href 屬性的值等于 "#" 的元素

[attribute!=value]   $("[href!='#']")                     所有 href 屬性的值不等于 "#" 的元素

[attribute$=value]   $("[href$='.jpg']")                所有 href 屬性的值包含以 ".jpg" 結(jié)尾的元素

:input                    $(":input")                           所有 <input> 元素

:text                      $(":text")                             所有 type="text" 的 <input> 元素

:password              $(":password")                     所有 type="password" 的 <input> 元素

:radio                    $(":radio")                           所有 type="radio" 的 <input> 元素

:checkbox              $(":checkbox")                     所有 type="checkbox" 的 <input> 元素

:submit                  $(":submit")                        所有 type="submit" 的 <input> 元素

:reset                     $(":reset")                           所有 type="reset" 的 <input> 元素

:button                  $(":button")                         所有 type="button" 的 <input> 元素

:image                   $(":image")                         所有 type="image" 的 <input> 元素

:file                      $(":file")                             所有 type="file" 的 <input> 元素

:enabled                $(":enabled")                       所有激活的 input 元素

:disabled                $(":disabled")                      所有禁用的 input 元素

:selected                $(":selected")                       所有被選取的 input 元素

:checked                $(":checked")                       所有被選中的 input 元素

jQuery 效果函數(shù)

方法                     描述

animate()               對被選元素應(yīng)用“自定義”的動畫

clearQueue()          對被選元素移除所有排隊的函數(shù)（仍未運行的）

delay()                  對被選元素的所有排隊函數(shù)（仍未運行）設(shè)置延遲

dequeue()                     運行被選元素的下一個排隊函數(shù)

fadeIn()                 淡入被選元素至完全不透明

fadeOut()                     淡出被選元素至完全不透明

fadeTo()                把被選元素減弱至給定的不透明度

hide()                    隱藏被選的元素

queue()                 顯示被選元素的排隊函數(shù)

show()                  顯示被選的元素

slideDown()           通過調(diào)整高度來滑動顯示被選元素

slideToggle()          對被選元素進行滑動隱藏和滑動顯示的切換

slideUp()               通過調(diào)整高度來滑動隱藏被選元素

stop()                    停止在被選元素上運行動畫

toggle()                 對被選元素進行隱藏和顯示的切換

jQuery 文檔操作方法

這些方法對于 XML 文檔和 HTML 文檔均是適用的，除了：html()。

方法                            描述

addClass()                    向匹配的元素添加指定的類名。

after()                          在匹配的元素之后插入內(nèi)容。

append()                       向匹配的元素內(nèi)部追加內(nèi)容。

appendTo()                   向匹配的元素內(nèi)部追加內(nèi)容。

attr()                                   設(shè)置或返回匹配元素的屬性和值。

before()                        在每個匹配的元素之前插入內(nèi)容。

clone()                         創(chuàng)建匹配元素集合的副本。

detach()                        從 DOM 中移除匹配元素集合。

empty()                        刪除匹配的元素集合中所有的子節(jié)點。

hasClass()                     檢查匹配的元素是否擁有指定的類。

html()                          設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容。

insertAfter()                 把匹配的元素插入到另一個指定的元素集合的后面。

insertBefore()               把匹配的元素插入到另一個指定的元素集合的前面。

prepend()                            向每個匹配的元素內(nèi)部前置內(nèi)容。

prependTo()                  向每個匹配的元素內(nèi)部前置內(nèi)容。

remove()                      移除所有匹配的元素。

removeAttr()                從所有匹配的元素中移除指定的屬性。

removeClass()               從所有匹配的元素中刪除全部或者指定的類。

replaceAll()                  用匹配的元素替換所有匹配到的元素。

replaceWith()                用新內(nèi)容替換匹配的元素。

text()                           設(shè)置或返回匹配元素的內(nèi)容。

toggleClass()                 從匹配的元素中添加或刪除一個類。

unwrap()                      移除并替換指定元素的父元素。

val()                                   設(shè)置或返回匹配元素的值。

wrap()                          把匹配的元素用指定的內(nèi)容或元素包裹起來。

wrapAll()                            把所有匹配的元素用指定的內(nèi)容或元素包裹起來。

wrapinner()                  將每一個匹配的元素的子內(nèi)容用指定的內(nèi)容或元素包裹起來。

jQuery 屬性操作方法

下面列出的這些方法獲得或設(shè)置元素的 DOM 屬性。

這些方法對于 XML 文檔和 HTML 文檔均是適用的，除了：html()。

方法                     描述

addClass()             向匹配的元素添加指定的類名。

attr()                            設(shè)置或返回匹配元素的屬性和值。

hasClass()              檢查匹配的元素是否擁有指定的類。

html()                   設(shè)置或返回匹配的元素集合中的 HTML 內(nèi)容。

removeAttr()         從所有匹配的元素中移除指定的屬性。

removeClass()        從所有匹配的元素中刪除全部或者指定的類。

toggleClass()          從匹配的元素中添加或刪除一個類。

val()                            設(shè)置或返回匹配元素的值。

jQuery CSS 操作函數(shù)

CSS 屬性             描述

css()                      設(shè)置或返回匹配元素的樣式屬性。

height()                 設(shè)置或返回匹配元素的高度。

offset()                  返回第一個匹配元素相對于文檔的位置。

offsetParent()         返回最近的定位祖先元素。

position()                     返回第一個匹配元素相對于父元素的位置。

scrollLeft()            設(shè)置或返回匹配元素相對滾動條頂部的偏移。

scrollTop()             設(shè)置或返回匹配元素相對滾動條左側(cè)的偏移。

width()                  設(shè)置或返回匹配元素的寬度。

jQuery Ajax 操作函數(shù)

jQuery 庫擁有完整的 Ajax 兼容套件。其中的函數(shù)和方法允許我們在不刷新瀏覽器的情況下從服務(wù)器加載數(shù)據(jù)。

函數(shù)                            描述

jQuery.ajax()                執(zhí)行異步 HTTP (Ajax) 請求。

.ajaxComplete()            當(dāng) Ajax 請求完成時注冊要調(diào)用的處理程序。這是一個 Ajax 事件。

.ajaxError()                  當(dāng) Ajax 請求完成且出現(xiàn)錯誤時注冊要調(diào)用的處理程序。這是一個 Ajax 事件。

.ajaxSend()                   在 Ajax 請求發(fā)送之前顯示一條消息。

jQuery.ajaxSetup()        設(shè)置將來的 Ajax 請求的默認值。

.ajaxStart()                   當(dāng)首個 Ajax 請求完成開始時注冊要調(diào)用的處理程序。這是一個 Ajax 事件。

.ajaxStop()                   當(dāng)所有 Ajax 請求完成時注冊要調(diào)用的處理程序。這是一個 Ajax 事件。

.ajaxSuccess()               當(dāng) Ajax 請求成功完成時顯示一條消息。

jQuery.get()                  使用 HTTP GET 請求從服務(wù)器加載數(shù)據(jù)。

jQuery.getJSON()         使用 HTTP GET 請求從服務(wù)器加載 JSON 編碼數(shù)據(jù)。

jQuery.getScript()         使用 HTTP GET 請求從服務(wù)器加載 JavaScript 文件，然后執(zhí)行該文件。

.load()                          從服務(wù)器加載數(shù)據(jù)，然后把返回到 HTML 放入匹配元素。

jQuery.param()             創(chuàng)建數(shù)組或?qū)ο蟮男蛄谢硎荆m合在 URL 查詢字符串或 Ajax 請求中使用。

jQuery.post()                使用 HTTP POST 請求從服務(wù)器加載數(shù)據(jù)。

.serialize()                    將表單內(nèi)容序列化為字符串。

.serializeArray()            序列化表單元素，返回 JSON 數(shù)據(jù)結(jié)構(gòu)數(shù)據(jù)。

jQuery 遍歷函數(shù)

jQuery 遍歷函數(shù)包括了用于篩選、查找和串聯(lián)元素的方法。

函數(shù)                            描述

.add()                           將元素添加到匹配元素的集合中。

.andSelf()                            把堆棧中之前的元素集添加到當(dāng)前集合中。

.children()                    獲得匹配元素集合中每個元素的所有子元素。

.closest()                      從元素本身開始，逐級向上級元素匹配，并返回最先匹配的祖先元素。

.contents()                    獲得匹配元素集合中每個元素的子元素，包括文本和注釋節(jié)點。

.each()                         對 jQuery 對象進行迭代，為每個匹配元素執(zhí)行函數(shù)。

.end()                           結(jié)束當(dāng)前鏈中最近的一次篩選操作，并將匹配元素集合返回到前一次的狀態(tài)。

.eq()                                   將匹配元素集合縮減為位于指定索引的新元素。

.filter()                         將匹配元素集合縮減為匹配選擇器或匹配函數(shù)返回值的新元素。

.find()                          獲得當(dāng)前匹配元素集合中每個元素的后代，由選擇器進行篩選。

.first()                          將匹配元素集合縮減為集合中的第一個元素。

.has()                           將匹配元素集合縮減為包含特定元素的后代的集合。

.is()                             根據(jù)選擇器檢查當(dāng)前匹配元素集合，如果存在至少一個匹配元素，則返回 true。

.last()                           將匹配元素集合縮減為集合中的最后一個元素。

.map()                          把當(dāng)前匹配集合中的每個元素傳遞給函數(shù)，產(chǎn)生包含返回值的新 jQuery 對象。

.next()                          獲得匹配元素集合中每個元素緊鄰的同輩元素。

.nextAll()                            獲得匹配元素集合中每個元素之后的所有同輩元素，由選擇器進行篩選（可選）。

.nextUntil()                  獲得每個元素之后所有的同輩元素，直到遇到匹配選擇器的元素為止。

.not()                           從匹配元素集合中刪除元素。

.offsetParent()               獲得用于定位的第一個父元素。

.parent()                       獲得當(dāng)前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。

.parents()                      獲得當(dāng)前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。

.parentsUntil()                     獲得當(dāng)前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。

.prev()                         獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。

.prevAll()                            獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。

.prevUntil()                  獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。

.siblings()                     獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。

.slice()                         將匹配元素集合縮減為指定范圍的子集。

jQuery 數(shù)據(jù)操作函數(shù)

這些方法允許我們將指定的 DOM 元素與任意數(shù)據(jù)相關(guān)聯(lián)。

函數(shù)                            描述

.clearQueue()                從隊列中刪除所有未運行的項目。

.data()                          存儲與匹配元素相關(guān)的任意數(shù)據(jù)。

jQuery.data()                存儲與指定元素相關(guān)的任意數(shù)據(jù)。

.dequeue()                    從隊列最前端移除一個隊列函數(shù)，并執(zhí)行它。

jQuery.dequeue()           從隊列最前端移除一個隊列函數(shù)，并執(zhí)行它。

jQuery.hasData()           存儲與匹配元素相關(guān)的任意數(shù)據(jù)。

.queue()                       顯示或操作匹配元素所執(zhí)行函數(shù)的隊列。

jQuery.queue()              顯示或操作匹配元素所執(zhí)行函數(shù)的隊列。

.removeData()               移除之前存放的數(shù)據(jù)。

jQuery.removeData()     移除之前存放的數(shù)據(jù)。

jQuery DOM 元素方法

函數(shù)                            描述

.get()                           從隊列中刪除所有未運行的項目。

.index()                        存儲與指定元素相關(guān)的任意數(shù)據(jù)。

.size()                          存儲與匹配元素相關(guān)的任意數(shù)據(jù)。

.toArray()                     從隊列最前端移除一個隊列函數(shù)，并執(zhí)行它。

jQuery 核心函數(shù)

函數(shù)                            描述

jQuery()                       接受一個字符串，其中包含了用于匹配元素集合的 CSS 選擇器。

jQuery.noConflict()              運行這個函數(shù)將變量 $ 的控制權(quán)讓渡給第一個實現(xiàn)它的那個庫。

jQuery 事件方法

事件方法會觸發(fā)匹配元素的事件，或?qū)⒑瘮?shù)綁定到所有匹配元素的某個事件。

觸發(fā)實例：

$("button#demo").click()

上面的例子將觸發(fā) id="demo" 的 button 元素的 click 事件。

綁定實例：

$("button#demo").click(function(){$("img").hide()})

上面的例子會在點擊 id="demo" 的按鈕時隱藏所有圖像。

方法                            描述

bind()                          向匹配元素附加一個或更多事件處理器

blur()                           觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 blur 事件

change()                       觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 change 事件

click()                          觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 click 事件

dblclick()                            觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 double click 事件

delegate()                            向匹配元素的當(dāng)前或未來的子元素附加一個或多個事件處理器

die()                                   移除所有通過 live() 函數(shù)添加的事件處理程序。

error()                          觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 error 事件

event.isDefaultPrevented()    返回 event 對象上是否調(diào)用了 event.preventDefault()。

event.pageX                  相對于文檔左邊緣的鼠標位置。

event.pageY                  相對于文檔上邊緣的鼠標位置。

event.preventDefault()   阻止事件的默認動作。

event.result                   包含由被指定事件觸發(fā)的事件處理器返回的最后一個值。

event.target                   觸發(fā)事件的 DOM 元素。

event.timeStamp           該屬性返回從 1970 年 1 月 1 日到事件發(fā)生時的毫秒數(shù)。

event.type                     描述事件的類型。

event.which                  指示按了哪個鍵或按鈕。

focus()                         觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 focus 事件

keydown()                    觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key down 事件

keypress()                     觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key press 事件

keyup()                        觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key up 事件

live()                           觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 load 事件

load()                           觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 load 事件

mousedown()                觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse down 事件

mouseenter()                 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse enter 事件

mouseleave()                觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse leave 事件

mousemove()                觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse move 事件

mouseout()                   觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse out 事件

mouseover()                 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse over 事件

mouseup()                    觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse up 事件

one()                            向匹配元素添加事件處理器。每個元素只能觸發(fā)一次該處理器。

ready()                         文檔就緒事件（當(dāng) HTML 文檔就緒可用時）

resize()                         觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 resize 事件

scroll()                         觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 scroll 事件

select()                         觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 select 事件

submit()                       觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 submit 事件

toggle()                        綁定兩個或多個事件處理器函數(shù)，當(dāng)發(fā)生輪流的 click 事件時執(zhí)行。

trigger()                       所有匹配元素的指定事件

triggerHandler()            第一個被匹配元素的指定事件

unbind()                       從匹配元素移除一個被添加的事件處理器

undelegate()                  從匹配元素移除一個被添加的事件處理器，現(xiàn)在或?qū)?/SPAN>

unload()                       觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 unload 事件

最新評論