快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

注意：

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

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

二，重點

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

相對選擇器

只要在$()指定第二個參數(shù)，第二個參數(shù)為相對的元素。比如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"),這句代碼用的就是相對選擇器，選擇出的td是以當(dāng)前的tr為相對的元素。選擇的td元素是當(dāng)前的tr元素下的所有td元素，沒有涉及到其他行的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之后的第一個div元素，不常用。
3 $(".menuitem ~ div")獲取樣式名為menuitem之后的所有的div元素，不常用。

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

三者的區(qū)別是：

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

相對選擇器：2個元素分開，

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

您可能感興趣的文章: