为庆祝jQuery的四周年生日,jQuery官方团队正式发布了jQuery的1.4版本。在这个版本中,jQuery官方团队做了大量的编码、测试和文档工作,相对之前版本自然改进不少,让我们一起来看看有那些新变化吧。
本文分上下两篇,上篇主要总体介绍jQuery 1.4版本的相关使用及更新,下篇通过一些代码示例来展示更新的方法及新添加的方法。
【下载及调用】
像以往一样,官方提供了jQuery的两份拷贝,一份是压缩版本(使用Google Closure Compiler压缩,之前使用的是YUI),另一份是未压缩版本(用来调试和阅读)。
- jQuery压缩版本(23kb,gzip压缩后)
- jQuery未压缩版本(154kb)
本博之前曾提议过通过google服务器加载jQuery,提高加载速度。现在,我们依然可以通过Google的服务器调用压缩后的jQuery 1.4版本文件,如下:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"><!--mce:0--></script>
【新特性及变化】
在jQuery 1.4中,许多常用的jQuery方法被重写,这些改进不仅更易用,也带来了性能的显著提升。
注:以下为概述,不详之处参见下篇的代码解释。
- 为一些方法添加设置函数(Setter Functions)
在之前版本中,我们可以给attr()方法传入一个函数,将函数的返回值赋予某个属性。1.4中,这个功能被添加到了更多的方法中:.css()、 .attr()、 .val()、 .html()、 .text()、 .append()、.prepend()、 .before()、 .after()、.replaceWith(), .wrap()、 .wrapInner()、 .offset()、 .addClass()、 .removeClass()、 .toggleClass()。
此外,在下面方法中,还可以传入当前值作为设置函数的第二个参数,供设置函数使用:.css()、.attr()、.val()、.html()、.text()、.append()、.prepend()、.offset()、.addClass()、.removeClass()、和 .toggleClass()。例如:
jQuery('<img src="enter.png" alt="enter your name" />') .attr("alt", function(index, value) { return "Please, " + value; });
- 更新了jQuery中序列化的核心方法jQuery.param()
之前对于{foo: ["bar", "baz"]}序列化后的结果是“foo=bar&foo=baz”,现在为“foo[]=bar&foo[]=baz”。
这样更改的目的主要是告诉接收端,传入的是一个数组对象。 - 在jQuery.ajax
中可在不指定dataType属性时,会根据response的content-type自动识别。
例如:ajax请求返回的对象是json类型(application/json),则dataType会自动指定为”json”(不指定的情况下)。 - 在jQuery.ajax请求中,添加对Etag的支持。
之前jQuery在ajax请求中是在header中不发送If-None-Match值的(也就是不支持Etag),也就默认忽略了浏览器缓存。现在可以通过指定ifModified属性开启它。
提示:如果您不了解http header的相关知识,推荐阅读这篇文章。
- 使用原生的JSON.parse,对json进行严格解析
在1.3及更早版本中,jQuery通过javascript的eval方法来解析json对象。在1.4中,如果你用的浏览器支持,则会使用原生的JSON.parse进行json对象解析,这样对json对象的书写验证则更为严格。如:{foo: “bar”}的写法将不会被验证为合法的json对象,必须写成{”foo”: “bar”}。如果你的程序打算升级到1.4版本,那么这一点要尤其注意了。
- 在使用.serialize() 序列化时,添加对HTML5元素的支持
- 为ajax请求添加上下文支持,参考jQuery.ajax()
jQuery.ajax({ url: "test.html", context: document.body, success: function(){ jQuery(this).addClass("done"); } });
- 在jQuery.ajax()请求时,接收XMLHttpRequest对象作为success的第三个参数
- 在ajax请求时,总是设定Content-Type属性
在1.3版本中,如果ajax发送的数据为空时,则不发送Content-Type属性值,1.4中则总是显式设定Content-Type值。这是因为有些程序后端通过Content-Type值判断如何响应。
- 当用jsonp方式进行ajax请求时,可以显式指定callback的名称
之前jsonp的callback名称是由jQuery生成的随机名称,现在可以通过jsonpCallback参数显式指定
- 部分CSS相关方法被重写。其中,.css()方法效率有两倍的提升, .addClass()、.removeClass()和.hasClass()效率有三倍的提升。.toggleClass() 方法可以一次切换多个class
$("div").toggleClass("current active");
- 在jQuery 1.4中,许多dom操作相关方法在性能上大幅提升
其中.append()、 .prepend()、.before()、和 .after() 的性能被改善,
.html() 的性能提升了近3倍。
.remove() 和 .empty()的性能提升了近4倍。 - jQuery(”tag”)效率有所提升
当传入一个tag名称进行寻找时,搜索算法有所改进 。
- 使用id开始的选择器获取元素的速度进一步提升
类似于jQuery(’#id p’)这样以id开始的选择器获取元素的速度有所优化,速度是最快的。
- jQuery()(或$())将返回jQuery空对象
在之前当调用jQuery()时,默认返回的是document的jQuery对象,也就是等价于jQuery(’document’)。在1.4版本中将不再做这样的转换,直接返回jQuery空对象。
在1.4中,之前jQuery().ready()的写法不建议使用(虽然仍然可以用),应当写作jQuery(document).ready()或jQuery(function(){})
- 添加了新事件.focusin()和.focusout()
.focusin()和.focusout()方法等价于focus()和blur()方法,不同的是支持事件冒泡。需要注意的是focus()和blur()事件依然不可以通过live()方法绑定。
- 几乎所有事件都支持live()绑定
除了ready、focus(用focusin替代)、blur(用focusout替代)事件外的所有事件都支持live绑定
- jQuery 1.4对内部结构重新组织,并开始建立代码风格规范
之前的core.js被划分为attribute.js, css.js, data.js, manipulation.js, traversing.js和queue.js。ready事件被移至core.js中。
jQuery 1.4开始建立了代码风格规范,大多数核心代码符合这一规范。虽然这个规范仅有几条,但我相信这是一个良好的开端。
【相关测试】
在jQuery 1.4中解决了207个bug(相比之下,1.3解决了97个bug)。
此外,测试用例从1.3.2的1504个增加了1.4版本的3060个。这些测试100%通过当下主流浏览器(Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7, IE 8, Opera 10.10, 和 Chrome)。
【版本兼容性处理】
从上面还是可以看出1.4是做了相当多的更新,为了保证当前版本的向后兼容(也就是希望你之前使用jQuery 1.3版本的程序平稳过渡到1.4版本上),官方特意提供了兼容性脚本补丁,如下使用:
<script src="http://code.jquery.com/jquery.js"></script> <script src="http://code.jquery.com/jquery.compat-1.3.js"></script>
注:以上内容以jQuery官方文档为依据撰写而成,更加详细内容可直接访问官方说明页面。
本文地址:jQuery 1.4正式发布:一起来看有哪些新变化(上篇)(转载请以链接形式注明来源)
延伸阅读:
- jQuery 1.4正式发布:一起来看有哪些新变化(下篇)
- 实现文字高亮功能的两种解决方案(Javascript/Jquery)
- 使用CSS和JQuery轻松切换网页显示样式
- Jquery Tools——不可错过的Jquery UI库(一)
- Ajax.Org——开源的RIA应用程序平台
- 请从Google服务器加载Jquery,以提高网站性能
- cssrain出品——《锋利的jQuery》
- jQuery Tools——不可错过的jQuery UI库(五)
版权声明:
本站内容受著作权法保护。个人网站、blog转载时请遵循 “署名-非商业用途-保持一致” 的创作共用协议;商业网站或媒体未授权不得复制本站内容。
友情提示:
如对本文有任何疑问,或在示例的使用中遇到问题,或有好的建议,欢迎在下面留言共同学习,有问必答。


[...] css9.net 无 发表评论 [...]
我也翻译了一部分
感觉1.4强大了很多,许多函数都有了更好的执行效率,比如,.css()和.attr(),能更快地执行
还有就是设置器函数和live()“万能事件点火器”
Johnie真是牛X,^0^
嗯,看样当初选择jquery一点都没错。
john这个小伙子很有活力!
我来踩一脚。楼上的同学貌似也翻译了同一篇文章。以后以前翻译吧。
你翻译的够完整的啊, 我这个粗略总结都用了不少时间,你那个肯定没少费工夫。
嗯,大概花了有10个小时。主要还是一些奇怪的中英文术语对不上。经常要查查。
你总结的言简意赅,我觉得不错。我做的是劳动密集型工作。哈哈
coolnalu 和 IIduce 的共享精神是值得肯定的,哈哈!我们期待着更多关于jQuery的好文章。
[...] 原文:http://css9.net/jquery-1-4-released-new-features-1/ [...]
[...] « jQuery 1.4正式发布:一起来看有哪些新变化(上篇) 2010-2 5 jQuery 1.4正式发布:一起来看有哪些新变化(下篇) 发表于: [...]
干嘛呢?
[...] 距jQuery 1.4系列上篇发布已经有半个多月了(jQuery 1.4.1已经发布),由于年底比较忙,下篇的书写一直拖沓至今,实在是对不住各位读者。在上篇中总体介绍了jQuery 1.4版本的相关使用及更新,本打算下篇中构造一些代码实例,既要实用又要把函数特点体现出来,后来写起来才发现蛮难的。加之jQuery 1.4发布了有一段时间了,不少人已经写了这方面的文章,我准备把这一篇作为jQuery 1.4的资源汇总篇。 [...]
[...] 距jQuery 1.4系列上篇发布已经有半个多月了(jQuery [...]
I totally love this article. I think you could write some other things to make your blog more complete.For example: ed hardy.vibram five fingers.p90x workout schedule. mbt shoes. hardy caps. vibram fivefingers kso trek. mbt chapa dawn shoes.
ghd straightener
ugg ugg boots
replica louis vuitton handbags
edhardyI thought that many people can like.
[...] 距jQuery 1.4系列上篇发布已经有半个多月了(jQuery 1.4.1已经发布),由于年底比较忙,下篇的书写一直拖沓至今,实在是对不住各位读者。在上篇中总体介绍了jQuery 1.4版本的相关使用及更新,本打算下篇中构造一些代码实例,既要实用又要把函数特点体现出来,后来写起来才发现蛮难的。加之jQuery 1.4发布了有一段时间了,不少人已经写了这方面的文章,我准备把这一篇作为jQuery 1.4的资源汇总篇。 [...]
[...] 距jQuery 1.4系列上篇发布已经有半个多月了(jQuery 1.4.1已经发布),由于年底比较忙,下篇的书写一直拖沓至今,实在是对不住各位读者。在上篇中总体介绍了jQuery 1.4版本的相关使用及更新,本打算下篇中构造一些代码实例,既要实用又要把函数特点体现出来,后来写起来才发现蛮难的。加之jQuery 1.4发布了有一段时间了,不少人已经写了这方面的文章,我准备把这一篇作为jQuery 1.4的资源汇总篇。 [...]