jQuery 具有一个相当强大的选择器引擎,提供了完整的选择器语法,允许我们选择几乎所有的元素组合。jQuery 的选择器语法主要是基于 CSS3 和 XPath 的,对 CSS3 和 XPath 了解越多,使用 jQuery 时就越显得心应手。有关 CSS 和 XPath,请参阅以下链接:
CSS 1
CSS 2
CSS 3
xPath
值得注意的是, CSS3 并没有得到现今所有浏览器的支持,因此我们很少使用它。然而,我们仍然可以在 jQuery 中使用 CSS3 选择元素,因为 jQuery 具备自己的自定义选择器引擎,并且实现了对 CSS3 的支持。
想了解 jQuery 选择器更多信息,可以访问 jQuery 的官方文档有关 Selector 的部分。下面,在原官方文档的基础上作一些简单的翻译和说明。
1. CSS 选择器(CSS Selectors)
jQuery 完整地支持 CSS 1-3,并且可以在(选择器)表达式里加入自定义的 CSS-like (和xPath)。
1.1 jQuery 支持的 CSS 选择器语法
* 任何 element
E 类型为 E 的所有element(其实 E 可以是任何 element)
E:nth-child(n) 一个类型为 E 的 element,它是其父 element 的第 n 个子 element
E:first-child 一个类型为 E 的 element,它是其父 element 的第一个子 element (相当于E:nth-child(0))
E:last-child 一个类型为 E 的 element,它是其父 element 的最后一个子 element
E:only-child 一个类型为 E 的 element,它是其父 element 的唯一子 element
E:empty 一个类型为 E 的用户界面(UI) element,它没有子 element(包括 文本 element)
E:enabled 一个类型为 E 的用户界面(UI) element,它被设置为禁止(disabled)
E:disabled 一个类型为 E 的用户界面(UI) element,它被设置为允许(enabled)
E:checked 一个类型为 E 的用户界面(UI) element,它处于选中(checked)状态(适用于单选按钮和复选框)
E:selected 一个类型为 E 的用户界面(UI) element,它处于被选择(selected)状态(在选择范围内,有一个或多个可供选择的 element )。注意:selected 属性并不在 CSS 的规范内,但jQuery 提供内部支持
E.myclass 一个类型为 E 的 element,它的 class 类是“myclass”
E#myid 一个类型为 E 的 element,它的 id 是“myid”
E:not(s) 一个类型为 E 的 element,并且结果集中的 element 不匹配(不包含)选择器 s(用作过滤)
E F 一个类型为 F 的 element,它是类型为E 的 element 的子孙 element(注意是子孙 element)
E > F 一个类型为 F 的 element,它是类型为E 的 element 的子 element(注意是子 element)
E + F 一个类型为 F 的 element,它是紧跟在类型为E 的 element 后面的一个兄弟 element(注意 F 是 E 的兄弟节点,并且是紧跟随其后的一个)
E ~ F 一个类型为 F 的 element,它是类型为E 的 element 后面的一个兄弟 element(注意 F 是 E 的兄弟节点,并且位置在E 的后面)
E,F,G 一个类型为 E 的 element,一个类型为 F 的 element,一个类型为 G 的 element(用于选择多个 element)
1.2 jQuery 支持,但(跟 CSS 规范)有所不同的选择器语法
不同之处是必须在属性名前加上符号“@”
E[@foo] 一个类型为 E 的 element,它具有属性“foo”
E[@foo=bar] 一个类型为 E 的 element,它具有属性“foo = bar”
E[@foo^=bar] 一个类型为 E 的 element,它具有属性“foo“,并且其属性值是以”bar“开头的
E[@foo$=bar] 一个类型为 E 的 element,它具有属性“foo“,并且其属性值是以”bar“结尾的
E[@foo*=bar] 一个类型为 E 的 element,它具有属性“foo“,并且其属性值包含”bar“
E[@foo=bar][@baz=bop] 一个类型为 E 的 element,它具有属性“foo = bar”和属性”baz = bop“
注:以上的“bar”和“bop”均为字符串。
1.3 jQuery 不支持的选择器语法(略)
因为没什么实际的作用,所以这里也不作赘述,想了解详情的可以参阅官方帮助文档。
1.4 Contex 和 Anchoring
可以设置 contex 来 anchor(定位) 选择器,这也是 jQuery 跟 CSS 规范的一个不同之处。用户可以使用语法: $(expr, context) 来设置 context root。默认的 context root 是整个文档。
2. XPath 选择器(XPath Selectors)
XPath 也是 jQuer 支持的选择器语法之一。jQuery 支持基本的 XPath 语法。下面以一些例子作说明。
2.1 定位路径(Location Paths)
绝对路径,相对于整个 HTML 文档
$(”/html/body//p”) $(”body//p”) $(”p/../div”)
相对路径,相对于设置的 context node “this”
$(”p/*”, this) $(”/p//a”, this)
2.2 支持 Axis 选择器
“//” : 子孙 elements (div 所有类型为 p 的子孙 elements)
$(”/div//p”) $(”//div//p”)
“/” : 子 elements (div 所有类型为 p 的子 elements)
$(”//div/p”)
“~” : 兄弟 elements (div 所有类型为 form 的兄弟 elements)
$(”//div ~ form”)
““..”: 父 elements (div 的父 element 下的类型为 p 的子 elements)
$(”//div/../p”)
2.3 支持谓词语法(Predicates)
[@foo] 具有属性“foo”
$(”//input[@foo]”)
[@foo=’test’] 具有属性“foo = ‘test’”
$(”//a[@foo = ‘tsxt’]”)
[Nodelist] 其子孙 elements 匹配 Nodelist(用于过滤)
$(”//div[p]”) $(”//div[p/a]”)
2.4 jQuery 支持,但(跟 XPath 规范)有所不同的谓词语法(Predicates)
[last()] or [position()=last()] becomes :last(选择结果集中的最后一个 element)
$(”p:last”)
[0] or [position()=0] becomes :eq(0) or :first(选择结果集中的第个 element)
$(”p:first”) $(”p:eq(0)”)
[position() < 5] becomes :lt(5)(选择结果集中索引大于5的 elements)
$(”p:lt(5)”)
[position() > 2] becomes :gt(2)(选择结果集中索引小于2的 elements)
$(”p:gt(2)”)
注:“becomes” 前面的是 XPath 的 predicates 语法,后面是等价的 jQuery 语法。
3. jQuery 自定义的选择器(Custom Selectors)
jQuery 具有一些自定义的选择器语法,这些语法虽然并不在 CSS 和XPath 规范之内,但它们相当的便捷,所在 jQuery 将它们囊括进来。
3.1 自定义选择器(Custom Selectors)
:even 结果集中其索引为偶数(双数)的 elements
:odd 结果集中其索引为奇数(单数)的 elements
:eq(N) and :nth(N) 选择结果集中索引为 N 的 elements
:gt(N) 选择结果集中索引大于 N 的 elements
:lt(N) 选择结果集中索引小于 N 的 elements
:first 选择结果集中的第一个 element (相当于 eq(0) 或者 nth(0))
:last 选择结果集中的最后一个 element
:parent 在结果集中选择 elements,它必须具有子 elements(包括文本节点)(跟 :empty 相反)
:contains(’test’) 选择结果集中包含有指定文本的 elements
:visible 选择所有可见(visible)的 elements( display 属性的值等于 visible、block、inline,或者 visibility 属性的值等于 visible,不包括 hidden 类型的 elements(关于 hidden 类型,如))
:hidden 选择所有隐藏(visible)的 elements( display 属性的值等于 none,或者 visibility 属性的值等于 hidden,不包括 hidden 类型的 elements(关于 hidden 类型,如))
例子:
$(”p:first”).css(”fontWeight”,”bold”); $(”div:hidden”).show(); $(”/div:contains(’test’)”, this).hide();
3.2 表单选择器(Form Selectors)
:input 选择所有表单 elements(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”).
:file 选择所有 .
:hidden 也是可用的,在上面的3.1 节有介绍。
建议在使用表单选择时提供一个 context root,例子:
$(’#myForm :input’)
$(’input:radio’, myForm)
上面最后的一行语句将会选择所有的“myForm”表单里的所有单选按钮,相当于[@type=radio](即 $(”[@type = radio],myForm”)),但用表单选择器会稍微快点,尤其对于大型的表单。
3.3 更多选择器
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)
参考资料:
http://docs.jquery.com/DOM/Traversing/Selectors
- 浏览: 80736 次
- 性别:
- 来自: 苏州
文章分类
最新评论
-
lcwen_13:
你的很多代码都完全没有必要,实现太麻烦了!
Shiro系列之Shiro+Spring MVC整合(Integration) -
禹爸爸:
endual 写道牛逼的表达能力!!!代码全部用到项目中。分享 ...
使用Spring框架实现文件上传 -
endual:
牛逼的表达能力!!!代码全部用到项目中。
使用Spring框架实现文件上传 -
禹爸爸:
despair1989 写道请检查一下附录里的链接地址。链接地 ...
Mybatis系列之实战篇(上) -
despair1989:
请检查一下附录里的链接地址。链接地址错了
Mybatis系列之实战篇(上)
发表评论
-
CodeIgniter类库之Validation Class
2007-12-11 14:36 284在进行BS编程时,我们时常需要对客户提交的数据进行验证。每种 ... -
CodeIgniter类库之Validation Class(续)
2008-02-20 11:50 390在之前的一篇文章《CodeIgniter类库之Validat ... -
哀悼四川汶川大地震死难同胞,网站整体变灰色的方法
2008-05-21 21:14 431最简单的把页面变成灰色的代码是在<head>和& ... -
使用JavaScript获取不同时区的时间
2008-06-26 10:58 1165使用JavaScript可以很容易的在页面上显示出本地时间, ... -
Ext学习笔记一(使用Ext.Panel创建一个登录面板)
2008-11-11 11:50 322Ext1.0的写法 <html> ... -
Ext学习笔记二(类定义)
2008-11-12 10:13 322在Ext中使用如下语句便可以定义一个类, Pers ... -
Ext面向对象开发实践
2008-11-15 00:44 463这是自己在学习Ext过程中一个写的一个示例程序,仅为练习,功 ... -
Ext面向对象开发实践(续)
2008-11-17 22:19 407我的上一篇文章《Ext面向对象开发实践》中简述了如何编写一个 ... -
Ext 随笔
2008-11-19 21:54 2351.消除Ext中的S.gif影响 有时候脱机打开使用Ext ... -
FomPanel加到TabPanel中按钮点击失效问题之解决方法
2008-11-20 10:25 338昨天晚上在家里写代码时遇到一个奇怪的问题。事先写好了一个Fo ... -
PHP中Ajax中文乱码问题解决
2009-02-27 09:27 288最近在编写的PHP项目中用到了Ajax技术,用户体验大有提升 ... -
使用jQuery在Div中加载其他页面
2009-02-27 09:43 532在做一个表单签核系统时,需在要签核页面中将表单内容(事先做好 ... -
jQuery实现全选效果
2009-03-23 20:38 382多选效果如下图 代码如下: <mce:scri ... -
jQuery实现折叠效果
2009-06-02 15:45 464近来工作一直很忙,加之学业上也有好多事情需要处理,一直没腾出 ... -
使用jQuery实现DIV弹出效果
2009-06-03 11:23 400现在很多网站都流行这种弹出式的对话框或是信息显示框,很想将这 ... -
Javascript遍历对象中的子对象
2009-07-03 09:13 479昨天同事问我一个问题:“有一个JSON对象,其中有若干个子对 ... -
JavaScript + Flash实现幻灯式广告
2009-09-08 21:01 350在好多网站上都曾看到过幻灯片式的图片广告(CSDN上也有的) ... -
Table 隔行换色效果代码
2011-06-21 14:17 391CSS代码 .stripe { border-w ... -
手风琴折叠效果
2011-06-21 14:31 561CSS代码 /* '加号'折叠样式 */ .accord ... -
购物车前端开发
2015-06-17 21:49 847作为一名不在软件公司工作的软件工程师,不仅要会写后台代码(P ...
相关推荐
Jquery选择器,Jquery选择器Jquery选择器Jquery选择器Jquery选择器Jquery选择器
jQuery选择器大全(48个代码片段 21幅图演示)
jQuery选择器全解.
jQuery选择器速查表,包括了jQuery的基本选择器、层次选择器、过滤选择器、表单选择器,方便以后查找。
Jquery选择器; 基本选择器;jQuery选择器;jQuery选择器; 层级选择器;jQuery选择器;;; 筛选选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器;jQuery选择器; 排他思想;jQuery选择器;jQuery...
jquery 选择器 描述
jQuery选择器过滤器全面的总结,老师推荐!
JQuery 选择器,方便 使用的技术
经典的jQuery选择器应用例子,直观的演示了各种选择器的应用例子。对学习jQuery很有帮助。
jQuery选择器大全(48个代码片段+21幅图演示)
这是一份比较全面的jQuery选择器基础知识,包括源代码和相应的ppt,供大家分享
Jquery选择器分类整理,基本都包含到了,学习笔记。
jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找
jquery选择器入门详解小案例,内附框架脚本,直接运行即可,可以查看源码!
JQuery选择器详解JQuery选择器详解
jquery初学者必备,有各种jquery的选择器,个人学习时整理
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
通过思维导图对知识进行梳理,以便记忆
(24)选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面,该页面中内嵌有几个CSS类:.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台...