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的元素