[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>

 

■過濾選擇器

  ◆簡單過濾選擇器

<html>

<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{width:241px;height:83px;border:solid 1px #eee}

           h1{font-size:13px}

           ul{list-style-type:none;padding:0px}

           .DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;

           border-top:solid 1px #eee;border-bottom:solid 1px #eee}

           .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}

           #spnMove{width:238px;height:23px;line-height:23px;}

    </style>

    <script type=”text/javascript”>

            $(function(){ //增加第一個元素的類別

              $(“li:first”).addClass(“GetFocus”);//挑出li的第一個

            })

            $(function(){ //增加最後一個元素的類別

              $(“li:last”).addClass(“GetFocus”);//挑出li的第最後一個

            })      

            $(function(){ //增加去除所有與給定選擇器匹配的元素類別

              $(“li:not(.NotClass)”).addClass(“GetFocus”);//不包含該有項目的全部

            })      

            $(function(){ //增加所有索引值為偶數的元素類別,0開始計數

              $(“li:even”).addClass(“GetFocus”);

            })

            $(function(){ //增加所有索引值為奇數的元素類別,0開始計數

              $(“li:odd”).addClass(“GetFocus”);

            })

            $(function(){ //增加一個給定索引值的元素類別,0開始計數

              $(“li:eq(1)”).addClass(“GetFocus”);//指定陣列引數「等於」

            })

            $(function(){ //增加所有大於給定索引值的元素類別,0開始計數

              $(“li:gt(1)”).addClass(“GetFocus”);//指定陣列引數「大於」23

            })

            $(function(){ //增加所有小於給定索引值的元素類別,0開始計數

              $(“li:lt(4)”).addClass(“GetFocus”);//指定陣列引數「小於」的全部03

            })

            $(function(){ //增加標題類元素類別

              $(“div h1”).css(“width”,”238″);

              $(“:header”).addClass(“GetFocus”);//:header 獲取所有標題類型的元素,如h1h2……

            })

       

        //—

            $(function(){

              animateIt(); //增加動畫效果元素類別

              $(“#spnMove:animated”).addClass(“GetFocus”);

            })

            function animateIt() { //動畫效果  

              $(“#spnMove”).slideToggle(“slow”, animateIt);  

            }

        //—

    </script>

</head>

<body>

    <div>

        <h1>基本过滤选择器</h1>

        <ul>

           <li class=”DefClass”>Item 0</li>

           <li class=”DefClass”>Item 1</li>

           <li class=”NotClass”>Item 2</li>

           <li class=”DefClass”>Item 3</li>

        </ul>

        <span id=”spnMove”>Span Move</span>

    </div>

</body>

</html>

 

  ◆內容過濾選擇器

  ◆可見性過濾選擇器

  ◆屬性過濾選擇器

範例:

<!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}

           div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}

    </style>

    <script type=”text/javascript”>

            $(function(){ //顯示所有含有id屬性的元素

              $(“div[id]”).show(3000);//指挑出屬性有id

            })

            $(function(){ //顯示所有屬性title的值是“A”的元素

              $(“div[title=’A’]”).show(3000);//指定特定屬性 且還要屬性值一致

            })

            $(function(){ //顯示所有屬性title的值不是“A”的元素

              $(“div[title!=’A’]”).show(3000);//指定特定屬性 且還要屬性值不一致,ps沒有該屬性也算符合條件

            })      

            $(function(){ //顯示所有屬性title的值以“A”開始的元素

              $(“div[title^=’A’]”).show(3000);

            })

            $(function(){ //顯示所有屬性title的值以“C”結束的元素

              $(“div[title$=’C’]”).show(3000);

            })

            $(function(){ //顯示所有屬性title的值中含有“B”的元素

              $(“div[title*=’B’]”).show(3000);

            })

            $(function(){ //顯示所有屬性title的值中含有“B”且屬性id的值是“divAB”的元素

              $(“div[id=’divAB’][title*=’B’]”).show(3000);//同時滿足條件

            })

    </script>

</head>

<body>

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

    <div title=”A”>Title A</div>

    <div id=”divAB” title=”AB”>ID <br />Title AB</div>

    <div title=”ABC”>Title ABC</div>

</body>

</html>

 

  ◆子元素過濾選擇器

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

■表單選擇器

 

 

 

 

 

發表迴響

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