为什么要使用JQ1.4

为庆祝jQuery的四周年生日,jQuery官方团队正式发布jQuery 1.4版本。在这个版本中,jQuery官方团队做了大量的编码、测试和文档工作,相对之前版本自然改进不少,让我们一起来看看有那些新变化吧。

本文分上下两篇,上篇主要总体介绍jQuery 1.4版本的相关使用及更新,下篇通过一些代码示例来展示更新的方法及新添加的方法。

【下载及调用】

像以往一样,官方提供了jQuery的两份拷贝,一份是压缩版本(使用Google Closure Compiler压缩,之前使用的是YUI),另一份是未压缩版本(用来调试和阅读)。

之前曾提议过 通过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方法被重写,这些改进不仅更易用,也带来了性能的显著提升。

注:以下为概述,不详之处参见下篇的代码解释。

1、为一些方法添加设置函数(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;
});

2、更新了jQuery中序列化的核心方法jQuery.param()

之前对于{foo: ["bar", "baz"]}序列化后的结果是“foo=bar&foo=baz”,现在为“foo[]=bar&foo[]=baz”。
这样更改的目的主要是告诉接收端,传入的是一个数组对象。

3、在jQuery.ajax 中可在不指定dataType属性时,会根据response的content-type自动识别。

例如:ajax请求返回的对象是json类型(application/json),则dataType会自动指定为”json”(不指定的情况下)。

4、在jQuery.ajax请求中,添加对Etag的支持。

之前jQuery在ajax请求中是在header中不发送If-None-Match值的(也就是不支持Etag),也就默认忽略了浏览器缓存。现在可以通过指定ifModified属性开启它。

5、使用原生的JSON.parse,对json进行严格解析

在1.3及更早版本中,jQuery通过javascript的eval方法来解析json对象。在1.4中,如果你用的浏览器支持,则会使用原生的JSON.parse进行json对象解析,这样对json对象的书写验证则更为严格。如:{foo: “bar”}的写法将不会被验证为合法的json对象,必须写成{”foo”: “bar”}。如果你的程序打算升级到1.4版本,那么这一点要尤其注意了。

6、在使用.serialize() 序列化时,添加对HTML5元素的支持

7、为ajax请求添加上下文支持,参考jQuery.ajax()

jQuery.ajax({
url: “test.html”,
context: document.body,
success: function(){
jQuery(this).addClass(“done”);
}
});

8、在jQuery.ajax()请求时,接收XMLHttpRequest对象作为success的第三个参数

9、在ajax请求时,总是设定Content-Type属性

在1.3版本中,如果ajax发送的数据为空时,则不发送Content-Type属性值,1.4中则总是显式设定Content-Type值。这是因为有些程序后端通过Content-Type值判断如何响应。

10、当用jsonp方式进行ajax请求时,可以显式指定callback的名称

之前jsonp的callback名称是由jQuery生成的随机名称,现在可以通过jsonpCallback参数显式指定

11、部分CSS相关方法被重写。其中,.css()方法效率有两倍的提升, .addClass()、.removeClass()和.hasClass()效率有三倍的提升。.toggleClass() 方法可以一次切换多个class

$(“div”).toggleClass(“current active”);

12、在jQuery 1.4中,许多dom操作相关方法在性能上大幅提升

其中.append()、 .prepend()、.before()、和 .after() 的性能被改善,
.html() 的性能提升了近3倍。
.remove() 和 .empty()的性能提升了近4倍。

13、jQuery(”tag”)效率有所提升

当传入一个tag名称进行寻找时,搜索算法有所改进 。

14、使用id开始的选择器获取元素的速度进一步提升

