Le livre JQuery Fundamentals est une bible. Celle du développeur JQuery. Elle a pris sa place sur la table de chevet, reléguant au rôle de porte-meuble, ses prédécesseurs. Au format près, puisque c’est en fait un livre électronique.
(e-)Bouquin complet, qui s’adresse à tous développeurs. Que vous découvriez ou pas cette librairie, vous ne pouvez que vous enrichir de cette lecture qui pose les principes de base (et plus) de la programmation en JQuery.
Ayant déjà pas mal bossé avec JQuery, surtout sur ses dernières versions, je dois vous confesser les parties/passages qui ont retenu mon attention.
C’est un article en plusieurs parties, celui-ci étant le premier. Dans les semaines prochaines, n’hésitez pas à revenir lire la suite !
Travailler avec les sélecteurs
.end()
La méthode .end() permet de revenir à la sélection originelle. Partons d’une sélection sur les éléments d’une liste :
Si l’on veut sélectionner uniquement le premier « li », on utilisera la méthode :
Ce qui restreindra la sélection à un seul élément. Ça tombe bien c’est ce qu’on voulait.
Si l’on veut chainer un autre traitement sur le troisième élément de cette liste, il faut utiliser la méthode
pour retrouver la sélection de tous les éléments, puis sélectionner le troisième. On aurait donc :
Optimisation des sélecteurs
.find()
Utiliser la méthode .find() pour sélectionner un élément du DOM, pour garder uniquement un ID dans le sélecteur JQuery. En pratique dans l’exemple :
$('#container div.contenu');
// Très rapide
$('#container').find('div.contenu');
Les deux lignes de code ci-dessus arrivent au même résultat. La seconde est plus rapide car dans $(), on a uniquement un ID, qui peut donc être traité par document.getElementById (), natif dans chaque navigateur.
Éviter les conflits
Une méthode très simple pour éviter les conflits entre librairie.
(function($) {
// Votre code ici, vous pouvez utiliser $
})(jQuery);
Cette simple méthode permet d’éviter tout conflits, si une autre librairie utilisant la variable $ est chargée en même temps que JQuery. Cette méthode doit être utilisé tout de suite après l’appel à la librairie JQuery. Avec l’exemple ci-dessus, on peut continuer à utiliser $.
Une option de cette méthode est de définir une autre variable, de la manière suivante :
Gérer les événements
.one()
Dans certains cas, on peut avoir besoin de gérer un événement, une seule fois. La méthode .one() est là pour ça !
$(this).click(function() { console.log('Vous avez déjà cliqué ici!'); });
});
Des effets personnalisés
.animate()
Toutes personnes qui a déjà travaillé avec JQuery connait cette méthode, qui permet de déplacer, animer n’importe quel élément, de la manière qu’on veut. Elle possède quelques options intéressantes, qu’il me semble intéressant de présenter ici.
La première option, est l’intégration des effets "easing". Easing est pour être un peu plus précis, la manière dons les animations vont se dérouler.
{
left : [ "+=50", "swing" ],
opacity : [ 0.25, "linear" ]
},
300
);
Pour plus d’informations sur Easing, allez voir la doc officielle
Voilà pour la première partie, à venir dans la semaine prochaine, la seconde partie. D’ici là, vous pouvez laisser vos commentaires en bas de cet article.
Le lien vers JQuery Fundamentals
Bonne lecture, bonne fin de semaine et à la semaine prochaine !
Nov
A Propos
Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.
