jquery之选择将被操作的元素(CSS选择器)

jquery之选择将被操作的元素(CSS选择器)

----------

 

1.利用子选择器

父节点与直接子节点以右尖括号(>)隔开，如下所示：p > a

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

 

2.利用属性选择器

元素与中括号中的该元素的属性或属性表达式构成一个属性选择器，如例：a[href^=http://]

这个选择器匹配包含以http:// 开头的href值的所有链接。

又如：from[method]

这个选择器匹配拥有显示method属性的任何<form>元素。

 

3.利用容器选择器

有时候需要选择元素，当且仅当这个元素包含某个其他元素时才选它。我们可以使用容器选择器。如例：li:has(a)

这个选择器匹配包含<a>元素的所有<li>元素。请注意，这与li a选择器是不相同的，li a匹配<li>元素里的所有<a>元素。

 ~~~~~~~~~~~~~~~~~~~ 

请注意，jquery只支持一层嵌套。比如：

foo:not(bar:has(baz))

但是，如果在嵌套一层，如：

foo:not(bar:has(baz:eq(2))),这个就不支持了。

~~~~~~~~~~~~~~~~~~~

下面是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                       匹配带有类名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的元素