JQuery 选择器、过滤器介绍

JQuery是一种快速、简洁、功能丰富的JavaScript库，它简化了HTML文档的遍历和操作、事件处理、动画效果和Ajax交互等操作。其中选择器和过滤器是JQuery中最为常用的功能之一。本文将从JQuery选择器、过滤器的基础概念、使用方法以及示例展示等多个方面对其进行详细介绍。

1. 基础概念

1.1 选择器

选择器是JQuery中用来选取页面元素的一种方法。选择器基于Element Selector（元素选择器）、ID Selector（ID选择器）、Class Selector（类选择器）、Attribute Selector（属性选择器）、:first Selector（第一个元素选择器）等多种方式。

1.2 过滤器

过滤器是JQuery中通过元素属性（class、id、标签名等）和元素状态（焦点、可见、动画等）进行选择的方法。常见的过滤器包括：:first、:last、:odd、:even、:eq等。

2. 使用方法

2.1 选择器使用方法

使用JQuery选择器可以直接选取到需要的HTML元素，以下是一些常用的选择器示例。

• 通过元素名选取元素。例如：

$('div') // 选取页面中所有div元素

• 通过类名选取元素。例如：

$('.my-class') // 选取页面中所有class为my-class的元素

• 通过ID选取元素。例如：

$('#my-id') // 选取页面中ID为my-id的元素

• 通过属性选取元素。例如：

$('a[href]') // 选取页面中包含href属性的所有a元素

2.2 过滤器使用方法

使用JQuery过滤器可以通过元素属性和状态来选取需要的HTML元素，以下是一些常用的过滤器示例。

• 选取第一个元素。例如：

$('div:first') // 选取页面中第一个div元素

• 选取最后一个元素。例如：

$('div:last') // 选取页面中最后一个div元素

• 选取奇数元素。例如：

$('div:odd') // 选取页面中奇数个div元素

• 选取偶数元素。例如：

$('div:even') // 选取页面中偶数个div元素

3. 示例说明

3.1 示例一

以下是一个简单的示例，通过选择器选取页面中的一个元素，然后使用过滤器选取其中的部分元素。

HTML代码：

<div id="my-div">
  <p>第一个段落</p>
  <p>第二个段落</p>
  <ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
  </ul>
</div>

JQuery代码：

$('#my-div p:last')  // 选取ID为my-div内最后一个p元素
$('#my-div li:first')  // 选取ID为my-div内第一个li元素

以上代码可以分别选取页面中的“第二个段落”和“第一个列表项”。

3.2 示例二

以下是另一个示例，通过选择器和过滤器选取页面中特定的元素，并对选取到的元素进行操作。

HTML代码：

<div class="box">
  <ul>
    <li>第一个列表项</li>
    <li>第二个列表项</li>
    <li>第三个列表项</li>
  </ul>
</div>

JQuery代码：

$('.box li:nth-child(2)')  // 选取class为box内第二个li元素
  .addClass('selected')   // 为选取到的元素添加class属性
  .text('已选中')        // 修改选取到的元素的文本内容

以上代码可以选取页面中的“第二个列表项”，并将其修改为“已选中”。