jquery selector 基础

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

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 在内的一套技术组合。

    108 引用 • 295 回帖

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • OnlyOffice
    4 引用 • 22 关注
  • 分享

    有什么新发现就分享给大家吧!

    247 引用 • 1794 回帖
  • Visio
    1 引用 • 2 回帖 • 1 关注
  • Gzip

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

    9 引用 • 12 回帖 • 169 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 1 关注
  • Spring

    Spring 是一个开源框架,是于 2003 年兴起的一个轻量级的 Java 开发框架,由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构,分层架构允许使用者选择使用哪一个组件,同时为 JavaEE 应用程序开发提供集成的框架。

    946 引用 • 1460 回帖
  • sts
    2 引用 • 2 回帖 • 224 关注
  • IDEA

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

    181 引用 • 400 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 357 关注
  • Excel
    31 引用 • 28 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 567 关注
  • 浅吟主题

    Jeffrey Chen 制作的思源笔记主题,项目仓库:https://github.com/TCOTC/Whisper

    1 引用 • 28 回帖
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 528 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    57 引用 • 25 回帖 • 7 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 140 回帖
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    31 引用 • 108 回帖
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 75 关注
  • Word
    13 引用 • 40 回帖
  • 友情链接

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

    24 引用 • 373 回帖
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    12 引用 • 54 回帖 • 19 关注
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 431 关注
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 666 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    31 引用 • 96 回帖
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 4 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 1 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 146 关注