收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 11753|回复: 27

[译]jQuery 1.4 发布:15个新特性实例精讲

[复制链接]
发表于 2010-1-16 21:36:13 | 显示全部楼层 |阅读模式
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中,一切如此简单:

  1. jQuery('<a/>', {
  2.     id: 'foo',
  3.     href: 'http://google.com',
  4.     title: 'Become a Googler',
  5.     rel: 'external',
  6.     text: 'Go to Google!'
  7. });
复制代码


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

针对这一用法,下面是更有用的实例:

  1. jQuery('<div/>', {
  2.     id: 'foo',
  3.     css: {
  4.         fontWeight: 700,
  5.         color: 'green'
  6.     },
  7.     click: function(){
  8.         alert('Foo has been clicked!');
  9.     }
  10. });
复制代码


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

  1. jQuery('<div/>')
  2.     .attr('id', 'foo')
  3.     .css({
  4.         fontWeight: 700,
  5.         color: 'green'
  6.     })
  7.     .click(function(){
  8.         alert('Foo has been clicked!');
  9.     });
复制代码


详细了解 jQuery(…)

2. 直到遇见你...

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

  1. <ul>
  2.     <li>Apple</li>

  3.     <li>Banana</li>
  4.     <li>Grape</li>

  5.     <li>Strawberry</li>
  6.     <li>Pear</li>

  7.     <li>Peach</li>
  8. </ul>
复制代码


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

  1. jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
  2. // 选出的是 Banana, Grape, Strawberry
复制代码


详细了解: prevUntil, nextUntil, parentsUntil

3. 绑定多个事件处理器

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

  1. jQuery('#foo).bind({
  2.     click: function() {
  3.         // do something
  4.     },
  5.     mouseover: function() {
  6.         // do something
  7.     },
  8.     mouseout: function() {
  9.         // do something
  10.     }
  11. })
复制代码


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

详细了解 .bind(…)

4. 依属性指定缓动效果

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

  1. jQuery('#foo').animate({
  2.     left: 500,
  3.     top: [500, 'easeOutBounce']
  4. }, 2000);
复制代码


点此查看实际效果

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

  1. jQuery('#foo').animate({
  2.     left: 500,
  3.     top: 500
  4. }, {
  5.     duration: 2000,
  6.     specialEasing: {
  7.         top: 'easeOutBounce'
  8.     }
  9. });
复制代码


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

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

5. 更新的 Live 事件!

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

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

  1. jQuery('input').live('focusin', function(){
  2.     // do something with this
  3. });
复制代码


6. 控制函数上下文

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

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

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

  1. var app = {
  2.     config: {
  3.         clickMessage: 'Hi!'
  4.     },
  5.     clickHandler: function() {
  6.         alert(this.config.clickMessage);
  7.     }
  8. };
复制代码


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

  1. app.clickHandler(); // "Hi!" is alerted
复制代码


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

  1. jQuery('a').bind('click', app.clickHandler);
复制代码


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

  1. jQuery('a').bind(
  2.     'click',
  3.     jQuery.proxy(app, 'clickHandler')
  4. );
复制代码


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

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

了解更多  jQuery.proxy

7.  动画队列延迟

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

  1. jQuery('#foo')
  2.     .slideDown() // Slide down
  3.     .delay(200) // Do nothing for 200 ms
  4.     .fadeIn(); // Fade in
复制代码


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

详细了解  .delay(…)

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

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

  1. jQuery('div').has('ul');
复制代码


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

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

  1. jQuery.contains(document.documentElement, document.body);
  2. // 返回true - <body> 确实包含在 <html> 中
复制代码


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

9. 给元素剥皮!

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

  1. <div>
  2.     <p>Foo</p>
  3. </div>
复制代码


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

  1. jQuery('p').unwrap();
复制代码


DOM 变成了:

  1. <p>Foo</p>
复制代码


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

详细了解  .unwrap(…)

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

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

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

  1. var foo = jQuery('#foo');

  2. // 绑定一个重要的事件处理器
  3. foo.click(function(){
  4.     alert('Foo!');
  5. });

  6. foo.detach(); // 从DOM中移除
  7. // … do stuff

  8. foo.appendTo('body'); // 重新加入到DOM

  9. foo.click(); // 弹出alert信息: "Foo!"
复制代码


详细了解  .detach(…)

11. index(…) 的功能增强

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

  1. <ul>
  2.     <li>Apple</li>

  3.     <li>Banana</li>
  4.     <li>Grape</li>

  5.     <li>Strawberry</li>
  6.     <li>Pear</li>

  7.     <li>Peach</li>
  8. </ul>
复制代码


你想要晓得点击一个条目后它是列表中的第几个,实现的代码十分简单:

  1. jQuery('li').click(function(){
  2.     alert( jQuery(this).index() );
  3. });
