JQuery的常用选择器、过滤器、方法全面介绍

JQuery的常用选择器

在 JQuery 中，选择器是最基础也是最核心的一部分，选择器可以帮助我们快速地找到页面中的元素，从而方便我们对其进行操作。

常用选择器

• 元素选择器（Element Selector）: 通过标签名称来选择元素，例如：$('p') 选取所有的“\

  " 元素。

• 类选择器（Class Selector）: 通过“类”属性来选择元素，例如：$('.class') 选取所有" class "类的元素。

• ID选择器（ID Selector）: 通过“id”属性来选择元素，例如：$('#id') 选取 ID 为“id”的元素。

• 后代选择器（Descendant Selector）: 选择器可以选择其某一元素内的后代元素（不仅仅是其子元素），例如：$('ul li') 选择所有"\

  "下的“\
  • "元素。

  • 子元素选择器（Child Selector）: 选择器仅选择其某一元素的子元素，例如：$('ul > li') 选择所有"\

    "子元素（即直接子元素）下的“\
    • ”元素。

    选择器的示例

    1. 隔行变色

    <style>
      .odd {
        background-color: #eee;
      }
    </style>
    
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      <li>列表项4</li>
      <li>列表项5</li>
    </ul>
    
    <script>
      // 使用基本选择器选取“\<li>"元素，并使用“odd”类名进行隔行变色
      $('li:odd').addClass('odd');
    </script>
    

    上述代码中，使用 $('li:odd') 选取所有奇数行的“\

  • "元素，然后添加“odd”类名，最终实现了隔行变色的效果。
    1. 点击切换图片

    <style>
      img {
        width: 200px;
        height: 200px;
      }
      .hide {
        display: none;
      }
    </style>
    
    <div class="box">
      <img src="image1.jpg" class="show">
      <img src="image2.jpg" class="hide">
    </div>
    
    <script>
      var current = 1; // 初始化当前显示图片的索引值为1
      $('.box').on('click', function() {
        $('.box img').eq(current).removeClass('show').addClass('hide');
        current = (current + 1) % 2;
        $('.box img').eq(current).removeClass('hide').addClass('show');
      });
    </script>
    

    上述代码中，使用 $('.box img').eq(current) 选取当前应该显示的图像，随后分别修改其对应的类名，实现点击切换图片的效果。