JQuery知識快覽之一—選擇器

閱讀指導:本文參考最新的1.10.2版寫成,針對用得比較多的1.4版,所有1.5版之後的函數都會註明哪一版新增。對於熟悉1.4版想學1.10版的請直接搜索"新增"。

 

 

 

JQuery是一個JavaScript庫,它提供瞭很多有用的API,簡化瞭我們使用JavaScript的方式。

 

JQuery由JQuery.com提供,你可以在該網站上下到最新的

 

有兩種類型的JQuery,一種是未壓縮的,便於你學習其源代碼,另一種是壓縮的,不易閱讀但是更節約流量。

 

現在有兩個版本的JQuery,V1.x支持ie6,7,8,V2.x開始不支持ie6,7,8瞭。

 

現在1.x的最新版本是1.10.2

 

如果你不願意在自己的計算機上存放JQuery庫,你可以連接到以下的一些CDN.

 

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

 使用CDN的好處,用戶已經訪問瞭包含這些資源的網站的話,在訪問你的網站時就不用重復下載資源瞭。

 

 

 

本文主要介紹JQuery選擇器,這可以說是JQuery的亮點之一,JQuery提供瞭有豐富功能的選擇器,可以方便的獲取頁面中的元素。

 

使用選擇器註意事項

1.選擇器對元素,屬性,值的大小是不敏感的

 

2.對於!"#$%&'()*+,./:;<=>?@[\]^`{|}~等特殊符號,需要用//轉義

 

基礎選擇器

1.選擇所有的元素

 

$("*")

 

2.根據元素Id選擇

 

$("#myid")

 

註意一個頁面的id都是唯一的,這個隻能選擇第一個match的

 

3.根據元素的名稱選擇

 

$("p")

 

4.根據元素的css類選擇

 

$(".myclass")

 

註意:一個元素可以有多個css類,隻要其中一個匹配就會被選擇

 

5.復合選擇器

 

