本文作者:‘香水坏坏’ 本文取自网络
8月23号jquery发布了jquery 1.1.4版
最新版的jquery你可以从下面地址根据需要下载:
- jQuery 1.1.4 (压缩版, 21KB)
- jQuery 1.1.4 (65KB)
- jQuery 1.1.4 (文档, 源代码)
1.1.4相对于以前的版本来说,除了修正一部分BUG外,在其他方面也做了很大的改进。以前,用'$'来使用jQuery现在你可以用'jQuery'或'$'来使用jQuery。
随意命名jQuery(下面会告诉你如何去做)
这样的做有二个目的:
- 现在在同一个页面,你可以同时使用多个版本的jQuery
- 你可以把jQuery加到其他对象或库的命名空间。如:
- // 添加到dojo里面
- dojo.jquery = jQuery.noConflict(true);
- dojo.jquery("#elem div").slideDown("slow");
- // 或者添加到YAHOO
- YAHOO.query = jQuery.noConflict(true);
- YAHOO.query("span.hidden").removeClass("hidden");
速度性能上的提升
提升了jQuery三大常用部分的速度:ID selectors, tag name selectors, each() loops。
下面给出的是这3个方面的测试速度数据
$(”#id”) 提升
Browser | jQuery 1.1.3 | jQuery 1.1.4 | % 提升 |
---|---|---|---|
IE 6 | 651ms | 70ms | 830% |
Firefox 2 | 1355ms | 27ms | 4919% |
Safari 3 | 101ms | 14ms | 620% |
Opera 9 | 270ms | 62ms | 335% |
平均提升: | 1676% |
$(”elem”) 提升
Browser | jQuery 1.1.3 | jQuery 1.1.4 | % 提升 |
---|---|---|---|
IE 6 | 661ms | 451ms | 47% |
Firefox 2 | 1717ms | 143ms | 1100% |
Safari 3 | 99ms | 83ms | 19% |
Opera 9 | 226ms | 198ms | 14% |
平均提升: | 295% |
.each() 提升
Browser | jQuery 1.1.3 | jQuery 1.1.4 | % 提升 |
---|---|---|---|
IE 6 | 200ms | 30ms | 567% |
Firefox 2 | 468ms | 29ms | 1514% |
Safari 3 | 17ms | 11ms | 54% |
Opera 9 | 45ms | 25ms | 80% |
平均提升: | 554% |
新加入的函数/方法
.slice()
你可能在javascript数组里见过这个方法--这对你来说太幸运了,因为他们的所产生的行为是一样的。这个方法用来从匹配的jQuery对象中分离出一部分jQuery对象的再好不过了。下面是调用slice()方法的一些正确方式:
- $("div").slice(0,1); // 第一个 div
- $("div").slice(-1); // 最后一个 div
- $("div").slice(1,-1); // 除第一个最后一个的所有 div
- $("div").slice(1,3); // 第二个和第三个 div
- $("div").slice(7,8); // 第八个 div
:has()
这是一个新的选择器用来替换以前用来检查元素是否在例外一个元素的功能(div[p]).现在你可以用这个选择器来取代以前的XPath选择器了,如下:
- // 所有包含p的div
- $("div:has(p)")
- // 所有包含img标签的a
- $("a:has(img)")
- // 所有包含a标签的div并且a标签还包含img标签
- $("div:has(a:has(img))")
深度,递归式的 .extend()
新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。
- // 以前的 .extend()
- jQuery.extend(
- { name: “John”, location: { city: “Boston” } },
- { last: “Resig”, location: { state: “MA” } }
- );
- // 结果:
- // => { name: “John”, last: “Resig”, location: { state: “MA” } }
- // 新的更深入的 .extend()
- jQuery.extend( true,
- { name: “John”, location: { city: “Boston” } },
- { last: “Resig”, location: { state: “MA” } }
- );
- // 结果
- // => { name: “John”, last: “Resig”,
- // location: { city: “Boston”, state: “MA” } }
.noConflict()
如上面提到的,这个功能允许你完全重命名'jQuery'命名空间以及'$'。
你可以象下面一样使用新的快捷名称:
- // 自定义jQuery名称:
- var jq = jQuery.noConflict(true);
- jq("#id div").hide();
- // 失败 - $ 和 jQuery 已经被重命名:
- $("#id div").hide();
- jQuery("#id div").hide();
也可以用这种方式把jQuery放到已经存在的名称空间,如:
- // 把jQuery放到命名空间里:
- var obj = {};
- obj.jq = jQuery.noConflict(true);
- obj.jq("#id div").hide();
不赞成使用的功能/方法
我们并不赞成在jQuery1.1.4里面的一些方法,并且准备在将要发布的jQuery1.2修改这些API。无论如何,我们会提供可供选择的其他相应的方法。
jQuery1.2和jQuery1.1一样,将会提供一个向后兼容的插件。这样的话,如果你想继续使用这些特殊的方法,你可以使用这个插件继续这么做。
另外,为了处理XPath将在jQuery里发布另外一个独立插件来处理XPath选择的功能。这个插件将在jQuery1.2发布时一同和大家见面。
选择器
$("div//p") XPath 选择器
请使用 CSS选择器("div p")来代替。或者在jQuery1.2发布后,使用新的XPATH插件
$("div/p") XPath 选择器
请使用 CSS选择器("div>p")来代替。或者在jQuery1.2发布后,使用新的XPATH插件
$("p/../div") XPath 父选择器
请使用$("p").parent("div")选择器来代替. 或者在jQuery1.2发布后,使用新的XPATH插件
$("div[p]") XPath 包含选择器
请使用这个新的选择器 $("div:has(p)")来代替. 或者在jQuery1.2发布后,使用新的XPATH插件
$("a[@href]") XPath 属性选择器
注意: 尽管在这次的发布版本中并不赞成使用此选择器, jQuery 1.2并没有删除他. 未来在jQuery 1.2中,将推荐你使用CSS选择器$(”a[href]”)来代替.或者在jQuery1.2发布后,使用新的XPATH插件
DOM操作
$(”div”).clone(false)
调用带参数的clone方法是不被赞同的。你现在应该这么来做:.clone().empty()
DOM的截取
$(”div”).eq(0)
这个方法是不被赞同的。可以使用新的.slice()方法(他同数组的slice方法一样,你可以象这样达到同.eq()一样的目的):
$("div").slice(0,1);
另外,.eq(0)还可以这样实现:
$("div:eq(0)")
$("div:first")
$("div").lt(2)
这个方法是不被赞同的。可以使用新的.slice()方法(他同数组的slice方法一样,你可以象这样达到同.lt()一样的目的):
$("div").slice(0,2);
另外,.lt(2)还可以这样实现:
$("div:lt(2)")
$("div").gt(2)
这个方法是不被赞同的。可以使用新的.slice()方法(他同数组的slice方法一样,你可以象这样达到同.gt()一样的目的):
$("div").slice(3);
另外,.gt(2)还可以这样实现:
$("div:gt(2)")
Ajax
$("#elem").loadIfModified("some.php")
这个方法已经被删除,赞同使用$.ajax()来调用:
$.ajax({
url: "some.php",
ifModified: true,
success: function(html){
$("#elem").html(html);
}
});
$.getIfModified("some.php")
这个方法已经被删除,赞同使用$.ajax()来调用:
$.ajax({
url: "some.php",
ifModified: true
});
$.ajaxTimeout(3000)
这个方法已经被删除,赞同使用$.ajaxSetup()来调用:
$.ajaxSetup({timeout: 3000});
$(…).evalScripts()
这个方法在jQuery再也没有必要了--当注入文档时所有的脚本包括html字符串都将自动求值。