jQuery的选择器是CSS 1-3,XPath的结合物。jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS(绝大部分WEB开发者都用到的),那么你学起来就很容易了。

同时使用CSS和XPath

看几个例子:

隐藏所有包含有链接的段落:

$("p[a]").hide();

显示页面的第一个段落:

$("p:eq(0)").show();

隐藏所有当前可见的层元素:

$("div:visible").hide();

获取所有无序列表的列表项:

$("ul/li")

/* valid too: $("ul > li") */

取得name值为bar的输入字段的值:

$("input[@name=bar]").val();

所有处于选中状态的单选r按钮:

$("input[@type=radio][@checked]")

如果你对查询语言的工作原理还有疑问,可以订阅这里的邮件列表。

CSS查询器

jQuery完全支持CSS1.3。

关于CSS的一些资料查看下面的连接:

  • CSS 1
  • CSS 2
  • CSS 3

下面列出来的是支持的CSS查询器的列表式语法:

  • * 任何元素
  • E 类型为E的元素
  • E:root 类型为E,并且是文档的根元素
  • E:nth-child(n) 是其父元素的第n个类型为E的子元素
  • E:first-child 是其父元素的第1个类型为E的子元素
  • E:last-child  是其父元素的最后一个类型为E的子元素
  • E:only-child  且是其父元素的唯一一个类型为E的子元素
  • E:empty 没有子元素(包括text节点)的类型为E的元素
  • E:enabled
  • E:disabled 类型为E,允许或被禁止的用户界面元素
  • E:checked 类型为E,处于选中状态的用户界面元素(例如单选按钮或复选框)
  • E.warning 类型为E,且class属性值为warning
  • E#myid 类型为E,ID为 "myid"。(至多匹配一个元素)
  • E:not(s) 类型为E,不匹配选择器s
  • E F 在类型E后面的类型为F的元素
  • E > F 为E元素子元素的F元素
  • E + F an F element immediately preceded by an E element
  • E ~ F an F element preceded by an E element

不同之处

所有的属性选择器都被写成和XPath极其相似(因为所有的属性都以@符号开始)。

  • E[@foo] 拥有foo属性的E元素
  • E[@foo=bar] foo属性的值为bar的E元素
  • E[@foo^=bar] foo属性的值以字符串"bar"开始的E元素
  • E[@foo$=bar] foo属性的值以字符串"bar"结尾的E元素
  • E[@foo*=bar] foo属性的值包含有字符串"bar"结尾的E元素

不支持的部分

  • E:link
  • E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
  • E:active
  • E:hover
  • E:focus an E element during certain user actions
  • E:target an E element being the target of the referring URI
  • E::first-line the first formatted line of an E element
  • E::first-letter the first formatted letter of an E element
  • E::selection the portion of an E element that is currently selected/highlighted by the user
  • E::before generated content before an E element
  • E::after generated content after an E element

jQuery不支持下列的选择器,因为这些没什么用处。

  • E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
  • E:nth-of-type(n) an E element, the n-th sibling of its type
  • E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
  • E:first-of-type an E element, first sibling of its type
  • E:last-of-type an E element, last sibling of its type
  • E:only-of-type an E element, only sibling of its type
  • E:lang(fr) an element of type E in language "fr"

XPath 查询器

XPath是jQuery内置支持的一种表达式语言。jQuery支持基本的XPath表达式。

定位路径

  • 绝对路径
    $("/html/body//p")
    $("/*/body//p")
    $("//p/../div")
  • 相对路径
    $("a",this) 
    $("p/a",this)
支持的Axis选择器
  • Descendant Element has a descendant element
 $("//div//p") 
  • Child Element has a child element
 $("//div/p") 
  • Preceding Sibling Element has an element before it, on the same axes
 $("//div ~ form") 
  • Parent Selects the parent element of the element
 $("//div/../p") 支持的谓词
  • [@*] 拥有一个属性
    $("//div[@*]")
  • [@foo] 拥有foo属性
    $("//input[@checked]")
  • [@foo='test'] 属性foo值为'test'
    $("//a[@ref='nofollow']")
  • [Nodelist] Element contains a node list, for example: 
    $("//div[p]")
    $("//div[p/a]")

