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

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, prevUntilparentsUntil。这些方法会按照特定的方向遍历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 focusblur 事件的支持。在jQuery中,我们利用".live()" 方法指派事件。当你想要为多个元素注册事件处理器时,这会非常有用。而且就算满足选择符的元素是新出现的,这些事件也会继续有效(使用 .live() 比不断重复绑定要省力省心得多)。

不过,当心了!注册 focus 和 blur 事件时你需要用 focusinfocusout 作为事件名。

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

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:

<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 也允许你将选择符作为 .index() 的第一个参数。这样做会返回当前元素在你指定的选择符所匹配出的元素集合中的索引值。

还得提醒一点,这一方法返回的是数值,如果文档中无法找到指定条件的元素,会返回数值 -1 。

详细了解 .index(…)

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

现在,大部分的DOM操纵方法都支持了将 函数 作为单一参数传入(.css().attr() 传入为第二个参数)。这个函数会为选择集中的每一个元素都跑一遍,从而为相应操纵方法提供更“有个性”的值。

下列方法支持这一功能:

  • after
  • before
  • append
  • prepend
  • addClass
  • toggleClass
  • removeClass
  • wrap
  • wrapAll
  • wrapInner
  • val
  • text
  • replaceWith
  • css
  • attr
  • html

有了回调函数,你就能在选择集中利用 this 关键字来访问当前元素,用回调函数的第一个参数来访问其索引值。

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

