jQuery常用的选择器

最新推荐文章于 2022-08-01 14:22:34 发布

小周sir的码农

最新推荐文章于 2022-08-01 14:22:34 发布

阅读量169

点赞数 1

分类专栏： Jquery

本文链接：https://blog.csdn.net/Govern66/article/details/104290226

版权

Jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

当我们想要操所页面中的元素时，首先要做的就是选取元素。选取页面中元素可以使用jQuery给我们提供的$()方法，该方法需要提供选择器作为参数，方法执行完成后会返回给我们一个jQuery对象，被选取的元素就包含在该对象中。

1.1基础选择器

选择器	实列	说明
全局选择器	$('*')	选择所有元素
标签选择器	$('p')	选择所有的p元素
ID选择器	$('#top')	选择所有`id`属性值为`top`的元素
class选择器	$('.box')	选择所有clss属性值为`top`的元素
多重选择器	$('div, p')	选择所有的`div`元素和`p`元素

2.2 按层次结构选取元素

选择器	实列	说明
子代选择器	$('div > p')	选择作为`div`元素子元素的所有`p`元素
后代选择器	$('div p')	选择作为`div`后代的所有`p`元素
相邻选择器	$('div + p'	选择紧邻`div`元素且位于其后的`p`元素
兄弟选择器	$('div ~ p')	选择作为`div`元素且位于其后的所有`p`元素

2.3 使用属性选择元素

选择器	实列	说明
tag[attr]	$('p[class]')	选择所有带有`class`属性的`p`元素
tag[attr="value"]	$('p[class="top"]')	选择所有`class`属性值恰好等于`top`的`p`元素
tag[attr^="value"]	$('p[class^="top"]')	选择所有class属性值以top开头的P元素（包括class等于top的p元素)
tag[attr$="value"]	$('p[class$="top"]')	选择所有`class`属性值以`top`结尾的`p`元素（包括`class`属性值恰好等于`top`的`p`元素）
tag[attr!="value"]	$('p[class!="top"]')	选择所有`class`属性值不等于`top`的`p`元素
tag[attr*="value"]	$('p[class*="top"]')	选择所有`class`属性值中包含字符串`top`的`p`元素（包括`class`属性值恰好等于`top`的`p`元素）
tag[attr\|="value"]	$('p[class\|="top"]')	选择所有`class`属性值为连接符分隔的字符串并且该字符串以`top`开头的`p`元素和`class`属性值恰好等于`top`的`p`元素
tag[attr~="value"]	$('p[class~="top"]')	选择所有`class`属性值为空格分隔的多个字符串且其中一个字符串等于`top`的`p`元素和`class`属性值恰好等于`top`的`p`元素
tag[attr="value"]...	$('p[class="top"][id]')	选择所有`class`属性值恰好等于`top`并且带有`id`属性的`p`元素

    <p class="center" id="p1">段落内容1</p>
    <p class="center right">段落内容2</p>
    <p class="left center right">段落内容3</p>

    <p class="center-right">段落内容4</p>
    <p class="left-center">段落内容5</p>
    <p class="left-center-right">段落内容6</p>

// 1. 选择带有Class属性的所有p元素
    var $p1 = $('p[class]');

    // 2. 选择class属性值恰好等于center的p元素
    var $p2 = $('p[class="center"]');

    // 3. 选择class属性值以center开始的p元素和class属性值恰好等于center的p元素
    var $p3 = $('p[class^="center"]');

    // 4. 选择Class属性值以center结尾的p元素和class属性值恰好等于center的p元素
    var $p4 = $('p[class$="center"]');

    // 5. 选择Class属性不等于center的p元素
    var $p5 = $('p[class!="center"]');

    // 6. 选择Class属性值中包含center字符串的p元素和class属性值恰好等于center的p元素
    var $p6 = $('p[class*="center"]');

    // 7. 选择所有class属性值为连接符分隔的字符串并且该字符串以center开头的p元素和class属性值恰好等于center的p元素
    var $p7 = $('p[class|="center"]');

    // 8. 选择所有class属性值为空格分隔的多个字符串且其中一个字符串等于center的p元素和class属性值恰好等于center的p元素
    var $p8 = $('p[class~="center"]');

    // 9. 选择所有class属性值恰好等于center并且id属性值恰好等于的p1元素
    var $p9 = $('p[class="center"][id="p1"]');

2.4基础过滤器

选择器	实列	说明
：firs	$('li:first')	选择匹配元素集合中第一个li元素
：last	$('li:last')	选择匹配元素集合中最后一个li元素
:even	$('li:even')	选择匹配元素集合中偶数位的li元素
:odd	$('li:odd')	选择匹配元素集合中奇数位的li元素
:eq(n)	$('eq(3)')	选择匹配元素集合中索引等于3的li元素
:gt(n)	$('gt(3)')	选择匹配元素集合中索引大于3的li元素
:lt(n)	$('lt(3)')	选择匹配元素集合中索引小于3的li元素
:root	$(':root')	选择文档的根元素
:header	$(':header')	选择所有的标题元素(h1-h6)
:lang(language)	$('div:lang(en-us)')	选取指定的语言元素
:not(selector)	$('a:not(.active)')	选择不匹配`.active`选择器的`a`元素
:target	$(':target')	选择处于目标状态的元素（锚链接目标元素）
:hidden	$(':hidden')	选择处于隐藏的状态
:visible	$(':visible')	选择处于可见状态的元素。
:animated	$(':animated')	选取正在应用动画效果的元素（只对通过jq方法添加动画有效）

2.5子元素过滤器

选择器	示例	说明
`tag:first-child`	`$('div p:first-child')`	选择作为其父元素第一个子元素的`p`元素
`tag:last-child`	`$('div p:last-child')`	选择作为其父元素最后一个子元素的`p`元素
`tag:first-of-type`	`$('p:first-of-type')`	选择几个同辈`p`元素中的第一个
`tag:last-of-type`	`$('p:last-of-type')`	选择几个同辈`p`元素中的最后一个
`tag:nth-child(n)`	`$('p:nth-child(2)')`	选择作为其父元素正数第`2`个子元素的所有`p`元素
`tag:nth-last-child(n)`	`$('p:nth-last-child(2)')`	选择作为其父元素倒数第`2`个子元素的所有`p`元素
`tag:nth-of-type(n)`	`$('p:nth-of-type(1)')`	选择几个同辈`p`元素中的正数第`1`个
`tag:nth-last-of-type(n)`	`$('p:nth-last-of-type(1)')`	选择几个同辈`p`元素中的倒数第`1`个
`tag:only-child`	`$('p:only-child')`	选择作为其父元素唯一子元素的`p`元素
`tag:only-of-type`	`$('p:only-of-type')`	选择同辈元素中唯一一个标签为`p`的元素

提示：tag:nth-child(n)，tag:nth-last-child(n)和tag:nth-of-type(n)中的n可以替换成even|odd，或者表达式，比如：Xn+Y。

2.6 内容过滤器

选择器	示例	说明
`tag:contain(text)`	`$('div:contain("hello")')`	选择匹配元素集合中包含指定文本的所有`div`元素
`tag:empty`	`$('div:empty')`	选择所有没有子元素的`div`元素（包括文本节点）
`tag:has(selector)`	`$('div:has(p)')`	选择所有子元素中包含`p`元素的`div`元素
`tag:parent`	`$('div:parent')`	选择匹配元素集合中包含子元素的所有`div`元素（包括文本节点）

2.7 选取表单元素

jQuery提供了一些专门为表单设计的选择器，用于快速访问表单元素。

选择器	示例	说明
`:text`	`$(':text ')`	选择所有文本字段（`type="text"`，或没有写`type`属性的`input`元素）
`:password`	`$(':password')`	选择所有密码字段（`type="password"`）
`:submit`	`$(':submit ')`	选择所有提交按钮（`type="submit"`）
`:reset`	`$(':reset ')`	选择所有重置按钮（`type="reset"`，）选取type类型为reset的button元素
`:button`	`$(':button ')`	选择所有其他按钮（`type="button"`）
`:checkbox`	`$(':checkbox')`	选择所有复选按钮（`type="checkbox"`）
`:radio`	`$(':radio ')`	选择所有单选按钮（`type="radio"`）
`:file`	`$(':file ')`	选取type类型为file的input元素
`:image`	`$(':image ')`	选择所有图片按钮（`type="image"`）
`:input`	`$(':input ')`	选择所有的表单元素（`input，select，textarea，button`）
`:enabled`	`$(':enabled ')`	选择处于可用状态的元素
`:disabled`	`$(':disabled ')`	选择处于不可用状态的元素（`button, input, optgroup, option, select, textarea`）
`:selected`	`$(':selected')`	选择处于被选中状态的`option`元素
`:focus`	`$(':focus ')`	选择处于焦点状态的元素
`:checked`	`$(':checked ')`	选择处于选中状态的`checkbox`，`radio`，`option`元素

6. 使用context提高检索效率

先前我们选取页面中的元素时，不可避免的要检索页面中的所有元素，这样就降低了检索的效率。这不是我们想要的，能不能在我们指定的的范围中检索我们想要获取的元素。

下面的选择器会在id属性值为box的元素中查找p元素，而不是在整个文档中查找：

    $('p', '#box')
后代选择器也可以像上面那样写：

    $('#box p')

    // 等价于

    $('p', '#box')