复制代码


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  关键字来访问当前元素,用回调函数的第一个参数来访问其索引值。

      1. jQuery('li').html(function(i){
      2.     return 'Index of this list item: ' + i;
      3. });
      复制代码


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

      1. jQuery('a').attr('href', function(i, currentHref){
      2.     return currentHref + '?foo=bar';
      3. });
      复制代码


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

      1. jQuery('li').css('color', function(i, currentCssColor){
      2.     return i % 2 ? 'red' : 'blue';
      3. });
      复制代码


      13. 判定对象类型

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

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

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

      3. jQuery.isPlainObject({}); // true
      4. jQuery.isPlainObject(window); // false
      5. jQuery.isPlainObject(jQuery()); // false
      复制代码


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

      14. Closest(…) 的功能增强

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

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

      了解更多  .closest(…)

      15. 新事件! focusIn 与 focusOut

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

      1. jQuery('form')
      2.     .focusin(function(){
      3.         jQuery(this).addClass('focused');
      4.     });
      5.     .focusout(function(){
      6.         jQuery(this).removeClass('focused');
      7.     });
      复制代码


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

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

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

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

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

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


      [[i] 本帖最后由 jyyjch 于 2010-1-18 19:53 编辑 ]
 楼主| 发表于 2010-1-16 21:50:31 | 显示全部楼层
额。。 重复发帖了,麻烦斑竹删一下
回复 支持 反对

使用道具 举报

发表于 2010-1-17 04:20:54 | 显示全部楼层
Mark一下,感谢LZ翻译。
回复 支持 反对

使用道具 举报

发表于 2010-1-17 09:01:04 | 显示全部楼层
不错错。。挺期待1.4 哎 css3 还很远
回复 支持 反对

使用道具 举报

发表于 2010-1-18 09:40:15 | 显示全部楼层
IE6一天不倒 发挥空间就一天限制
回复 支持 反对

使用道具 举报

发表于 2010-1-18 09:40:22 | 显示全部楼层
太强大了,俺要换JS框架了。
回复 支持 反对

使用道具 举报

发表于 2010-1-18 10:27:42 | 显示全部楼层
非常感谢楼主分享.
回复 支持 反对

使用道具 举报

发表于 2010-1-18 15:59:58 | 显示全部楼层
感谢楼主分享,辛苦了
回复 支持 反对

使用道具 举报

发表于 2010-1-18 18:47:36 | 显示全部楼层
这个不错!
正好需要呢!
回复 支持 反对

使用道具 举报

发表于 2010-1-23 03:03:38 | 显示全部楼层
这个很不错,收藏了。
回复 支持 反对

使用道具 举报

发表于 2010-1-23 11:43:16 | 显示全部楼层
和强大的说,现在可以帮我们省更多事来做更多的事
回复 支持 反对

使用道具 举报

发表于 2010-1-23 12:18:06 | 显示全部楼层
强大,。。。。

今天才知道jquery的力量,,想学,。从什么地方入手啊。 js会点。
回复 支持 反对

使用道具 举报

发表于 2010-1-26 15:08:03 | 显示全部楼层
相关书籍看了不少,一直没能在项目中使用,有些可惜,不过私下里研究研究,感谢楼主
回复 支持 反对

使用道具 举报

发表于 2010-1-26 17:12:10 | 显示全部楼层
没看到 有关具体性能的描述啊
回复 支持 反对

使用道具 举报

发表于 2010-1-26 18:15:27 | 显示全部楼层
学习了
jq越来越彪悍了!~
回复 支持 反对

使用道具 举报

发表于 2010-1-27 11:39:28 | 显示全部楼层
偶看帖很少有回帖的激情,。。
这个帖是第一次。。。
回复 支持 反对

使用道具 举报

发表于 2010-1-27 11:42:03 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

发表于 2010-3-1 10:53:26 | 显示全部楼层
不错,值得学习!!
回复 支持 反对

使用道具 举报

发表于 2010-3-2 15:39:17 | 显示全部楼层

瞧瞧

看不懂什么意思
回复 支持 反对

使用道具 举报

发表于 2010-3-7 17:42:43 | 显示全部楼层
不要向大而全发展啊,要预留接口,维护好核心就可以了
回复 支持 反对

使用道具 举报

发表于 2010-3-7 18:54:01 | 显示全部楼层
jquery很好很强大,有机会好好学学
回复 支持 反对

使用道具 举报

发表于 2010-3-8 10:07:31 | 显示全部楼层
想学jquery在哪里学习最好啊?
回复 支持 反对

使用道具 举报

发表于 2010-3-8 14:29:54 | 显示全部楼层
非常不错的东西···················
回复 支持 反对

使用道具 举报

发表于 2010-5-16 19:22:04 | 显示全部楼层
恩~~~真的是很好啊~~~~~~很多东西以前都没有注意过~~~~~~这样能把write less做的更好啊
回复 支持 反对

使用道具 举报

发表于 2010-5-16 23:22:40 | 显示全部楼层
传参不支持<v:line />
回复 支持 反对

使用道具 举报

发表于 2010-5-17 02:46:04 | 显示全部楼层
1.4用过了,不知道是怎么回事,很多地方会无法使用。
回复 支持 反对

使用道具 举报

发表于 2010-6-12 20:41:33 | 显示全部楼层
jQuery用起来太方便了,1.4的教程O(∩_∩)O哈哈~太好了。最近我正好想要学习新的版本
回复 支持 反对

使用道具 举报

发表于 2010-8-6 09:43:42 | 显示全部楼层
不错~~~~~~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-5 09:45 , Processed in 0.093516 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表