类似于jQuery(’#id p’)这样以id开始的选择器获取元素的速度有所优化,速度是最快的。

15、jQuery()(或$())将返回jQuery空对象

在之前当调用jQuery()时,默认返回的是document的jQuery对象,也就是等价于jQuery(’document’)。在1.4版本中将不再做这样的转换,直接返回jQuery空对象。

在1.4中,之前jQuery().ready()的写法不建议使用(虽然仍然可以用),应当写作jQuery(document).ready()或jQuery(function(){})

16、添加了新事件.focusin()和.focusout()

.focusin()和.focusout()方法等价于focus()和blur()方法,不同的是支持事件冒泡。需要注意的是focus()和blur()事件依然不可以通过live()方法绑定。

17、几乎所有事件都支持live()绑定

除了ready、focus(用focusin替代)、blur(用focusout替代)事件外的所有事件都支持live绑定

18、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官方文档 为依据撰写而成,更加详细内容可直接访问官方说明页面。

原文:http://css9.net/jquery-1-4-released-new-features-1/

相关的资料

jQuery 1.4 Alpha 1 发布

发布于:2009年12月05日
这是 jQuery 1.4 第一次发布的版本,尽管还是 Alpha 测试阶段,但它已经是稳定的,在所有市面上流行的浏览器中通过了测试。

相比较上一个版本 1.3.2 ,1.4 版本进行了一些扩展,包括:

1. live 方法被大幅度检修,现在支持提交,更改,mouseenter,mouseleave,焦点,模糊在所有浏览器活动。现在还支持背景和数据。
2. append, prepend 方法优化
3. add has been adjusted to always return elements in document order.
4. find, empty, remove, addClass, removeClass, hasClass, attr, and css 等方法进行了重构,大大的优化

jQuery 1.4 Alpha 2 发布

发布于: 2009年12月19日
该版本的代码是稳定的,所有的功能都在jQuery支持的所有浏览器中进行了测试,而且 jQuery 1.4 中计划开发的功能都已经在该版本中完成,1.4 版本不再接受新的功能加入了。

jQuery 1.4 正式版发布啦

发布于: 2010年01月14日
jQuery 1.4 除了增加大量的 API 以外 (參考「Version 1.4 – jQuery API」這個網頁的列表),又再次大幅改善效能 (這是重點,可以看到整篇介紹文章有一大半都是講效能的改進)。這些效能改進的方式有些在 John Resig 的 blog 有專門寫文章解釋過,像是「JavaScript Function Call Profiling」。

另外,jQuery.param() 支援 serialization 了… 可以把 js object 轉成像 foo[]=bar&foo[]=baz 這樣的字串,讓 web 端處理起來比較方便,不用特地丟 JSON object 進去再用 JSON decoder 解開。而 jQuery.JSONP 也終於可以指定 callback name 了

jQuery 1.4 的新特性:

Easy Setter Functions: For a while now, you’ve been able to pass a function into .attr() and the return value of that function is set into the appropriate attribute. This functionalilty has now been extended into all setter methods
Ajax: A lot of enhancements to the various remoting functions including support for native JSON parsing, etags, request context, and more
改进了 .css 和 .attr 方法
Per property easing on effects
If you want to ensure that “this” inside a function will be permanently bound to a particular value, you can use jQuery.proxy to return a new function with that scope
增加新的事件:focusin 和 focusout
下载地址:http://code.jquery.com/jquery-1.4.min.js



调查题目:JavaScript的框架

调查范围:a Django forum, a Ruby on Rails forum, a very large PHP forum, and TheServerSide.com (namely a large following of Java folks).

那个JavaScript框架你在项目开发中最常使用?

Which JavaScript framework do you use the most in your projects?

jQuery 很明显的占据统治地位,它快速并容易入手,在Blogs中很流行,对于很多的开发者来说,很明显的选择,它可以做任何你需要的事情。

关于你选择的框架,请评级官方提供的文档质量?

YUI相比于其他,其文档说明的确非常的优秀。

评级社区支持的质量?

特定条件下的性能表现,轻型和重型下?

执行难易—描述安装框架到页面及整合库函数到存在的代码/函数的容易程度。

流行程度:

第三方插件质量:

总结:选择JavaScript library / toolkit / framework,不要选择最流行的,而是要深入挖掘它,选择最适合您的工具;调查数据见Google Spreadsheets。

本调查译自Kyle Hayes的“Survey Results: JavaScript Frameworks”。

Kyle Hayes,24岁,供职于波音公司,专于富网络应用开发和网站设计。ColdFusion and Flex社区的活跃分子,开发出开源Flex项目AmazonRank。

About S

Hi ,im s .
This entry was posted in JS&Library, 产品交互. Bookmark the permalink.

留下评论

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>