1. 程式人生 > >網頁程式設計技術常用詞之jQuery

網頁程式設計技術常用詞之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即可。官方主頁:

http://jquery.com

關鍵字

釋義

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()

設定或返回匹配元素的寬度