几种获取元素的方式

1 从集合中通过指定的序号获取元素

html：

 

View Code

< div >
     < p > 0 </ p >
     < p > 1 </ p >
     < p > 2 </ p >
     < p > 3 </ p >
     < p > 4 </ p >
     < p > 5 </ p >
     < p > 6 </ p >
     < p > 7 </ p >
     </ div >

 JS

 

View Code

< script type = " text/javascript " >
      jQuery(function(){
        $( " p " ).eq( 2 ).css( " color " , " red " );
        $( " p " ).eq( 3 ).css( " color " , " red " );
      })
    </ script >

 

2 获取指定条件一致和指定范围的元素

html:

 

View Code

   < div >
     < p > 0 </ p >
     < p > 1 </ p >
     < p  class ="center" > 2 </ p >
     < p  class ="center" > 3 </ p >
     < p > 4 </ p >
     < p > 5 </ p >
     < p > 6 </ p >
     < p > 7 </ p >
     </ div >

 

JS

 

View Code

   < script type = " text/javascript " >
      jQuery( function (){
      $( " p " ).filter( ' .center ' ).css( " color " , " red " ); 
      })
      $( function (){
        $( " p " ).slice( 5 , 7 ).css( " color " , " yellow " );
      })
    < / script>

 

3 获取与条件表达式一致的元素

html:

 

View Code

< div >
     < p > 0 </ p >
     < p > 1 </ p >
     < p  class ="center" > 2 </ p >
     < p  class ="center" > 3 </ p >
     < p > 4 </ p >
     < p  class ="aa" > 5 </ p >
     < p > 6 </ p >
     < p > 7 </ p >
     </ div >

js

 

View Code

< script type = " text/javascript " >
      jQuery( function (){
        $( " p " ).each( function (){
            switch ( true ){
                case  $( this ).is( " .center " ):
                    $( this ).css( " color " , " red " );
                     break ;
                case  $( this ).is( " .aa " ):
                    $( this ).css( " color " , " yellow " );
                     break ;
           }
         
        })
      })
    < / script>

 

4 获取元素的上一个元素和下一个元素

Html:

 

View Code

< div  id ="aa" >
     < p > 1号 </ p >
     < p  class ="yes" > 2号 </ p >
     < p > 3号 </ p >
     < p > 4号 </ p >
     < p > 5号 </ p >
     < p  class ="yes" > 6号 </ p >
     < p  class ="yes" > 7号 </ p >
     </ div >

js

View Code

     // 获取元素的下一个元素
   jQuery( function (){
   $( " p " ).next( " .yes " ).css( " color " , " red " );
       })
    // 获取元素的上一个元素    
       jQuery( function (){
         $( " p " ).prev( " .yes " ).css( " color " , " red " );
       })

 

5 获取元素的父元素和子元素

html:

 

View Code

  < div id = " aa " >
     < p > 1号 </ p >
     < p  class = " yes " > 2号 </ p >
     < p > 3号 </ p >
     < p > 4号 </ p >
     < p > 5号 </ p >
     < p  class = " yes " > 6号 </ p >
     < p  class = " yes " > 7号 </ p >
     </ div >

 

js

 

View Code

  // 获取元素的父元素    
       jQuery( function (){
         $( " p " ).parent().css( " color " , " red " );
       })

   // 获取元素的子元素    
       jQuery( function (){
         $( " #aa " ).children( " .yes " ).css( " color " , " red " );
       })