常用jQuery选择器汇总

常用 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]

选择属性值以指定文本开头的元素,例如:

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

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