第二章 吸取jQuery之選擇器和包裝集

第二章 吸取jQuery之選擇器和包裝集

2.1 選擇器

2.1.1選擇器的使用

選擇器是根據元素的類型、特性或者元素在HTML文檔中的位置來精確地描述元素。

語法 jQuery(“DOM元素標識”) 也可以寫成 $(“DOM元素標識”) 返回與選擇器相匹配的DOM元素數組。下面是基本CSS選擇器列表：

選擇器	描述
*	匹配所有元素
E	匹配標籤名爲E的所有元素
E F	匹配標籤名爲F的所有元素，這些元素是E的子節點
E>F	匹配標籤名爲F的所有元素，這些元素是E的直接子節點
E+F	匹配標籤名爲F的所有元素，這些元素是E後面的第一個兄弟點
E~F	匹配標籤名爲F的所有元素，這些元素是E後面的兄弟節點之一
E.C	匹配標籤名爲E的所有元素，這些元素擁有CSS類名爲C，如果省略了E則相當於*.C
E#I	匹配標籤名爲E的所有元素，這些元素擁有CSS類名爲C，如果省略了E則相當於*#I
E[A]	匹配標籤名爲E的所有元素，這些元素擁有特性A
E[A=V]	匹配標籤名爲E的所有元素，特性A的值是V
E[A^=V]	匹配標籤名爲E的所有元素，特性A的值以V開頭
E[A$=V]	匹配標籤名爲E的所有元素，特性A的值以V結束
E[A!=V]	匹配標籤名爲E的所有元素，特性A的值不等於V，或不存在V
E[A*=V]	匹配標籤名爲E的所有元素，特性A的值包含V

對應以上的選擇器列表給予一個列表示例：

