今天說的是層次選擇器,那層次選擇器有哪幾個?
$("ancestor descendant"):選取parent元素後所有的child元素
$("parent > child"):選取parent元素後所有的直屬child元素,何謂“直屬”,也就是第一級的意思了
$("prev + next"):prev和next是兩個同級別的元素. 選中在prev元素後面的next元素
$("prev ~ siblings"):選擇prev後面的根據siblings過濾的元素。注:siblings是過濾器
這裏要說下,由於最後2個用的比較少,一般會用其他選擇器替代,請看下面:
$("prev + next")等價於next() $("prev ~ siblings")等價於nextAll() |
具體用法會在後面說到。
===========================================================================
下面我們來仔細說說這4個層次選擇器
【1】$("ancestor descendant"):選取parent元素後所有的child元素
ancestor的中文意思是“祖先”,descendant的中文意思是“後代”,就像css定義層級元素方式一樣,只需要不同的元素之間有空格表示,前者父級,後者子級,以此類推,同時我們把它寫成這樣的形式,$("Element1 Element2 Element3 Element...")。
下面是實例:
$("body div") | 選取body元素下所有的div元素。 |
$("ul li") | 選取ul元素下所有的li元素。 |
$("#test div") | 選取id爲“test”的元素所包含的所有的div子元素 |
$("div#test div") | 選取id爲“test”的div所包含的所有的div子元素 |
$(".test div") | 選取class爲“test”的元素所包含的所有的div子元素 |
$("div.test span") | 選取class爲“test”的div所包含的所有的span子元素 |
$("span.test .demo") | 選取class爲“test”的span所包含的所有的class爲demo的元素 |
$(".test .demo") | 選取class爲“test”的元素所包含的所有的class爲demo的元素 |
【2】$("parent > child"):選取parent元素後所有的直屬child元素,何謂“直屬”,也就是第一級的意思了
$("body > div") | 選取body元素下所有的第一級div元素。 |
$("ul > li") | 選取ul元素下所有的第一級li元素。 |
$("#test > div") | 選取id爲“test”的元素所包含的所有的第一級div子元素 |
$("div#test > div") | 選取id爲“test”的div所包含的所有的第一級div子元素 |
$(".test > div") | 選取class爲“test”的元素所包含的所有的第一級div子元素 |
$("div.test > span") | 選取class爲“test”的div所包含的所有的第一級span子元素 |
$("span.test > .demo") | 選取class爲“test”的span所包含的所有的第一級class爲demo的元素 |
$(".test > .demo") | 選取class爲“test”的元素所包含的所有的第一級class爲demo的元素 |
【3】$("prev + next"):prev和next是兩個同級別的元素. 選中在prev元素後面的next元素.
(1)$("div + p")表示選擇緊跟在 div 元素後的 p 一個元素
(2)$("#demo+img")選擇id爲demo元素後面的img對象.如果id爲demo元素後面沒有同級的img對象,那麼這個$("#demo+img").length=0
【4】$("prev ~ siblings"):選擇prev後面的根據siblings過濾的元素。注:siblings是過濾器。
(1)$("div ~ p")表示匹配跟在 div 元素後的所有 p 元素
(2)$("#demo~[title]")選擇id爲demo的元素後面所有帶有title屬性的元素,同樣如果id爲demo的元素後面沒有一個帶有title屬性的元素,那麼$("#demo~[title]").length = 0
===========================================================================
這裏說的是最後2個選擇器的等價關係
$(".one + div")等價於$(".one").next("div")
$("#prev ~ div")等價於$(".prev").nextAll("div")
===========================================================================
這裏是實例,參考w3cfuns網站的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>實例</title> <script language= "javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> <script type= "text/javascript" > $( function (){ $( "#bt1" ).click( function (){ $( "div > p" ).text( "我們都是div中的兒子,我們的名字叫做p還記得教程中的$(\"父親
> 兒子 > ...\")這種關係嗎?就是以這種方式選擇的我$(\"div > p\")" ); }) $( "#bt2" ).click( function (){ $( "div + p" ).text( "我是緊跟着div的p既然緊跟着,當然就得使用“+”緊密的連在一起嘛。以這種方式選擇的我$(\"div
+ p\")" ); }) $( "#bt3" ).click( function (){ $( "div ~ p" ).text( "我們是div的跟隨者,我們的名字叫做p要以這種方式選擇的我$(\"div
~ p\")" ); }) }) </script>
</head> <body> <input id= "bt1" type= "button" value= "獲取div下所有的p標籤" /> <input id= "bt2" type= "button" value= "匹配緊跟在
div 元素後的 p 一個元素" /> <input id= "bt3" type= "button" value= "匹配跟在
div 元素後的所有 p 元素" /> <div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </div> <p>5</p> <p>6</p> <p>7</p> <p>8</p> </body> </html> |