您当时的方位:主页 > 言语编程 > jQuery

jQuery 1.4:15个新特性和优化增强

2014-10-28  

jQuery 1.4 。 超乎咱们的预期,这次并非简略的修修补补,1.4 包括了许多新特性、功用增强和功用提高!本文即向您介绍这些或许对你非常有用的新特性和优化增强。

你能够马上下载jQuery 1.4试用:

1. 传参给 jQuery(…)

之前,jQuery能够经过 办法设置元素的特点,既可传特点的名和值,也能够是包括几组特定 特点名值对 的 方针。在 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 的私有办法"" ,把元素里的文字设置为“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!');
});

2. 直到遇见你...

1.4的DOM遍历工具包里又增加了3个新办法: 。这些办法会依照特定的方向遍历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

具体了解: , ,

3. 绑定多个事情处理器

不再需求把各个事情绑定办法“链”在一起,现在你能够把它们捆成一堆,如下:

jQuery('#foo).bind({
click: function() {
// do something
},
mouseover: function() {
// do something
},
mouseout: function() {
// do something
}
})

这一用法也适用于 "".

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 谦善了,这一功用点是他想出来的哦!

5. 更新的 Live 事情!

jQuery 1.4 添加了对指使 submit change focusblur 事情的支撑。在jQuery中,咱们运用"" 办法指使事情。当你想要为多个元素注册事情处理器时,这会非常有用。并且就算满意挑选符的元素是新出现的,这些事情也会持续有用(运用 比不断重复绑定要省力省心得多)。

不过,留神了!注册 focus 和 blur 事情时你需求用 focusinfocusout 作为事情名。

jQuery('input').live('focusin', function(){
// do something with this
});

6. 操控函数上下文

jQuery 1.4 供给了一个全新的 函数,坐落 jQuery 命名空间下。这一函数承受两个参数,一个是“作用域”(scope)或许一个办法名,另一个是某函数或许方针作用域(the intended scope)。

众所周知, JavaScript的 this 关键字是一个很难掌握的东西。有时候你并不想它代表一个元素,而想让它代表你前面创立的某个方针。

例如,在这里咱们创立了一个 方针,它具有两个特点,一个是 办法,一个是担任参数装备的方针。

var app = {
config: {
clickMessage: 'Hi!'
},
clickHandler: function() {
alert(this.config.clickMessage);
}
};

这个 办法,当像 这样调用时, 便是其上下文,也便是说 关键字指向的是 。假如只需简略地调用,这样的写法没什么问题:

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!”了。

署理函数把你的函数包裹一圈,一起把函数内的 设定为你想要东西。在其他上下文运用场景,如把回调函数传给其他 jQuery 办法或插件,署理函数也能派上用场。

了解更多

7.  动画行列推迟

现在,能够给动画行列加一个推迟了。尽管这个功用能够在任何行列里完成,但最常用的或许仍是推迟“fx 行列”("fx" queue,jQuery默许的动画行列)。它能让你在两个动画行为之间暂停一下,而不必牵扯到回调函数和 之类的东西。 的第一个参数即你需求设定的推迟毫秒数:

jQuery('#foo')
.slideDown() // Slide down
.delay(200) // Do nothing for 200 ms
.fadeIn(); // Fade in

假如你想推迟一个除 fx 以外的行列,把行列名作为第二个参数传给

具体了解

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

jQuery 1.4 让检测一个元素(或调集)是否含有()某项东西更为简略。其背面的机理和挑选过滤器 是相同的。这个办法会从当时调会集选出满意恣意指定条件之一的元素。

jQuery('div').has('ul');

这条句子在一切DIV元素中挑出那些包括UL元素的。这种状况或许用挑选过滤器 就好了,但当你要更程式化地过滤挑选集时 办法就非常有用了。

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

jQuery.contains(document.documentElement, document.body);
// 回来true - <body> 的确包括在 <html> 中

音讯了解: ,

9. 给元素剥皮!

很早曾经,jQuery 就能够用 给元素裹一层皮。现在, jQuery 1.4 添加了 办法,用以剥皮。看下面的DOM结构:

<div>
<p>Foo</p>
</div>

