初学jQuery之选择符

前两个月一直在学习如何用javascript实现动态web应用,在面对元素选择,循环遍历以及跨浏览器兼容等问题费了好大的功夫,但这些问题复杂而繁琐,虽然有许多好的解决方案,但每每让人顾此失彼,让初学者感到力不从心,因为要在几个月掌握javascript不是件易事。

但是昨天,我遇到了一本《jQury基础教程》,感觉非常地兴奋。它终于让程序员摆脱了繁重的底层工作,可以专心于页面的动态设计。这个框架给我的感觉是:轻巧、强大、易扩展。它利用了css的优势,对浏览器的不一致性进行抽象,利用隐式迭代和连缀的思想和方式证明这个框架是如此地受欢迎。

jQuery利用了css和Xpath选择符的能力,让我们在DOM中能快速获取元素或元素组。因此能够使我们很方便的为页面添加类,从而实现动态并且更流畅的页面。

1.css选择符

$().ready(function() {
$('#ID').addClass('className');
});

上面函数实现了给一组匹配的元素添加类。

2.Xpath选择符

这个能够完善css在选择上的一些不足,例如:要选择所有带title属性的连接,我们可以使用$('a[@title]'),当然如果方括号内不带前置@符号,可以用来指定包含在另一个元素中的元素。例如:$('div[ol]')取得包含一个ol元素的所有div元素。

3.自定义选择符

它的语法与css中伪类选择符语法相同,以:开头。例如:$('div.book:eq[1]')表示所有带有book类的div集合中,选择第二项;再如:$('tr:odd').addClass('odd')为奇数行表格添加odd类。

我们可以组合三种选择符,来灵活地访问DOM元素。此外在一些特殊情况下为了访问某个元素的标签名,我们可以使用.get(index)方法。例如:var myTag = $('#myelement').get(0).tag

Name;其中 $('#myelement').get(0)可以简写成$('#my-element')[0]

上面是我对那本书前两章的内容的理解,学习之路还很漫长,欢迎jQuery高手指点。

posted @ 2011-03-17 00:21  Vincent的柔情  阅读(517)  评论(0编辑  收藏  举报