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

教程网3月27日整理

1. 传参给 jQuery(…)

之前，jQuery可以通过 attr 方法设置元素的属性，既可传属性的名和值，也可以是包含几组特定属性名值对的对象。在 jQuery 1.4 中，你可以把一个参数对象作为第二个参数传给 jQuery 函数本身，同时创建HTML元素。

比方说你想要创建一个带有几个属性的锚记元素（<a></a>）。在1.4中，一切如此简单：

复制内容到剪贴板代码: jQuery('<a/>', {
id: 'foo',
href: 'http://google.com',
title: 'Become a Googler',
rel: 'external',
text: 'Go to Google!'
});

你大概也能猜到，这个锚记元素没有的 text 属性会调用 jQuery 的私有方法 .text() ，把元素里的文字设置为“Go to Google!”

针对这一用法，下面是更有用的实例：

复制内容到剪贴板代码: jQuery('<div/>', {
id: 'foo',
css: {
      fontWeight: 700,
      color: 'green'
},
click: function(){
      alert('Foo has been clicked!');
}
});

id 为一般属性，被直接加上了，而 css 和 click 则激发了相应的 jQuery 方法。在1.4以前，上面的代码需写成这个样子：

复制内容到剪贴板代码: jQuery('<div/>')
.attr('id', 'foo')
.css({
      fontWeight: 700,
      color: 'green'
})
.click(function(){
      alert('Foo has been clicked!');
});

详细了解 jQuery(…)

2. 直到遇见你...

1.4的DOM遍历工具包里又增加了3个新方法： nextUntil， prevUntil 和 parentsUntil 。这些方法会按照特定的方向遍历DOM，直到遇到满足指定选择符的元素为止。举例来说，现在我们有一张水果名的清单：

复制内容到剪贴板代码: <ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
<li>Peach</li>
</ul>

我们想挑选出所有在 Apple 后，Pear 前的所有条目。代码十分简单：

复制内容到剪贴板代码: jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// 选出的是 Banana, Grape, Strawberry

详细了解： prevUntil, nextUntil, parentsUntil

3. 绑定多个事件处理器

不再需要把各个事件绑定方法“链”在一起，现在你可以把它们捆成一堆，如下：

复制内容到剪贴板代码: jQuery('#foo).bind({
click: function() {
      // do something
},
mouseover: function() {
      // do something
},
mouseout: function() {
      // do something
}
})

这一用法也适用于 " .one() ".

详细了解 .bind(…)

4. 依属性指定缓动效果

以前只能为一个动画指定一种缓动效果（easing，即动画过程中的速度变化规律。jQuery 原生支持两种缓动效果，swing（默认）和linear 。要使用其他效果，你需要自己另行下载。），现在你可以为动画的各个属性参数指定不同的缓动效果：

复制内容到剪贴板代码: jQuery('#foo').animate({
left: 500,
top: [500, 'easeOutBounce']
}, 2000);

点此查看实际效果

你也可以在一个可选的动画选项对象中为 secialEasing 设置一系列名值对来完全上面的工作：

复制内容到剪贴板代码: jQuery('#foo').animate({
left: 500,
top: 500
}, {
duration: 2000,
specialEasing: {
top: 'easeOutBounce'
}
});

编辑注：我们的作者 James Padolsey 谦虚了，这一功能点是他想出来的哦！

详细了解有关 per-property-easing 的内容

5. 更新的 Live 事件！

jQuery 1.4 添加了对指派 submit ， change ， focus 和 blur 事件的支持。在jQuery中，我们利用" .live() " 方法指派事件。当你想要为多个元素注册事件处理器时，这会非常有用。而且就算满足选择符的元素是新出现的，这些事件也会继续有效（使用 .live() 比不断重复绑定要省力省心得多）。

不过，当心了！注册 focus 和 blur 事件时你需要用 focusin 和 focusout 作为事件名。

复制内容到剪贴板代码: jQuery('input').live('focusin', function(){
// do something with this
});

6. 控制函数上下文

jQuery 1.4 提供了一个全新的 proxy 函数，位于 jQuery 命名空间下。这一函数接受两个参数，一个是“作用域”（scope）或者一个方法名，另一个是某函数或者目标作用域（the intended scope）。

众所周知， JavaScript的 this 关键字是一个很难把握的东西。有时候你并不想它代表一个元素，而想让它代表你前面创建的某个对象。

例如，在这里我们创建了一个 app 对象，它拥有两个属性，一个是 clickHandler 方法，一个是负责参数配置的对象。