做多種選擇器的和,比如$("#myid,p,.myclass)相當於$("#myid").add("p").add(".myclass")

 

 

 

層次選擇器

1.選擇選擇器1中所選元素的所有符合選擇器2條件的直接子節點

 

$("body > p")

 

2.選擇選擇器1中所選元素的所有符合選擇器2條件的所有子孫節點

 

$("body p")

 

3.選擇選擇器1中所選元素後面的一個符合選擇器2條件的節點,選擇器2所選元素和選擇器1所選元素要在同一節點下。

 

$("#myid + li")

 

4.選擇選擇器1中所選元素後面的所有符合選擇器2條件的節點,選擇器2所選元素和選擇器1所選元素要在同一節點下。

 

$("#myid ~ li")

 

 

 

表單選擇器

用表單選擇器要註意兩點,一點是最好和input一起用,比如$("input:submit")。另一點是大多數選擇器都不屬於css規范,無法用其優化功能。最好是先做別的選擇,再用表單選擇器過濾。

 

1.匹配所有按鈕

 

$(":button")

 

匹配所有的<button>mybutton</button>和<input type="button" value="mybutton" />

 

 

 

2.匹配提交按鈕

 

$(":submit")

 

匹配所有的<button>mybutton</button>,<button type="submit">mybutton</button>和<input type="submit" value="提交" />

 

 

 

3.匹配所有文本

 

$(":text")

 

匹配所有的<input type="text" >

 

註意:從版本1.5.2開始,<input>也能被匹配。

 

 

 

4.匹配當前焦點

 

$(":focus")

 

這是1.6版新增的,能獲取當前獲得焦點的元素

 

 

 

5.獲取被選擇狀態的元素

 

$(":checked")

 

註意:它適用於checkbox,radio button和select列表。

 

 

 

6.其他的一些,很容易理解的。

 

$(":selected")

 

$(":reset")

 

$(":password")

 

$(":input")

 

$(":image")

 

$(":file")

 

$(":enabled")

 

$(":disabled")

 

 

 

屬性選擇器

1.有某屬性

 

$("[attribute]")

 

如$("p[id]")選擇有id屬性的p

 

2.屬性為某值

 

$("[attribute='value']")

 

3.屬性為某值或‘某值-’打頭的值

 

$("[attribute|='value']")

 

4.屬性的值中含有某值

 

$("[attribute*='value']")

 

5.屬性含有某值

 

$("[attribute~='value']")

 

註意:一個屬性可以有多個值,每個值之間用空格分開,這個選擇器正好能處理多個值中包含給定值就被選擇的情況

 

6.屬性的值以某值打頭

 

$("[attribute^='value']")

 

7.屬性的值以某值結尾

 

$("[attribute$='value']")

 

8.不含某屬性或有該屬性但是屬性不為某值

 

$("[attribute!='value']")

 

註意:該選擇器不屬於css規范,無法用其優化功能。最好是先做別的選擇,再用該選擇器過濾。

 

9.復合屬性選擇器

 

$("[attributeFilter1][attributeFilter2][attributeFilterN]")

 

 

 

基本過濾器

1.獲取當前選擇器中給定位置的元素,從0開始計數

 

$("selector:first")

 

$("selector:last")

 

$("selector:even")偶數位

 

$("selector:odd")奇數位

 

$("selector:eq(index)")等於給定索引值的元素

 

$("selector:gt(index)")所有大於給定索引值的元素

 

$("selector:lt(index)")所有小於給定索引值的元素

 

註意:從1.8版開始,給定索引值可以為負數,表示從尾部開始索引。

 

2.去除與給定選擇器匹配的元素

 

$(":not(selector)")

 

最好用.not()函數

 

3.選擇h1,h2等header標簽

 

$(":header")

 

4.選擇給定語言的元素

 

1.9版新增

 

對於<p lang="en-us"></p>

 

用$("p:lang(en)")可以匹配所有lang屬性為en或en-打頭的元素

 

5.獲取根元素

 

1.9版新增

 

$(":root")獲取<html>元素

 

6.獲取文檔URI所指向的元素。

 

比如有個URI是http://example.com/#foo,$("p.target")會獲取<p id="foo">元素

 

7.獲取當前正在動畫的對象

 

$(":animated")

 

 

 

內容過濾器

1.匹配包含給定文本的元素

 

$(":contains(text)")

 

2.匹配所有不包含子元素或者文本的空元素

 

$(":empty")

 

3.匹配所有包含子元素或者文本的元素

 

$(":parent")

 

註意:所有的p都認為非空

 

4.匹配含有選擇器所匹配的元素的元素.

 

$(":has(selector)")

 

註意:被匹配的元素可以是其孫子元素

 

 

 

子元素過濾器

1.獲取在父元素中給定位置的元素,從1開始計數,對每個父元素分別計數。

 

需要註意的是如果選擇器中的元素有n個在一個父元素中,但是這n個並不在父元素中的給定位置處,這樣這n個元素都不會被選擇。

 

$(":first-child")

 

$(":last-child")

 

$(":nth-child(index/even/odd/equation)")

 

equation的寫法如:

 

$(":nth-child(3n+2)")

 

 

 

$(":nth-last-child(index/even/odd/equation)")  1.9版新增

 

2.選擇在其父元素中是唯一元素的元素

 

$(":only-child")

 

3.獲取在父元素中給定位置的元素,從1開始計數,對每個父元素分別計數。

 

針對原有的:nth-child等選擇器對位置的判斷是針對父元素中所有的元素的情況,1.9版新增瞭一些選擇器,其對位置的判斷變為針對父元素中所有在選擇器中的元素來計數。

 

$(":first-of-type")

 

$(":last-of-type")

 

$(":nth-of-type(index/even/odd/equation)")

 

$(":nth-last-of-type(index/even/odd/equation)")

 

4.選擇在選擇器中是父元素唯一元素的元素

 

$(":only-of-type")

 

這個也是1.9版新增的

 

 

 

可見性過濾器

隻有兩個

 

$(":hidden")和$(":visible")

 

下面這些元素被認為是hidden的:

 

1.CSS的display屬性為none

 

2.type="hidden"

 

3.元素的長或寬被設置為0

 

4.祖先為hidden,則元素為hidden

 

註意:不在document中的元素無法判斷是否可見。

 

visibility:hidden或opacity:0被認為是可見的,因為它們仍會消耗佈局空間。

 

發佈留言