前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery常用的选择器

jQuery常用的选择器

作者头像
小周sir
发布2019-09-23 16:11:48
7210
发布2019-09-23 16:11:48
举报
文章被收录于专栏:前端技术开发

当我们想要操所页面中的元素时,首先要做的就是选取元素。选取页面中元素可以使用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元素

代码语言:javascript
复制
    <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>
代码语言:javascript
复制
// 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方法添加动画有效)

代码语言:javascript
复制

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元素

代码语言:javascript
复制
6. 使用context提高检索效率

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

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

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

    $('#box p')

    // 等价于

    $('p', '#box')
代码语言:javascript
复制
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-09-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.1基础选择器
  • 2.2 按层次结构选取元素
    • 2.3 使用属性选择元素
    • 2.4基础过滤器
    • 2.5子元素过滤器
      • 2.6 内容过滤器
        • 2.7 选取表单元素
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档