
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") |
全部偶數 <tr> 元素 |
:odd |
$("tr:odd") |
全部奇數 <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") |
無子(元素)節點的全部元素 |
: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" 結尾的元素 |
|
|
|
: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 事件方法
方法 |
描述 |
bind() |
向匹配元素附加一個或更多事件處理器 |
blur() |
觸發、或將函數綁定到指定元素的 blur 事件 |
change() |
觸發、或將函數綁定到指定元素的 change 事件 |
click() |
觸發、或將函數綁定到指定元素的 click 事件 |
dblclick() |
觸發、或將函數綁定到指定元素的 double click 事件 |
delegate() |
向匹配元素的當前或將來的子元素附加一個或多個事件處理器 |
die() |
移除全部經過 live() 函數添加的事件處理程序。 |
error() |
觸發、或將函數綁定到指定元素的 error 事件 |
event.isDefaultPrevented() |
返回 event 對象上是否調用了 event.preventDefault()。 |
event.pageX |
相對於文檔左邊緣的鼠標位置。 |
event.pageY |
相對於文檔上邊緣的鼠標位置。 |
event.preventDefault() |
阻止事件的默認動做。 |
event.result |
包含由被指定事件觸發的事件處理器返回的最後一個值。 |
event.target |
觸發該事件的 DOM 元素。 |
event.timeStamp |
該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 |
event.type |
描述事件的類型。 |
event.which |
指示按了哪一個鍵或按鈕。 |
focus() |
觸發、或將函數綁定到指定元素的 focus 事件 |
keydown() |
觸發、或將函數綁定到指定元素的 key down 事件 |
keypress() |
觸發、或將函數綁定到指定元素的 key press 事件 |
keyup() |
觸發、或將函數綁定到指定元素的 key up 事件 |
live() |
爲當前或將來的匹配元素添加一個或多個事件處理器 |
load() |
觸發、或將函數綁定到指定元素的 load 事件 |
mousedown() |
觸發、或將函數綁定到指定元素的 mouse down 事件 |
mouseenter() |
觸發、或將函數綁定到指定元素的 mouse enter 事件 |
mouseleave() |
觸發、或將函數綁定到指定元素的 mouse leave 事件 |
mousemove() |
觸發、或將函數綁定到指定元素的 mouse move 事件 |
mouseout() |
觸發、或將函數綁定到指定元素的 mouse out 事件 |
mouseover() |
觸發、或將函數綁定到指定元素的 mouse over 事件 |
mouseup() |
觸發、或將函數綁定到指定元素的 mouse up 事件 |
one() |
向匹配元素添加事件處理器。每一個元素只能觸發一次該處理器。 |
ready() |
文檔就緒事件(當 HTML 文檔就緒可用時) |
resize() |
觸發、或將函數綁定到指定元素的 resize 事件 |
scroll() |
觸發、或將函數綁定到指定元素的 scroll 事件 |
select() |
觸發、或將函數綁定到指定元素的 select 事件 |
submit() |
觸發、或將函數綁定到指定元素的 submit 事件 |
toggle() |
綁定兩個或多個事件處理器函數,當發生輪流的 click 事件時執行。 |
trigger() |
全部匹配元素的指定事件 |
triggerHandler() |
第一個被匹配元素的指定事件 |
unbind() |
從匹配元素移除一個被添加的事件處理器 |
undelegate() |
從匹配元素移除一個被添加的事件處理器,如今或未來 |
unload() |
觸發、或將函數綁定到指定元素的 unload 事件 |
jQuery 效果函數
方法 |
描述 |
animate() |
對被選元素應用「自定義」的動畫 |
clearQueue() |
對被選元素移除全部排隊的函數(仍未運行的) |
delay() |
對被選元素的全部排隊函數(仍未運行)設置延遲 |
dequeue() |
運行被選元素的下一個排隊函數 |
fadeIn() |
逐漸改變被選元素的不透明度,從隱藏到可見 |
fadeOut() |
逐漸改變被選元素的不透明度,從可見到隱藏 |
fadeTo() |
把被選元素逐漸改變至給定的不透明度 |
hide() |
隱藏被選的元素 |
queue() |
顯示被選元素的排隊函數 |
show() |
顯示被選的元素 |
slideDown() |
經過調整高度來滑動顯示被選元素 |
slideToggle() |
對被選元素進行滑動隱藏和滑動顯示的切換 |
slideUp() |
經過調整高度來滑動隱藏被選元素 |
stop() |
中止在被選元素上運行動畫 |
toggle() |
對被選元素進行隱藏和顯示的切換 |
jQuery 文檔操做方法
這些方法對於 XML 文檔和 HTML 文檔均是適用的,除了:html()。css
方法 |
描述 |
addClass() |
向匹配的元素添加指定的類名。 |
after() |
在匹配的元素以後插入內容。 |
append() |
向匹配元素集合中的每一個元素結尾插入由參數指定的內容。 |
appendTo() |
向目標結尾插入匹配元素集合中的每一個元素。 |
attr() |
設置或返回匹配元素的屬性和值。 |
before() |
在每一個匹配的元素以前插入內容。 |
clone() |
建立匹配元素集合的副本。 |
detach() |
從 DOM 中移除匹配元素集合。 |
empty() |
刪除匹配的元素集合中全部的子節點。 |
hasClass() |
檢查匹配的元素是否擁有指定的類。 |
html() |
設置或返回匹配的元素集合中的 HTML 內容。 |
insertAfter() |
把匹配的元素插入到另外一個指定的元素集合的後面。 |
insertBefore() |
把匹配的元素插入到另外一個指定的元素集合的前面。 |
prepend() |
向匹配元素集合中的每一個元素開頭插入由參數指定的內容。 |
prependTo() |
向目標開頭插入匹配元素集合中的每一個元素。 |
remove() |
移除全部匹配的元素。 |
removeAttr() |
從全部匹配的元素中移除指定的屬性。 |
removeClass() |
從全部匹配的元素中刪除所有或者指定的類。 |
replaceAll() |
用匹配的元素替換全部匹配到的元素。 |
replaceWith() |
用新內容替換匹配的元素。 |
text() |
設置或返回匹配元素的內容。 |
toggleClass() |
從匹配的元素中添加或刪除一個類。 |
unwrap() |
移除並替換指定元素的父元素。 |
val() |
設置或返回匹配元素的值。 |
wrap() |
把匹配的元素用指定的內容或元素包裹起來。 |
wrapAll() |
把全部匹配的元素用指定的內容或元素包裹起來。 |
wrapinner() |
將每個匹配的元素的子內容用指定的內容或元素包裹起來。 |
jQuery 屬性操做方法
下面列出的這些方法得到或設置元素的 DOM 屬性。html
這些方法對於 XML 文檔和 HTML 文檔均是適用的,除了:html()。前端
方法 |
描述 |
addClass() |
向匹配的元素添加指定的類名。 |
attr() |
設置或返回匹配元素的屬性和值。 |
hasClass() |
檢查匹配的元素是否擁有指定的類。 |
html() |
設置或返回匹配的元素集合中的 HTML 內容。 |
removeAttr() |
從全部匹配的元素中移除指定的屬性。 |
removeClass() |
從全部匹配的元素中刪除所有或者指定的類。 |
toggleClass() |
從匹配的元素中添加或刪除一個類。 |
val() |
設置或返回匹配元素的值。 |
jQuery CSS 操做函數
下面列出的這些方法設置或返回元素的 CSS 相關屬性。jquery
CSS 屬性 |
描述 |
css() |
設置或返回匹配元素的樣式屬性。 |
height() |
設置或返回匹配元素的高度。 |
offset() |
返回第一個匹配元素相對於文檔的位置。 |
offsetParent() |
返回最近的定位祖先元素。 |
position() |
返回第一個匹配元素相對於父元素的位置。 |
scrollLeft() |
設置或返回匹配元素相對滾動條左側的偏移。 |
scrollTop() |
設置或返回匹配元素相對滾動條頂部的偏移。 |
width() |
設置或返回匹配元素的寬度。 |
jQuery Ajax 操做函數
jQuery 庫擁有完整的 Ajax 兼容套件。其中的函數和方法容許咱們在不刷新瀏覽器的狀況下從服務器加載數據。ajax
函數 |
描述 |
jQuery.ajax() |
執行異步 HTTP (Ajax) 請求。 |
.ajaxComplete() |
當 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。 |
.ajaxError() |
當 Ajax 請求完成且出現錯誤時註冊要調用的處理程序。這是一個 Ajax 事件。 |
.ajaxSend() |
在 Ajax 請求發送以前顯示一條消息。 |
jQuery.ajaxSetup() |
設置未來的 Ajax 請求的默認值。 |
.ajaxStart() |
當首個 Ajax 請求完成開始時註冊要調用的處理程序。這是一個 Ajax 事件。 |
.ajaxStop() |
當全部 Ajax 請求完成時註冊要調用的處理程序。這是一個 Ajax 事件。 |
.ajaxSuccess() |
當 Ajax 請求成功完成時顯示一條消息。 |
jQuery.get() |
使用 HTTP GET 請求從服務器加載數據。 |
jQuery.getJSON() |
使用 HTTP GET 請求從服務器加載 JSON 編碼數據。 |
jQuery.getScript() |
使用 HTTP GET 請求從服務器加載 JavaScript 文件,而後執行該文件。 |
.load() |
從服務器加載數據,而後把返回到 HTML 放入匹配元素。 |
jQuery.param() |
建立數組或對象的序列化表示,適合在 URL 查詢字符串或 Ajax 請求中使用。 |
jQuery.post() |
使用 HTTP POST 請求從服務器加載數據。 |
.serialize() |
將表單內容序列化爲字符串。 |
.serializeArray() |
序列化表單元素,返回 JSON 數據結構數據。 |
jQuery 遍歷函數
jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法。api
函數 |
描述 |
.add() |
將元素添加到匹配元素的集合中。 |
.andSelf() |
把堆棧中以前的元素集添加到當前集合中。 |
.children() |
得到匹配元素集合中每一個元素的全部子元素。 |
.closest() |
從元素自己開始,逐級向上級元素匹配,並返回最早匹配的祖先元素。 |
.contents() |
得到匹配元素集合中每一個元素的子元素,包括文本和註釋節點。 |
.each() |
對 jQuery 對象進行迭代,爲每一個匹配元素執行函數。 |
.end() |
結束當前鏈中最近的一次篩選操做,並將匹配元素集合返回到前一次的狀態。 |
.eq() |
將匹配元素集合縮減爲位於指定索引的新元素。 |
.filter() |
將匹配元素集合縮減爲匹配選擇器或匹配函數返回值的新元素。 |
.find() |
得到當前匹配元素集合中每一個元素的後代,由選擇器進行篩選。 |
.first() |
將匹配元素集合縮減爲集合中的第一個元素。 |
.has() |
將匹配元素集合縮減爲包含特定元素的後代的集合。 |
.is() |
根據選擇器檢查當前匹配元素集合,若是存在至少一個匹配元素,則返回 true。 |
.last() |
將匹配元素集合縮減爲集合中的最後一個元素。 |
.map() |
把當前匹配集合中的每一個元素傳遞給函數,產生包含返回值的新 jQuery 對象。 |
.next() |
得到匹配元素集合中每一個元素緊鄰的同輩元素。 |
.nextAll()] |
得到匹配元素集合中每一個元素以後的全部同輩元素,由選擇器進行篩選(可選)。 |
.nextUntil() |
得到每一個元素以後全部的同輩元素,直到遇到匹配選擇器的元素爲止。 |
.not() |
從匹配元素集合中刪除元素。 |
.offsetParent() |
得到用於定位的第一個父元素。 |
.parent() |
得到當前匹配元素集合中每一個元素的父元素,由選擇器篩選(可選)。 |
.parents() |
得到當前匹配元素集合中每一個元素的祖先元素,由選擇器篩選(可選)。 |
.parentsUntil() |
得到當前匹配元素集合中每一個元素的祖先元素,直到遇到匹配選擇器的元素爲止。 |
.prev() |
得到匹配元素集合中每一個元素緊鄰的前一個同輩元素,由選擇器篩選(可選)。 |
.prevAll() |
得到匹配元素集合中每一個元素以前的全部同輩元素,由選擇器進行篩選(可選)。 |
.prevUntil() |
得到每一個元素以前全部的同輩元素,直到遇到匹配選擇器的元素爲止。 |
.siblings() |
得到匹配元素集合中全部元素的同輩元素,由選擇器篩選(可選)。 |
.slice() |
將匹配元素集合縮減爲指定範圍的子集。 |
jQuery 數據操做函數
這些方法容許咱們將指定的 DOM 元素與任意數據相關聯。數組
函數 |
描述 |
.clearQueue() |
從隊列中刪除全部未運行的項目。 |
.data() |
存儲與匹配元素相關的任意數據。 |
jQuery.data() |
存儲與指定元素相關的任意數據。 |
.dequeue() |
從隊列最前端移除一個隊列函數,並執行它。 |
jQuery.dequeue() |
從隊列最前端移除一個隊列函數,並執行它。 |
jQuery.hasData() |
存儲與匹配元素相關的任意數據。 |
.queue() |
顯示或操做匹配元素所執行函數的隊列。 |
jQuery.queue() |
顯示或操做匹配元素所執行函數的隊列。 |
.removeData() |
移除以前存放的數據。 |
jQuery.removeData() |
移除以前存放的數據。 |
jQuery DOM 元素方法
函數 |
描述 |
.get() |
得到由選擇器指定的 DOM 元素。 |
.index() |
返回指定元素相對於其餘指定元素的 index 位置。 |
.size() |
返回被 jQuery 選擇器匹配的元素的數量。 |
.toArray() |
以數組的形式返回 jQuery 選擇器匹配的元素。 |
jQuery 核心函數
函數 |
描述 |
jQuery() |
接受一個字符串,其中包含了用於匹配元素集合的 CSS 選擇器。 |
jQuery.noConflict() |
運行這個函數將變量 $ 的控制權讓渡給第一個實現它的那個庫。 |
jQuery 屬性
下面列出的這些方法設置或返回元素的 CSS 相關屬性。瀏覽器
屬性 |
描述 |
context |
在版本 1.10 中被棄用。包含傳遞給 jQuery() 的原始上下文。 |
jquery |
包含 jQuery 版本號。 |
jQuery.fx.interval |
改變以毫秒計的動畫速率。 |
jQuery.fx.off |
全局禁用/啓用全部動畫。 |
jQuery.support |
表示不一樣瀏覽器特性或漏洞的屬性集合(用於 jQuery 內部使用)。 |
length |
包含 jQuery 對象中的元素數目。 |