jquery选择器总结

最新推荐文章于 2026-01-26 20:15:00 发布

原创最新推荐文章于 2026-01-26 20:15:00 发布 · 241 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

jquery

一．Jquery 选择器

1. 基本CSS选择器

a：匹配所有的链接(<a>)元素

#specialID:匹配id为specialID的元素

.specialClass:匹配拥有CSS类specialClass的元素

a#specialID.specialClass:匹配id为specialID,拥有CSS类specialClass的链接(<a>)元素

p a.specialClass:匹配拥有CSS类specialClass,在<p>元素内声明的链接(<a>)元素

例如：$(“p a.specialClass”)

2. 子选择器：父节点与直接子节点以右尖括号(>)隔开

例如：

p > a ：匹配作为<p>元素的直接子节点的链接，如链接被嵌套在更深一层，比如在<p>之内的<span>之内，则链接不会被选中。

3. 特性选择器

a[href ^ = http://]:匹配以http://开头的链接

form[method] :匹配拥有显式method特性的任何<form>元素

input[type = text] :匹配type特性值为text的所有<input>元素

div[title ^ = my]:匹配title特性值以my开头的<div>元素

a[href$ = .pdf]:匹配以.pdf结束的所有链接

a[href8 = jquery.com]:匹配包含jquery.com的链接

3. 容器选择器

li：has(a) :匹配包含<a>元素的所有<li>元素

jQury只支持一层嵌套.

例如：foo:not(bar:has(baz))但是不支持fon:not(bar:has(baz:eq(2)))

4. jQuery所支持的基本CSS选择器

选择器	描述
*	匹配任何元素
E	匹配标签名称为E的所有元素
E F	匹配标签名称为F,作为E的后代节点的所有元素
E>F	匹配标签名称为F,作为E的直接子节点的所有元素
E+F	匹配前面是邻近兄弟节点E的所有元素F(E和F紧挨着)
E~F	匹配前面是任何兄弟节点E的所有元素F(E和F不可以紧挨着)
E:has(F)	匹配标签名称为E,至少一个标签名称为F的后代节点的所有元素
E.C	匹配带有Class类C的所有元素E。.C等效于*.C
E#I	匹配id特性值为I的元素E. #I等效于*#I
E[A]	匹配带有特性A的所有元素E(不管特性A的值是什么)
E[A=V]	匹配所有元素E,其特性A的值正好是V
E[A^=V]	匹配所有元素E,其特性A的值以V开头
E[A$= V]	匹配所有元素E,其特性A的值以V结束
E[A*= V]	匹配所有元素E,其特性A的值包含V

5. Jquery位置选择器：根据在DOM里的位置来选择元素

选择器	描述
:first	页面的最先的匹配。li a:first 返回最先的、并且在列表(<li>)项下的链接
:last	页面的最后的匹配：li a:last 返回最后的、并且在列表(<li>)项下的链接
:first-child	最先的子元素.li:first-child 返回每个列表的最先项
:last-child	最后的子元素.li:last-child 返回每个列表的最后的项
:only- child	返回没有兄弟节点的所有元素
:nth-chld(n)	第n个子节点(n从1开始).li:nth-child(2)返回每个列表的第二个<li>项
:nth-child(even\|odd)	偶数或奇数的子节点.li:nth-child(even)返回每个序列的偶数子节点
:nth-child(Xn+Y)	根据传入的公式计算的第n个子节点。如果y为0，则忽略y,n从0开始，且x != 0 .li: nth-child(3n)返回3的倍数的项，而li:nth-child(5n+ 1)返回5的倍数的项的下一项
:even 或 :odd	页面范围内偶数或奇数的匹配元素。li:even返回全部偶数<li>项
:eq(n)	第n个匹配元素(n从0开始)
:gt(n)	第n个匹配元素（不包括）之后的元素

标签

#jQuery #CSS #F# #C #C++