jQuery技术

jQuery 1.4 版本的十五个新特性

字号+ 作者:jamie 来源: 2014-11-16 22:49 我要评论( )

jQuery 1.4 最近发布了。 超乎大家的预期,这次并非简单的修修补补,1.4 包含了很多新特性、功能增强和性能提升!本文即向您介绍这些可能对你十分有用的新特性和优化增强。 你可以立

jQuery 1.4 最近发布了。 超乎大家的预期,这次并非简单的修修补补,1.4 包含了很多新特性、功能增强和性能提升!本文即向您介绍这些可能对你十分有用的新特性和优化增强。

你可以立刻下载jQuery 1.4试用: http://code.jquery.com/jquery-1.4.js

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)');


详细了解: 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   方法,一个是负责参数配置的对象。

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
g