不朽情缘mg游戏视频

書名： jQuery從入門到精通（軟件開發視頻大講堂）
作者名：明日科技
本章字數： 2733字
更新時間： 2020-11-28 23:47:23

4.5 層次選擇器

所謂的層級選擇器，就是根據頁面DOM元素之間的父子關系作為匹配的篩選條件。首先學習一下頁面上元素的關系。例如，下面的代碼是最為常用也是最簡單的DOM元素結構。

        <html>
            <head>  </head>
            <body>  </body>
        </html>

在這段代碼所示的頁面結構中，html元素是頁面上其他所有元素的祖先元素，那么head元素就是html元素的子元素，同時html元素也是head元素的父元素。頁面上的head元素與body元素是同輩元素。也就是說html元素是head元素和body元素的“爸爸”, head元素和body元素是html元素的“兒子”, head元素與body元素是“兄弟”。具體關系如圖4.9所示。

圖4.9 元素層級關系示意圖

在了解了頁面上元素的關系后，我們再來介紹jQuery提供的層級選擇器。jQuery提供了Ancestor descendant選擇器、parent > child選擇器、prev + next選擇器和prev～siblings選擇器，下面進行詳細介紹。

4.5.1 ancestor descendant選擇器

ancestor descendant選擇器中的ancestor代表祖先，descendant代表子孫，用于在給定的祖先元素下匹配所有的后代元素。ancestor descendant選擇器的使用方法如下：

        $("ancestor descendant");

ancestor是指任何有效的選擇器。

descendant是用以匹配元素的選擇器，并且它是ancestor所指定元素的后代元素。

例如，要匹配ul元素下的全部li元素，可以使用下面的jQuery代碼：

        $("ul li");

【例4.5】通過jQuery為版權列表設置樣式。（實例位置：光盤\TM\sl\4\5）

（1）創建一個名稱為index.html的文件，在該文件的<head>標記中應用下面的語句引入jQuery庫。

        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

（2）在頁面的<body>標記中，首先添加一個<div>標記，并在該<div>標記內添加一個<ul>標記及其子標記<li>，然后在<div>標記的后面再添加一個<ul>標記及其子標記<li>，代碼如下：

        <div id="bottom">
        <ul>
            <li>技術服務熱線：400-×××-1066 傳真：0431-84×××××6 企業郵箱：mingri××××@mingri××××.com</li>
            <li>Copyright &copy; www.mrbccd.com All Rights Reserved! </li>
        </ul>
        </div>
        <ul>
            <li>技術服務熱線：400-×××-1066 傳真：0431-84×××××6 企業郵箱：mingri××××@mingri××××.com</li>
            <li>Copyright &copy; www.mrbccd.com All Rights Reserved! </li>
        </ul>

（3）編寫CSS樣式，通過ID選擇符設置<div>標記的樣式，并且編寫一個類選擇符copyright，用于設置<div>標記內的版權列表的樣式，關鍵代碼如下：

        <style type="text/css">
        #bottom{
            background-image:url(images/bg_bottom.jpg);         /＊設置背景＊/
            width:800px;                                        /＊設置寬度＊/
            height:58px;                                        /＊設置高度＊/
            clear: both;                                        /＊設置左右兩側無浮動內容＊/
            text-align:center;                                  /＊設置居中對齊＊/
            padding-top:10px;                                   /＊設置頂邊距＊/
            font-size:9pt;                                      /＊設置字體大小＊/
        }
        .copyright{
            color:#FFFFFF;                                      /＊設置文字顏色＊/
            list-style:none;                                    /＊不顯示項目符號＊/
            line-height:20px;                                   /＊設置行高＊/
        }
        </style>

（4）在引入jQuery庫的代碼下方編寫jQuery代碼，匹配div元素的子元素ul，并為其添加CSS樣式，具體代碼如下：

        <script type="text/javascript">
        $(document).ready(function(){
          $("div ul").addClass("copyright");                   //為div元素的子元素ul添加樣式
        });
        </script>

