jQuery 选择器大全

jQuery 选择器是一种强大的工具，用于选择 HTML 元素并对其进行操作。在本章节中，我们将详细介绍 jQuery 中常用的选择器，帮助您更好地理解和使用它们。

基本选择器

元素选择器

元素选择器是最简单的选择器，通过元素的标签名称来选择对应的元素。例如，选择所有的 <div> 元素可以使用以下语法：

$("div")

ID 选择器

ID 选择器通过元素的 ID 属性来选择对应的元素。例如，选择 ID 为 "myElement" 的元素可以使用以下语法：

$("#myElement")

类选择器

类选择器通过元素的 class 属性来选择对应的元素。例如，选择所有类名为 "myClass" 的元素可以使用以下语法：

$(".myClass")

层次选择器

后代选择器

后代选择器用于选择指定元素的后代元素。例如，选择所有 <div> 元素下的 <p> 元素可以使用以下语法：

$("div p")

子元素选择器

子元素选择器用于选择指定元素的直接子元素。例如，选择所有 <div> 元素下的直接子元素 <p> 可以使用以下语法：

$("div > p")

相邻兄弟选择器

相邻兄弟选择器用于选择指定元素的相邻兄弟元素。例如，选择所有 <p> 元素后紧跟的 <span> 元素可以使用以下语法：

$("p + span")

兄弟选择器

兄弟选择器用于选择指定元素的所有兄弟元素。例如，选择所有 <p> 元素后面的所有 <span> 元素可以使用以下语法：

$("p ~ span")

过滤选择器

:first

:first 过滤器用于选择匹配的第一个元素。例如，选择第一个 <p> 元素可以使用以下语法：

$("p:first")

:last

:last 过滤器用于选择匹配的最后一个元素。例如，选择最后一个 <p> 元素可以使用以下语法：

$("p:last")

:even

:even 过滤器用于选择匹配的偶数位置元素。例如，选择所有偶数位置的 <div> 元素可以使用以下语法：

$("div:even")

:odd

:odd 过滤器用于选择匹配的奇数位置元素。例如，选择所有奇数位置的 <div> 元素可以使用以下语法：

$("div:odd")

:eq

:eq 过滤器用于选择匹配的指定位置元素。例如，选择第三个 <p> 元素可以使用以下语法：

$("p:eq(2)")

:gt

:gt 过滤器用于选择匹配的大于指定位置的元素。例如，选择位置大于 2 的所有 <p> 元素可以使用以下语法：

$("p:gt(2)")

:lt

:lt 过滤器用于选择匹配的小于指定位置的元素。例如，选择位置小于 2 的所有 <p> 元素可以使用以下语法：

$("p:lt(2)")

属性选择器

[attribute]

属性选择器用于选择具有指定属性的元素。例如，选择所有具有 title 属性的元素可以使用以下语法：

$("[title]")

[attribute=value]

属性值选择器用于选择具有指定属性和值的元素。例如，选择所有 href 属性值为 http://www.example.com 的元素可以使用以下语法：

$("[href='http://www.example.com']")

[attribute!=value]

不等于选择器用于选择具有指定属性但值不等于指定值的元素。例如，选择所有 href 属性值不为 http://www.example.com 的元素可以使用以下语法：

$("[href!='http://www.example.com']")

[attribute^=value]

开始匹配选择器用于选择具有指定属性值以指定值开头的元素。例如，选择所有 href 属性值以 http:// 开头的元素可以使用以下语法：

$("[href^='http://']")

[attribute$=value]

结束匹配选择器用于选择具有指定属性值以指定值结尾的元素。例如，选择所有 href 属性值以 .com 结尾的元素可以使用以下语法：

$("[href$='.com']")

[attribute*=value]

包含匹配选择器用于选择具有指定属性值包含指定值的元素。例如，选择所有 href 属性值包含 example 的元素可以使用以下语法：

$("[href*='example']")

以上就是 jQuery 中常用的选择器，希望通过本章节的介绍能够帮助您更好地理解和使用 jQuery 的选择器功能。在接下来的章节中，我们将继续介绍 jQuery 的其他功能和用法。