JQuery 学习笔记 选择器之四

JQuery 学习笔记 选择器之四

在 JQuery 中，选择器是一种用来查询和选择 HTML 元素的一种工具。可以通过选择器指定需要操作的元素，从而达到快速访问和操作文档的效果。本篇笔记将介绍四种常用的 JQuery 选择器方法：

1.层级选择器

使用层级选择器能够选择指定的子元素，例如选择 div 中的 p 元素：

$("div p")

2.属性选择器

使用属性选择器能够通过元素的属性值选择一个或多个元素，例如选择所有含有 title 属性的 a 元素：

$("a[title]")

3.过滤器选择器

使用过滤器选择器能够通过所有 DOM 元素进行筛选，例如选择第一个 h1 元素：

$("h1:first")

常用的过滤器选择器方法如下：

选择器	描述
:first	筛选选择器匹配的第一个元素
:last	筛选选择器匹配的最后一个元素
:even	筛选索引值为偶数的元素
:odd	筛选索引值为奇数的元素
:eq(index)	筛选索引值等于 index 的元素
:gt(index)	筛选索引值大于 index 的元素
:lt(index)	筛选索引值小于 index 的元素
:not(selector)	筛选不匹配指定选择器的元素
:header	筛选所有的标题元素（h1、h2 等）
:animated	筛选正在执行动画效果的元素
:focus	筛选当前获得焦点的元素
:contains(text)	筛选包含指定文本内容的元素
:empty	筛选所有不包含子元素（包含文本节点）的空元素
:parent	筛选至少包含一个子元素（包含文本节点）的元素
:has(selector)	筛选包含至少一个与指定选择器匹配元素的元素
:hidden	筛选所有不可见的元素（宽度或高度是 0，或者 display:none、visibility:hidden 等）
:visible	筛选所有可见的元素

4.表单选择器

使用表单选择器能够选择表单元素和表单元素组合，例如选择所有选中状态的单选框：

$("input:checked")

常用的表单选择器如下：

选择器	描述
:input	筛选所有表单元素
:text	筛选所有的文本域（input 和 textarea）
:password	筛选所有的密码框（input 类型为 password）
:radio	筛选所有的单选按钮
:checkbox	筛选所有的复选框
:submit	筛选所有的提交按钮（input 类型为submit）
:image	筛选所有的图像按钮（input 类型为image）
:reset	筛选所有的重置按钮（input 类型为reset）
:button	筛选所有的按钮（input类型为button）和button元素
:file	筛选所有的文件域（input 类型为 file）
:enabled	筛选所有可用元素
:disabled	筛选所有不可用元素
:selected	筛选所有选中的下拉列表选项及单/复选框

以上是 JQuery 中常用的选择器方法，不同的选择器方法可以组合使用，例如：

$("div p:first span")

可以选择第一个 div 中第一个 p 元素内的第一个 span 元素。

$("div.input-group:has(:button)")

可以选择所有包含按钮的 div 元素，其中 div 元素的 class 包含 input-group。

以上是本次选择器笔记的完整攻略，希望能够帮助大家更好地学习和使用 JQuery。