您的位置：首页 > Web前端 > JQuery

jQuery 1.4: 15个你应该知道的新特性(译)

2010-01-25 10:48 651 查看

jQuery('ul li:contains(苹果)').nextUntil(':contains(梨子)');   // 得到 香蕉，葡萄，草莓

原文地址：http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know

jQuery 1.4 最近刚刚发布. 这个版本可不是一个简单的改进,它不仅包含了很多新的特性，还改进了很多功能, 更在性能优化方面下了很大功夫, 本文将对这些新的特性和增强的部分进行讨论,希望能对你有所帮助.

首先现在你可以从这里下载最新的1.4的版本了: http://code.jquery.com/jquery-1.4.js

就在14 Days of jQuery 活动的第12天，jQuery 发布了1.4.1版本，主要是对1.4版本的bug进行修复。
1. 传递属性给jQuery
1.4之前的版本中jQuery就通过"attr”方法支持了添加属性到元素集合中，"attr”方法不仅可以传递属性名和值，也可以传递包含有多个属性的对象集合。在1.4中，除了可以创建新的对象，现在它更能将属性对象作为参数传递给jQuery函数或对象自身。如你可以创建一个含有多个属性的链接元素，通过1.4代码如下：

jQuery('<a></a>', {
id: 'gid',
href: 'http://www.google.com',
title: 'google非和谐版',
rel: 'external',
text: '进入<SPAN class=t_tag onclick=tagshow(event) href="tag.php?name=Google" mce_href="tag.php?name=Google">Google</SPAN>!'
});

你可能会注意到"text”属性并且猜测它是干吗的，因为a标签是没有"text”属性的。呵呵，当你传递某些属性时，jquery 1.4同样会检查并使用它自己的方法。因此上面的"text”属性可以让jQuery调用它的".text()”方法并将"进入Google!“作为它的唯一参数。

这里给出一个更好的例子：

jQuery('<div/>', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo被点击过!');
}
});

"id”属性是作为一个普通属性被添加的。但"css”和"click”属性则对应特定的jQuery方法。上面的代码在1.4之前一种写法如下：

jQuery('<div/>')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo被点击过!');
});

更多关于jQuery特性

2. 所有的东西都可以"until“了
1.4新增了三个对DOM操作的方法，他们分别是"nextUntil", "prevUntil" 和 "parentsUntil"。这些方法会按照某个顺序去遍历DOM对象直到满足指定的筛选条件。假设我们有一个水果列表：

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>

如果你想选择所有在"Apple”和"Strawberry”之间的元素。代码可以这样写：

jQuery('ul li:contains(苹果)').nextUntil(':contains(梨子)');   // 得到 香蕉，葡萄，草莓

更多关于: prevUntil, nextUntil, parentsUntil

3. 绑定多个事件
与通过jquery链绑定多个方法到一起相比，现在你可以通过一次调用来绑定所有这些事件，如：

jQuery('#foo).bind({
click: function() {
// 具体代码
},
mouseover: function() {
// 具体代码
},
mouseout: function() {
// 具体代码
}
})

你也可以通过 ".one()"方法操作。
更多关于.bind(…)

4. Per-Property Easing
与给一个动画仅仅定义一个缓动效果相比，现在你可以给你想要添加动画效果的属性定义不同的缓动函数了。jQuery包含两个缓动函数，旋转(默认)和线性移动。如果你需要其他的效果的话，你需要去单独下载它们 !

要给每个属性指定一个缓动函数的话，你可以简单的通过属性数组来达到目的，在数组中，第一个值是你想要实现的效果值，第二个参数则是使用的缓动函数，如：

jQuery('#foo').animate({
left: 500,
top: [500, 'easeOutBounce']
}, 2000);

如果你想给其他不是默认的"fx”的队列也添加停顿的话，这时候，你需要将队列名作为第二个参数传递给".delay()"。

更多关于.delay(…)

8. 检查元素是否拥有某对象
通过".has()”方法，jQuery 1.4使得检查一个元素(或者集合)是不是有某对象变得相当简单。从程序角度看，它和jQuery的selector过滤器":has()”是一样的。该方法会返回在当前集合中所有包含有至少一个符合条件的元素数组。

jQuery('div').has('ul');

上面方法会返回所有包含有UL元素的DIV元素数组。在这种情况下，你可能会更倾向于简单使用选择器的过滤器(":has()"), 但当你需要通过代码过滤一个数组的时候，该方法仍会很有用。

1.4同样在jQuery命名空间下添加了新的"contains"函数。这是一个低级的函数，它接受两个DOM节点作为参数。它会返回一个布尔值来表示后面一个元素是否在前面一个元素中存在。如：

jQuery.contains(document.documentElement, document.body);
// 返回true - <body>在<html>存在

更多关于: .has(…) , jQuery.contains(…)
9. 去掉元素的包装
".warp()”已经在jQuery中有段日子了，现在跟它对应的".unwrap()”方法也被加进到1.4中了。这个方法刚好跟warp()方法相反。假设有下面的DOM结构:

<div>
<p>Foo</p>
</div>

我们可以用下面的函数去掉段落元素的外层：

