15 neue Funktionen, die Sie kennen müssen: jQuery 1.4 veröffentlicht

jQuery 1.4 wurde kürzlich veröffentlicht. Dies ist nicht nur eine Wartungsversion, wie einige spekuliert haben; 1.4 enthält vieleneue Funktionen, Erweiterungen und Leistungsverbesserungen! In diesem Artikel werden neue Funktionen und Verbesserungen beschrieben, die für Sie von Nutzen sein könnten.

Sie können jQuery 1.4 jetzt hier herunterladen: http://code.jquery.com/jquery-1.4.js

1. Übergeben Sie Eigenschaften an jQuery(...)

Vor 1.4 unterstützte jQuery das Hinzufügen von Attributen zu einer Sammlung von Elementen über die nützliche Methode „attr“, der der Attributname und -wert oder ein Objekt übergeben werden konnte, das mehrere Attribute angibt. jQuery 1.4 hat Unterstützung für die Übergabe eines Eigenschaftsobjekts als zweites Argument an die jQuery-Funktion selbst beim Erstellen eines Elements hinzugefügt.

Angenommen, Sie müssen ein Ankerelement mit mehreren Attributen erstellen. Für 1.4 ist es so einfach:

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

Sie haben vielleicht bemerkt, dass die Methode „text”属性 - 您可能想知道它在那里做什么，毕竟锚点没有“text”属性！嗯，当您传递某些属性时，jQuery 1.4 使用它自己的方法。因此，上面指定的“text”属性将导致 jQuery 调用“.text()“ „Gehe zu Google!“ als einziges Argument übergibt.

Ein besseres Praxisbeispiel:

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

„id“ wird als reguläres Attribut hinzugefügt, aber die Attribute „css“ und „click“ lösen Aufrufe an jede entsprechende Methode aus. Der obige Code vor Version 1.4 sollte wie folgt geschrieben sein:

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

Erfahren Sie mehr über jQuery(...)

2. Alles „bis“!

In

1.4, „nextUntil”、“prevUntil”和“parentsUntil“, wurden der DOM-Traversal-Bibliothek drei neue Methoden hinzugefügt. Jede dieser Methoden durchläuft das DOM in eine bestimmte Richtung, bis der übergebene Selektor erfüllt ist. Nehmen wir also an, Sie haben eine Liste mit Früchten:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>

    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

Sie möchten alle Artikel nach „Apple“ auswählen, aber nach „Erdbeere“ aufhören. Es könnte nicht einfacher sein:

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// Selects Banana, Grape, Strawberry

Erfahren Sie mehr über: prevUntil, nextUntil, parentUntil

3. Binden Sie mehrere Event-Handler

Anstatt eine Reihe von Ereignisbindungsmethoden miteinander zu verketten, können Sie sie alle in einem einzigen Aufruf zusammenfassen, etwa so:

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
})

Dies gilt auch für „.one()“.

Erfahren Sie mehr über .bind(...)

4. Lockerheit jedes Attributs

Sie können jetzt für jede Eigenschaft, die Sie animieren möchten, eine andere Beschleunigungsfunktion definieren, anstatt nur eine Beschleunigungsfunktion für eine einzelne Animation. jQuery enthält zwei Beschleunigungsfunktionen: Swing (Standard) und Linear. Für die anderen müssen Sie sie separat herunterladen!

Um für jede Eigenschaft eine Beschleunigungsfunktion anzugeben, definieren Sie die Eigenschaft einfach als Array. Der erste Wert ist der Wert, den Sie für diese Eigenschaft animieren möchten, und der zweite Wert ist die zu verwendende Beschleunigungsfunktion:

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

Sehen Sie diesen Code in Aktion!

Sie können die Beschleunigungsfunktion für jede Eigenschaft im optionalen Optionsobjekt auch als Eigenschaftsname-Wert-Paar im „specialEasing“-Objekt definieren:

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

Anmerkung des Herausgebers – Der Autor dieses Artikels, James Padolsey, ist sehr bescheiden. Dieses neue Feature war seine Idee!

Erfahren Sie mehr über Lockerung nach Attribut

5. Neues Live-Event!

jQuery 1.4 hat Unterstützung für die Delegaten „Submit“, „Change“, „Focus“ und „Blur“ hinzugefügt. In jQuery verwenden wir „.live()”方法来委托事件。当您必须在许多元素上注册事件处理程序，并且随着时间的推移可能会添加新元素时（使用“.live()“, anstatt die Anpassungskosten ständig neu zu binden ist sehr nützlich.

Aber Vorsicht! Wenn Sie delegieren möchten, müssen Sie die Ereignisnamen „focusin“ und „focusout“ für Fokus- und „Unschärfe“-Ereignisse verwenden!

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

6. Kontrollfunktionskontext

jQuery 1.4 bietet eine neue „

“-Funktion unter dem jQuery-Namespace. Die Funktion akzeptiert zwei Parameter, entweder einen „Bereich“ und den Methodennamen oder eine Funktion und den erwarteten Bereich. Das JavaScript-Schlüsselwort „this“ kann schwierig zu beherrschen sein. Manchmal möchten Sie, dass es sich nicht um ein Element handelt, sondern um ein Objekt, das Sie zuvor erstellt haben. proxy

Zum Beispiel haben wir hier eine „

“-Methode und ein Konfigurationsobjekt: app”对象，它有两个属性，一个“clickHandler

var app = {
    config: {
        clickMessage: 'Hi!'
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};

„

“. Wenn wir einfach anrufen: clickHandler”方法，当像“app.clickHandler()”这样调用时，将以“app”作为其上下文，这意味着“this”关键字将允许它访问“ app

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

Versuchen wir, es als Event-Handler zu binden:

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

Das obige ist der detaillierte Inhalt von15 neue Funktionen, die Sie kennen müssen: jQuery 1.4 veröffentlicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!