選擇器

功能描述

示例

：nth-child（index|odd|even）

匹配父元素下的特定位置（從1開始計數）

$(“ul li:nth-child(2)”)選取<ul>中的第二個<li>元素

：first-child

匹配父元素下的第一個子元素

$(“ul li:first-child”)選取<ul>中的第一個<li>元素

：last-child

匹配父元素下的最後一個子元素

$(“ul li:last-child”)選取<ul>中的最後一個<li>元素

：only-child

如果某個元素是父元素中唯一的子元素，則會被匹配

$(“ul li:only-child”)選取<ul>中的唯一子元素的<li>元素

選擇器

功能描述

示例

： checked

匹配所有被選中的元素

$(“input :checked”)選取所有被選中的<input>元素

：selected

匹配所有被選中的選項元素

$(“input :selected”)選取所有被選中的<option>元素

：enabled

匹配所有可用的元素

$(“#test :enabled”)選取id為test的表單內所有可用的元素

：disabled

匹配所有不可用的元素

$(“#test :disabled”)選取id為test的表單內所有不可用的元素

選擇器

功能描述

示例

：input

匹配所有的<input>、<textarea>、<select>和<button>元素

$(“:input”)選取所有<input>、<textarea>、<select>、<button>元素

：text

匹配所有的單行文字框

$(“:text”)選取所有的單行文字框

：password

匹配所有的密碼框

$(“:password”)選取所有的密碼框

：radio

匹配所有的單選按鈕

$(“:radio”) 選取所有的單選按鈕

：checkbox

匹配所有的複選框

$(“:checkbox”) 選取所有的複選框

：submit

匹配所有的提交按鈕

$(“:submit”) 選取所有的提交按鈕

：image

匹配所有的影象域

$(“:image”) 選取所有的影象域

：reset

匹配所有的重置按鈕

$(“:reset”) 選取所有的重置按鈕

：button

匹配所有的按鈕

$(“:button”) 選取所有的按鈕

：file

匹配所有的檔案上傳域

$(“:file”) 選取所有的檔案上傳域

：hidden

匹配所有的不可見元素

$(“:hidden”) 選取所有的不可見元素

語法

說明

attr(name)

取得第一個匹配元素的屬性值，否則返回undefined

attr(properties)

將一個鍵值對形式的json物件設定為現有匹配元素的屬性

attr(key,value)

為所有匹配的元素設定一個屬性值

attr(key,function)

為所有匹配的元素設定一個計算的屬性值

removeAttr(name)

從每一個匹配的元素中刪除一個屬性

語法

作用

說明

addClass(class)

追加樣式

為每個匹配的元素追加指定的類名

removeClass(class)

移除樣式

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

toggleClass(class)

切換樣式

判斷指定類是否存在，存在則刪除，不存在則新增

語法

說明

html()

獲取第一個匹配元素的HTML內容

html(content)

設定第一個匹配元素的HTML內容

text()

獲取所有匹配元素包含的文字內容組合起來的文字

text(content)

設定所有匹配元素的文字內容

語法

說明

css(name)

獲取第一個匹配元素的樣式

css(properties)

將一個鍵值對形式的JSON物件設定為所有匹配元素的樣式

css(name,value)

為所有匹配的元素設定樣式

width()

獲取第一個匹配元素的當前寬度值(返回數值型結果)

width(value)

為所有匹配的元素設定寬度樣式(可以字串或數字)

height()

獲取第一個匹配元素的當前高度值(返回數值型結果)

height(value)

為所有匹配的元素設定高度樣式(可以字串或數字)

關係

語法

說明

父子結點

append(content)

prepend(content)

appendTo(content)

prependTo(content)

向每個匹配的元素內部追加內容

向每個匹配的元素內部前置內容

把所有匹配的元素追加到指定元素集合中

把所有匹配的元素前置到指定元素集合中

兄弟結點

after(content)

before(content)

insertAfter(content)

insertBefore(content)

在每個匹配的元素之後插入內容

在每個匹配的元素之前插入內容

把所有匹配的元素插入到指定元素集合的後面

把所有匹配的元素插入到指定元素集合的前面

語法

說明

replaceWith(content)

將所有匹配的元素替換成指定的HTML或DOM元素

replaceAll(selector)

用匹配的元素替換掉所有selector匹配到的元素

語法

說明

empty()

刪除匹配的元素集合中所有的子結點

remove([expr])

刪除所有匹配的元素及子結點(可選引數expr用於篩選元素)

detach([expr])

分離所有匹配的元素及子結點

語法

說明

clone([false])

複製匹配的元素並且選中這些複製的副本，預設引數為false

clone(true)

引數設定為true時，複製元素的所有事件處理

語法

說明

wrap(html)

將每個匹配元素用HTML標記包裹起來

wrap(element)

將每個匹配元素用指定元素包裹起來

wrapAll(html)

將所有匹配元素用一個HTML標記包裹起來

wrapAll(element)

將所有匹配元素用一個指定元素包裹起來

wrapInner(html)

將每個匹配元素用一個HTML標記包裹起來

wrapInner(element)

將每個匹配元素用一個指定元素包裹起來

語法

說明

blur([[data],function])

當元素失去焦點時觸發

change([[data],function])

當元素的值發生改變時觸發

click([[data],function])

當單擊元素時觸發

dbclick([[data],function])

當雙擊元素時觸發

focus([[data],function])

當元素獲得焦點時觸發

focusin([[data],function])

在父元素上檢測子元素獲取焦點的情況

focusout([[data],function])

在父元素上檢測子元素失去焦點的情況

mouseover([[data],function])

在滑鼠移入物件時觸發

mouseout([[data],function])

在滑鼠從元素上離開時觸發

scroll([[data],function])

當滾動條發生變化時觸發

select([[data],function])

當文字框（包括input和textarea)中的文字被選中時觸發

submit([[data],function])

當表單提交時觸發

方法

window.onload

(DOM物件)

$(document).ready()

(jQuery物件)

執行時機

必須等待網頁中的所有內容載入完成後(包括圖片)才能執行

網頁中的所有DOM結構繪製完成後即執行(可能關聯內容並未載入完成)

編寫個數

不能同時編寫多個

能夠同時編寫多個

簡化寫法

無

$()

語法

說明

on(events,[selector],[data],function)

在匹配元素上繫結一個或多個事件處理函式

off(events,[selector],[function])

在匹配元素上移除一個或多個事件處理函式

one(type,[data],function)

為每個匹配元素的事件繫結一次性的處理函式

trigger(type,[data])

在每個匹配元素觸發某類事件

triggerHandler(type,[data])

同trigger(),但瀏覽器預設動作將不會被觸發

hover([over,]out)

元素滑鼠移入與移出時間切換

toggle()

元素顯示與隱藏事件切換

語法

說明

show([speed],[easing],[function])

顯示隱藏的匹配元素

hide([speed],[easing],[function])

隱藏顯示的匹配元素

toggle([speed],[easing],[function])

元素顯示與隱藏切換

slideDown([speed],[easing],[function])

垂直滑動顯示匹配元素(向下增大)

slideUp([speed],[easing],[function])

垂直滑動顯示匹配元素(向上增大)

slideToggle([speed],[easing],[function])

在slideUp()和slideDown()兩種效果間的切換

fadeIn([speed],[easing],[function])

淡入顯示匹配元素

fadeOut([speed],[easing],[function])

淡出隱藏匹配元素

fadeTo([speed],opacity,[easing],[function])

以淡入淡出方式將匹配元素調整到指定的透明度

fadeToggle([speed],[easing],[function])

在fadeIn()和fadeOut()兩種效果間的切換

方法

說明

load(url,[data],[function])

載入遠端HTML檔案程式碼並插入至DOM元素中

$.ajax(url,[settings])

通用的Ajax方法，可傳送請求並載入資料

$.get(url,[data],[function],[type])

通過GET方法傳送請求並載入資料

$.post(url,[data],[function],[type])

通過POST方法傳送請求並載入資料

$.getJSON(url,[data],[function])

通過GET方法傳送請求並載入JSON資料

$.getScript(url,[function])

通過GET方法傳送請求並載入JavaScript資料