jQuery三大选择器
简介
在使用 jQuery 进行开发时，选择器是一个非常重要的概念。它允许我们根据某些规则从 HTML 文档中选取元素，并对这些元素进行操作。jQuery 提供了三大选择器，它们分别是：基本选择器、层级选择器和过滤选择器。本文将详细介绍这三种选择器的用法，并通过代码示例进行讲解。
基本选择器
基本选择器是最常用的选择器之一，它通过元素的标签名、类名、ID 或属性等来选取元素。下面是一些基本选择器的示例：
- 标签选择器（Tag Selector）：使用元素的标签名来选取元素。
$('p') // 选取所有 <p> 元素
- 类选择器（Class Selector）：使用元素的类名来选取元素。
$('.my-class') // 选取所有类名为 "my-class" 的元素
- ID 选择器（ID Selector）：使用元素的 ID 来选取元素。
$('#my-id') // 选取 ID 为 "my-id" 的元素
- 属性选择器（Attribute Selector）：使用元素的属性来选取元素。
$('[name="username"]') // 选取所有 name 属性为 "username" 的元素
层级选择器
层级选择器用于根据元素之间的层级关系进行选择。下面是一些常见的层级选择器的示例：
- 子元素选择器（Child Selector）：选取某个元素的直接子元素。
$('ul > li') // 选取所有 <ul> 元素下的直接子元素 <li>
- 后代元素选择器（Descendant Selector）：选取某个元素的后代元素。
$('ul li') // 选取所有 <ul> 元素下的所有后代元素 <li>
- 相邻兄弟元素选择器（Adjacent Sibling Selector）：选取某个元素的下一个相邻兄弟元素。
$('h1 + p') // 选取紧接在 元素后的下一个 <p> 元素
- 兄弟元素选择器（General Sibling Selector）：选取某个元素的所有相邻兄弟元素。
$('h1 ~ p') // 选取和 <h1> 元素相邻的所有 <p> 元素
过滤选择器
过滤选择器用于根据元素的属性、状态或位置等进行筛选。下面是一些常见的过滤选择器的示例：
- :first 过滤器（First Filter）：选取第一个匹配的元素。
$('p:first') // 选取第一个 <p> 元素
- :last 过滤器（Last Filter）：选取最后一个匹配的元素。
$('p:last') // 选取最后一个 <p> 元素
- :even 过滤器（Even Filter）：选取所有索引为偶数的元素。
$('li:even') // 选取所有索引为偶数的 <li> 元素
- :odd 过滤器（Odd Filter）：选取所有索引为奇数的元素。
$('li:odd') // 选取所有索引为奇数的 <li> 元素
示例代码
下面是一个使用 jQuery 选择器的示例代码：
<!DOCTYPE html>
<html>
<head>
<script src="
</head>
<body>
<h1>jQuery选择器示例
<ul>
<li class="fruit">苹果</li>
<li class="fruit">香蕉</li>
<li class="vegetable">胡萝卜</li>
<li class="vegetable">西红柿</li>
</ul>
<script>
// 使用基本选择器选取元