还有还有,上面的某些方法还提供第二个参数供你利用。如果你调用的是一个设定型方法(如.html().attr('href...) ),你还能取得当前值。例如:

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

如您所见,对于.css().attr() 方法来说,之所以要把函数作为第二个参数传递,是因为第一个参数要用来指定我们需要修改的是哪一个属性:

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

13. 判定对象类型

jQuery 1.4 新增了两个全新的辅助函数(都直接位于 jQuery 命名空间下),可以帮助你判别你正在操纵的是何种对象。

第一个函数是 isEmptyObject, ,它返回一个布尔值,判定对象是否为空()。第二个是 isPlainObject ,它返回的布尔值代表传递过去的参数是否为JavaScript的简单对象(plain object),也就是用 {} 或 new Object()创建的对象。

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

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

了解更多: isPlainObject(…), isEmptyObject(…)

14. Closest(…) 的功能增强

jQuery的.closest() 方法现在可以接受一组选择符作为参数。当你需要遍历某一元素的所有上级,找到一个以上符合特定特征的最近元素时,此功能就能派上用场。

而且,现在它还能接受上下文环境作为第二个参数,也就是说你可以控制DOM遍历的深度或者说远度。虽然说大家可能很少会用到这两个新特性,但一旦用上效果是惊人的!

了解更多 .closest(…)

15. 新事件! focusIn 与 focusOut

如前所述,现在部署 focus 和 blur 事件时,你需要使用 focusin 和 focusout 这两个新事件。这两个事件帮助你在特定元素或者该元素的子元素 获取/失去 焦点时采取行动。

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

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

了解更多关于 focusInfocusOut 事件的内容。

爱上 jQuery 1.4 吧!史上考虑最周到,功能最丰富,性能最好的 jQuery !

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

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

另外,别放了看看全新的 API 文档

原文作者:James Padolsey

原文地址:http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/

转载需保留出处。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 函数
, 方法
, 事件
, 元素
, 一个
, jquery延迟对象
, jquery1.4
, isEmptyObject
, jquery动画事件
, nextUntil
, jquery缓动
, jquery元素
prevUntil()
jquery官网、jquery api、jquery下载、jquery教程、jquery ajax,以便于您获取更多的相关知识。

时间: 2024-10-28 19:21:34

jQuery 1.4:15个新特性和优化增强的相关文章

Visual Studio 15 插件新特性

之前已经报道过,在Visual Studio 15中Microsoft优先要处理的问题就是缩减启动时间和编辑器安装包的大小,而这势必会改变插件的使用方式.正如Microsoft公司的Tim Sneath所说,为了支持这些新功能插件开发者需要做出一些改变. Microsoft在Visual Studio插件方面始终面临着一个困境:为了让插件既有用又功能强大,Microsoft将很多本来只能自己使用的Visual Studio API开放了出来.这样做的负面影响就是难以禁用具有不良行为.影响编辑器性

Spring4.1新特性——Spring MVC增强

Spring 4.1对Spring MVC部分做的增强是最多的,提供了一些视图解析器的mvc标签实现简化配置.提供了GroovyWebApplicationContext用于Groovy web集成.提供了Gson.protobuf的HttpMessageConverter.提供了对groovy-templates模板的支持.JSONP的支持.对Jackson的@JsonView的支持等.   1.GroovyWebApplicationContext  在Spring 4.1之前没有提供Web

jQuery 3.0十大新特性_jquery

jQuery 3.0在日前发布了最终的全新版本.从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终版. 通过jQuery 3.0的版本更新说明 ,我们看到了一个保持着向后兼容的更轻便,更快速的jQuery.在本文中,我们将介绍一些令人眼前一亮的jQuery 3.0全新特性. 开始前的说明 如果你想要下载jQuery 3.0进行亲自实验,可以通过 该页面 进行下载.另外, 升级指南 和 源代码 也值

jQuery 3.0十大新特性最终版发布_jquery

jQuery 3.0 最终版发布了.jQuery 3.0将是jQuery的未来.但如果你需要IE6-8支持,您可以继续使用最新版本1.12. jQuery 3.0在日前发布了最终的全新版本.从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终版www.lampbrother.net. 通过jQuery 3.0的版本更新说明,我们看到了一个保持着向后兼容的更轻便,更快速的jQuery.在本文中,我们将

jQuery 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 中,你可以把一个参数对象

Java SE 6 新特性: HTTP 增强

2006 年底,Sun 公司发布了 Java Standard Edition 6(Java SE 6)的最终正式版,代号 Mustang(野马).跟 Tiger(Java SE 5)相比,Mustang 在性能方面有了不错的提升.与 Tiger 在 API 库方面的大幅度加强相比,虽然 Mustang 在 API 库方面的新特性显得不太多,但是也提供了许多实用和方便的功能:在脚本,WebService,XML,编译器 API,数据库,JMX,网络和 Instrumentation 方面都有不错

WebSphere Enterprise Service Bus V7的新特性

简介 通过管理流动在不同服务之间的请求和响应,IBM WebSphere 企业服务总线(以下简称为 WebSphere ESB)可实现不同系统的集成.中介模块(mediation module)在 WebSphere Integration Developer 中创建,它封装要在 WebSphere ESB 运行时内部署的服务交互逻辑.在中介模块内,根据定义消息流逻辑的一个或多个中介原语,可以将消息增强.转换.记录和传送到不同的服务提供者.消息本身以一种称为服务消息对象(Service Mess

Oracle 11gR2新特性--延迟段创建(Deferred Segment Creation)

Oracle 11gR2新特性--延迟段创建(Deferred Segment Creation) 真题1. 什么是延迟段创建(Deferred Segment Creation)? 答案:在Oracle 11.2中,当创建一个空表或者空分区时,为了加快创建速度,Oracle并不会立即分配初始段和空间,实际的表段(Table Segement)被延迟到第一行数据插入时创建.延迟段创建特性通过DEFERRED_SEGMENT_CREATION参数控制,默认为TRUE,表示开启该功能.延迟段创建可以

jQuery 1.4 15个你应该知道的新特性(译)_jquery

首先现在你可以从这里下载最新的1.4的版本了: http://code.jquery.com/jquery-1.4.js 1. 传递属性给jQuery 1.4之前的版本中jQuery就通过"attr"方法支持了添加属性到元素集合中,"attr"方法不仅可以传递属性名和值,也可以传递包含有多个属性的对象集合.在1.4中,除了可以创建新的对象,现在它更能将属性对象作为参数传递给jQuery函数或对象自身.如你可以创建一个含有多个属性的链接元素,通过1.4代码如下: jQ