常用 jQuery 选择器汇总
jQuery 是一个很好用的 JavaScript 库,它允许开发者更加方便地操作 HTML 文档。在 jQuery 中,选择器是一种非常重要的工具,可以精确地选中 DOM 元素并进行操作。
本文将介绍常用的 jQuery 选择器,并提供详细的说明和示例代码,帮助读者更好地理解和掌握这些选择器的用法。
基本选择器
元素选择器
元素选择器通过元素名称选取指定类型的 HTML 元素,语法格式为 $(element)
。例如:
------ -- ---- --- --
ID 选择器
ID 选择器通过元素的 ID 属性选取指定的 HTML 元素,语法格式为 $("#id")
。例如:
---------------- -- -- -- - ------------ ---
类选择器
类选择器通过元素的 class 属性选取指定的 HTML 元素,语法格式为 $(".class")
。例如:
-------------- -- -- ----- - ---------- ---
层次选择器
层次选择器可以通过不同的关系选取父元素、子元素、兄弟元素等。
后代选择器
后代选择器选取某个父元素下面的所有后代元素,语法格式为 $("parent descendant")
。例如:
----- ---- -- ---- ---- ---- ---- --
子元素选择器
子元素选择器选取某个父元素的直接子元素,语法格式为 $("parent > child")
。例如:
----- - ---- -- -- ---- --------- ---- --
兄弟选择器
兄弟选择器选取指定元素的所有同级元素,语法格式为 $("element + sibling")
或 $("element ~ siblings")
。例如:
----- - --- -- ----- ---- ----- --- --
过滤选择器
过滤选择器用于从一组元素中过滤出符合条件的元素。
:first
:first
过滤选择器选取匹配选择器的第一个元素,例如:
------------ -- -------- --- --
:last
:last
过滤选择器选取匹配选择器的最后一个元素,例如:
----------- -- --------- --- --
:even / :odd
:even
和 :odd
过滤选择器分别选取匹配选择器中索引为偶数和奇数的元素,例如:
------------ -- ------------
:not
:not
过滤选择器选取不匹配选择器的所有元素,例如:
--------------------- -- ---- ----- -- ---------- - --- --
属性选择器
属性选择器用于选取带有指定属性的元素。
[attribute]
选择带有指定属性的元素,例如:
----------- -- ------ ---- -----
[attribute=value]
选择指定属性值的元素,例如:
--------------- -- -- ---- ---- --- ---
[attribute^=value]
选择属性值以指定文本开头的元素,例如:
------------ - --------------------------------------------------------- -------- -----------------------------------------------------------------------------------