jquery selector 基础

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

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

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 680 关注
  • 设计模式

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

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

    V2EX 是创意工作者们的社区。这里目前汇聚了超过 400,000 名主要来自互联网行业、游戏行业和媒体行业的创意工作者。V2EX 希望能够成为创意工作者们的生活和事业的一部分。

    17 引用 • 236 回帖 • 328 关注
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 62 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 476 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    179 引用 • 995 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • IBM

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

    17 引用 • 53 回帖 • 136 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 453 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖
  • 智能合约

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

    1 引用 • 11 回帖 • 4 关注
  • 房星科技

    房星网,我们不和没有钱的程序员谈理想,我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源,遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 585 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 2 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 9 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 94 关注
  • 自由行
    11 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖
  • Tomcat

    Tomcat 最早是由 Sun Microsystems 开发的一个 Servlet 容器,在 1999 年被捐献给 ASF(Apache Software Foundation),隶属于 Jakarta 项目,现在已经独立为一个顶级项目。Tomcat 主要实现了 JavaEE 中的 Servlet、JSP 规范,同时也提供 HTTP 服务,是市场上非常流行的 Java Web 容器。

    162 引用 • 529 回帖
  • 运维

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

    149 引用 • 257 回帖
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 30 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 9 关注
  • 百度

    百度(Nasdaq:BIDU)是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 177 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 1 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 58 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 18 关注