運行本示例，將顯示如圖4.10所示的效果，其中上面的版權信息是通過jQuery添加樣式的效果，下面的版權信息為默認的效果。

4.10 通過jQuery為版權列表設置樣式

4.5.2 parent>child選擇器

parent > child選擇器中的parent代表父元素，child代表子元素，用于在給定的父元素下匹配所有的子元素。使用該選擇器只能選擇父元素的直接子元素。parent > child選擇器的使用方法如下：

        $("parent > child");

parent是指任何有效的選擇器。

child是用以匹配元素的選擇器，并且它是parent元素的子元素。

例如，要匹配表單中所有的子元素input，可以使用下面的jQuery代碼：

        $("form > input");

【例4.6】為表單的直接子元素input換膚。（實例位置：光盤\TM\sl\4\6）

（1）創建一個名稱為index.html的文件，在該文件的<head>標記中應用下面的語句引入jQuery庫。

        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

（2）在頁面的<body>標記中，添加一個表單，并在該表單中添加6個input元素，并且將“換膚”按鈕用<span>標記括起來，關鍵代碼如下：

        <form id="form1" name="form1" method="post" action="">
          姓&nbsp; &nbsp;名：<input type="text" name="name" id="name" />
          <br />
          籍&nbsp; &nbsp;貫：<input name="native" type="text" id="native" />
          <br />
          生&nbsp; &nbsp;日：<input type="text" name="birthday" id="birthday" />
          <br />
          E-mail:<input type="text" name="email" id="email" />
          <br />
          <span>
          <input type="button" name="change" id="change" value="換膚"/>
          </span>
          <input type="button" name="default" id="default" value="恢復默認"/>
          <br />
        </form>

（3）編寫CSS樣式，用于指定input元素的默認樣式，并且添加一個用于改變input元素樣式的CSS類，具體代碼如下：

        <style type="text/css">
        input{
            margin:5px;                                    /＊設置input元素的外邊距為5像素＊/
        }
        .input {
            font-size:12pt;                                /＊設置文字大小＊/
            color: #333333;                                /＊設置文字顏色＊/
            background-color:#cef;                         /＊設置背景顏色＊/
            border:1px solid#000000;                       /＊設置邊框＊/
        }
        </style>

（4）在引入jQuery庫的代碼下方編寫jQuery代碼，實現匹配表單元素的直接子元素并為其添加和移除CSS樣式，具體代碼如下：

        <script type="text/javascript">
        $(document).ready(function(){
            $("#change").click(function(){                 //綁定"換膚"按鈕的單擊事件
                $("form>input").addClass("input");         //為表單元素的直接子元素input添加樣式
            });
            $("#default").click(function(){                //綁定“恢復默認”按鈕的單擊事件
            $("form>input").removeClass("input");          //移除為表單元素的直接子元素input添加的樣式
            });
        });
        </script>

說明

在上面的代碼中，addClass()方法用于為元素添加CSS類，removeClass()方法用于為移除為元素添加的CSS類。

運行本實例，將顯示如圖4.11所示的效果，單擊“換膚”按鈕，將顯示如圖4.12所示的效果，單擊“恢復默認”按鈕，將再次顯示如圖4.13所示的效果。

圖4.11 默認的效果

圖4.12 單擊“換膚”按鈕之后的效果

圖4.13 為“換膚”按鈕添加CSS類的效果

在圖4.12中，雖然“換膚”按鈕也是form元素的子元素input，但由于該元素不是form元素的直接子元素，所以在執行換膚操作時，該按鈕的樣式并沒有改變。如果將步驟（4）中的第4行和第7行的代碼中的$("form > input")修改為$("form input")，那么單擊“換膚”按鈕后，將顯示如圖4.13所示的效果，即“換膚”按鈕也將被添加CSS類。這也就是parent > child選擇器和ancestor descendant選擇器的區別。

4.5.3 prev+next選擇器

prev + next選擇器用于匹配所有緊接在prev元素后的next元素。其中，prev和next是兩個相同級別的元素。prev + next選擇器的使用方法如下：

        $("prev + next");

prev是指任何有效的選擇器。

