从父子关系和兄弟关系进行节点的选择 .
express | description | remarks |
$("a b") | 选择a节点所有的后代节点b ( 包括子节点和孙节点 ) | |
$("a>b") | 选择a节点的所有子节点b ( 只包含子节点, 不包含孙节点 ) | |
$("a+b") | 选择a节点之后的第一个兄弟节点b | |
$("a~b") | 选择a节点之后的所有兄弟节点b | 注意是 a 节点之后的兄弟节点, 而不是所有的兄弟节点 |
从位置的角度来对标签进行过滤 .
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的元素 |
节点值是否为空, 节点上的文本中是否包含指定的字符串, 子元素中的class值是否为指定的值 .
express | description | remarks |
$("tagName:empty") | 选择tagName元素集合中内容为空的元素 ( 不是子元素 ) | |
$("tagName:parent") | 选择tagName元素集合中包含子元素的元素 | |
$("tagName:contents('abc')") | 选择tagName元素集合中内容包含"abc"的元素 ( 不是子元素 ) | |
$("tagName:has(.one)") | 选择tagNmae元素集合中class值为one的元素 ( 不是子元素, 是tagName元素 ) |
从节点的属性来过滤筛选节点:有无属性,属性值等于,不等于,包含,是**开头,是**结尾,多重过滤 .
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属性 |
根据页面上的元素是否显示来选择节点
express | description | remarks |
$("div:hidden") | 选中隐藏的div元素 | |
$("div :hidden") | 选中div元素中所有隐藏的元素 ( 包括子元素和孙元素 ) | |
$("div:visiable") | 选中可见的div元素 | |
$("div :visiable") | 选中div中可见的元素 ( 包括子元素和孙子元素 ) |