jQuery('p').unwrap();

最终的DOM结构如下：

<p>Foo</p>

注意，这个方法处理比较简单，它会移掉任何元素的父节点。
更多关于 .unwrap(…)

10. detach() vs remove()
新的".detach()”方法允许你从DOM中移掉元素，这跟".remove()”很像。但与".remove()”有本质不同的是"detach()”不会将jQuery赋给该元素的数据也给注销掉。这包含通过".data()”和其他任意的通过jQuery的事件系统添加的事件等数据。

var foo = jQuery('#foo');
// 绑定一个重要的事件
foo.click(function(){
alert('Foo!');
});
foo.detach();
// 从 DOM中移除事件
// … 其他操作
foo.appendTo('body');
// 将元素重新加入到 DOMfoo.click();
// 弹出 "Foo!"

更多 .detach(…)

11. index(…) 加强
jQuery 1.4中我们有两种使用".index()”方法的方式。首先，你可以仅仅将一个元素自身作为参数，这样你可以得到该元素在当前集合中所处的索引位置值。
如果不设置参数的话，现在会返回该元素的兄弟节点。因此，假设有下面的DOM结构：

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>草莓</li>
<li>例子</li>
<li>桃子</li>
</ul>

当一个节点被点击的时候，你如果想找到在所有的节点集合中被单击的节点的位置，你可以这样写：

jQuery('li').click(function(){
alert( jQuery(this).index() );
});

jQuery 1.4还允许你指定一个选择器作为".index()”的第一个参数，这样它会返回该元素在选择器中产生的元素集合中的位置。

最后需要注意的是，如果该元素在集合中存在的话，该函数会返回一个其位置的整数，如果不存在，则返回-1。

更多关于 .index(…)

12. DOM 操作的方法支持回调函数
大部分对DOM进行操作的函数现在都支持传递函数作为唯一参数了(如果是".css()”和".attr()”的情况的话，它会作为第二参数)。该函数会在集合中的每个元素上都执行一次，从而确定哪些应作为该函数的实际值提供给回调函数调用。

下面给出所有支持该功能的函数列表:
after
before
append
prepend
addClass
toggleClass
removeClass
wrap
wrapAll
wrapInner
val
text
replaceWith
css
attr
html

通过回调函数，你可以通过"this”访问数组中的当前元素，还可以通过第一个参数得到它在数组中的位置。

jQuery('li').html(function(i){
return '该列表中的索引位置: ' + i;
});

同样，你也可以通过上面的某些方法得到另外一个参数，如果你调用一个setter方法(如".html()”或".attr(‘href’)")你就可以直接访问当前的值了。如：

jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
});

正如上面看到的，在使用".css()" 和 ".attr()" 方法时，因为第一个参数需要被用作指定那些你需要设置或改变的属性名，你需要将回调函数作为第二参数。

jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});

13. 对象类型判断
jQuery 1.4添加了两个新的方法(直接放到了jQuery命名空间下面)以方便我们来判断当前处理的对象的类型。

首先是方法"isEmptyObject”，顾名思义，这个函数会返回一个布尔值来表明传递的对象是不是空对象(缺乏属性--无论是对象自身还是继续的对象)。其次是方法"isPlainObject”，它会返回一个布尔值来表明操作的对象是否是一个简单的js对象(指通过"{ }"或者"new Object”创建的对象)。

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false
jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

更多关于: isPlainObject(…), isEmptyObject(…)

14. Closest(…) 增强
jQuery的".closest()”方法现在可以接受一组选择器了。如果开发人员想遍历一个元素的祖先，并在其中查找离其最近的那些符合某些特征的节点的时候，这会很有用。
另外，该函数现在也接受将上下文作为第二参数了。这意味着你现在可以控制你想在DOM中遍历的元素范围了。虽然这两种情况我们一般很少用到，不过它们在jQuery内部被很好的使用。

更多关于 .closest(…)

15. 新的事件! focusIn 和focusOut
上文已经提到，为了委托"focus”和"blur”事件你需要这些新的事件，它们是"focusin”和"focusout”。这些新的事件将允许你在一个元素或其子元素获取焦点的时候进行相应操作。

jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
});
.focusout(function(){
jQuery(this).removeClass('focused');
});

同时应该注意的是这两个事件都不是按冒泡顺序传递，它们将按捕获顺序触发。这意味着最外层的(也即祖先)元素会在实际节点事件触发前被触发。
更多关于 focusIn 和 focusOut 事件。

大家开始玩转jQuery 1.4吧。它是目前jQuery发布的一个最有前瞻性，最多特性支持和表现最好的一个版本！
好了，本文就到这里了。我已经开始准备跟随这个改变了，我相信这些改变同样会让你印象深刻的！
如果你还没准备好，你可以看看 "jQuery14天", 一个专门为jQuery 1.4为做的在线站点，对了，另外还是为了庆祝jQeury的四岁生日！
最后不要忘了去阅读 API 文档 !
如果你想从DOM中移除某个元素，但你又可能需要在后面的某个时候把该元素重新添加到DOM中的时候这个函数将会很有用，这时候该元素的事件和其他的数据都会被保留下来。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航