jQuery1.4发布: 你必须知道的15个新特性(转)

1. 传递属性给jQuery(…)构造器

早在1.4版本之前，jQuery就支持通过有用的”attr“方法为元素集合添加属性，参数可以传递属性的名-值对或者是一个指定了多个属性的对象。jQuery1.4则支持元素创建的时候传递一个属性对象作为jQuery构造器的第二个参数。

举例来说，如果你要用jQuery1.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”属性——可能你正怀疑它在这里出现是干啥的，毕竟超链接这玩意没有”text”属性！好吧，jQuery1.4其实统一了它自身的一些方法接受某些属性的行为。上面指定的”text”属性将会引起jQuery调用”.text()”方法，传递”Go to Google!”作为它的参数。

一个现实中更好点的例子：

01
jQuery('<div/>', { 

02
    id: 'foo', 

03
    css: { 

04
        fontWeight: 700, 

05
        color: 'green'

06
    }, 

07
    click: function(){ 

08
        alert('Foo has been clicked!'); 

09
    } 

10
});

“id”被作为一个普通的属性添加，而”css”和”click”属性则触发了相应方法的调用。上面的代码在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. 所有的”until”方法!

在1.4中DOM遍历兵工厂里加入了3个新的方法， ”nextUntil“, “prevUntil“和 “parentsUntil“。这3个方法都是朝着某个方向遍历DOM直到指定的选择器条件满足。假定你有如下的水果列表：

1
<ul> 

2
    <li>Apple</li> 

3
    <li>Banana</li> 

4
    <li>Grape</li> 

5
  
6
    <li>Strawberry</li> 

7
    <li>Pear</li> 

8
    <li>Peach</li> 

9
</ul>

如果你要选择”Apple”后面的直到”Strawberry”为止的所有列表元素，可以用如下简单的代码即可实现：

`1`	`jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');`

`2`	`// Selects Banana, Grape, Strawberry`

更多请参考文档：prevUntil, nextUntil, parentsUntil

3. 绑定多个事件处理器

除了将多个事件绑定代码链式的写在一起之外，你还可以在一个bind方法里写多个事件绑定代码如下：

01
jQuery('#foo).bind({ 

02
    click: function() { 

03
        // do something 

04
    }, 

05
    mouseover: function() { 

06
        // do something 

07
    }, 

08
    mouseout: function() { 

09
        // do something 

10
    } 

11
})

这种写法对于.one()方法同样有效

更多请参考文档：.bind(…)

4. 按照每个属性的擦除（Easing）效果

以前你只能为单个动画指定其擦除效果，现在你能为当前定义动画效果的每个属性来指定擦除效果。jQuery包含了两个擦除效果”linear” 和”swing”（默认）.其他的效果你需要单独下载。

要为每个属性指定擦除效果，只要把目标属性定义为数组即可，数组的第一个值是你要的动画效果设置的属性值，第二个值是擦除效果函数使用的值：

1
jQuery('#foo').animate({ 

2
    left: 500, 

3
    top: [500, 'easeOutBounce'] 

4
}, 2000);

看看这段代码的实际运行效果!

你还可以在可选参数options对象属性”specialEasing”里按照名-值对的形式定义每个属性的擦除效果：

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事件代理！

jQuery1.4增加了对”submit“, “change“, “focus” 和”blur“事件的代理支持。在jQuery中我们使用”.live()”方法来代理事件。当你需要对很多元素进行事件处理器注册的时候很有用，或者是当新的元素在将来被加入到DOM文档中我们却需要对其进行事件处理器绑定的情况下（使用”.live()”方法比进行重新绑定更高效）（译者注：更多关于jQuery事件代理请参考：Working with Events, Part 3: More Event Delegation with jQuery）

但是，要小心哪！你必须使用事件的名称，如果你要代理”focus”和”blur”，则必须用”focusin“和”focusout”

1
jQuery('input').live('focusin', function(){ 

2
    // do something with this 

3
});

6. 控制函数的上下文

