jquery 中多條件選取器,相對選取器,層次選取器的區別

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

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

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

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

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

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

注意：

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

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





二，重點

多條件選取器
多條件選取器：$("p,div,span,menuitem"),同時選擇p標籤,div標籤,和擁有menuitem樣式的span標籤元素
注意選取器運算式中的空格不能多不能少，易錯！

相對選取器

只要在$()指定第二個參數，第二個參數為相對的元素。比如html代碼如下
複製代碼 代碼如下:
<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是以當前的tr為相對的元素。選擇的td元素是當前的tr元素下的所有td元素，沒有涉及到其他行的td元素

複製代碼 代碼如下:
<script type="text/javascript">
$(function () {
$("#table1 tr").click(function () {
$("td", $(this)).css("background", "red");
});
});
</script>

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

細節區別在於（易錯點）：
多條件選取器：$("p,div,span,menuitem"),相對選取器：$("td", $(this)).css("background", "red")",層次選取器：$("#div li")擷取div下的所有li元素（後代，子，子的子....）

三者的區別是：

多條件選取器：在一個“”內有逗號區分，

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

層次選取器在一個“”內以空格區分