1. JQuery 基本选择器
| express |
description |
remarks |
| $("#idName") |
id选择器 |
|
| $(".className") |
类选择器 |
|
| $("tagName") |
标签选择器 |
|
| $("*") |
通配符选择器 |
|
| $("tagName,.className,#idName,...") |
群组选择器 |
|
2. 层次选择器
从父子关系和兄弟关系进行节点的选择 .
| express |
description |
remarks |
| $("a b") |
选择a节点所有的后代节点b
( 包括子节点和孙节点 ) |
|
| $("a>b") |
选择a节点的所有子节点b
( 只包含子节点, 不包含孙节点 ) |
|
| $("a+b") |
选择a节点之后的第一个兄弟节点b |
|
| $("a~b") |
选择a节点之后的所有兄弟节点b |
注意是 a 节点之后的兄弟节点,
而不是所有的兄弟节点 |
3. 基本过滤选择器
从位置的角度来对标签进行过滤 .
| express |
description |
remarks |
| $("tagName:first") |
选取tagName元素集合中的第一个元素 |
|
| $("tagName:last") |
选择tagName元素集合中的最后一个元素 |
|
| $("tagName:odd") |
选择tagName元素集合中奇数位置的元素 |
|
| $("tagName:even") |
选择tagName元素集合中偶数位置的元素 |
|
| $("tagName:eq(1)") |
选择tagName元素集合中第二个元素
( 索引和数组一样, 从零开始 ) |
|
| $("tagName:gt(2)") |
选择tagName元素集合中第三个元素往后的元素
( 即tagName下, 位置大于3的元素 ) |
|
| $("tagName:lt(2)") |
选择tagName元素集合中第三个元素往前的元素
( 即tagName下, 位置小于3的元素 ) |
|
| $(":header") |
选中所有的标题元素
( h1 到 h6 ) |
|
| $(":animated") |
选择有动画的元素 |
|
| $("tagName:not(.one)") |
选择tagName元素集合中class值不是one的元素 |
|
4. 内容过滤选择器
节点值是否为空, 节点上的文本中是否包含指定的字符串, 子元素中的class值是否为指定的值 .
| express |
description |
remarks |
| $("tagName:empty") |
选择tagName元素集合中内容为空的元素
( 不是子元素 ) |
|
| $("tagName:parent") |
选择tagName元素集合中包含子元素的元素 |
|
| $("tagName:contents('abc')") |
选择tagName元素集合中内容包含"abc"的元素
( 不是子元素 ) |
|
| $("tagName:has(.one)") |
选择tagNmae元素集合中class值为one的元素
( 不是子元素, 是tagName元素 ) |
|
5. 属性过滤器 ( 选择包含指定属性的元素 )
从节点的属性来过滤筛选节点:有无属性,属性值等于,不等于,包含,是**开头,是**结尾,多重过滤 .
| express |
description |
remarks |
| $("div[id]") |
被选中的元素包含id属性 |
|
| $("div[id='test']") |
被选中的元素包含id="test" |
|
| $("div[title!='test']") |
被选中的元素的title属性不是"test" |
|
| $("div[title^='te']") |
被选中的元素的title属性值是由"test开始的" |
|
| $("div[title$='st']") |
被选中的元素的title属性是以"test"结尾的 |
|
| $("div[title*='est']") |
被选中的元素的title属性值包含"est" |
|
| $("div[title*='est'][id]") |
被选中的元素的title属性值包含"est",
且有id属性 |
|
6. 可见性过滤选择器
根据页面上的元素是否显示来选择节点
| express |
description |
remarks |
| $("div:hidden") |
选中隐藏的div元素 |
|
| $("div :hidden") |
选中div元素中所有隐藏的元素
( 包括子元素和孙元素 ) |
|
| $("div:visiable") |
选中可见的div元素 |
|
| $("div :visiable") |
选中div中可见的元素
( 包括子元素和孙子元素 ) |
|