来把 p 元素外面的一层皮(div)剥掉:

jQuery('p').unwrap();

DOM 变成了:

<p>Foo</p>

总而言之,这个办法能够把恣意元素的父元素移除。.

具体了解

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

曾经有一个办法,是把元素剥离后扔掉。全新的 办法能够让你把一个元素从DOM中剥离,而不丢掉数据。包括该元素的 jQuery 方针会在操作完成后还保存这个元素。数据能够经过   或许 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!"

具体了解

11. index(…) 的功用增强

jQuery 1.4 为您运用 供给了两种新办法。曾经,你有必要把元素作为参数传给它,然后获得一个回来的数值,代表在当时调会集这个元素的索引。现在,假如不传参数曩昔,回来的值就代表某元素在其同辈中排行老几。比如说下面的DOM:

<ul>
<li>Apple</li>

<li>Banana</li>
<li>Grape</li>

<li>Strawberry</li>
<li>Pear</li>

<li>Peach</li>
</ul>

你想要知道点击一个条目后它是列表中的第几个,完成的代码非常简略:

jQuery('li').click(function(){
alert( jQuery(this).index() );
});

jQuery 1.4 也答应你将挑选符作为  的第一个参数。这样做会回来当时元素在你指定的挑选符所匹配出的元素调会集的索引值。

还得提示一点,这一办法回来的是数值,假如文档中无法找到指定条件的元素,会回来数值 -1 。

具体了解 

12. DOM 操作可接回收调函数

现在,大部分的DOM操作办法都支撑了将 函数 作为单一参数传入(传入为第二个参数)。这个函数会为挑选会集的每一个元素都跑一遍,从而为相应操作办法供给更“有特性”的值。

下列办法支撑这一功用:

有了回调函数,你就能在挑选会集运用 关键字来访问当时元素,用回调函数的第一个参数来访问其索引值。

jQuery('li').html(function(i){
return 'Index of this list item: ' + i;
});

还有还有,上面的某些办法还供给第二个参数供你运用。假如你调用的是一个设定型办法(如 ),你还能获得当时值。例如:

jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
});

如您所见,关于办法来说,之所以要把函数作为第二个参数传递,是由于第一个参数要用来指定咱们需求修正的是哪一个特点:

jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});

13. 断定方针类型

jQuery 1.4 新增了两个全新的辅佐函数(都直接坐落 jQuery 命名空间下),能够协助你判别你正在操作的是何种方针。

第一个函数是 , ,它回来一个布尔值,断定方针是否为空()。第二个是 ,它回来的布尔值代表传递曩昔的参数是否为JavaScript的简略方针(plain object),也便是用 {} 或 new Object()创立的方针。

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

了解更多: ,

14. Closest(…) 的功用增强

jQuery的 办法现在能够承受一组挑选符作为参数。当你需求遍历某一元素的一切上级,找到一个以上契合特定特征的最近元素时,此功用就能派上用场。

并且,现在它还能承受上下文环境作为第二个参数,也便是说你能够操控DOM遍历的深度或许说远度。尽管说咱们或许很少会用到这两个新特性,但一旦用上作用是惊人的!

了解更多

15. 新事情! focusIn 与 focusOut

如前所述,现在布置 focus 和 blur 事情时,你需求运用 focusin 和 focusout 这两个新事情。这两个事情协助你在特定元素或许该元素的子元素 获取/失掉 焦点时采纳举动。

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

值得阐明的是,这两个事情不会传达开来(即所谓的“冒泡”),它们会被捕获住。也便是说,外部元素(父辈)会在作孽的“方针”元素(causal "target" element)之前被触发。

了解更多关于 事情的内容。

爱上 jQuery 1.4 吧!史上考虑最周到,功用最丰厚,功用最好的 jQuery !

便是这样... 我现已介绍完我觉得对你最有影响的一些新特性了。

假如你还不知道,那就赶快去看看 “”活动,为庆祝 jQuery 1.4 的发布和 jQuery 四岁生日而举行的超赞的线上活动。秀出你用 jQuery 写的得意之作,赢得 MediaTemple 一年的主机运用权!

别的,别放了看看全新的

原文作者:

原文地址:

转载需保存出处。