next是一個有效選擇器并緊接著prev選擇器。

例如，要匹配<div>標記后的<img>標記，可以使用下面的jQuery代碼：

        $("div + img");

【例4.7】篩選緊跟在<lable>標記后的<p>標記并改變匹配元素的背景顏色為淡藍色。（實例位置：光盤\TM\sl\4\7）

（1）創建一個名稱為index.html的文件，在該文件的<head>標記中應用下面的語句引入jQuery庫。

        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

（2）在頁面的<body>標記中，首先添加一個<div>標記，并在該<div>標記中添加兩個<label>標記和<p>標記，其中第二對<label>標記和<p>標記用<fieldset>括起來，然后在<div>標記的下方再添加一個<p>標記，關鍵代碼如下：

        <div>
            <label>第一個label</label>
            <p>第一個p</p>
            <fieldset>
              <label>第二個label</label>
              <p>第二個p</p>
            </fieldset>
        </div>
        <p>div外面的p</p>

（3）編寫CSS樣式，用于設置body元素的字體大小，并且添加一個用于設置背景的CSS類，具體代碼如下：

圖4.14 將label元素的同級元素p的背景設置為淡藍色

        <style type="text/css">
            .background{background:#cef}
            body{font-size:12px; }
        </style>

（4）在引入jQuery庫的代碼下方編寫jQuery代碼，實現匹配label元素的同級元素p，并為其添加CSS類，具體代碼如下：

        <script type="text/javascript" charset="GBK">
            $(document).ready(function() {
                $("label+p").addClass("background"); //為匹配的元
        素添加CSS類
        });
        </script>

運行本實例，將顯示如圖4.14所示的效果。在圖中可以看到“第一個p”和“第二個p”的段落被添加了背景，而“div外面的p”由于不是label元素的同級元素，所以沒有被添加背景。

4.5.4 prev～siblings選擇器

prev～siblings選擇器用于匹配prev元素之后的所有siblings元素。其中，prev和siblings是兩個相同輩元素。prev～siblings選擇器的使用方法如下：

        $("prev～siblings");

prev是指任何有效的選擇器。

siblings是一個有效選擇器并且它是prev選擇器的同輩。

例如，要匹配div元素的同輩元素ul，可以使用下面的jQuery代碼：

        $("div～ul");

【例4.8】篩選頁面中div元素的同輩元素。（實例位置：光盤\TM\sl\4\8）

（1）創建一個名稱為index.html的文件，在該文件的<head>標記中應用下面的語句引入jQuery庫。

        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>

（2）在頁面的<body>標記中，首先添加一個<div>標記，并在該<div>標記中添加兩個<p>標記，然后在<div>標記的下方再添加一個<p>標記，關鍵代碼如下：

        <div>
            <p>第一個p</p>
            <p>第二個p</p>
        </div>
        <p>div外面的p</p>

（3）編寫CSS樣式，用于設置body元素的字體大小，并且添加一個用于設置背景的CSS類，具體代碼如下：

        <style type="text/css">
            .background{background:#cef}
            body{font-size:12px; }
        </style>

圖4.15 為div元素的同輩元素設置背景

（4）在引入jQuery庫的代碼下方編寫jQuery代碼，實現匹配div元素的同輩元素p，并為其添加CSS類，具體代碼如下：

        <script type="text/javascript" charset="GBK">
            $(document).ready(function() {
                $("div～p").addClass("background"); //為匹配的元素添
        加CSS類
            });
        </script>

運行本實例，將顯示如圖4.15所示的效果。在圖中可以看到“div外面的p”被添加了背景，而“第一個p”和“第二個p”的段落由于它不是div元素的同輩元素，所以沒有被添加背景。

官术网_书友最值得收藏!

jQuery從入門到精通 （軟件開發視頻大講堂）

4.5 層次選擇器

4.5.1 ancestor descendant選擇器

4.5.2 parent>child選擇器

4.5.3 prev+next選擇器

4.5.4 prev～siblings選擇器

jQuery從入門到精通（軟件開發視頻大講堂）