jquery selector 基础

本贴最后更新于 3309 天前,其中的信息可能已经斗转星移

Jquery的这套选择符是比较帅气的,借用了XPath2.0和CSS1-3中的语法,并且兼容了多个浏览器,让原本非常复杂的DOM,一下子变得简单起来了,手中最新的版本是1.2.2b,下面的所有例子,也是根据此版本提供的例子。

测试HTML代码:

<div id="father">
   
<div id="first">I am first</div>
   
<div id="second" class="red">I am second</div>
   
<div id="third" style="display:none">I am third</div>
</div>
<p class="red">I am forth</p>
<h4></h4>

基础:

#id:根据对象的id属性获取对象。

alert($('#first').html());
//显示I am first

element:匹配某一HTML标签的所有对象

alert($('div').length);
//显示4

.class:根据对象的class属性获取对象

alert($('.red').length);
//显示2

*:获取所有的对象

alert($('*').length);
//显示HTML中对象的和,但是不同的浏览器,结果会有所不同

selector1, selector2, selectorN:获取多个选择符的合集,不剔出重复项。

alert($('.red,#second,p').length);
//显示4

层级选择符:

ancestor descendant:这个选择符就是空格,表示先找到第一个选择符的所有对象,然后在他的子孙节点中找到所有符合第二个选择符的对象。

alert($('#father .red').html());
//显示I am second

parent > child:这个选择符就是大于号,表示先找到第一个选择符的所有对象,然后在他的子节点(不能是孙节点)中找到所有符合第二个选择符的对象。

alert($('#father > .red').html());
//显示I am second

prev + next:这个选择符就是加号,表示先找到第一个选择符的所有对象,然后找和他同级的紧跟着的下一个节点同时符合第二个选择符的对象。

alert($('#father + .red').html());
//显示I am forth

prev ~ siblings:这个选择符就是~号,表示先找到第一个选择符的所有对象,然后找和他同级的以后所有节点里面同时符合第二个选择符的对象。

alert($('#first ~ #third').html());
//显示I am third

基础过滤符:

:first:匹配多个对象中的第一个对象
:last:匹配多个对象中的最后一个对象

alert($('.red:first').html());
//显示I am second
alert($('div:last').html());
//显示I am third

:not(selector):匹配去除了not后面选择符中内容的项

alert($('.red:not(#second)').html());
//显示I am forth

:even:匹配所有对象中的第偶数个
:odd:匹配所有对象中的第奇数个

alert($('div:even').length);
//显示2
alert($('div:odd').length);
//显示2

:eq(index):匹配某一下表的单独某元素

alert($('div:eq(2)').html());
//显示I am second

:gt(index):匹配大于某一下标的所有元素
:lt(index):匹配小于某一下标的所有元素

alert($('div:gt(1)').length);
//显示2
alert($('div:lt(2)').length);
//显示2

:header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6

alert($(':header').length);
//显示1

:animated:匹配所有有动画效果的元素

function animateIt()
{
   $
("#second").slideToggle("slow", animateIt);
}
animateIt();
alert($(':animated').html());
//显示I am second

文本过滤符:

:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况

alert($('div:contains("first")').length);
//显示2

:empty:匹配所有没有子元素的对象

alert($(':header:empty').length);
//显示1

:has(selector):匹配所有至少含有一个子选择符的对象

alert($('div:has("#third")').attr('id'));
//显示father

:parent:匹配所有的父对象,父对象包含那些只含有文本的对象

alert($('div:parent').length);
//显示4

可见性过滤符:

:hidden:匹配所有隐藏对象,或者input中的hidden类型
:visible:匹配所有可见的对象

alert($('div:hidden').length);
//显示1
alert($('div:visible').length);
//显示3

属性过滤符:

[attribute]:匹配拥有某一属性的所有对象
[attribute=value]:匹配拥有某一属性和值的对象
[attribute!=value]:匹配拥有某一属性,且不是某一值的对象
[attribute^=value]:匹配拥有某一属性,且以某一值开头的对象
[attribute$=value]:匹配拥有某一属性,且以某一值结尾的对象
[attribute*=value]:匹配拥有某一属性,且包含某一值的对象

alert($('div[class]').html());
//显示I am second
alert($('div[class=red]').html());
//显示I am second
alert($('div[id!=father]').length);
//显示3
alert($('div[id^=f]').length);
//显示2
alert($('div[id$=d]').length);
//显示2
alert($('div[id*=ir]').length);
//显示2

[selector1][selector2][selectorN]:匹配同时符合多个属性选择符的对象

alert($('div[id=second][class^=r]').length);
//显示I am second

子过滤符:

:nth-child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征

alert($('#father div:nth-child(1)').html());
//显示I am first
alert($('#father div:nth-child(even)').length);
//显示1
alert($('#father div:nth-child(odd)').length);
//显示2
alert($('#father div:nth-child(3n)').length);
//显示1,其实是每3个一匹配

:first-child:匹配第一个子元素
:last-child:匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作

alert($('#father div:first-child').html());
//显示I am first
alert($('#father div:last-child').html());
//显示I am third

:only-child:如果一个父元素只有一个子元素,就匹配这个子元素

alert($('div:only-child').length);
//显示0
 
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 13 关注
  • OnlyOffice
    4 引用 • 14 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 8 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    93 引用 • 901 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • sts
    2 引用 • 2 回帖 • 203 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 330 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 23 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    289 引用 • 4492 回帖 • 657 关注
  • Outlook
    1 引用 • 5 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    150 引用 • 257 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 303 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 780 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 414 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 165 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 66 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 184 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 625 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    197 引用 • 541 回帖 • 2 关注