jQuery 1.4十大新特性解读及代码示例(1)(2)

时间:2013-03-06 14:58来源:未知作者:admin 点击: 次

分享到：

6、detach() vs remove() 新的.detach()方法允许你从DOM中移掉元素，这跟.remove()很像。但与.remove()有本质不同的是detach()不会将jQuery赋给该元素的数据也给注销掉。

6、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!"

7、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。

8、对象类型判断

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

9、Closest(…) 增强

jQuery的".closest()”方法现在可以接受一组选择器了。如果开发人员想遍历一个元素的祖先，并在其中查找离其最近的那些符合某些特征的节点的时候，这会很有用。

另外，该函数现在也接受将上下文作为第二参数了。这意味着你现在可以控制你想在DOM中遍历的元素范围了。虽然这两种情况我们一般很少用到，不过它们在jQuery内部被很好的使用。

10、新的事件focusIn和focusOut

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

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