Lancement de jQuery 1.4 les 15 nouvelles fonctionnalités à connaître

Vous avez peut-être remarqué le "texte"Attribut- vous vous demanderez probablement ce que ça fait là, après tout il n'y a pas"texte"attribut pour les ancres! Eh bien, jQuery 1.4 utilise ses propres méthodes lorsque vous transmettez certains attributs. Ainsi, l'attribut" text "spécifié ci-dessus ferait en sorte que jQuery appelle le".texte()"méthode, en passant" Go to Google! "comme seul argument.

Un meilleur exemple de ceci en action:

 jQuery ('
', id:' foo ', css: fontWeight: 700, color:' green ', cliquez sur: function () alert (' Foo a été cliqué! '); );

"Id" est ajouté en tant qu'attribut standard, mais les propriétés "css" et "click" déclenchent l'appel de chaque méthode respective. Le code ci-dessus, avant la version 1.4, aurait été écrit comme ceci:

 jQuery ('
') .attr (' id ',' foo ') .css (fontWeight: 700, couleur:' green ') .click (function () alert (' On a cliqué sur Foo! '););

En savoir plus sur jQuery (…)

2. Tout "jusqu'à"!

Trois nouvelles méthodes ont été ajoutées à l’arsenal de traversée du DOM dans la version 1.4, "nextUntil","prevUntil" et "parentsJusqu'à". Chacune de ces méthodes traversera le DOM dans une certaine direction jusqu’à ce que le sélecteur passé soit satisfait. Supposons donc que vous ayez une liste de fruits:

 
 
Pomme
 
banane
 
Grain de raisin
 
fraise
 
Poire
 
Pêche
 

Vous souhaitez sélectionner tous les éléments après "Apple", mais vous souhaitez vous arrêter une fois que vous avez atteint "Fraise". Ça ne pourrait pas être plus simple:

 jQuery ('ul li: contient (Apple)'). nextUntil (': contient (Pear)'); // Sélectionne banane, raisin, fraise

En savoir plus sur: prevUntil, nextUntil, parentsUntil

3. Liaison de plusieurs gestionnaires d’événements

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

 jQuery ('# foo) .bind (click: function () // faire quelque chose, mouseover: function () // faire quelque chose, mouseout: function () // faire quelque chose)

Cela fonctionne aussi avec ".un()".

En savoir plus sur .bind (…)

4. Accélération par propriété

Au lieu de simplement définir une fonction d'accélération pour une seule animation, vous pouvez désormais définir une fonction d'accélération différente pour chaque propriété animée. jQuery comprend deux fonctions d'accélération, swing (par défaut) et linéaire. Pour les autres, vous devrez 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é en tant que tableau, la première valeur correspondant à l'objet de l'animation de cette propriété et la seconde étant la fonction d'accélération à utiliser:

 jQuery ('# foo'). animate (gauche: 500, en haut: [500, 'aisanceBouton'], 2000);

Voir ce code en action!

Vous pouvez également définir des fonctions d'accélération par propriété dans l'objet optionnel options en tant que paires nom-valeur de propriété dans l'objet "specialEasing":

 jQuery ('# foo'). animate (gauche: 500, en haut: 500, durée: 2000, specialEasing: en haut: 'aisanceSoutonBounce');

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

En savoir plus sur l'assouplissement par propriété

5. Nouveaux événements en direct!

jQuery 1.4 ajoute le support pour la délégation de "soumettre","changement","concentrer" et "brouiller"événements. Dans jQuery, nous utilisons le".vivre()"méthode pour déléguer des événements. Ceci est utile lorsque vous devez enregistrer des gestionnaires d’événements sur de nombreux éléments et lorsque de nouveaux éléments peuvent être ajoutés au fil du temps (en utilisant".vivre()"est moins coûteux que le ré-engagement continuellement).

Mais fais attention! Vous devez utiliser les noms d'événements, "concentrer" et "focusout"si vous souhaitez déléguer les événements" focus "et" flou "!

 jQuery ('input'). live ('focusin', function () // faire quelque chose avec cela);

6. Contrôler le contexte d'une fonction

jQuery 1.4 fournit un nouveau "Procuration"Fonction sous l'espace de noms jQuery. Cette fonction prend deux arguments, soit un" scope "et un nom de méthode, soit une fonction et le scope souhaité. Le mot clé" this "de JavaScript peut être assez délicat à garder. Cependant, vous avez parfois gagné. ne veux pas que ce soit un élément, mais un objet que vous avez créé précédemment.

Par exemple, ici nous avons un "app"objet qui a deux propriétés, un"clickHandler"méthode et un objet config:

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

Le "clickHandler"méthode, quand appelé comme"app.clickHandler ()" aura "app"en tant que contexte, ce qui signifie que le"ce"mot-clé lui permettra d'accéder à"app". Cela fonctionne assez bien si nous appelons simplement:

 app.clickHandler (); // "Salut!" est alerté

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

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

Lorsque nous cliquons sur une ancre, cela ne semble pas fonctionner (rien n'est alerté). En effet, jQuery (et la plupart des modèles d’événements rationnels) définira par défaut le contexte du gestionnaire en tant qu’élément cible, c’est-à-dire que l’élément sur lequel vous venez de cliquer sera accessible via "ce". Mais nous ne voulons pas cela, nous voulons"ce"être réglé sur"app". Réaliser cela dans jQuery 1.4 ne pourrait être plus simple:

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

Maintenant, chaque fois qu'une ancre est cliquée, "Salut!" sera alerté!

La fonction proxy renvoie une version "encapsulée" de votre fonction, avec "ce"défini sur ce que vous spécifiez. C’est utile dans d’autres contextes, tels que le transfert de rappels à d’autres méthodes jQuery ou à des plugins..

En savoir plus sur jQuery.proxy

7. Retarder une file d'attente d'animation

Vous pouvez maintenant ajouter un délai à vos files d’animation. En fait, cela fonctionne sur n'importe quelle file d'attente, mais son cas d'utilisation le plus courant sera probablement avec la file d'attente "fx". Cela vous permet de faire une pause entre les animations sans avoir à jouer avec les rappels et les appels à "setTimeout". Le premier argument pour".retard()"est la quantité de millisecondes que vous souhaitez retarder.

 jQuery ('# foo') .slideDown () // Slide vers le bas .delay (200) // Ne fait rien pendant 200 ms .fadeIn (); // Ouverture en fondu

Si vous souhaitez différer une file d'attente autre que la file d'attente "fx" par défaut, vous devez alors passer le nom de la file d'attente comme second argument à ".retard()".

En savoir plus sur .retard(… )

8. Vérifier si un élément A Quelque chose

jQuery 1.4, il est facile de vérifier si un élément (ou collection) ".a()"quelque chose. Ceci est l'équivalent programmatique du filtre de sélecteur de jQuery,":a()". Cette méthode sélectionnera tous les éléments de la collection actuelle contenant au moins un élément conforme au sélecteur passé..

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

Cela sélectionnerait tous les éléments DIV contenant des éléments UL. Dans cette situation, vous utiliseriez probablement simplement le filtre de sélection (":a()"), mais cette méthode est toujours utile lorsque vous devez filtrer une collection par programme.

jQuery 1.4 révèle également le "contient"fonction sous l’espace de noms jQuery. Il s’agit d’une fonction de bas niveau qui accepte deux nœuds DOM. Elle renverra un booléen indiquant si le deuxième élément est contenu dans le premier élément. E.g.

 jQuery.contains (document.documentElement, document.body); // renvoie true -  est à l'intérieur 

En savoir plus sur: .a(… ), jQuery.contains (…)

9. Déballer des éléments!

Nous avons eu le ".emballage()"Méthode depuis un moment maintenant. jQuery 1.4 ajoute le".déballer()"méthode qui fait le contraire. Si nous supposons la structure DOM suivante:

 
 
Foo
 

Nous pouvons décompresser l’élément de paragraphe de la manière suivante:

 jQuery ('p'). unwrap ();

La structure DOM résultante serait:

 
Foo

Essentiellement, cette méthode supprime simplement le parent de tout élément.

En savoir plus sur .déballer (…)

10. Supprimer des éléments sans supprimer des données

Le nouveau ".détacher()"méthode vous permet de supprimer des éléments du DOM, un peu comme le".retirer()"méthode. La principale différence avec cette nouvelle méthode est qu’elle ne détruit pas les données détenues par jQuery sur cet élément. Cela inclut les données ajoutées via".Les données()"et tous les gestionnaires d'événements ajoutés via le système d'événements de jQuery.

Cela peut être utile lorsque vous devez supprimer un élément du DOM, mais vous savez que vous devrez le rajouter ultérieurement. Ses gestionnaires d'événements et toutes les autres données vont persister.

 var foo = jQuery ('# foo'); // Lier un gestionnaire d'événements important foo.click (function () alert ('Foo!');); foo.detach (); // Supprimez-le du DOM //… do stuff foo.appendTo ('body'); // Ajoute-le au DOM foo.click (); // alerte "Foo!"

En savoir plus sur .détacher (…)

11. index (…) Améliorations

jQuery 1.4 vous donne deux nouvelles façons d'utiliser le ".indice()"méthode. Auparavant, vous ne pouviez passer qu’un élément en tant qu’argument et vous vous attendriez à ce qu’un nombre soit renvoyé indiquant l’index de cet élément dans la collection en cours..

En ne passant aucun argument, l'index d'un élément est maintenant retourné parmi ses frères et soeurs. Donc, en supposant la structure DOM suivante:

 
 
Pomme
 
banane
 
Grain de raisin
 
fraise
 
Poire
 
Pêche
 

Lorsque vous cliquez sur un élément de la liste, vous souhaitez connaître l'index de l'élément sur lequel vous avez cliqué parmi tous les autres éléments de la liste. C'est aussi simple que:

 jQuery ('li'). click (function () alert (jQuery (this) .index ()););

jQuery 1.4 vous permet également de spécifier un sélecteur comme premier argument de ".indice()", ce faisant, vous obtiendrez l’index de l’élément actuel parmi la collection produite à partir de ce sélecteur.

Vous devriez noter que ce qui est retourné par cette méthode est un entier et qu'il retournera -1 si le sélecteur / élément passé est introuvable dans le document..

En savoir plus sur .index (…)

12. Les méthodes de manipulation DOM acceptent les rappels

La plupart des méthodes de manipulation du DOM prennent désormais en charge le passage d’une fonction comme argument unique (ou deuxième, dans le cas de ".css ()"&".attr ()"). Cette fonction sera exécutée sur chaque élément de la collection pour déterminer quelle valeur doit être utilisée comme valeur réelle pour cette méthode..

Les méthodes suivantes ont cette capacité:

• après
• avant
• ajouter
• préposer
• addClass
• toggleClass
• removeClass
• emballage
• Envelopper
• wrapInner
• val
• texte
• remplacer par
• css
• attr
• html

Dans la fonction de rappel, vous aurez accès à l'élément actuel de la collection via "ce"et son index via le premier argument.

 jQuery ('li'). html (function (i) return 'Index de cet élément de liste:' + i;);

En outre, avec certaines des méthodes ci-dessus, vous obtiendrez également un deuxième argument. Si vous appelez une méthode de définition (comme ".html ()" ou ".attr ('href)") vous aurez accès à la valeur actuelle. E.g.

 jQuery ('a'). attr ('href', fonction (i, currentHref) return currentHref + '? foo = bar';);

Comme vous pouvez le voir, avec le ".css ()" et ".attr ()"méthodes, vous passeriez la fonction en tant que second argument, puisque le premier serait utilisé pour nommer la propriété que vous souhaitez modifier:

 jQuery ('li'). css ('color', fonction (i, currentCssColor) renvoie i% 2? 'rouge': 'bleu';);

13. Déterminer le type d'objet

jQuery 1.4 ajoute deux nouvelles fonctions d'assistance (stockées directement sous l'espace de noms jQuery) qui vous aident à déterminer le type d'objet avec lequel vous traitez.

D'abord, il y a "isEmptyObject", cette fonction retourne un booléen indiquant si l’objet transmis est vide ou non (dépourvu de propriétés - direct et hérité). Deuxièmement, il y a "isPlainObject", qui retournera un booléen indiquant si l'objet transmis est un objet JavaScript simple, c'est-à-dire créé via"" ou "nouvel objet ()".

 jQuery.isEmptyObject (); // true jQuery.isEmptyObject (foo: 1); // false jQuery.isPlainObject (); // true jQuery.isPlainObject (window); // false jQuery.isPlainObject (jQuery ()); // faux

En savoir plus sur: isPlainObject (…), isEmptyObject (…)

14. Améliorations les plus proches (…)

jQuery's ".le plus proche()"méthode accepte désormais un tableau de sélecteurs. Ceci est utile lorsque vous souhaitez parcourir les ancêtres d'un élément, en recherchant (plusieurs) les éléments les plus proches présentant certaines caractéristiques..

En outre, il accepte désormais un contexte en tant que deuxième argument, ce qui signifie que vous pouvez contrôler jusqu'à quelle distance ou à quelle distance vous souhaitez que le DOM soit traversé. Ces deux améliorations s’adaptent à de rares cas d’utilisation, mais elles sont utilisées en interne avec beaucoup d’effet.!

En savoir plus sur .le plus proche(… )

15. Nouveaux événements! focusIn et focusOut

Comme mentionné, pour déléguer les événements "focus" et "flou", vous devez utiliser ces nouveaux événements, appelés "focusin" et "focusout". Ces événements vous permettent de prendre des mesures lorsqu'un élément, ou un descendant d'un élément, gagne le focus.

 jQuery ('formulaire') .focusin (function () jQuery (this) .addClass ('focus');); .focusout (function () jQuery (this) .removeClass ('focalisé'););

Vous devriez également noter que ces deux événements ne se propagent pas ("bulle"); ils sont capturés. Cela signifie que l'élément le plus à l'extérieur (ancêtre) sera déclenché avant l'élément causal "cible".

En savoir plus sur le concentrer et focusOut événements.

Profitez de jQuery 1.4, la version de jQuery la plus attendue, la plus riche en fonctionnalités et la plus performante jamais réalisée.!

Eh bien c'est ça! J'ai essayé de couvrir les changements qui, je pense, auront un impact sur vous!

Si vous ne l’avez pas déjà fait, vous devriez jeter un œil à la "14 jours de jQuery", un événement en ligne marquant la sortie de jQuery 1.4 et le quatrième anniversaire de jQuery!

Et n'oubliez pas de commander le nouveau Documentation API!

Écrire un tutoriel Plus