zoukankan      html  css  js  c++  java
  • jquery获取元素方式

    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");
    }) 
    

    原文转自脚本之家《jquery中获取元素的几种方式小结》

  • 相关阅读:
    3.STM32复位系统
    3.CM3内核架构-寄存器
    2.STM32启动文件
    java线程池
    java多线程
    动态规划(dynamic programming)(二、最优子问题与重叠子问题,以及与贪心的区别)
    SOAP协议
    动态规划(dynamic programming)(一、简介,举例)
    红黑树-RBT(二、基本操作之插入)
    红黑树-RBT(二、基本操作之左旋)
  • 原文地址:https://www.cnblogs.com/showersun/p/3741566.html
Copyright © 2011-2022 走看看