BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

jQuery:为富web UI书写JavaScript的新方法

| 作者 Anil Bhatt 关注 0 他的粉丝 ,译者 宋玮 关注 0 他的粉丝 发布于 2007年7月14日. 估计阅读时间: 3 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

jQuery由John Resig创建于2006年初,其提供了如下主要特征以简化JavaScript开发:

JQuery选择器

jQuery的基本前提是jQuery选择器,它被用来从HTML DOM中选择元素并操作这些元素。例如,只要页面的一个链接被点击,以下jQuery代码片断将显示一个警告(alert)消息:

$("a").click(function() { alert("You are leaving this page!");});  

$("a") 是一个jQuery选择器。本例中,它选择了所有 锚点(anchor) 元素。$ 自身是jQuery "class" 的一个别名,因此 $() 构造了一个新的jQuery对象。click()函数是jQuery对象的一个方法。 它将一个鼠标点击事件绑定到了所有所选择的元素上(本例中,所选元素是锚点元素)并在事件发生时执行一个已提供好的函数。

当然,如果你只想针对特定链接显示警告(alert),可以应用filter。

传统的JavaScript将通过下面的方式完成相同的功能: 


<a href="http://www.infoq.com" onclick="alert('You are leaving this page!')">infoQ</a>


使用jQuery,我们不需要为每个单独的元素都写一个onclick。我们获得一个结构(HTML)和行为(JavaScript)的清晰分离。

特效

这里有另一个关于jQuery特效特性的例子。如下代码片断查找所有含有class为"surprise"的段落,向其中增加class "shock",接着缓慢地显示它们:

$("p.surprise").addClass("shock").show("slow");

Ajax开发

Ajax的一个常用用法是装载HTML块到页面的一个区域内。使用jQuery,你只需选择你要的元素并使用load()函数。这里是一个更新统计的例子:

$('#stats').load('stats.html');

最新版jQuery 1.1.3最近已经发布了,它遍历DOM的速度比1.1.2快了近8倍。其它主要增强包括一个重新书写的事件系统,其处理键盘事件更优雅,以及重新书写的特效系统。

查看英文原文:jQuery: A new way to write JavaScript for rich web UI

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

这个确实不错的。 by sen firefly

Jquery确实不错。够轻够强。

Easy + Power by Wu Junyin

Easy + Power = 实用
关注中。。。。。

似乎并不支持异步访问WebService。。。 by Bo Zhao

似乎并不支持异步访问WebService。。。

Re: 似乎并不支持异步访问WebService。。。 by Leon Kennedy

是支持的,不过好像不够有用。
-----
■袋鼠蛋是国内第一个开源的动态web服务器,其拥有自己的开发语言DQM及容器(类似于Servlet/JSP)
www.kangaroo-egg.com

Re: 似乎并不支持异步访问WebService。。。 by kj z

楼上确信吗?
如果是这样的话,任何封装xmlhttp的lib都支持了。

要你就都翻译完,就这么点,还没什么内容了,算什么啊!

推荐Eclipse插件 by liu jim

推荐一款让Eclipse支持jQuery的插件
jQueryWTP
www.langtags.com/jquerywtp/index.html

11 by li curls

看好js的未来!

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

7 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT