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


首先现在你可以从这里下载最新的1.4的版本了: view source

print?
1 <p>Foo</p>

注意,这个方法处理比较简单,它会移掉任何元素的父节点。

更多关于 .unwrap(…)

10. detach() vs remove()

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

如果你想从DOM中移除某个元素,但你又可能需要在后面的某个时候把该元素重新添加到DOM中的时候这个函数将会很有用,这时候该元素的事件和其他的数据都会被保留下来。

var foo = jQuery('#foo');
// 绑定一个重要的事件
foo.click(function(){
alert(
'Foo!');
});
foo.detach();
// 从 DOM中移除事件
//
… 其他操作
foo.appendTo('body'); // 将元素重新加入到 DOM
foo.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()”的情况的话,它会作为第二参数)。该函数会在集合中的每个元素上都执行一次,从而确定哪些应作为该函数的实际值提供给回调函数调用。

下面给出所有支持该功能的函数列表:

通过回调函数,你可以通过"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');
});

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

更多关于 focusInfocusOut 事件。

大家开始玩转jQuery 1.4吧。它是目前jQuery发布的一个最有前瞻性,最多特性支持和表现最好的一个版本!

好了,本文就到这里了。我已经开始准备跟随这个改变了,我相信这些改变同样会让你印象深刻的!

如果你还没准备好,你可以看看 "jQuery14天", 一个专门为jQuery 1.4为做的在线站点,对了,另外还是为了庆祝jQeury的四岁生日!

最后不要忘了去阅读 API 文档 !


« 
» 
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3