老老鼠

博客园 首页 新随笔 联系 订阅 管理

jQuery利用CSS和Xpath选择符的能力,让我们在DOM中快捷而轻松的获取元素或元素组.

DOM

jQuery最强大的方面之一就是能够简化DOM遍历任务,我们通过各种选择符和方法取得的对象集合实际上是一个jQuery对象,可以轻松的为jQuery对象绑定事件,添加漂亮的效果,将多重修改或效果通过jQuery对象连缀在一起

工厂函数$()

在jQuery中,无论使用哪种类型的选择符(不管是CSS、Xpath、还是自定义选择符),都要从一个美元符号和一对圆括号开始:$(),$()函数会消除使用for循环访问一组元素的需求,因为放到圆括号中的任何元素都将自动执行循环遍历,并且会保存到一个jQuery对象中,可以在$()函数的圆括号中使用的参数几乎没有限制,常见的如下:

标签类:$('p')会取得文档的所有段落

ID:$('#some-id')会取得文档中的具有对应some-id ID的一个元素

类:$('.some-class')会取得文档中的带有some-class类的所有元素

CSS选择符

$('#some-id>li').addClass('newclass');查找ID为some-id的元素(#some-id)的子元素(>)中所有的列表项(li),并应用样式newclass.

$('#some-id>li:not(.horizontal)').addClass('newclass');这次取得的列表项为ID为some-id的元素的li后代元素,没有使用horizontal类(not(.horizontal))

XPath选择符

$('a[@title]')选择文档中的带有title属性([@title])的a元素,此外方括号在XPath语法中还有另外一种用途,即在不带前置@符号的情况下,可以用来指定包含中另外一个元素的元素,如$('div[ol]')取得包含一个ol元素的所有div元素.
$('a[@href^="mailto:”]').addClass('mailto');属性选择符允许使用正则表达式,此例取得所有电子邮件链接

$('a[@href$=".pdf"]').addClass('pdflink');取得所有指向pdf文件的链接

$('a[@href*="mysite.com"]').addClass('mysite');这里mysite.com可以出现中href属性的任何位置上,取得内部链接

自定义选择符

$('div.horizontal:eq(1)')在带有horizontal类的div集合中,选择第2个项

posted on 2010-05-03 18:50  大老鼠  阅读(318)  评论(0编辑  收藏  举报