探索15个jQuery 1.4新功能：提升你的Web开发效率

jQuery 1.4 最近发布了。这并不像一些人猜测的那样只是一个维护版本；它是一个维护版本。 1.4 中包含许多新功能、增强功能和性能改进！这篇文章介绍了您可能会发现有益的新功能和增强功能。

您现在可以在这里下载 jQuery 1.4：http://code.jquery.com/jquery-1.4.js

1。将属性传递给 jQuery(...)

在 1.4 之前，jQuery 支持通过有用的“attr”方法向元素集合添加属性，该方法可以传递属性名称和值，也可以传递指定多个属性的对象。 jQuery 1.4 添加了在创建元素时将属性对象作为第二个参数传递给 jQuery 函数本身的支持。

假设您需要创建一个具有多个属性的锚元素。对于 1.4，它就像这样简单：

jQuery('<a/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
});

您可能已经注意到“text”属性 - 您可能想知道它在那里做什么，毕竟锚点没有“text”属性！嗯，当您传递某些属性时，jQuery 1.4 使用它自己的方法。因此，上面指定的“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”属性会触发对每个相应方法的调用。上面的代码，在 1.4 版本之前，应该这样写：

jQuery('<div/>')
    .attr('id', 'foo')
    .css({
        fontWeight: 700,
        color: 'green'
    })
    .click(function(){
        alert('Foo has been clicked!');
    });

了解有关 jQuery 的更多信息(...)

2。一切“直到”！

1.4 中的 DOM 遍历库中添加了三个新方法，“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”之后的所有项目，但您想在到达“Strawberry”后停止。简单得不能再简单了：

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// Selects 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。每个属性的宽松

您现在可以为要设置动画的每个属性定义不同的缓动函数，而不是仅为单个动画定义一个缓动函数。 jQuery 包含两个缓动函数：swing（默认）和 Linear。对于其他的，您需要单独下载它们！

要为每个属性指定缓动函数，只需将属性定义为数组，第一个值是您想要为该属性设置动画的值，第二个值是要使用的缓动函数：

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

查看此代码的实际效果！

您还可以在可选选项对象中将每个属性的缓动函数定义为“specialEasing”对象中的属性名称-值对：

jQuery('#foo').animate({
    left: 500,
    top: 500
}, {
    duration: 2000,
    specialEasing: {
        top: 'easeOutBounce'
    }
});

编者注 - 本文作者 James Padolsey 很谦虚。这个新功能是他的主意！

了解有关按属性缓动的更多信息

5。新的现场活动！

jQuery 1.4 添加了对委托“提交”、“更改”、“焦点”和“模糊”的支持强>”事件。在 jQuery 中，我们使用“.live()”方法来委托事件。当您必须在许多元素上注册事件处理程序，并且随着时间的推移可能会添加新元素时（使用“.live()”比不断重新绑定成本更低），这非常有用。

但是，要小心！如果您想委托“，则必须使用事件名称“focusin”和“focusout”焦点”和“模糊”事件！

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

6。控制函数的上下文

jQuery 1.4 在 jQuery 命名空间下提供了一个新的“proxy”函数。该函数接受两个参数，要么是“范围”和方法名称，要么是函数和预期范围。 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);

当我们单击锚点时，它似乎不起作用（没有任何警报）。这是因为 jQuery（以及大多数理智的事件模型）默认情况下会将处理程序的上下文设置为目标元素，也就是说，刚刚单击的元素将可以通过“this”访问。但我们不希望这样，我们希望将“this”设置为“app”。在 jQuery 1.4 中实现这一点再简单不过了：

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

现在，每当点击锚点时，“嗨！”将会收到警报！

代理函数返回函数的“包装”版本，并将“this”设置为您指定的任何内容。它在其他上下文中也很有用，例如将回调传递给其他 jQuery 方法或插件。

了解有关 jQuery.proxy

7。延迟动画队列

