几种获取元素的方式

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

html：

 

<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

 

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

 

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

html:

 

  <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

 

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

 

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

html:

 

<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

 

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

 

<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

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

 

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

html:

 

 <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

 

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

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