層次選擇器,就是通過元素之間的層次關系來獲取元素。層次選擇器在實際開發中,也是相當重要的。常見的層次關系包括:父子、後代、兄弟、相鄰。
在jQuery,層次選擇器共有4種:
注意以下2點:
(1)$("M+N")可以使用“$(M元素).next()”代替;
(2)$("M~N")可以使用“$(M元素).nextAll()”代替;
關於next()和nextAll()這兩種方法,我們在“jQuery查找方法”這一章的“向後查找兄弟元素”中會詳細分析,小伙伴們暫時不需要深入了解。
後代選擇器,就是選擇元素內部中所有的某一個元素,包括子元素和其他後代元素。
語法:
$("M N")
說明:
在後代選擇器中,“M元素”和“N元素”之間用空格隔開,表示選中M元素內部後代N元素(所有N元素)。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.12.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#first p").css("color","red"); }) </script> </head> <body> <div id="first"> <p>lvye的子元素</p> <p>lvye的子元素</p> <div id="second"> <p>lvye子元素的子元素</p> <p>lvye子元素的子元素</p> </div> <p>lvye的子元素</p> <p>lvye的子元素</p> </div> </body> </html>
在浏覽器預覽效果如下:
分析:
$("#first p")表示選取id為first的元素內部的所有p元素,因此不管是子元素,還是其他後代元素,統統都被選中。
子代選擇器,就是選中元素內部的某一個子元素。子代選擇器跟後代選擇器很相似,但是卻有著明顯的區別:
(1)後代選擇器,選取的是元素內部所有的元素(包括子元素);
(2)子代選擇器,選取的是元素內部某一個子元素(只限子元素);
語法:
$("M>N")
說明:
在子代選擇器中,“M元素”和“N元素”之間使用“>”選擇符,表示選中M元素內部的子元素N。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.12.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#first>p").css("color","red"); }) </script> </head> <body> <div id="first"> <p>lvye的子元素</p> <p>lvye的子元素</p> <div id="second"> <p>lvye子元素的子元素</p> <p>lvye子元素的子元素</p> </div> <p>lvye的子元素</p> <p>lvye的子元素</p> </div> </body> </html>
在浏覽器預覽效果如下:
分析:
$("#first>p")表示選中id為first的元素下的子元素p。在這裡跟後代選擇器的例子對比一下,就知道:子代選擇器只選取子元素,不包括其他後代元素。
兄弟選擇器,就是選中元素後面(不包括前面)的某一類兄弟元素。
語法:
$("M~N")
說明:
在兄弟選擇器中,“M元素”和“N元素”之間使用“~”選擇符,表示選中M元素後面的所有某一類兄弟元素N。
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.12.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#second~p").css("color","red"); }) </script> </head> <body> <div id="first"> <p>lvye的子元素</p> <p>lvye的子元素</p> <div id="second"> <p>lvye子元素的子元素</p> <p>lvye子元素的子元素</p> </div> <p>lvye的子元素</p> <p>lvye的子元素</p> </div> </body> </html>
在浏覽器預覽效果如下:
分析:
$("#second~p")表示選取id為second的元素後面的所有兄弟元素p。記住,兄弟選擇器只選取後面的所有兄弟元素,不包括前面的所有兄弟元素。如果我們想要只選取前面所有的兄弟元素,可以使用prevAll()方法來選取。prevAll()方法我們在後面的“向前查找兄弟元素”這一節會詳細給大家講解。
相鄰選擇器,就是選中元素後面(不包括前面)的某一個“相鄰”的兄弟元素。相鄰選擇器跟兄弟選擇器也非常相似,不過也有明顯的區別:
(1)兄弟選擇器選取元素後面“所有”的某一類元素;
(2)相鄰選擇器選取元素後面“相鄰”的某一個元素;
語法:
$("M+N")
說明:
在相鄰選擇器中,“M元素”和“N元素”之間使用“+”選擇符,表示選中M元素後面的某一個相鄰的兄弟元素N。
舉例1:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.12.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#second+p").css("color","red"); }) </script> </head> <body> <div id="first"> <p>lvye的子元素</p> <p>lvye的子元素</p> <div id="second"> <p>lvye子元素的子元素</p> <p>lvye子元素的子元素</p> </div> <p>lvye的子元素</p> <p>lvye的子元素</p> </div> </body> </html>
在浏覽器預覽效果如下:
分析:
$("#second+p")表示選取id為second的元素後面的“相鄰”的兄弟元素p。
舉例2:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> /*去除所有元素默認的padding和margin*/ *{padding:0;margin:0} /*去除列表項默認符號*/ ul{list-style-type:none;} </style> <script type="text/javascript" src="jquery-1.12.0.min.js"></script> <script type="text/javascript"> $(function () { $("li+li").css("border-top", "2px solid red"); }) </script> </head> <body> <ul> <li>第1個元素</li> <li>第2個元素</li> <li>第3個元素</li> <li>第4個元素</li> <li>第5個元素</li> <li>第6個元素</li> </ul> </body> </html>
在浏覽器預覽效果如下:
分析:
$("li+li")使用的是相鄰選擇器,表示“選擇li元素相鄰的下一個li元素”。由於最後一個li元素沒有相鄰的下一個li元素,所以對於最後一個li元素,它是沒有下一個li元素可以選取的。$("li+li").css("border-top", "2px solid red")達到在兩兩li元素之間添加一個邊框的效果。這是一個非常棒的技巧,在實際開發中如果我們想要在兩兩元素之間實現什麼效果,我們經常會用到這個技巧!大家請一定不要浪費這個強大的技巧!
例如我們 學習網這一個底部信息欄就可以用這個技巧來實現,大家可以嘗試自己實現一下:
總結
在這一節,其實我們主要講解的是2組選擇器:
這樣劃分就一目了然了。大家可以根據這個劃分,深入對比,更能加深理解和記憶。