常用jQuery选择器汇总

对于常用jQuery选择器汇总，可以遵循以下步骤进行讲解：

一、什么是jQuery选择器？

jQuery选择器是一种用于操作和处理HTML和CSS的字符串规则，该规则允许开发人员按指定方式选择和操作HTML和CSS元素。jQuery选择器通常用于筛选或搜索HTML元素，然后进行修改或操作。

二、常用的jQuery选择器有哪些？

jQuery选择器按功能和用途可以分为以下几类：

1. 基本选择器

基本选择器是最简单的选择器，它选择指定的HTML元素，并可以限制元素的类型、类名、ID等属性。基本选择器包括以下几种：

• 元素选择器：使用HTML元素名称来选择，例如 $('p') 表示选择所有的段落元素。
• ID选择器：使用HTML元素的ID属性值来选择，例如 $('#id') 表示选择指定ID值的元素。
• 类选择器：使用HTML元素的class属性值来选择，例如 $('.class') 表示选择指定class值的元素。
• 属性选择器：使用HTML元素的任意属性值来选择，例如 $('input[type="text"]') 表示选择所有类型为文本（text）的input元素。

2. 层次选择器

层次选择器通过选择元素与它们在HTML结构中的关系来进行筛选，包括以下几种：

• 后代选择器：通过元素的后代关系来筛选元素，例如 $('div p') 表示选择所有段落元素，但是这些段落元素必须嵌套在div元素内。
• 子元素选择器：通过元素的直接子元素来筛选元素，例如 $('ul > li') 表示选择所有直接子元素为li元素的ul元素。
• 相邻兄弟选择器：通过选择与指定元素相邻的同级元素来筛选元素，例如 $('h1 + p') 表示选择紧跟着h1元素的p元素。
• 普通兄弟选择器：通过选择与指定元素在同一级别的元素来筛选元素，例如 $('h1 ~ p') 表示选择h1元素后面的所有p元素。

3. 过滤器选择器

过滤器选择器根据元素的属性、状态等信息进行筛选，包括以下几种：

• :first：选择第一个元素，例如 $('ul li:first') 表示选择第一个li元素。
• :last：选择最后一个元素，例如 $('ul li:last') 表示选择最后一个li元素。
• :even和:odd：选择索引为偶数或奇数的元素，例如 $('ul li:even') 表示选择索引为偶数的li元素。
• :checked：选择被选中的元素，例如 $(':checked') 表示选择所有被选中的元素。

三、示例说明

下面给出两个常用的jQuery选择器示例：

1. 使用类选择器操作元素样式

HTML代码：

<div class="box"></div>

CSS样式：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

jQuery代码：

$('.box').css('background-color', 'blue');

解释说明：通过类选择器 .box 选中指定的元素，然后使用 css 方法修改元素的 background-color 样式属性，将其改为蓝色。

2. 使用属性选择器筛选表单元素

HTML代码：

<input type="text" name="user_name">
<input type="password" name="password">

jQuery代码：

$('input[name="user_name"]').val("Jack");

解释说明：通过选择器 input[name="user_name"] 筛选出指定的input元素，然后使用 val 方法将其值设置为 Jack，这样可以实现在指定表单中自动填入用户名的功能。

以上就是常用jQuery选择器的完整攻略了，希望能对你理解和应用jQuery选择器提供帮助。