WEB开发网
开发学院网页设计JavaScript 窥探jQuery——面向JavaScript程序员 阅读

窥探jQuery——面向JavaScript程序员

 2010-09-14 13:09:45 来源:WEB开发网   
核心提示: 上述例子中,:visible和:odd是jQuery实现的扩展,窥探jQuery——面向JavaScript程序员(3),很具特色,而属性的选取使用@作为标记,这个示例用到了链盒(chaining),稍后会做介绍,其方式和XPath一样,要优于CSS 2

上述例子中,:visible和:odd是jQuery实现的扩展,很具特色。而属性的选取使用@作为标记,其方式和XPath一样,要优于CSS 2。

jQuery的这套选取语法包罗万象,有些类似正则表达式,想完全消化是需要花上一段时间的。

把玩一下(Doing stuff with them)

通过jQuery的选取操作,我们能得到一些很棒的“素材”(beast)。它们是一个集合,包含了DOM元素,并且类似数组那样,拥有length属性;通过索引可以访问集合中的元素。在Firebug console的交互模式下,集合也被显示成一个数组,这个特性非常有用。集合实际上是一个jQuery对象,这个对象被赋予了很多方法(methods),用来查询,修改,扩展集合中的元素。

jQuery的方法(methods),本质上可分成三种:一种可以操作那些符合匹配的元素;一种可以返回第一个匹配到的对象的值;一种可以变更被选取的集合。

我不会列出所有的方法(可参考visualjquery.com),但我用例子做一下说明。如果你的浏览器装了Firebug,你可以以交互方式运行这些示例代码:首先使用这个bookmarklet(译注[1])把jQuery库载入至浏览器的任意页面,然后把示例代码粘贴到Firebug console中。

jQuery('div#primary').width(300);
把id="primary"的div的宽度设为300px
jQuery('p').css('line-height', '1.8em');
把所有段落的line-height设为1.8em
jQuery('li:odd').css({color: 'white', backgroundColor: 'black'});
向间隔的list项添加两个CSS规则;注意css()函数可以用一个对象来代替两个字符串作为参数
jQuery('a[@href^="http://"]').addClass('external').attr('target', '_blank');
向所有(以http://开头的)外部链接添加“external”类,然后策略性地加上target="_blank"属性。这个示例用到了链盒(chaining),稍后会做介绍。
jQuery('blockquote').each(function(el) { alert(jQuery(this).text()) });
遍历页面上的每个<blockquote>,并显示出它的文字内容(包括HTML标签)
jQuery('a').html('Click here!');
用阴险的“Click here!”代替页面上所有的链接<a>的文字

下面的示例展示了jQuery如何取得第一个匹配到的对象的值:

上一页  1 2 3 4 5 6 7 8  下一页

Tags:窥探 jQuery 面向

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接