1. 程式人生 > >JQuery事件方法彙總

JQuery事件方法彙總

方法 描述
ready() 文件就緒事件(當 HTML 文件就緒可用時)
blur() 觸發、或將函式繫結到指定元素的 blur 事件
change() 觸發、或將函式繫結到指定元素的 change 事件
click() 觸發、或將函式繫結到指定元素的 click 事件
dblclick() 觸發、或將函式繫結到指定元素的 double click 事件
error() 觸發、或將函式繫結到指定元素的 error 事件
focus() 觸發、或將函式繫結到指定元素的 focus 事件
keydown() 觸發、或將函式繫結到指定元素的 key down 事件
keypress() 觸發、或將函式繫結到指定元素的 key press 事件
keyup() 觸發、或將函式繫結到指定元素的 key up 事件
load() 觸發、或將函式繫結到指定元素的 load 事件
mousedown() 觸發、或將函式繫結到指定元素的 mouse down 事件
mouseenter() 觸發、或將函式繫結到指定元素的 mouse enter 事件
mouseleave() 觸發、或將函式繫結到指定元素的 mouse leave 事件
mousemove() 觸發、或將函式繫結到指定元素的 mouse move 事件
mouseout() 觸發、或將函式繫結到指定元素的 mouse out 事件
mouseover() 觸發、或將函式繫結到指定元素的 mouse over 事件
mouseup() 觸發、或將函式繫結到指定元素的 mouse up 事件
resize() 觸發、或將函式繫結到指定元素的 resize 事件
scroll() 觸發、或將函式繫結到指定元素的 scroll 事件
select() 觸發、或將函式繫結到指定元素的 select 事件
submit() 觸發、或將函式繫結到指定元素的 submit 事件
unload() 觸發、或將函式繫結到指定元素的 unload 事件

jQuery 事件處理方法
事件處理方法把事件處理器繫結至匹配元素。

方法 觸發
$(selector).bind(event) 向匹配元素新增一個或更多事件處理器
$(selector).delegate(selector, event) 向匹配元素新增一個事件處理器,現在或將來
$(selector).die() 移除所有通過 live() 函式新增的事件處理器
$(selector).live(event) 向匹配元素新增一個事件處理器,現在或將來
$(selector).one(event) 向匹配元素新增一個事件處理器。該處理器只能觸發一次。
$(selector).unbind(event) 從匹配元素移除一個被新增的事件處理器
$(selector).undelegate(event) 從匹配元素移除一個被新增的事件處理器,現在或將來
$(selector).trigger(event) 所有匹配元素的指定事件
$(selector).triggerHandler(event) 第一個被匹配元素的指定事件

jQuery 效果函式
Hide / Show 描述
show() 顯示被選的元素
hide() 隱藏被選的元素
toggle() 對被選元素進行隱藏和顯示的切換
   
Slide  
slideDown() 通過調整高度來滑動顯示被選元素
slideUp() 通過調整高度來滑動隱藏被選元素
slideToggle() 對被選元素進行滑動隱藏和滑動顯示的切換
   
Fade in / out  
fadeIn() 淡入被選元素至完全不透明
fadeOut() 淡出被選元素至完全不透明
fadeTo() 把被選元素減弱至給定的不透明度
   
Animation  
animate() 對被選元素應用“自定義”的動畫
stop() 停止在被選元素上執行動畫
   
Queue  
clearQueue() 對被選元素移除所有排隊的函式(仍未執行的)
delay() 對被選元素的所有排隊函式(仍未執行)設定延遲
dequeue() 執行被選元素的下一個排隊函式
queue() 顯示被選元素的排隊函式

jQuery 文件操作方法
這些方法對於 XML 文件和 HTML 文件均是適用的,除了:html()。

方法 描述
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 屬性。

這些方法對於 XML 文件和 HTML 文件均是適用的,除了:html()。

方法 描述
addClass() 向匹配的元素新增指定的類名。
attr() 設定或返回匹配元素的屬性和值。
hasClass() 檢查匹配的元素是否擁有指定的類。
html() 設定或返回匹配的元素集合中的 HTML 內容。
removeAttr() 從所有匹配的元素中移除指定的屬性。
removeClass() 從所有匹配的元素中刪除全部或者指定的類。
toggleClass() 從匹配的元素中新增或刪除一個類。
val() 設定或返回匹配元素的值。

註釋:jQuery 文件操作參考手冊中也列出了以上方法。本參考頁的作用是方便使用者單獨查閱有關屬性操作方面的方法。

jQuery CSS 操作函式
下面列出的這些方法設定或返回元素的 CSS 相關屬性。

CSS 屬性 描述
css() 設定或返回匹配元素的樣式屬性。
height() 設定或返回匹配元素的高度。
offset() 返回第一個匹配元素相對於文件的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一個匹配元素相對於父元素的位置。
scrollTop() 設定或返回匹配元素相對滾動條頂部的偏移。
scrollLeft() 設定或返回匹配元素相對滾動條左側的偏移。
width() 設定或返回匹配元素的寬度。

jQuery Ajax 操作函式
jQuery 庫擁有完整的 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 遍歷函式包括了用於篩選、查詢和串聯元素的方法。

函式 描述
.add() 將元素新增到匹配元素的集合中。
.andSelf() 把堆疊中之前的元素集新增到當前集合中。
.children() 獲得匹配元素集合中每個元素的所有子元素。
.closest() 從元素本身開始,逐級向上級元素匹配,並返回最先匹配的祖先元素。
.contents() 獲得匹配元素集合中每個元素的子元素,包括文字和註釋節點。
.each() 對 jQuery 物件進行迭代,為每個匹配元素執行函式。
.end() 結束當前鏈中最近的一次篩選操作,並將匹配元素集合返回到前一次的狀態。
.eq() 將匹配元素集合縮減為位於指定索引的新元素。
.filter() 將匹配元素集合縮減為匹配選擇器或匹配函式返回值的新元素。
.find() 獲得當前匹配元素集合中每個元素的後代,由選擇器進行篩選。
.first() 將匹配元素集合縮減為集合中的第一個元素。
.has() 將匹配元素集合縮減為包含特定元素的後代的集合。
.is() 根據選擇器檢查當前的匹配元素集合,如果存在至少一個匹配元素,則返回 true。
.last() 將匹配元素集合縮減為集合中的最後一個元素。
.map() 把當前匹配集合中的每個元素傳遞給一個函式,產生包含返回值的新的 jQuery 物件。
.next() 獲得匹配元素集合中每個元素緊鄰的同輩元素。
.nextAll() 獲得匹配元素集合中每個元素之後的所有同輩元素,由選擇器進行篩選(可選)。
.nextUntil() 獲得每個元素之後所有的同輩元素,直到遇到匹配選擇器的元素為止。
.not() 從匹配元素集合中刪除元素。
.offsetParent() 獲得用於定位的第一個父元素。
.parent() 獲得當前匹配元素集合中每個元素的父元素,由選擇器篩選(可選)。
.parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素,直到遇到匹配選擇器的元素為止。
.prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素,由選擇器篩選(可選)。
.prevAll() 獲得匹配元素集合中每個元素之前的所有同輩元素,由選擇器進行篩選(可選)。
.prevUntil() 獲得每個元素之前所有的同輩元素,直到遇到匹配選擇器的元素為止。
.siblings() 獲得匹配元素集合中所有元素的同輩元素,由選擇器篩選(可選)。
.slice() 將匹配元素集合縮減為指定範圍的子集。

jQuery 資料儲存函式

這些方法允許我們將指定的 DOM 元素與任意資料相關聯。

函式 描述
.data() 儲存與匹配元素相關的任意資料。
jQuery.data() 儲存與指定元素相關的任意資料。
.removeData() 移除之前存放的資料。
jQuery.removeData() 移除之前存放的資料。

jQuery 佇列控制函式

函式 描述
.clearQueue() 從佇列中刪除所有未執行的專案。
.dequeue() 從佇列最前端移除一個佇列函式,並執行它。
jQuery.dequeue() 從佇列最前端移除一個佇列函式,並執行它。
.queue() 顯示或操作匹配元素所執行函式的佇列。
jQuery.queue() 顯示或操作匹配元素所執行函式的佇列。