jQuery1.4在其命名空间下提供了一个新的”proxy”函数。这个函数接受两个参数，一个”scope”加一个方法名，或者是一个函数加目标作用域。JavaScript的”this”关键字是非常难掌握的。有时候你希望它是你之前创建出来的对象而不是一个元素。

举个例子：我们有如下的一个”app”对象，它有两个属性，一个”clickHandler”方法和一个config对象：

1
var app = { 

2
    config: { 

3
        clickMessage: 'Hi!'

4
    }, 

5
    clickHandler: function() { 

6
        alert(this.config.clickMessage); 

7
    } 

8
};

“clickHanlder”方法在被这样调用时”app.clickHandler()”将有”app”对象作为其上下文，也就是说”this”关键字访问的就是”app”。如果我们只是做这样的简单调用，这个工作起来完全没有问题：

`1`	`app.clickHandler();` `// "Hi!" is alerted`

让我们来试试将其作为事件处理器来绑定到某个事件上:

`1`	`jQuery('a').bind('click', app.clickHandler);`

当我们点击超链接的时候，它看上去并没有工作（因为没有警告消息弹出来）。这是因为jQuery（以及大多数健全的事件模型）都默认的将事件处理器的上下文设置成了事件目标元素——即：使用”this”访问的其实是被点击的元素。但是我们并不想要这样的结果，我们希望”this”能够访问”app”对象。在jQuery1.4中实现这个再容易不过了:

1
jQuery('a').bind( 

2
    'click', 

3
    jQuery.proxy(app, 'clickHandler') 

4
);

现在不管什么时候点击超链接，总是会有”Hi!”这个警告消息。

这个proxy函数返回你的函数的一个包装过的版本，”this”被设置成你指定的值。proxy函数在其他上下文也是有用的，例如传递一个回调函数给其他的jQuery方法或者传递给插件。

更多请参考文档：jQuery.proxy

7. 延迟一个动画队列

你现在可以为你的动画队列设置一个延迟。事实上任何队列都能设置延迟，但是最通用的场景应该是”fx”队列。它允许你在动画之间暂停，而不用再使用回调函数和”setTimeout”写的乱七八糟的。”.delay()”的第一个参数是你要延迟的毫秒数。

1
jQuery('#foo') 

2
    .slideDown() // Slide down 

3
    .delay(200) // Do nothing for 200 ms 

4
    .fadeIn(); // Fade in

如果你要延迟默认的”fx”队列之外的队列，则需要传递队列的名称作为第二个参数。

更多请参考文档：.delay(…)

8. 检查是否一个元素包含某些元素

jQuery1.4是的检查一个元素或者一个集合是否”.has()”某些元素更加容易。程序上等同于jQuery选择过滤器”:has()”。这个方法将选择当前集合内的符合参数（选择器）的所有元素。

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

上面的这行代码将选择所有包含UL元素的所有DIV元素。这个情况下你用选择过滤器 (“:has()”)也够用了，但是这个方法在你需要用编程的方式过滤一个集合的时候是很有用的。

jQuery1.4 在jQuery名称空间下还提供了一个 “contains”函数。这是一个底层的函数，接受两个DOM节点作为参数，返回boolean值以指示第二个元素是否在第一个元素内。看下面的例子:

`1`	`jQuery.contains(document.documentElement, document.body);`

`2`	`// Returns true - <body> is within <html>`

更多请参考文档：.has(…), jQuery.contains(…)

9. 解除元素的包装

有”.wrap()”方法已经一段时间了，jQuery1.4新增了”.unwrap()”方法做的是和”wrap()”完全相反的事情。假定有如下的DOM结构:

1
<div> 

2
    <p>Foo</p> 

3
</div>

我们可以解除段落元素的包装：

`1`	`jQuery('p').unwrap();`

结果DOM结构如下:

`1`	`<p>Foo</p>`

本质上，这个方法简单的去除了任何元素的父元素

更多请参考文档：.unwrap(…)

10. 删除元素而不删除其数据

