jquery之选择将被操作的元素(CSS选择器)
2011-03-25 15:13
351 查看
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的元素
----------
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的元素
相关文章推荐
- jquery学习手记(4)元素的选择与操作
- jQuery编程基础精华(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
- jquery学习手记(4)元素的选择与操作
- jquery之选择将被操作的元素(利用自定义jquery选择器)
- 总结一下jQuery操作元素节点的方法(创建、选择、插入节点)
- JQuery总结------元素选择,操作,特效动画
- 利用jQuery选择将被操作的元素
- jQuery选择器 标签选择元素+css简单添加移除操作
- jQuery第二课 ——节点选择、元素创建与操作、包装对象、jq转原生js
- JQuery —— 元素选择、操作
- jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性11
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
- JQuery 将选择器进行缓存 便于大量操作表格或其他页面元素
- 初识jQuery,八字真言“选择元素,对其操作”
- jquery之选择将被操作的元素(通过位置选择)
- jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素
- jQuery选择元素的方法大全
- 用JQuery操作元素的style属性
- Jquery操作父级窗口元素