jquery 中多條件選擇器,相對選擇器,層次選擇器的差異_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程式碼如下

複製程式碼 程式碼如下:

tr>

dsds	dsfdef
dsds	dsfdef
dsds	dsfdef
dsds	dsfdef
dsds	dsfdef

那麼可以用如下的js程式碼操作td的背景色
$("td", $(this)).css("background", "red"),這句程式碼用的就是相對選擇器，選取的td是以目前的tr為相對的元素。選擇的td元素是目前的tr元素下的所有td元素，沒有涉及到其他行的td元素

複製程式碼 程式碼如下:

層次選擇器：
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個元素分開，

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