- 浏览: 534039 次
- 性别:
- 来自: 武汉
文章分类
最新评论
-
rgqancy:
终于明白为啥XML里要带jdbcType=XXXX了。
mybatis 需要注意的点 MyBatis 插入空值时,需要指定JdbcType (201 -
rzh0001:
Thanks a lot
mybatis 需要注意的点 MyBatis 插入空值时,需要指定JdbcType (201 -
guji528:
学习了,谢谢
mybatis 需要注意的点 MyBatis 插入空值时,需要指定JdbcType (201 -
AKka:
彻底清楚这个错误的原因了。向楼主学习了。
mybatis 需要注意的点 MyBatis 插入空值时,需要指定JdbcType (201 -
远去的渡口:
武汉小吃,我最爱热干面和鸭脖,想念啊~~
过年时候还学习编程, ...
过年的心情
[翻译]jQuery 选择器的使用
Posted on 2007-01-20 21:24 无常 阅读(4691) 评论(5) 编辑 收藏 网摘 所属分类: jQuery <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"> <rdf:Description rdf:about="http://www.cnblogs.com/wuchang/archive/2007/01/20/625786.html" dc:identifier="http://www.cnblogs.com/wuchang/archive/2007/01/20/625786.html" dc:title="" trackback:ping="http://www.cnblogs.com/wuchang/services/trackbacks/625786.aspx" /> </rdf:RDF> -->
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查询器的列表式语法:
- * 任何元素
- 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)
发表评论
-
html focus 引入 类似微博的效果
2012-09-18 18:01 1384<!DOCTYPE html PUBLIC &q ... -
javascript 类编程(未完)
2010-07-20 18:03 1509最近想总结一下JavaScript类编程,有时间写一点。 J ... -
正则表达式
2010-01-20 14:48 1033正则表达式用于字符串 ... -
insertAdjacentHTML 用法
2010-01-09 21:13 1924insertAdjacentHTML方法示例 添加HTML内 ... -
float margin padding
2009-12-23 16:46 2505今天做网站的时候发 ... -
WEB2.0标准教程:第二天 什么是名字空间
2009-12-14 10:28 1097DOCTYPE声明好以后,接下来的代码是: <html ... -
CSS兼容:如何解决IE7和IE8的BUG
2009-12-14 10:04 2330CSS兼容问题已经是CSS网页布局技术中的重要组成部分,也让 ... -
悟道web标准:前端性能优化
2009-12-14 09:40 1605悟道web标准:前端性能优化 前端性能优化完全是一个技术话题 ... -
JavaScript对象探讨
2009-12-13 11:39 1074由于JavaScript的灵活性,可以让每个人按照自己的习惯进 ... -
用css网站布局之十步实录
2009-12-10 11:32 1319首先需要规划网站,本教程将以下图为例构建网站 其基本布局见 ... -
WEB标准最佳实践:五个需要注意的地方
2009-12-09 21:32 992一、永远使用小写字母 不好的做法: <DI ... -
不要内置JavaScript脚本 并将它置于HTML文档底部
2009-12-09 21:27 1537不要内置JavaScript脚本,这不是1996年了! ... -
javascript uri 编码
2009-10-19 10:53 1964对比 javascript url编码 javascript ... -
javascript 购物车
2009-10-17 13:13 3365购物车相当于现实中超 ... -
doument.execomand 用法
2009-07-11 15:54 14072D-Position 允许通过拖曳移动绝对定位的对象。 ... -
clientX pageX
2009-06-26 15:21 2152screenX:鼠标在显示屏幕上的坐标。 clientX ... -
hasOwnProperty
2009-06-26 11:19 1652JavaScript中hasOwnProperty函数方 ... -
getBoundingClientRect()
2009-06-25 15:16 1308getBoundingClientRect() 来获取页面 ... -
Ext 3.0 core 简要pdf 下载
2009-06-07 11:02 1252今天早上 无意中看到Ext中文 网站有Ext3.0 core ... -
settimeout 返回值
2009-06-07 10:32 2570setTimeout() 方法的返回值是一个唯一的数值,这个数 ...
相关推荐
jQuery技术文档 chm,内含jQuery官方文档、jQuery API手册、jQuery选择器的使用。这些技术文档都是jQuery爱好者迈向前端编程的必需掌握的基础知识,学会了这些,可以说已经迈进了jQuery编程的艺术殿堂,因此,了解...
本文将深入解析jQuery选择器的功能与使用方法,帮助读者掌握这一重要的前端技术。 #### 二、jQuery选择器概览 jQuery选择器主要分为两大类:“选择”和“过滤”。选择器用于指定目标元素,而过滤器则进一步细化...
使用jQuery选择器,可以方便地选取页面上的任意元素,然后进行样式修改、事件绑定、数据操作等。例如: ```javascript // 修改所有按钮的文本 $("button").text("新文本"); // 绑定点击事件 $(".myClass").click...
这个“JQuery选择器测试 离线版”是一个专门用于检验和学习jQuery选择器功能的应用,由一位国外专家创建,并进行了轻微的修改。** 在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性...
在JavaScript的世界里,jQuery是一个非常流行和...记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的大师。
基于jQuery的H5移动端选择器是为适应移动设备特性和用户体验需求而设计的组件。这些组件通常包括日期选择器、级联选择器和自定义HTML选择器,它们能够提高移动应用的交互性和可操作性。 日期选择器是网页应用中常见...
本篇文章将深入探讨jQuery选择器的入门知识,并通过实际的小案例帮助你理解和应用这些选择器。 jQuery选择器是jQuery库的核心部分,它们是用于在HTML文档中查找元素的工具。jQuery支持多种CSS选择器,包括基本选择...
以上就是JQuery选择器使用的一些基本知识点。通过掌握这些选择器的用法,开发者可以有效地对页面上的HTML元素进行查找、操作和修改,从而提升页面的动态交互性和用户体验。在实际开发过程中,选择器的组合和使用方式...
**jQuery颜色选择器ColorPicker详解** 在Web开发中,用户界面的交互性和视觉效果往往对用户体验有着重要影响。其中,颜色选择器是一个常见的组件,它允许用户方便地选取颜色。`jQuery ColorPicker`是一个轻量级且...
总之,理解jQuery选择器的工作方式,关注其版本更新中的修复和改进,以及熟练使用开发者工具,都是应对jQuery选择器Bug的关键。在实际开发过程中,我们需要持续学习和适应,以确保我们的代码能够稳定、高效地运行。
本项目“jquery周历选择器”利用jQuery的灵活性和易用性,构建了一个适用于混合应用程序(Hybrid App)的周历选择器组件。 1. **周历选择器设计**: - 周历选择器通常用于日程管理或时间规划应用,显示一周的日期...
这个名为"jQuery选择器.rar"的压缩包文件显然包含了关于jQuery选择器的相关学习资源,可能包括示例代码、教程文档等。这些内容可能与《锋利的jQuery第二版》这本书中的章节相匹配,该书是jQuery学习的经典参考资料之...
5. **插件使用**:此外,也有许多预封装的jQuery时间选择器插件,如jQuery UI的Datepicker插件,它可以轻松实现时间选择功能,只需简单的配置即可。 ### 示例代码 以下是一个简单的jQuery时间选择器的实现示例: ...
jQuery选择器是jQuery库的核心特性之一,它极大地简化了JavaScript中的DOM元素选择和操作。jQuery完全继承了CSS的风格,并在此基础上提供了更强大和灵活的选择方式。以下是对jQuery选择器的详细说明: **1. 基本...
通过阅读和理解这段源码,开发者不仅可以学习到jQuery选择器的工作原理,还能提升对CSS选择器、DOM操作以及JavaScript性能优化的理解。 总结来说,这个"jquery样式选择器插件"是一个浓缩的精华,它展示了如何用最少...
二、jQuery颜色选择器的配置与使用 1. 引入jQuery库和颜色选择器插件 首先,你需要在HTML文档中引入jQuery库以及颜色选择器插件的JavaScript和CSS文件。例如,如果你使用的是`jquery.colorpicker.js`和`jquery....
jQuery选择器总结,网上下载的,非原创的,仅供参考,学习学习。
jquery选择器功能无比强大,用好了可以起到事半功倍的效果,这个资源把选择器单独列出来,便于方便查找
本文将深入探讨jQuery城市选择器的实现原理、使用方法及其优势。 一、jQuery库基础 jQuery是一个轻量级的JavaScript库,简化了DOM操作、事件处理、动画制作以及Ajax交互。它的API设计简洁易用,使得开发者能够更...
虽然jQuery选择器非常强大,但在处理大量元素时,应避免使用过于复杂的选择器,因为这可能影响性能。优先使用ID选择器,其次类选择器,再是属性选择器,尽量减少层级选择器的使用。 ### 实验室实践 在“jQuery实验...