支持的谓词,但与XPath和CSS又不同的

  • [last()] or [position()=last()]改为:last
    $("p:last")
  • [0] or [position()=0] 改为 :eq(0) or :first
    $("p:first")
    $("p:eq(0)")
  • [position() < 5] 改为:lt(5)
    $("p:lt(5)")
  • [position() > 2] 改为:gt(2)
    $("p:gt(2)")

定制的选择器

jQuery包含一些在CSS和XPath都不用到的表达式,但我们觉得它们使用起来非常方便,所以包含进来了。

下列的列表式语法基于不同的CSS选择器,但又有非常相似的名字。

  • :even 从匹配的元素集中取序数为偶数的元素
  • :odd 从匹配的元素集中取序数为奇数的元素
  • :eq(0) and :nth(0) 从匹配的元素集中取第0个元素
  • :gt(4) 从匹配的元素集中取序数大于N的元素
  • :lt(4) 从匹配的元素集中取序数小于N的元素
  • :first 相当于 :eq(0)
  • :last 最后一个匹配的元素
  • :parent 选择包含子元素(包含text节点)的所有元素
  • :contains('test') 选择所有含有指定文本的元素
  • :visible 选择所有可见的元素(display值为block 或者visible 、visibility 值为visible的元素,不包括hide域)
  • :hidden 选择所有隐藏的元素(非Hide域,且display值为block 或者visible 、visibility 值为visible的元素)

例:

 $("p:first").css("fontWeight","bold"); $("div:hidden").show(); $("div:contains('test')").hide(); 

表单选择器
这是为表单提供的一些选择器:

  • :input 选择表单元素(input, select, textarea, button)
  • :text 选择所有文本域(type="text")
  • :password 选择所有密码域(type="password").
  • :radio 选择所有单选按钮(type="radio").
  • :checkbox 选择所有复选框(type="checkbox").
  • :submit 选择所有提交按钮(type="submit").
  • :image 选择所有图像域 (type="image").
  • :reset 选择所有清除域(type="reset").
  • :button 选择所有按钮(type="button").

同样也可以使用:hidden,详细说明上面已经介绍过。

$('#myForm :input')

如果你需要指定表单:

$('input:radio', myForm)

这将选择myForm表单中所有单选按钮。选择radio通常是用[@type=radio],但是这样用理精简些。

更多的选择器

jQuery选择器可以用一些第三方部件进行扩充:

  • More Selectors Plugin
  • Mike Alsup on Custom Selectors
  • Patch to allow selection by CSS property (full plugin to be released simultaneously with 1.1)
Retrieved from "http://www.docs.jquery.com/DOM/Traversing/Selectors"

转载于:https://www.cnblogs.com/taoqianbao/archive/2011/09/07/2169552.html