新的 ”.detach()“方法允许你从DOM文档中删除元素，和”.remove()”方法很像。关键的区别在于这个方法不会删除jQuery保存在这个元素上的数据。这些数据也包含使用”.data()”加上去的数据，也包含使用jQuery事件机制加上去的事件处理器。

这个适用于需要从DOM删除元素然后还要再加入DOM中的情况。被.detach的元素的事件监听器以及其他数据都会被保留。

01
var foo = jQuery('#foo'); 

02
  
03
// Bind an important event handler 

04
foo.click(function(){ 

05
    alert('Foo!'); 

06
}); 

07
  
08
foo.detach(); // Remove it from the DOM 

09
  
10
// … do stuff 

11
  
12
foo.appendTo('body'); // Add it back to the DOM 

13
  
14
foo.click(); // alerts "Foo!"

更多请参考文档：.detach(…)

11. index(…)的增强

jQuery1.4提供了两种新的方法使用”.index()”方法。之前，你只能传递一个元素作为它的参数，改方法返回一个数字只是当前集合中目标元素的位置。

如果不传参数，则返回当前元素在同辈元素中的位置。假定我们有下面的DOM结构：

1
<ul> 

2
    <li>Apple</li> 

3
    <li>Banana</li> 

4
    <li>Grape</li> 

5
  
6
    <li>Strawberry</li> 

7
    <li>Pear</li> 

8
    <li>Peach</li> 

9
</ul>

当一个列表选项被点击的时候你想要知道他在其他列表选项中的位置：

1
jQuery('li').click(function(){ 

2
    alert( jQuery(this).index() ); 

3
});

jQuery1.4还允许你指定一个选择器作为”.index()”方法的第一个参数，这么做将返回当前元素在选择器工作产生的结果集里的位置。

要注意的是这个方法返回整数值，如果选择器没有匹配的结果则返回-1

更多请参考文档：.index(…)

12. DOM操作方法接受回调函数作为参数

现在大多数的DOM操作方法都支持接受一个函数作为单个参数（或者第二个参数，如果是”.css()”和”.attr()”方法的话）。这个传递的函数将会为每个集合中的元素都运行一遍，函数的返回结果将作为DOM操作方法的值。

下面的方法都有接受回调函数作为参数的能力：

在这个回调函数里，你可以通过”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. 判断对象的类型

jQuery1.4增加了两个副主函数（在jQuery名称空间下）帮助你检测正在处理的对象类型。

首先，有个”isEmptyObject”，这个函数返回boolean值，指示传递的对象是否为空（没有属性-直接或者间接的）。其次，有个”isPlainObject”，这个函数返回boolean值，指示传递的对象是否是一个纯的JavaScript对象，即使用”{}”或者”new Object()”创建出来的对象。

1
jQuery.isEmptyObject({}); // true 

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

3
  
4
jQuery.isPlainObject({}); // true 

5
jQuery.isPlainObject(window); // false 

6
jQuery.isPlainObject(jQuery()); // false

更多请参考文档： isPlainObject(…), isEmptyObject(…)

14. closest()的增强

jQuery的”.closest()”方法现在能接受一组选择器作为参数。这个特性使得你在遍历一个元素祖先节点的时候，或者查找（多个）含有某些特定字符的最近元素的时候更有用。

除此之外，本方法还接受一个context作为其第二个参数，意思是你能控制遍历的深度。这两项增加适用的场景不是很多，但是jQuery内部使用这个方法来获得更好的性能。

更多请参考文档：.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
    });

你还应该注意到的一点是，这些事件是不传播的(冒泡),他们是捕获型事件。意思就是，最外层的元素首先触发该事件，然后才是”目标”元素。

更多请参考文档：focusIn 和 focusOut 事件

享受最受期望的，最具特色的，到目前为止性能最好的jQuery1.4吧！

好吧，差不多了。我已经把自己认为对你们有影响的新特性涵盖到了。

如果你还没有准备好，应该看看”14 days of jQuery“，一个很酷的为jQuery1.4发布以及jQuery4岁生日准备的在线活动。

posted on 2010-04-21 10:03 badsun 阅读(408) 评论(0) 编辑收藏举报