15個你必須了解的新功能：jQuery 1.4發布

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()”创建的对象。

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 开发教程。

以上是15個你必須了解的新功能：jQuery 1.4發布的詳細內容。更多資訊請關注PHP中文網其他相關文章！