[jQuery 權威指南(第二版)]閱讀筆記-jQuery 選擇器[層次選擇器語法]

[jQuery 權威指南(第二版)]閱讀筆記-jQuery 選擇器[層次選擇器語法]

[jQuery 權威指南(第二版)]閱讀筆記-jQuery 選擇器[層次選擇器語法]

 

 

資料來源:http://www.java1234.com/a/javaziliao/shuji/2014/1206/3343.html

 

根據所獲取頁面中元素的不同,可以將jQuery 選擇器分為四大類:

 

■基本選擇器

基本選擇器語法

選擇器

功能描述

返回值

#id

根據給定的ID 匹配一個元素

單個元素

element

根據給定的元素名匹配所有元素

元素集合

.class

根據給定的類匹配元素

元素集合

*

匹配所有元素

元素集合

selector1,selectorN

將每一個選擇器匹配到的元素合併後一起返回

元素集合

 

Ps 「逗號」隔開表示個別元素,「空格」隔開表示階層關係

範例:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <title>使用jQuery基本選擇器</title>

    <script language=”javascript” type=”text/javascript”

            src=”Jscript/jquery-1.8.2.min.js”></script>

    <style type=”text/css”>

           body{font-size:12px;text-align:center}

           .clsFrame{width:300px;height:100px}

           .clsFrame div,span{display:none;float:left;

           width:65px;height:65px;border:solid 1px #ccc;margin:8px}

           .clsOne{background-color:#eee}

    </style>

    <script type=”text/javascript”>

            $(function(){ /* ID匹配元素「三個顯示一個」*/

              $(“#divOne”).css(“display”,”block”);

            })

            $(function(){ /*元素名匹配元素「三個顯示一個」,div下的span */

              $(“div span”).css(“display”,”block”);

            })

            $(function(){ /*類匹配元素*/

              $(“.clsFrame .clsOne”).css(“display”,”block”);

            })

            $(function(){ /*匹配所有元素「全部顯示」*/

              $(“*”).css(“display”,”block”);

            })

            $(function(){ /*合併匹配元素「三個顯示二個」*/

              $(“#divOne,span”).css(“display”,”block”);

            })

    </script>

</head>

<body>

<div class=”clsFrame”>

    <div id=”divOne”>ID</div>

    <div class=”clsOne”>CLASS</div>

    <span>SPAN</span>

</div>

</body>

</html>

ps:「div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px}」這行css有用到float:left;讓元件可以橫向擺放

 

■層次選擇器

ancestor descendant

根據祖先元素匹配所有的後代元素「不管階數有多少」

元素集合

parent > child

根據父元素匹配所有的子元素

元素集合

prev + next

匹配所有緊接在prev 元素後的相鄰元素

元素集合

prev ~ siblings

匹配prev 元素之後的所有兄弟元素

元素集合

 

範例:

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <title>使用jQuery層次選擇器</title>

    <script language=”javascript” type=”text/javascript”

            src=”Jscript/jquery-1.8.2.min.js”></script>

    <style type=”text/css”>

           body{font-size:12px;text-align:center}

           div,span{float:left;border:solid 1px #ccc;margin:8px;display:none}

           .clsFraA{width:65px;height:65px}

           .clsFraP{width:45px;height:45px;background-color:#eee}

           .clsFraC{width:25px;height:25px;background-color:#ddd}

    </style>

    <script type=”text/javascript”>

     $(function(){ //匹配後代

       $(“#divMid”).css(“display”,”block”);

       $(“div span”).css(“display”,”block”);//[此範例 包含下麵元素2]

     })

     $(function(){ //匹配子元素

       $(“#divMid”).css(“display”,”block”);

       $(“div>span”).css(“display”,”block”);//[此範例 包含下麵元素1]

     })

     $(function(){ //匹配後面元素

       $(“#divMid + span”).css(“display”,”block”);//+ 是指 下面的隔壁鄰居,所以這行無效

       $(“#divMid + div”).css(“display”,”block”);//+ 是指 下麵的隔壁鄰居

       //$(“#divMid”).next().css(“display”,”block”);//下面的隔壁鄰居,功能同上

     })

     $(function(){ //匹配所有後面元素

       $(“#divMid ~ div”).css(“display”,”block”);//~ 是指 下面的所有隔壁鄰居

       //$(“#divMid”).nextAll().css(“display”,”block”);//下面的所有隔壁鄰居,功能同上

     })     

     $(function(){

       $(“#divMid”).siblings(“div”).css(“display”,”block”);//siblings-所有鄰居包含之前的

     })

 

    </script>

</head>

<body>

    <div class=”clsFraA”>Left</div>

    <div class=”clsFraA” id=”divMid”>

         <span class=”clsFraP” id=”Span1″>

              <span class=”clsFraC” id=”Span2″></span>

         </span>

    </div>

    <div class=”clsFraA”>Right_1</div>

    <div class=”clsFraA”>Right_2</div>

</body>

</html>

 

■過濾選擇器

  ◆簡單過濾選擇器

  ◆內容過濾選擇器

  ◆可見性過濾選擇器

  ◆屬性過濾選擇器

  ◆子元素過濾選擇器

  ◆表單物件屬性過濾選擇器

■表單選擇器

 

 

 

 

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *