jQuery 选择器大全

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

基本选择器

元素选择器

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

--------

ID 选择器

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

---------------

类选择器

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

-------------

层次选择器

后代选择器

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

------ ---

子元素选择器

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

------ - ---

相邻兄弟选择器

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

---- - ------

兄弟选择器

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

---- - ------

过滤选择器

:first

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

------------

:last

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

-----------

:even

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

-------------

:odd

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

------------

:eq

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

------------

:gt

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

------------

:lt

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

------------

属性选择器

[attribute]

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

------------

[attribute=value]

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

------------------------------------

[attribute!=value]

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

-------------------------------------

[attribute^=value]

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

----------------------

[attribute$=value]

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

-------------------

[attribute*=value]

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

----------------------

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


上一篇:jQuery 实例
下一篇:jQuery 事件方法