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

  • 相关阅读:
    jQuery拖动调整表格列宽度-resizableColumns
    图像切割之(一)概述
    内存泄漏以及常见的解决方法
    中国大概能用的NTPserver地址
    SWFUpload简单使用样例 Java版(JSP)
    XML是什么,它能够做什么?——写给XML入门者
    MfC 进度条控件
    IP地址的分类——a,b,c 类是怎样划分的
    Python的包管理工具Pip
    Chapter 1 Securing Your Server and Network(6):为SQL Server訪问配置防火墙
  • 原文地址:https://www.cnblogs.com/showersun/p/3741566.html
Copyright © 2011-2022 走看看