当前位置:Gxlcms > JavaScript > JQuery各种选择器的介绍

JQuery各种选择器的介绍

时间:2021-07-01 10:21:17 帮助过:18人阅读

1. JQuery 基本选择器

expressdescriptionremarks
$("#idName")id选择器
$(".className")类选择器
$("tagName")标签选择器
$("*")通配符选择器
$("tagName,.className,#idName,...")群组选择器

2. 层次选择器

从父子关系和兄弟关系进行节点的选择 .

expressdescriptionremarks
$("a b")选择a节点所有的后代节点b
( 包括子节点和孙节点 )
$("a>b")选择a节点的所有子节点b
( 只包含子节点, 不包含孙节点 )
$("a+b")选择a节点之后的第一个兄弟节点b
$("a~b")选择a节点之后的所有兄弟节点b注意是 a 节点之后的兄弟节点,
而不是所有的兄弟节点

3. 基本过滤选择器

从位置的角度来对标签进行过滤 .

expressdescriptionremarks
$("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值是否为指定的值 .

expressdescriptionremarks
$("tagName:empty")选择tagName元素集合中内容为空的元素
( 不是子元素 )
$("tagName:parent")选择tagName元素集合中包含子元素的元素
$("tagName:contents('abc')")选择tagName元素集合中内容包含"abc"的元素
( 不是子元素 )
$("tagName:has(.one)")选择tagNmae元素集合中class值为one的元素
( 不是子元素, 是tagName元素 )

5. 属性过滤器 ( 选择包含指定属性的元素 )

从节点的属性来过滤筛选节点:有无属性,属性值等于,不等于,包含,是**开头,是**结尾,多重过滤 .

expressdescriptionremarks
$("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. 可见性过滤选择器

根据页面上的元素是否显示来选择节点

expressdescriptionremarks
$("div:hidden")选中隐藏的div元素
$("div :hidden")选中div元素中所有隐藏的元素
( 包括子元素和孙元素 )
$("div:visiable")选中可见的div元素
$("div :visiable")选中div中可见的元素
( 包括子元素和孙子元素 )

以上就是JQuery各种选择器的介绍的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行