NO.31 【转载】 [译]jQuery 1.4 发布：15个新特性实例精讲 - 00fairy00

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)');
// 选出的是 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 ， 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

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

posted on 2010-01-22 16:33 00fairy00 阅读(190) 评论(0) 编辑收藏举报

刷新页面返回顶部

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

代码:

引用: