網頁程式設計技術常用詞之jQuery
jQuery
jQuery是繼Prototype之後又一個優秀的JavaScript框架。它是輕量級的JS庫(壓縮後只有21k) ,它相容CSS3,還相容各種瀏覽器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使使用者能更方便地處理HTML DOCUMENTS、EVENTS、實現動畫效果,並且方便地為網站提供AJAX互動。jQuery還有一個比較大的優勢是,它的文件說明很全,而且各種應用也說得很詳細,同時還有許多成熟的外掛可供選擇。jQuery能夠使使用者的HTML頁保持程式碼和HTML內容分離,也就是說,不用再在HTML裡面插入一堆JS來呼叫命令了,只需定義ID即可。官方主頁:
關鍵字 |
釋義 |
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") 所有被選取的 select 元素 |
: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() |
觸發、或將函式繫結到指定元素的 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 效果函式 |
|
animate() |
對被選元素應用“自定義”的動畫 |
clearQueue() |
對被選元素移除所有排隊的函式(仍未執行的) |
delay() |
對被選元素的所有排隊函式(仍未執行)設定延遲 |
dequeue() |
執行被選元素的下一個排隊函式 |
fadeIn() |
淡入被選元素至完全不透明 |
fadeOut() |
淡出被選元素至完全不透明 |
fadeTo() |
把被選元素減弱至給定的不透明度 |
hide() |
隱藏被選的元素 |
queue() |
顯示被選元素的排隊函式 |
show() |
顯示被選的元素 |
slideDown() |
通過調整高度來滑動顯示被選元素 |
slideToggle() |
對被選元素進行滑動隱藏和滑動顯示的切換 |
slideUp() |
通過調整高度來滑動隱藏被選元素 |
stop() |
停止在被選元素上執行動畫 |
toggle() |
對被選元素進行隱藏和顯示的切換 |
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 CSS 操作函式 |
|
下面列出的這些方法設定或返回元素的 CSS 相關屬性。 |
|
css() |
設定或返回匹配元素的樣式屬性 |
height() |
設定或返回匹配元素的高度 |
offset() |
返回第一個匹配元素相對於文件的位置 |
offsetParent() |
返回最近的定位祖先元素 |
position() |
返回第一個匹配元素相對於父元素的位置 |
scrollLeft() |
設定或返回匹配元素相對滾動條頂部的偏移 |
scrollTop() |
設定或返回匹配元素相對滾動條左側的偏移 |
width() |
設定或返回匹配元素的寬度 |