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

  • 相关阅读:
    vue react 路由是否包含id
    vue react初始化脚手架
    多线程编程基础
    模拟实现简化版List迭代器&嵌入List
    斐波那契数与二分法的递归与非递归算法及其复杂度分析
    C语言模拟实现多态
    C++智能指针剖析(下)boost::shared_ptr&其他
    C++智能指针剖析(上)std::auto_ptr与boost::scoped_ptr
    C++模板实现动态顺序表(更深层次的深浅拷贝)与基于顺序表的简单栈的实现
    C++—模板(2)类模板与其特化
  • 原文地址:https://www.cnblogs.com/showersun/p/3741566.html
Copyright © 2011-2022 走看看