快捷導(dǎo)航

jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別

更新時(shí)間：2012年07月03日 11:16:43 作者：

jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別介紹，需要的朋友可以參考下

一、Jquery常用的過(guò)濾選擇器如下所示：

1、:first，選取第一個(gè)元素，比如$("div:first")選取第一個(gè)div元素

2、:last，選取最后一個(gè)元素，比如$("div:last")選取最后一個(gè)div元素

3、:not(選擇器)，選取不滿(mǎn)足“選擇器”條件的元素,比如$("div:not(.className)"),選取樣式不是className的所有div元素

4、：even/：odd，選取索引為偶數(shù)/奇數(shù)的元素，比如$("div:even"),選取索引號(hào)為偶數(shù)的所有div元素

5、:eq(索引序號(hào))/:gt(索引序號(hào))/:lt(索引序號(hào))，選取等于索引號(hào)/大于索引號(hào)/小于索引號(hào)的元素，比如$("div:lt(3)"),選取索引號(hào)小于3的所有div元素

注意：

過(guò)濾選擇器的混合使用時(shí)要記住后面的過(guò)濾條件是以前面的過(guò)濾選擇器過(guò)濾后的重新序號(hào)為基礎(chǔ)，即過(guò)濾的逐級(jí)性，比如

$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是從gt(0)出的新序列中的序號(hào)，不要寫(xiě)成lt(4)

二，重點(diǎn)

多條件選擇器
多條件選擇器：$("p,div,span,menuitem"),同時(shí)選擇p標(biāo)簽,div標(biāo)簽,和擁有menuitem樣式的span標(biāo)簽元素
注意選擇器表達(dá)式中的空格不能多不能少，易錯(cuò)！

相對(duì)選擇器

只要在$()指定第二個(gè)參數(shù)，第二個(gè)參數(shù)為相對(duì)的元素。比如html代碼如下

復(fù)制代碼代碼如下:

 
<table id="table1"> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
<tr><td>dsds</td><td>dsfdef</td></tr> 
</table> 

那么可以用如下的js代碼操作td的背景色
$("td", $(this)).css("background", "red"),這句代碼用的就是相對(duì)選擇器，選擇出的td是以當(dāng)前的tr為相對(duì)的元素。選擇的td元素是當(dāng)前的tr元素下的所有td元素，沒(méi)有涉及到其他行的td元素

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function () { 
$("#table1 tr").click(function () { 
$("td", $(this)).css("background", "red"); 
}); 
}); 
</script> 

層次選擇器：
1 $("#div li")獲取div下的所有l(wèi)i元素（后代，子，子的子....）
2 $("#div > li")獲取div下的直接li子元素//注意空格
3 $(".menuitem + div")獲取樣式名為menuitem之后的第一個(gè)div元素，不常用。
3 $(".menuitem ~ div")獲取樣式名為menuitem之后的所有的div元素，不常用。

細(xì)節(jié)區(qū)別在于（易錯(cuò)點(diǎn)）：
多條件選擇器：$("p,div,span,menuitem"),相對(duì)選擇器：$("td", $(this)).css("background", "red")",層次選擇器：$("#div li")獲取div下的所有l(wèi)i元素（后代，子，子的子....）

三者的區(qū)別是：

多條件選擇器：在一個(gè)“”內(nèi)有逗號(hào)區(qū)分，

相對(duì)選擇器：2個(gè)元素分開(kāi) ，

層次選擇器在一個(gè)“”內(nèi)以空格區(qū)分

您可能感興趣的文章: