JQuery选择器特辑 详细小结

「JQuery选择器特辑 详细小结」这篇文章主要是介绍 jQuery 的选择器，包括基本选择器和层次选择器、属性选择器、过滤选择器、表单选择器等，以及选择器的使用方法和注意事项。

首先，基本选择器主要是通过元素名称、ID 或 class 属性来选择元素，形式如下：

• 元素选择器：通过元素名称来选择元素，例如 p 选择所有的 <p> 元素。
• ID 选择器：通过元素的 ID 属性来选择元素，例如 #id 选择 ID 属性为 id 的元素。
• 类选择器：通过元素的 class 属性来选择元素，例如 .class 选择 class 属性为 class 的元素。

示例1：

//通过元素名称选择所有的图片元素
$('img')

接着，层次选择器主要是通过父子关系、兄弟关系来选择元素，常见的形式包括：

• 后代选择器：选择所有指定元素的后代元素，例如 parent child 选择所有 parent 元素的后代 child 元素。
• 子元素选择器：选择指定父元素下的所有子元素，例如 parent > child 选择 parent 元素的直接子元素 child。
• 相邻兄弟选择器：选择指定元素之后的所有相邻兄弟元素，例如 prev + next 选择 prev 元素之后的一个相邻兄弟元素 next。
• 兄弟选择器：选择指定元素后面的所有兄弟元素，例如 prev ~ siblings 选择 prev 元素之后的所有兄弟元素 siblings。

示例2：

//选择所有 class 属性为 child 的 div 元素下的所有 class 属性为 grand-child 的 p 元素
$('div .child p.grand-child')

接下来是属性选择器，主要是根据元素的属性来选择元素，形式如下：

• 基本属性选择器：选择元素拥有指定属性的元素，例如 [attr] 选择拥有 attr 属性的元素。
• 带有指定属性值的属性选择器：选择元素拥有指定属性并且属性值等于指定值的元素，例如 [attr=value] 选择 attr 属性等于 value 的元素。
• 子串匹配属性选择器：选择元素拥有指定属性并且属性值包含指定字符串的元素，例如 [attr*=value] 选择 attr 属性包含 value 字符串的元素。

示例3：

//选择所有拥有 title 属性以及该属性包含 "提示" 字符串的元素
$('[title*=提示]')

然后是过滤选择器，主要是根据元素的特殊状态来选择元素，常见的过滤选择器包括：

• :first：选择第一个元素。
• :last：选择最后一个元素。
• :even：选择所有偶数位置的元素。
• :odd：选择所有奇数位置的元素。
• :eq(n)：选择第 n 个元素。
• :gt(n)：选择第 n+1 个及以后的元素。
• :lt(n)：选择第 n-1 个及以前的元素。
• :not(selector)：选择不匹配指定选择器的元素。

示例4：

//选择所有第二个及其后面的奇数位置的元素
$('li:gt(0):odd')

最后是表单选择器，主要是针对表单元素的选择器，包括：

• :input：选择所有输入元素，例如 input、textarea 等。
• :text：选择所有文本框。
• :password：选择所有密码框。
• :radio：选择所有单选框。
• :checkbox：选择所有复选框。
• :submit：选择所有提交按钮。
• :image：选择所有图像按钮。
• :reset：选择所有重置按钮。
• :button：选择所有自定义按钮。

示例5：

//选择所有类别为 checkbox、没有被选中、名称为 "fruit" 的复选框元素
$('input:checkbox:not(:checked)[name=fruit]')

以上是对「JQuery选择器特辑 详细小结」的完整攻略，希望能为您提供帮助。