首页 > PHP资讯 > HTML5培训技术 > jQuery教程之子元素过滤选择器

jQuery教程之子元素过滤选择器

HTML5培训技术



子元素过滤选择器
<script type="text/javascript"src="http://upload.server110.com/image/20140101/11031V2Z-0.jpg">《script》
<script type="text/javascript">
$(document).ready(function(){
  //改变每个class为one的div父元素 下 第二个子元素的背景色
  $("div.one :nth-child(2)").css("background","red");
 


:nth-child(index/even/odd/equation)
匹配其父元素下的第N个子或奇偶元素

:eq(index)'只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
可以使用:
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

返回值 Array
参数 index (Number) : 要匹配元素的序号,从1开始
示例
在每个 ul 查找第 2 个li
HTML


     
  • John

  •  
  • Karl

  •  
  • Brandon



     
  • Glen

  •  
  • Tane

  •  
  • Ralph


jQuery
$("ul li:nth-child(2)")
结果:
[
  • Karl
  • ,  
  • Tane
  • ]


      //改变每个class为one的div父元素 下 第一个子元素的背景色
      $("div.one :first-child").css("background","yellow");


    :first-child  匹配第一个子元素

    ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素

    返回值 Array

    示例
    在每个 ul 中查找第一个 li
    HTML


       
    • John

    •  
    • Karl

    •  
    • Brandon



       
    • Glen

    •  
    • Tane

    •  
    • Ralph


    jQuery
    $("ul li:first-child")
    结果:

    [

  • John
  • ,
  • Glen
  • ]


      //改变每个class为one的div父元素 下 最后一个子元素的背景色
       $("div.one:last-child").css("background","green");


    :last-child
    匹配最后一个子元素
    ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素
    返回值
    Array

    示例
    在每个 ul 中查找最后一个 li

    HTML


       
    • John

    •  
    • Karl

    •  
    • Brandon



       
    • Glen

    •  
    • Tane

    •  
    • Ralph


    jQuery

    $("ul li:last-child")
    结果:

    [

  • Brandon
  • ,
  • Ralph
  • ]


       //如果class 为one 的div 父元素下只有一个子元素。那么则改变这个子元素的背景色
       $("div.one :only-child").css("background","blue");


    :only-child
    如果某个元素是父元素中唯一的子元素,那将会被匹配
    如果父元素中含有其他元素,那将不会被匹配。
    返回值 Array
    示例
    在 ul 中查找是唯一子元素的 li
    HTML


       
    • John

    •  
    • Karl

    •  
    • Brandon



       
    • Glen


    jQuery

    $("ul li:only-child")
    结果:

    [

  • Glen
  • ]


    });
    《script》



    过滤选择器


     

        class等于one,id等于one
       
    class等于mini

     

     

         id="two" 的DIV
        
    class为mini,

        
    class为mini,

     

     

        
    class等于mini

        
    class等于mini

        
    class等于mini

        

     

     

         
    class等于mini

         
    class等于mini

         
    class等于mini

         
    class等于mini,

     

     
    style="display:none"的div

     
    的div

     
    包含input的type为"hidden"的div

     正在执行动画的span元素
     

    含有p元素的div

     

    HTML5培训技术

    本文由欣才IT学院整理发布,未经许可,禁止转载。
    支持31不支持0