15 nouvelles fonctionnalités que vous devez connaître : sortie de jQuery 1.4

jQuery 1.4 a été récemment publié. Il ne s’agit pas simplement d’une version de maintenance comme certains l’ont spéculé ; 1.4 inclut de nombreusesnouvelles fonctionnalités, améliorations et améliorations de performances ! Cet article décrit les nouvelles fonctionnalités et améliorations qui pourraient vous être utiles.

Vous pouvez télécharger jQuery 1.4 maintenant ici : http://code.jquery.com/jquery-1.4.js

1. Transmettre les propriétés à jQuery(...)

Avant la version 1.4, jQuery prenait en charge l'ajout d'attributs à une collection d'éléments via la méthode utile "attr", qui pouvait recevoir le nom et la valeur de l'attribut, ou un objet spécifiant plusieurs attributs. jQuery 1.4 a ajouté la prise en charge de la transmission d'un objet de propriété comme deuxième argument à la fonction jQuery elle-même lors de la création d'un élément.

Supposons que vous deviez créer un élément d'ancrage avec plusieurs attributs. Pour la 1.4, c'est aussi simple que ça :

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

Vous avez peut-être remarqué que la méthode "text”属性 - 您可能想知道它在那里做什么，毕竟锚点没有“text”属性！嗯，当您传递某些属性时，jQuery 1.4 使用它自己的方法。因此，上面指定的“text”属性将导致 jQuery 调用“.text()" passe "Aller sur Google" comme seul argument.

Un meilleur exemple pratique :

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

"id" est ajouté comme attribut régulier, mais les attributs "css" et "click" déclenchent des appels à chaque méthode correspondante. Le code ci-dessus, avant la version 1.4, doit être écrit comme ceci :

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

En savoir plus sur jQuery(...)

2. Tout "jusqu'à" !

Trois nouvelles méthodes ont été ajoutées à la bibliothèque de traversée DOM dans

1.4, "nextUntil”、“prevUntil”和“parentsUntil". Chacune de ces méthodes parcourt le DOM dans une certaine direction jusqu'à ce que le sélecteur transmis soit satisfait. Alors, disons que vous avez une liste de fruits :

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

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

Vous souhaitez sélectionner tous les éléments après « Apple », mais vous souhaitez arrêter après avoir atteint « Fraise ». Rien de plus simple :

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

En savoir plus sur : prevUntil, nextUntil, parentsUntil

3. Lier plusieurs gestionnaires d'événements

Au lieu d'enchaîner plusieurs méthodes de liaison d'événements, vous pouvez toutes les regrouper dans le même appel, comme ceci :

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

Cela s'applique également à ".one()".

En savoir plus sur .bind(...)

4. Relâchement de chaque attribut

Vous pouvez désormais définir une fonction d'accélération différente pour chaque propriété que vous souhaitez animer, au lieu d'une seule fonction d'accélération pour une seule animation. jQuery comprend deux fonctions d'accélération : swing (par défaut) et Linear. Pour les autres, vous devez les télécharger séparément !

Pour spécifier une fonction d'accélération pour chaque propriété, définissez simplement la propriété sous forme de tableau, la première valeur est la valeur que vous souhaitez animer pour cette propriété, et la deuxième valeur est la fonction d'accélération à utiliser :

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

Voir ce code en action !

Vous pouvez également définir la fonction d'assouplissement pour chaque propriété dans l'objet options optionnelles en tant que paire nom-valeur de propriété dans l'objet "specialEasing":

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

Note de l'éditeur - L'auteur de cet article, James Padolsey, est très humble. Cette nouvelle fonctionnalité était son idée !

En savoir plus sur l'assouplissement par attribut

5. Nouvel événement en direct !

jQuery 1.4 a ajouté la prise en charge des événements délégués "Submit", "Change", "Focus" et "Blur". Dans jQuery, nous utilisons ".live()”方法来委托事件。当您必须在许多元素上注册事件处理程序，并且随着时间的推移可能会添加新元素时（使用“.live()" plutôt que de relier constamment des coûts de personnalisation inférieurs), ce qui réduit les coûts de personnalisation. est très utile.

Mais attention ! Si vous souhaitez déléguer "vous devez utiliser les noms d'événements "focusin" et "focusout" focus" et les événements "flou" !

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

6. Contexte de la fonction de contrôle

jQuery 1.4 fournit une nouvelle fonction "

" sous l'espace de noms jQuery. La fonction accepte deux paramètres, soit une « portée » et le nom de la méthode, soit une fonction et la portée attendue. Le mot-clé « this » de JavaScript peut être difficile à maîtriser. Parfois, vous ne voulez pas que ce soit un élément, mais un objet que vous avez créé précédemment. proxy

Par exemple, nous avons ici une méthode "

" et un objet de configuration : app”对象，它有两个属性，一个“clickHandler

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

«

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

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

Essayons de le lier en tant que gestionnaire d'événements : 

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!