[翻译]帮助文档-jQuery 选择器相关推荐

  1. jquery.zSlide.js-基于CSS3/HTML5演示文档jQuery插件

    一.卖的什么葫芦药? jquery.zSlide.js是我最近折腾的一个jQuery插件,借助于CSS3和HTML5的一些新特性,在浏览器中实现类似于powerpoint幻灯片展示. 如果你看到这段文 ...

  2. 翻译qmake文档(二) Getting Started

    翻译qmake文档 目录 原英文文档: http://qt-project.org/doc/qt-5/qmake-tutorial.html 本教程教讲授qmake基础知识.这个手册里的其它专题包含更 ...

  3. 快速翻译PDF文档的免费方法

    您还在为翻译PDF文档而烦恼吗? 或者您通过某度搜索出来的文档翻译网站或者使用某些文档软件都需要注册会员或者充钱呢? 而且好多既不安全还不一定靠谱. 本文介绍的这种方法希望能够为您解决烦恼.此方法不涉 ...

  4. Word文档怎么翻译?翻译word文档简单步骤讲解

    将文档进行翻译是我们经常遇到的事情,市面上也出现了很多翻译文档的工具,但是使用起来总觉得不是那么好用,一款易上手的工具对我们来说是非常重要的,今天的课堂就是小编给大家分享使用工具将word文档进行翻译 ...

  5. 怎么翻译Word文档?这里有Word文档翻译小妙招

    Word文档你会翻译嘛?文字翻译对大家来说很简单,直接进行释义就好了,但是怎么翻译Word文档呢?今天小编就要带大家一起来了解下Word文档翻译的小妙招,感兴趣的不妨来看看,说不定哪天你真的会用到哦! ...

  6. pdf在线翻译_24个PDF在线小工具,免费在线翻译PDF文档。

    点击上方蓝色字关注我们! 最近工作看的英文文献比较多,而且一般都是PDF文档,所以最近我找了一些PDF翻译的东西,今天推荐的是一个在线翻译文档网站,它可以立即翻译任何文档格式为任意语言,并保持排版不变 ...

  7. 如何翻译PPT文档?PPT文档翻译一招搞定

    PPT文档怎么翻译?PPT文件中有需要翻译的内容的时候,你还在一个个的复制进网页中搜索然后进行翻译吗?这个方法已经淘汰了,不仅麻烦,还拉低你的工作效率,今天小编来为大家介绍一个翻译PPT文档的方法,教 ...

  8. python翻译器怎么用_给宝宝用Python写个支持翻译PDF文档的小软件

    上次用Python写好翻译doc文档小软件后就展示给宝宝,我:"宝宝,过来给你个小软件" 她:"干什么用哒?" 我:"给你翻译Word文档的" ...

  9. 如何翻译Word文档?这几种方法很好用

    我们想要翻译Word文档,应该如何才能实现呢?Word文档是大家在日常办公中必不可少的一种文档格式,用来编辑.撰写方案.工作内容都是很好用的.但有时候遇见一些国外的客户,我们需要把文档翻译成英文来提交 ...

最新文章

  1. php sql中regexp,[NCTF2019]SQLi(regexp注入)
  2. 2013年第10周三低潮
  3. 教程是php手工注入
  4. Data Guard搭建困境突围(一)
  5. 引导程序为什么要org 07c00h
  6. 解决Mybatis启动报错: Invalid bound statement (not found)
  7. 37. Sudoku Solver **
  8. 关于寻路算法的一些思考(6):预先计算好的路径的所用空间
  9. Ajax — 新闻列表
  10. treeview右键添加新节点
  11. centos关闭防火墙
  12. 第八章应用安全工程备考要点及真题分布
  13. 【codevs2440】【BZOJ1066】蜥蜴,最大流
  14. 腾讯网游加速器大升级!5月31日起仅支持国服游戏加速 你用过吗?
  15. Mysql私有增强性命令小记
  16. python必须知道的三个概念_关于python编码,你真的明白了吗
  17. 远程控制计算机软件有哪些,支持远程控制电脑的工具有哪些?这几款软件值得一试!...
  18. ali p3c规则扩展-集成sonar
  19. ipv6overipv4+linux,IPv4 over IPv6 的配置
  20. usb计算机连接 灰色,USB调试选项显示为灰色

热门文章

  1. 摩卡业务服务管理(Mocha BSM)解决方案
  2. jsonStore加载远程和本地数据实例
  3. linux-DNS(bind)-setting
  4. 学习笔记(3.29)
  5. IPSec ***基于ASA的配置(思科)
  6. 第 5 章 Stream
  7. jQuery ajax 传递JSON数组到Spring Controller
  8. 基于libzplay 实现window下音乐频谱动态显示
  9. Leetcode: Spiral Matrix
  10. linux虚拟终端快捷键