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中获取元素的几种方式小结》

  • 相关阅读:
    安装配置ZooKeeper及基本用法
    关于SqlServer数据库数据备份失败的问题
    input 框自动检测输入是否为数字
    nginx配置负载均衡
    nginx日志文件的配置
    nginx的proxy模块详解以及参数
    nginx配置反向代理
    正向代理和反向代理
    Linux建立虚拟ip的方法
    nginx基于ip的虚拟主机
  • 原文地址:https://www.cnblogs.com/showersun/p/3741566.html
Copyright © 2011-2022 走看看