DIV CSS 佈局教程網

2.3 層次選擇器
編輯:jQuery基礎知識     

層次選擇器,就是通過元素之間的層次關系來獲取元素。層次選擇器在實際開發中,也是相當重要的。常見的層次關系包括:父子、後代、兄弟、相鄰。

在jQuery,層次選擇器共有4種:

jQuery層次選擇器 選擇器 說明 $("M N") 後代選擇器,選擇M元素內部後代N元素(所有N元素) $("M>N") 子代選擇器,選擇M元素內部子代N元素(所有第1級N元素) $("M~N") 兄弟選擇器,選擇M元素後所有的同級N元素 $("M+N") 相鄰選擇器,選擇M元素相鄰的下一個元素(M、N是同級元素)

注意以下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組選擇器:

  • (1)“後代選擇器”和“子代選擇器”;
  • (2)“兄弟選擇器”和“相鄰選擇器”;

這樣劃分就一目了然了。大家可以根據這個劃分,深入對比,更能加深理解和記憶。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved