jQuery 1.4实现15个新特性实例源码_Javascript教程(2)_H5之家

复制内容到剪贴板代码: var app = {
config: {
clickMessage: 'Hi!'
},
clickHandler: function() {
alert(this.config.clickMessage);
}
};

这个 clickHandler 方法，当像 app.clickHandler() 这样调用时， app 就是其上下文，也就是说 this 关键字指向的是 app 。如果只需简单地调用，这样的写法没什么问题：

复制内容到剪贴板代码: app.clickHandler(); // "Hi!" is alerted

不过如果把它当作一个事件处理器：

复制内容到剪贴板代码: jQuery('a').bind('click', app.clickHandler);

当我们点击这个锚记时，并没有达到预想的效果（没东西 alert 出来）。这是因为 jQuery （以及大部分理智的事件模型），默认地，都会把处理器的上下文指定为目标元素本身。也就是说， this 所代表正是被点击的这个链接。而我们想的是， this 应该继续代表 app 。在jQuery 1.4中，实现这一目的十分简单：

复制内容到剪贴板代码: jQuery('a').bind(
'click',
jQuery.proxy(app, 'clickHandler')
);

现在点击所有锚记都会弹出“Hi!”了。

代理函数把你的函数包裹一圈，同时把函数内的  this  设定为你想要东西。在其他上下文应用场景，如把回调函数传给其他 jQuery 方法或插件，代理函数也能派上用场。

了解更多  jQuery.proxy

7.  动画队列延迟

现在，可以给动画队列加一个延迟了。虽然这个功能可以在任何队列里实现，但最常用的可能还是延迟“fx 队列”（"fx" queue，jQuery默认的动画队列）。它能让你在两个动画行为之间暂停一下，而不用牵扯到回调函数和  setTimeout  之类的东西。 .delay()  的第一个参数即你需要设定的延迟毫秒数：

复制内容到剪贴板代码: jQuery('#foo')
.slideDown() // Slide down
.delay(200) // Do nothing for 200 ms
.fadeIn(); // Fade in

如果你想延迟一个除 fx 以外的队列，把队列名作为第二个参数传给  .delay() 就可以了。

详细了解  .delay(…)

8. 检测元素是否含有特定内容

jQuery 1.4 让检测一个元素（或集合）是否含有（ .has() ）某项东西更为容易。其背后的机理和选择过滤器  :has() 是一样的。这个方法会从当前集合中选出满足任意指定条件之一的元素。

复制内容到剪贴板代码: jQuery('div').has('ul');

这条语句在所有DIV元素中挑出那些包含UL元素的。这种情况可能用选择过滤器 :has() 就好了，但当你要更程式化地过滤选择集时 .has() 方法就十分有用了。

jQuery 1.4 还在 jQuery 命名空间下新增了一个 contains 函数。这是一个比较底层的函数，接受两个 DOM 节点为参数。返回一个布尔值，指示第二个元素是否包含在第一个元素中。例如：

复制内容到剪贴板代码: jQuery.contains(document.documentElement, document.body);
// 返回true - <body> 确实包含在 <html> 中

消息了解： .has(…) , jQuery.contains(…)

9. 给元素剥皮！

很早以前，jQuery 就可以用 .wrap() 给元素裹一层皮。现在， jQuery 1.4 添加了 .unwrap() 方法，用以剥皮。看下面的DOM结构：

复制内容到剪贴板代码: <div>
<p>Foo</p>
</div>

来把 p 元素外面的一层皮（div）剥掉：

复制内容到剪贴板代码: jQuery('p').unwrap();

DOM 变成了：

复制内容到剪贴板代码: <p>Foo</p>

总而言之，这个方法可以把任意元素的父元素移除。.

详细了解 .unwrap(…)

10. 移除元素，而不删除数据

以前有一个 .remove() 方法，是把元素剥离后抛弃。全新的 .detach() 方法可以让你把一个元素从DOM中剥离，而不丢失数据。囊括该元素的 jQuery 对象会在操作完成后还保留这个元素。数据可以通过 .data() 或者 jQuery 事件系统中的任意事件处理器传入 jQuery 对象。

当你需要把某个元素从DOM中移除，然后在将来某个场景中重新引入时，这个函数会很有用。元素的事件句柄和其他所有数据都会被保留。

复制内容到剪贴板代码: var foo = jQuery('#foo');
// 绑定一个重要的事件处理器
foo.click(function(){
alert('Foo!');
});
foo.detach(); // 从DOM中移除
// … do stuff
foo.appendTo('body'); // 重新加入到DOM
foo.click(); // 弹出alert信息： "Foo!"

详细了解 .detach(…)

11. index(…) 的功能增强

jQuery 1.4 为您使用 .index() 提供了两种新方法。以前，你必须把元素作为参数传给它，然后获得一个返回的数值，代表在当前集合中这个元素的索引。现在，如果不传参数过去，返回的值就代表某元素在其同辈中排行老几。比方说下面的DOM：