您现在可以向动画队列添加延迟。事实上，这适用于任何队列，但其最常见的用例可能是“fx”队列。这允许您在动画之间暂停，而不必混乱回调和调用“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()”是否有某些内容。这相当于 jQuery 的选择器过滤器“:has()”的编程方式。此方法将选择当前集合中至少包含一个符合传递选择器的元素的所有元素。

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

这将选择包含 UL 元素的所有 DIV 元素。在这种情况下，您可能只使用选择器过滤器（“:has()”），但是当您需要以编程方式过滤集合时，此方法仍然有用。

jQuery 1.4 还揭示了 jQuery 命名空间下的“contains”函数。这是一个接受两个 DOM 节点的低级函数。它将返回一个布尔值，指示第二个元素是否包含在第一个元素中。例如

jQuery.contains(document.documentElement, document.body);
// Returns true - <body> is within <html>

阅读更多内容：.has(...), jQuery.contains(...)

9。展开元素！

我们使用“.wrap()”方法已经有一段时间了。 jQuery 1.4 添加了“.unwrap()”方法，其作用完全相反。如果我们假设以下 DOM 结构：

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

我们可以像这样展开段落元素：

jQuery('p').unwrap();

生成的 DOM 结构将是：

<p>Foo</p>

本质上，此方法只是删除任何元素的父元素。

了解更多关于 .unwrap(…)

10。删除元素而不删除数据

新的“<strong>.detach()</strong>”方法允许您从 DOM 中删除元素，与“.remove()”方法非常相似。这种新方法的主要区别在于它不会破坏 jQuery 在该元素上保存的数据。这包括通过“.data()”添加的数据以及通过 jQuery 事件系统添加的任何事件处理程序。

当您需要从 DOM 中删除元素，但您知道稍后需要将其添加回来时，这会很有用。其事件处理程序和任何其他数据都将保留。

var foo = jQuery('#foo');

// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});

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

// … do stuff

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

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

了解有关 .detach(...)

11。索引（...）增强功能

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()”的情况下）。此函数将在集合中的每个元素上运行，以确定应用作该方法的实际值的内容。

以下方法具有此功能：

• 之后
• 之前
• 追加
• 前置
• 添加类
• 切换类
• 删除类
• 包裹
• 包裹所有
• 包裹内部
• 值
• 文本
• 替换为
• CSS
• 属性
• html

在回调函数中，您可以通过“this”访问集合中的当前元素，并通过第一个参数访问其索引。

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

此外，使用上述某些方法，您还将获得第二个参数。如果您调用 setter 方法（例如“.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 对象，即通过“{}”或“new Object()”创建的对象。< /p>

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

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

了解更多： isPlainObject(...), isEmptyObject(...)

14。最近的（...）增强功能

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');
    });

您还应该注意，这两个事件都不会传播（“冒泡”）；他们被俘虏了。这意味着最外层（祖先）元素将在因果“目标”元素之前被触发。

了解有关 focusIn 和 focusOut 事件的更多信息。

享受 jQuery 1.4，迄今为止最受期待、功能最丰富、性能最佳的 jQuery 版本！

嗯，就是这样！我已尽力涵盖我认为会对您产生影响的变化！

如果您还没有看过，您应该查看“jQuery 14 天”，这是一场精彩的在线活动，标志着 jQuery 1.4 的发布以及 jQuery 的四周年生日！

并且不要忘记查看新的 API 文档！

编写 Plus 教程

您知道吗，为我们编写 PLUS 教程和/或截屏视频最多可赚取 600 美元？ 我们正在寻找有关 HTML、CSS、PHP 和 JavaScript 的深入且编写良好的教程。如果您有能力，请通过 nettuts@tutsplus.com 联系 Jeffrey。

请注意，实际报酬将取决于最终教程和截屏视频的质量。

• 在 Twitter 上关注我们，或订阅 Nettuts+ RSS Feed 以获取网络上最好的 Web 开发教程。