示例	描述
a	匹配所有的超級元素(<a>)
#specialID	匹配元素標識ID爲specialID的元素
.specialClass	匹配元素類名class爲specialClass的元素
a#specialID.specialClass	匹配超鏈元素ID爲specialID並且擁有類名爲specialClass的元素
p a.specialClass	匹配p元素下超鏈元素class爲specialClass的元素
p > a	匹配p元素下直接子節點爲超鏈的元素
ul.myList > li > a	匹配ul元素class名爲myList的元素下的直接節點li下的直接超鏈節點
a[href^=’http://’]	匹配超鏈href特性值以http://爲開頭的所有元素
a[href!=’http://’]	匹配超鏈href特性值不包含http://的所有元素

對應以上的示例展示一下在代碼中的體現:

$(a)

$(“#specialID”)

$(“.specialClass”)

$(“a#specialID.specialClass”)

$(“p a.specialClass”)

以此類推。這裏$()函數的使用在文章開頭就說明了。目前爲止函數的參數只有一個，事實下該函數是有2個參數的，該函數第一個參數是選擇器第二個參數爲上下文。例如:

$(選擇器,’div#sampleDom’)

這樣寫就可以把選擇器的應用範圍限制在DOM中的div的ID爲sampleDom元素內的DOM中了。而前面$(選擇器)省略的上下文就賦予了默認值爲整個DOM對象。

2.1.2 位置選擇元素

還可以根據元素在頁面上的位置，選取關注的DOM。比如選擇第一個<a>元素。

下面是jQuery支持的位置過濾選擇器:

選擇器	描述
:first	匹配上下文中的第一個元素。li a:first返回列表項後代節點中的第一個鏈接
:last	匹配上下文中的最後一個元素。li a:last返回列表項後臺節點中的最後一個鏈接
:first-child	匹配上下文中的第一個子節點。li:first-child返回每個列表中的第一個列表項
:last-child	匹配上下文中的最後一個子節點。li:last-child返回每個列表中的最後一個列表項
:only-child	返回所有沒有兄弟節點的元素
:nth-child(n)	匹配上下文中的第n個子節點。li:nth-child(2)返回每個列表中的第二個列表項
:nth-child(even|odd)	匹配上下文中的偶數或奇數子節點。li:nth-child(even)返回每個列表中的偶數列表項
:nth-child(Xn+Y）	匹配上下文中的由提供的公式計算出的子節點。如果Y是0，則可以省略。li:nth-child(3n)返回每個列表中能被3整除的列表項,而nth-child(5n+1)返回每個列表中所有能被5整除的列表項的下一個列表項。
:even	匹配上下文中的偶數元素。li:even返回所有偶數的列表項。
:odd	匹配上下文中的奇數元素。li:odd返回所有奇數的列表項。
:eq(n)	匹配上下文中第N個元素
:gt(n)	匹配第N個元素之後的元素(不包括第N個元素)
:lt(n)	匹配第N個元素之前的元素(不包括第N個元素)

在上列表中最容易讓人迷惑的是:first和:first-child的區分。

<ul>

<li>a1<li>

<li>b1<li>

<li>c1<li>

</ul>

<ul>

<li>a2<li>

<li>b2<li>

<li>c2<li>

</ul>

$("ul li:first-child").text();會返回 a1a2

$("ul li:first").text();會返回 a1

簡單的說:first只是返回一個元素,:first-child返回多個元素。

2.1.3 自定義過濾選擇器

下面是自定義過濾選擇器列表:

選擇器	描述
:animated	選擇處於動畫狀態的元素
:button	選擇按鈕元素(包括input[type=submit]、input[type=reset]、input[type=button]和button)
:checkbox	選擇複選框元素(input[type=checkbox])
:checked	選擇處於選中狀態的複選框和單選按鈕元素
:contains(food)	選擇包含文本food的元素
:disable	選擇處於禁用狀態的元素
:enabled	選擇處於啓用狀態的元素
:file	選擇文件輸入元素(input[type=file])
:has(selector)	選擇至少包含一個匹配指定選擇器的元素的元素
:header	選擇標題元素。比如<h1>到<h6>
:hidden	選擇隱藏元素
:image	選擇圖片輸入元素(input[type=image])
:input	選擇表單元素(input、select、textarea、button)
:not(selector)	選擇不匹配指定選擇器的元素
:parent	選擇有子節點(包含文本)的元素，空元素除外
:password	選擇口令元素(input[type=password])
:radio	選擇單選框元素(input[type=radio])
:reset	選擇重置按鈕元素(input[type=reset]或者button[type=reset])
:selected	選擇列表中處於選中狀態的<option>元素
:submit	選擇提交按鈕元素(input[type=submit]或button[type=submit])
:text	選擇文本輸入框元素(input[type=text])
:visible	選擇可見元素

講解下:has

首先我要取得一個div下的span可以寫成$(‘div span’),那反過來要取得帶有span的div呢？

$(‘div:has(span)’)這個意思就是div中有span的div。當然還可以帶有特性如:

$(‘tr:has(img[src$=”puppy.png”])’)選擇含有puppy.png爲結尾圖片的tr元素。

2.1.4 創建新的HTML

我們想動態的創建HTML中的元素可以這樣寫:

$(‘<div>HelloWorld</div>’).appendTo(‘body’);

這句話的意思就是創建一個層內容爲HelloWorld的元素插入到body元素中。

當然了還可以動態的添加CSS樣式以及添加事件,如:

$(‘<img>’,{src:’img/little.png’,alt:’test’,title:’test’,click:function(){alert($(this).attr(‘title’));}}).css({cursor:’pointer’,border:’1px solid black’}).appendTo(‘body’);

這行代碼的意思是首先創建img的這個元素元素中有src,alt,title等特性還有click事件,並且給予了css的樣式組成一個元素後加入到body元素中。

2.1.5 管理包裝集

下面講述一些包裝集中的方法:

方法名	描述
size	size() 返回包裝集中元素的個數 參數 無 返回值 元素的個數 示例 $(‘World’).html().size();
get	get(index) 獲取包裝集中的一個或全部匹配元素。如果不指定參數，則包裝集中的所有元素就以javascript數據形式返回。如果提供了index參數，則會返回index所對應的元素。 參數 index (數值)需要返回的單個元素的下標。如果省略，則整個集合會      以數組形式返回。 返回值 一個DOM元素或DOM元素數組 示例 $(‘img[alt]’).get(0)
eq	eg(index) 獲取包裝集中與index參數相對應的元素，並返回只包含此元素的新包裝集 參數 (數值)需要返回的單個元素的下標。和get方法一樣，負的下標值可以指定從集合的末尾開始查詢元素 返回值 包含一個或零個元素的包裝集 示例 $(‘img[alt]’).eg(0)
first	first() 獲取包裝集中的第一個元素，並返回只包含此元素的新包裝集。如果原包裝集爲空，則返回空包裝集 參數 無 返回值 包含一個或零個元素的包裝集 示例 $(‘img[alt]’).first();
last	last() 獲取包裝集中的最後一個元素，並返回只包含此元素的新包裝集。如果原包裝集爲空，則返回空包裝集 參數 無 返回值 包含一個或零個元素的包裝集 示例 $(‘img[alt]’).last();
toArray	toArray() 將包裝集裏的所有元素作爲DOM元素數組返回 參數 無 返回值 由包裝集中的DOM元素組成的Javascript數組 示例 $(‘lable+button’).toArray();
index	index(element) 在包裝集中查找傳入的元素，返回它在包裝集的下標，或者返回包裝集中的第一個元素在同級節點中的下標。如果沒有找到此元素，則返回-1 參數 element(元素|選擇器)需要獲取下標的元素引用，或者用來識別元素的選擇器。如果省略此參數，則找出包裝集中的第一個元素在同級節點中的下標。 返回值 傳入的元素在包裝集或者在其同級節點中的下標，若找不到則返回-1 示例 $(‘img’).index();
add	add(expression,context) 創建包裝集的副本並向其中添加由expression參數指定的元素。expression可以是選擇器、HTML片段、DOM元素或DOM元素數組。 參數 expression (選擇器|元素|數組)指定要添加到包裝集的元素。該參數如果是jQuery選擇器，則將全部匹配的元素添加到包裝集中。如果該參數是HTML片段，則創建相應的元素並添加到包裝集中。如果參數是DOM元素或DOM元素數組，則直接將其添加到包裝集中。      Context   (選擇器|元素|數組|jQuery)指定一個上下文，用來縮小匹配第一個參數的元素的查找範圍。這和傳遞到jQuery()函數中的上下文參數是一樣的。 返回值 所添加元素的原始包裝集副本。 示例 $(‘img[alt]’).add(‘img[title]’);
not	not(expression) 創建包裝集的副本,從中刪除那些與expression參數指定的標準相匹配的元素 參數 expression(選擇器|元素|數組)指定要刪除的元素。如果該參數是 jQuery選擇器，則刪除任何匹配expression的元素。如果傳遞的是元素或者元素數組，則刪除包裝集中的這些元素 如果傳遞的是函數，則會爲包裝集中的每個元素調用此函數(this指定當前元素)，並從包裝集中刪除調用的返回值爲true的元素 返回值 不包含已刪除元素的原始包裝集副本 示例 $(’img’).not(function(){return !$(this).hasClass(‘keepMe’)})
filter	filter(expression) 創建包裝集的副本，並從中刪除與expression參數值指定的標準不匹配的元素集合 參數 expression(選擇器|元素|數組)指定要刪除的元素。如果參數是jQuery選擇器，則刪除所有不匹配expression的元素 如果傳遞的是元素或者元素數組，則刪除包裝集中除了這些元素之外的所有元素 如果傳遞的是函數，則會對包裝集的每個元素分別調用此函數(this指定當前元素),並從包裝集中刪除函數調用返回值爲false的元素 返回值 不包含已過濾元素的原始包裝集副本 示例 $(‘td’).filter(function(){return this.innerHTML.match(/^\d+$/)})
slice	slice(begin,end) 創建並返回新包裝集,此包裝集包含匹配集中一個連續的部分。 參數  begion (數字)在返回的切片中第一個元素的位置,從0開始計數 end   (數字)不包含在切片中的第一個元素位置，或者說是切片中最後一   個元素的下一個元素的位置，從0開始計數。如果省略，則切片會擴展到包裝集的最後一個元素  示例 $(‘*’).slice(0,4)
has	has(test) 創建並返回新包裝集，此包裝集只包含原始包裝集中子節點匹配test表達式的元素 參數 test (選擇器|元素)要應用到包裝元素所有子節點上的選擇器或是要測試的元素。只有特定的元素會包含在包裝集中，這些元素至少包含一個匹配選擇器的子節點，或者其子節點就是傳遞的元素參數test 返回值 結果包裝集 示例 $(‘div’).has(‘img[alt]’);
map	map(callback) 爲包裝集中的每一個元素調用回調函數，並將返回值收集到jQuery對象實例中 參數 callback (函數)回調函數,爲包裝集中的每個元素調用該函數。此函數接受兩個參數:元素在集合中的下標(從0開始計數)，以及元素本身。當前元素也被作爲函數的上下文(this關鍵字) 返回值 由已轉換值組成的包裝集 示例 $(‘div’).map(function(){return (this.id == undefind)?null:this.id;})
each	each(iterator) 遍歷匹配集裏所有的元素，爲每一個元素調用傳入的迭代函數 參數 iterator (函數)回調函數,爲匹配集中的每個元素調用。此函數接受兩個參數：元素在集合中的下標(從0開始計數)以及元素本身。當前元素也被作爲函數的上下文(this引用) 返回值 包裝集 示例 $([1,2,3]).each(funciton(){alert(this);})
find	find(selector) 返回新的包裝集，它包含原始包裝集中與傳入的選擇器表達式相匹配的元素的所有後代元素 參數 selector (字符串)一個jQuery選擇器,只有匹配此選擇器的元素才能成爲返回集合的一部分 返回值 新建的包裝集 示例 $(*).find(‘p cite’)
is	is(selector) 確定包裝集中是否存在與傳入的選擇器表達式相匹配的元素 參數 selector(字符串)檢驗包裝集中元素的選擇器表達式 返回值 如果至少有一個元素與傳入的選擇器相匹配，則返回true,否則返回false 示例 $(‘*’).is(‘img’)
end	end() 在jQuery方法鏈中用來將當前的包裝集回滾到前一個返回的包裝集中。 參數 無 返回值 前一個包裝集 示例 $(‘img’).filter(‘[title]’).hide().end().addClass(‘anImage’)
andSelf	andSelf() 合併方法鏈中的前兩個包裝集 參數 無 返回值 合併後的包裝集 示例 $(‘div’).addClass(‘a’).find(‘img’).addClass(‘b’).addSelf().addClass(‘c’)

關係獲取包裝集

方法名	描述
children([selector])	返回由每個包裝元素所有的子節點(不包含重複的子節點)組成的包裝集
closest([selector])	返回由與傳入參數匹配的單個鄰近祖先元素的包裝集
contents()	返回由每個元素的內容組成的包裝集，包括文本節點(這個方法常用來獲取<iframe>元素的內容)
next([selector])	返回由每個包裝元素後面下一個同級元素(不包含重複元素)組成的包裝集
nextAll([selector])	返回由每個包裝元素後面所有的同級元素組成的包裝集
nextUntil([selector])	返回由每個包裝元素後面所有的同級元素組成的包裝集，直至遇到與選擇器相匹配的元素，但不包括此元素。如果選擇器沒有匹配元素，或者省略了選擇器參數，則會選擇後面所有的同級元素
offsetParent()	返回由包裝集中離第一個元素最近的，使用相對或者絕對定位的祖先元素組成的包裝集。
parent([selector])	返回由每個包裝元素的直接父元素(不包含重複元素)組成的包裝集
parents([selector])	返回由每個包裝元素的所有的祖先元素(不包含重複元素)組成的包裝集。這不僅包括直接父元素，還包含其上的所有祖先元素，但是不包括文檔根節點。
parentsUntil([selector])	返回由每個包裝元素所有的祖先元素組成的包裝集，直至遇到選擇器匹配的元素，但不包括此元素。如果選擇器沒有匹配到元素，或者是省略了選擇器參數，則選擇所有的祖先元素。
prev([selector])	返回由每個包裝元素前面緊鄰的同級元素(不包含重複元素)組成的包裝集
prevAll([selector])	返回由每個包裝元素前面所有的同級元素組成的包裝集
prevUntil([selector])	返回由每個包裝元素前面所有的同級元素組成的包裝集，直至遇到選擇器匹配的元素，但不包括此元素。如果選擇器沒有匹配到的元素，或者是省略了選擇器參數，則選擇後面所有的兄弟元素
siblings([selector])	返回由每個包裝元素的所有同級元素(不包含重複元素)組成的包裝集

更多請關注

http://www.cnblogs.com/wujiang ,http://blog.csdn.net/wujiang1984/