jQuery基本过滤选择器实例操作

最新推荐文章于 2021-07-25 23:52:24 发布

转载最新推荐文章于 2021-07-25 23:52:24 发布 · 159 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.mk2048.com/blog/blog.php?id=200k2jbjb&title=jQuery%E5%9F%BA%E6%9C%AC%E8%BF%87%E6%BB%A4%E9%80%89%E6%8B%A9%E5%99%A8%E5%AE%9E%E4%BE%8B%E6%93%8D%E4%BD%9C

标签

#jQuery

前端专栏收录该内容

115 篇文章

订阅专栏

本文深入讲解了jQuery中各种选择器的使用方法，包括选择第一个和最后一个元素，排除特定类的元素，以及基于索引和属性的选择。通过实例演示了如何使用这些选择器来改变页面元素的样式。

                        
                    

        <script type="text/javascript">
  $(document).ready(function(){
       //选择第一个div元素.
      $('#btn1').click(function(){
          $('div:first').css("background","#bfa");
      })
      //选择最后一个div元素.
      $('#btn2').click(function(){
          $('div:last').css("background","#bfa");
      })
      //选择class不为one的 所有div元素.
      $('#btn3').click(function(){
          $('div:not(.one)').css("background","#bfa");
      })
      //选择 索引值为偶数 的div元素。
      $('#btn4').click(function(){
          $('div:even').css("background","#bfa");
      })
      //选择 索引值为奇数 的div元素。
      $('#btn5').click(function(){
          $('div:odd').css("background","#bfa");
      })
      //选择 索引等于 3 的元素
      $('#btn6').click(function(){
          $('div:eq(3)').css("background","#bfa");
      })
      //选择 索引大于 3 的元素
      $('#btn7').click(function(){
          $('div:gt(3)').css("background","#bfa");
      })
     //选择 索引小于 3 的元素
      $('#btn8').click(function(){
          $('div:lt(3)').css("background","#bfa");
      })
       //选择 所有的标题元素.比如h1, h2, h3等等...
      $('#btn9').click(function(){
          $(':header').css("background","#bfa");
      })
      //选择 当前正在执行动画的所有元素.
      $('#btn10').click(function(){
          $(':animated').css("background","#bfa");
      });
  });
  </script>
     
    