jQuery溫習(xí)篇強(qiáng)大的JQuery選擇器

更新時(shí)間：2010年04月24日 19:40:19 作者：

學(xué)習(xí)jQuery已經(jīng)有1年多的時(shí)間了，但是一直由于做WinForm程序開發(fā)沒有經(jīng)常實(shí)踐。現(xiàn)在又開始重拾WebForm開發(fā)。寫幾篇jQuery系列，溫習(xí)下jQuery框架的知識(shí)。

在jQuery出世以來，它取得很大的成就和認(rèn)同。JQuery是一個(gè)輕量級(jí)的JavaScript框架，它的發(fā)布版很小僅16K左右。它能讓你方便簡潔的寫出漂亮的動(dòng)畫效果、實(shí)現(xiàn)各種視覺效果，輕松的處理JavaScript的DOM數(shù)以及Ajax的交互行為。它的優(yōu)點(diǎn)在于輕量級(jí)、簡單易學(xué)、易擴(kuò)展、跨瀏覽器和網(wǎng)上擁有大量的jQuery插件使用。由于它這一大堆的優(yōu)點(diǎn)，它已經(jīng)被微軟官方認(rèn)可加入VS IDE中擁有強(qiáng)大的智能提示，并據(jù)官方的統(tǒng)計(jì)現(xiàn)在至少有20%的國際性大網(wǎng)站已經(jīng)加入jQuery作為其腳本。

1：首先是JavaScript的DOM 和 jQuery包裝集的區(qū)分

1.1:在JavaScript中我們?cè)L問的方式是操作DOM結(jié)構(gòu),提供的可用方法有：

1: document.getElementById("ID")：根據(jù)ID獲取DOM對(duì)象。

2：document.getElementsByName("name")：根據(jù)HTML標(biāo)記name屬性獲取一個(gè)DOM數(shù)組。

3：document.getElementsByTagName("Tag")：根據(jù)HTML的Tag獲取一個(gè)DOM數(shù)組。

1.2：jQuery相對(duì)DOM則提供了許多可用的方法和屬性。

jQuery簡單的獲取對(duì)象有$(“#id”) ,$(“.class”),$(“tag”)方式，它的書寫方式和css3.0相似 id用#，class（css）用.，HTMl Tag則直接書寫。關(guān)于jquery的選擇器在下面講述，這里不急。

1.3:JavaScript的DOM對(duì)象轉(zhuǎn)可以化為jQuery包裝集：通過$(element)赴會(huì)就為jQuery包裝集。

2：jQuery最強(qiáng)大的就是提供了一個(gè)萬能的屬性選擇器。

2.1基本選擇器

選擇表達(dá)式	說明	舉例
#id	根據(jù)給定的ID匹配一個(gè)元素用#	$("#testDiv2") 獲取ID為testDiv2的元素
.class	根據(jù)給定的類匹配元素(也就是取class的值)用.	$(".myDiv") 獲取class為myDiv的一組元素
element	根據(jù)給定的元素名匹配所有元素,直接寫上元素名例如(p,a,input,div等)	$("div") 獲取所有的div元素
selector1,selector2,selectorN	將每一個(gè)選擇器匹配到的元素合并后一起返回,選擇器可以是id,class,element用,隔開	$("#testDiv2,p") $("p,span,div.myDiv") 獲取所有的p,span和class為myDiv的元素
*	選擇所有的元素	$("*")

2.2簡單選擇器

選擇表達(dá)式	說明	舉例
:first	匹配找到的第一個(gè)元素	$("div:first")
:last	匹配找到的最后一個(gè)元素	$("div:last")
:eq(index)	匹配一個(gè)給定索引值的元素,當(dāng)然要存在才可以找得到,索引從0開始	$("div:eq(1)")
:gt(index)	匹配所有大于給定索引值的元素	$("div:gt(0)") 查找第1個(gè)以后的元素
:lt(index)	匹配所有小于給定索引值的元素	$("div:lt(2)") 查找第一行和第二行的元素
:even	匹配所有索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù)	$("div:even") 查找第1,3,5個(gè)div
:odd	匹配所有索引值為奇數(shù)的元素，從 0 開始計(jì)數(shù)	$("div:odd") 查找第2,4個(gè)div
:not(selector)	去除所有與給定選擇器匹配的元素 selector為表達(dá)式,可以是屬性里面的一個(gè)值	$("input:not(:checked)") 查找所有未選中的input 元素[注 :checked為自定義篩選選擇器,后面會(huì)講到]
:header	匹配如 h1, h2, h3之類的標(biāo)題元素	$(":header").css("background", "#EEE"); 添加樣式
:animated	匹配所有正在執(zhí)行動(dòng)畫效果的元素	暫無例子

3.3：內(nèi)容選擇器

選擇表達(dá)式	說明	舉例
:contains(text)	匹配包含給定文本的元素,只要里面出現(xiàn)即可	$("p:contains('段落')") 找?guī)в卸温渥謽拥膒元素
:empty	匹配所有不包含子元素或者文本的空元素	$("div:empty")
:has(selector)	匹配含有選擇器所匹配的元素的元素	$("div:has('p')")
:parent	匹配含有子元素或者文本的元素	$("div:parent")

4.4子元素選擇器

選擇器	說明	舉例
:first-child	匹配第一個(gè)子元素	$("ul li:first-child")//在每個(gè) ul 中查找第一個(gè) li
:last-child	匹配最后一個(gè)子元素	$("ul li:last-child")//在每個(gè) ul 中查找最后一個(gè) li
:nth-child(index/even/odd/equation)	匹配其父元素下的第N個(gè)子或奇偶元素 ':eq(index)' 只匹配一個(gè)元素，而這個(gè)將為每一個(gè)父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！可以使用: nth-child(even)//偶數(shù)行 :nth-child(odd)//奇數(shù)行 :nth-child(3n) :nth-child(2)//索引為2的 :nth-child(3n+1) :nth-child(3n+2)	$("ul li:nth-child(2)")//在每個(gè) ul 查找第 2 個(gè)li
:nth-child(index/even/odd/equation)	匹配其父元素下的第N個(gè)子或奇偶元素	$("ul li:nth-child(2)")//在每個(gè) ul 查找第 2 個(gè)li
:only-child	如果某個(gè)元素是父元素中唯一的子元素，那將會(huì)被匹配如果父元素中含有其他元素，那將不會(huì)被匹配。	$("ul li:only-child")//在 ul 中查找是唯一子元素的 li

4.5：可見性選擇器

選擇器	說明	舉例
:hidden	匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會(huì)被匹配到	$("div:hidden")
:visible	匹配所有的可見元素	$("div:visible")//元素來匹配 $(".divH:visible")//根據(jù)class來匹配