jquery selector 基础

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

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 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 156 关注
  • 996
    13 引用 • 200 回帖 • 7 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4601 回帖 • 699 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖
  • SSL

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

    70 引用 • 193 回帖 • 431 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 673 关注
  • SendCloud

    SendCloud 由搜狐武汉研发中心孵化的项目,是致力于为开发者提供高质量的触发邮件服务的云端邮件发送平台,为开发者提供便利的 API 接口来调用服务,让邮件准确迅速到达用户收件箱并获得强大的追踪数据。

    2 引用 • 8 回帖 • 483 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖 • 1 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    85 引用 • 139 回帖 • 1 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 2 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2031 回帖
  • Postman

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

    4 引用 • 3 回帖 • 4 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 743 关注
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    32 引用 • 132 回帖 • 2 关注
  • Markdown

    Markdown 是一种轻量级标记语言,用户可使用纯文本编辑器来排版文档,最终通过 Markdown 引擎将文档转换为所需格式(比如 HTML、PDF 等)。

    167 引用 • 1513 回帖 • 1 关注
  • 反馈

    Communication channel for makers and users.

    123 引用 • 911 回帖 • 245 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 364 关注
  • Caddy

    Caddy 是一款默认自动启用 HTTPS 的 HTTP/2 Web 服务器。

    12 引用 • 54 回帖 • 164 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    209 引用 • 358 回帖 • 1 关注
  • 运维

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

    149 引用 • 257 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 530 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 609 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 3 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 2 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 52 关注