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 的其他功能和用法。