Partager:
Guide de base de JQuery pour les programmeurs Javascript
JQuery est l'une des bibliothèques JavaScript les plus populaires sur la planète (qu'est-ce que JavaScript? Et Internet peut-il exister sans elle? Qu'est-ce que JavaScript? Internet peut-il exister sans JavaScript? JavaScript est l'une de ces choses que beaucoup considèrent comme acquise. Tout le monde l'utilise. Lire la suite). Au moment de sa création, JavaScript (désigné sous le nom de JS à partir de maintenant) était dans un endroit très différent. Le 14 janvier 2006, jQuery a été annoncé au BarCampNYC. JS manquait encore un peu - les navigateurs en supportaient tous des parties, mais beaucoup de piratages et de solutions de contournement devaient être mis en place pour la conformité.
JQuery est arrivé et a tout changé. JQuery a rendu très facile l'écriture de code conforme au navigateur. Vous pouvez animer des pages Web sans être diplômé en informatique - hourra! Dix ans plus tard, jQuery est toujours roi et si vous ne l'avez jamais utilisé auparavant, que pouvez-vous en faire??
En plus de parfaire vos compétences en JavaScript, vous voudrez peut-être lire quelques tutoriels HTML et CSS Apprendre le HTML et le CSS avec ces didacticiels étape par étape Apprendre le HTML et le CSS avec ces didacticiels étape par étape Vous êtes intéressé par les langages HTML, CSS et JavaScript? Si vous pensez avoir le don d'apprendre à créer des sites Web à partir de rien, voici quelques tutoriels étape par étape qui valent le coup d'être essayés. Lisez d'abord si vous ne les connaissez pas non plus.
Nous avons présenté jQuery Rendre le Web interactif: Introduction à jQuery Rendre le Web interactif: Introduction à jQuery jQuery est une bibliothèque de scripts côté client utilisée par presque tous les sites Web modernes. Elle rend les sites Web interactifs. Ce n'est pas la seule bibliothèque Javascript, mais c'est la bibliothèque la plus développée, la plus supportée et la plus largement utilisée… Lire la suite, ce guide de JQuery se concentrera sur le codage.
Commencer
Vous savez peut-être comment JS sélectionne les identifiants à partir du modèle de document (DOM):
document.getElementById ('foo');JQuery va encore plus loin. Il n'est pas nécessaire d'appeler différentes méthodes pour sélectionner des classes, des identifiants ou plusieurs éléments. Voici comment vous sélectionnez un identifiant:
$ ('# bar');Facile non? C'est exactement la même syntaxe pour sélectionner presque n'importe quel élément DOM. Voici comment vous sélectionnez les classes:
$ ('. baz');Vous pouvez également faire preuve de créativité pour un pouvoir réel. Cela sélectionne tout td éléments à l'intérieur d'un table sauf le premier.
$ ('table td'). not (': premier');Notez que les noms de sélecteur correspondent presque exactement à leurs équivalents CSS. Vous pouvez assigner des objets à ordinaire JS variables:
var xyzzy = $ ('# parent .child');Ou vous pouvez utiliser des variables jQuery:
var $ xyzzy = $ ('# parent .child');Le signe dollar est uniquement utilisé pour indiquer que cette variable est un objet jQuery, ce qui est très utile pour les projets complexes..
Vous pouvez sélectionner le parent d'un élément:
$ ('enfant'). parent ();Ou les frères et soeurs:
$ ('enfant'). frères et soeurs ();Vous devez exécuter votre code une fois que le navigateur est prêt. Voici comment vous faites cela:
$ (document) .ready (function () console.log ('ready!'););Plus de pouvoir
Maintenant que vous connaissez les bases, passons à des choses plus complexes. Étant donné un tableau html:
Faire Modèle Couleur Gué Escorte Noir Mini Tonnelier rouge Gué Cortina blanc
Supposons que vous vouliez que chaque rangée ait une couleur différente (appelée Rayures de zèbre). Maintenant, vous pouvez utiliser CSS pour cela:
#cars tr: nth-child (pair) background-color: red; 
Voici comment cela pourrait être réalisé avec jQuery:
$ ('tr: pair'). addClass ('pair');Cela permettra d'obtenir la même chose, à condition que même est une classe définie en CSS. Notez que l'arrêt complet avant le nom de la classe n'est pas nécessaire. Ceux-ci sont d'habitude requis uniquement pour le sélecteur principal. Idéalement, vous utiliseriez CSS pour commencer, bien que ce ne soit pas grave.
JQuery peut également masquer ou supprimer des lignes:
$ ('# fordCortina'). hide (); $ ('# fordCortina'). remove ();Vous n'êtes pas obligé de cacher un élément avant de le supprimer.
Les fonctions
Les fonctions JQuery ressemblent à JS. Ils utilisent des accolades et peuvent accepter des arguments. Cela devient vraiment intéressant grâce aux rappels. Les rappels peuvent être appliqués à presque toutes les fonctions jQuery. Ils spécifient un morceau de code à exécuter une fois l'action principale terminée. Cela fournit une fonctionnalité énorme. S'ils n'existaient pas et que vous écriviez votre code en pensant qu'il s'exécutait de manière linéaire, JS continuerait à exécuter la ligne de code suivante en attendant la précédente. Les rappels garantissent que le code ne sera exécuté qu'une fois la tâche initiale terminée. Voici un exemple:
$ ('table'). hide (function () alert ('Règles MUO!'););Soyez averti - ce code exécute une alerte pour chaque élément. Si votre sélecteur est quelque chose sur la page plus d'une fois, vous recevrez plusieurs alertes.
Vous pouvez utiliser des rappels avec d'autres arguments:
$ ('tr: even'). addClass ('even', function () console.log ('Hello'););Notez qu'il y a un point-virgule après les accolades de fermeture. Cela ne serait normalement pas nécessaire pour une fonction JS, mais ce code est toujours considéré comme étant sur une seule ligne (car le rappel est entre crochets)..
Animation
JQuery facilite l'animation de pages Web. Vous pouvez créer ou masquer des éléments:
$ ('. fade1'). fadeIn ('lent'); $ ('# fade2'). fadeOut (500);Vous pouvez spécifier trois vitesses (lente, moyenne, rapide) ou un nombre représentant la vitesse en millisecondes (1000 ms = 1 seconde). Vous pouvez animer presque tout élément CSS. Ceci anime la largeur du sélecteur de sa largeur actuelle à 250px.
$ ('foo'). animate (width: '250px');Il n'est pas possible d'animer des couleurs. Vous pouvez également utiliser des callbacks avec animation:
$ ('bar'). animate (height: '250px', function () $ ('bar'). animate (width: '50px');Boucles
Les boucles brillent vraiment dans jQuery. Chaque() est utilisé pour parcourir chaque élément d'un type donné:
$ ('li'). each (function () console.log ($ (this)););Vous pouvez également utiliser un index:
$ ('li'). each (fonction (i) console.log (i + '-' + $ (this)););Cela imprimerait 0, puis 1 etc.
Vous pouvez aussi utiliser chaque() itérer sur des tableaux, comme dans JS:
var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (voitures, fonction (i, valeur) console.log (valeur););Notez l'argument supplémentaire appelé valeur - c'est la valeur de l'élément de tableau.
Il est à noter que chaque() pouvez parfois être plus lent que les boucles JS à la vanille. Cela est dû à la charge de traitement supplémentaire que jQuery effectue. Pour la majorité du temps, ce n'est pas un problème. Si vous êtes préoccupé par les performances ou si vous travaillez avec de grands ensembles de données, commencez par analyser votre code avec jsPerf..
AJAX
JavaScript et XML asynchrones ou AJAX est vraiment très facile avec jQuery. AJAX alimente une grande quantité d’Internet et c’est quelque chose que nous avons couvert dans la cinquième partie. JQuery Tutorial (Part 5): AJAX Them All! jQuery Tutorial (Part 5): AJAX, eux tous! Alors que nous approchons de la fin de notre série de mini-didacticiels jQuery, il est temps que nous examinions plus en détail l'une des fonctionnalités les plus utilisées de jQuery. AJAX permet à un site Web de communiquer avec… Lisez plus de notre tutoriel jQuery Tutoriel jQuery - Mise en route: notions de base et sélecteurs Tutoriel jQuery - Mise en route: notions de base et sélecteurs La semaine dernière, j'ai expliqué l'importance de jQuery pour tout développeur web moderne impressionnant. Cette semaine, je pense qu'il est temps de nous salir les mains avec du code et d'apprendre comment… Lire la suite. Il fournit un moyen de charger partiellement une page Web - aucune raison de recharger toute la page lorsque vous souhaitez uniquement mettre à jour le score de football, par exemple. jQuery a plusieurs méthodes AJAX, la plus simple étant charge():
$ ('# baz'). load ('un peu / url / page.html');Ceci effectue un appel AJAX vers la page spécifiée (un peu / url / page.html) et enfonce les données dans le sélecteur. Simple!
Vous pouvez effectuer HTTP GET demandes:
$ .get ('certains / url', fonction (résultat) console.log (résultat););Vous pouvez également envoyer des données en utilisant POSTER:
$ .post ('some / other / url', 'make': 'Ford', 'model': 'Cortina');Il est très facile de soumettre des données de formulaire:
$ .post ('url', $ ('formulaire'). serialize (), fonction (résultat) console.log (résultat);le sérialiser () fonction récupère toutes les données de formulaire et les prépare pour la transmission.
Promesses
Les promesses sont utilisées pour l'exécution différée. Ils peuvent être difficiles à apprendre, mais jQuery le rend légèrement moins gênant. ECMAScript 6 introduit les promesses natives dans JS, cependant, la prise en charge du navigateur est au mieux floue. Pour l'instant, les promesses de jQuery sont bien meilleures en ce qui concerne la prise en charge de plusieurs navigateurs.
Une promesse est presque exactement comme ça. Le code fera une promesse de revenir ultérieurement, une fois terminé. Votre moteur JavaScript passera à l'exécution d'un autre code. Une fois la promesse résout (retourne), un autre morceau de code peut être exécuté. Les promesses peuvent être considérées comme des rappels. La documentation de jQuery explique plus en détail.
Voici un exemple:
// dfd == deferred var dfd = $ .Deferred (); function doThing () $ .get ('un peu / lent / url', function () dfd.resolve ();); retourne dfd.promise (); $ .when (doThing ()). then (function () console.log ('YAY, c'est fini'););Remarquez comment la promesse est faite (dfd.promise ()), et il n'est résolu que lorsque l'appel AJAX est terminé. Vous pouvez utiliser une variable pour garder la trace de plusieurs appels AJAX et ne terminer qu'une autre tâche une fois qu'ils ont tous été effectués..
Conseils de performance
La clé pour réduire les performances de votre navigateur est de limiter l’accès au DOM. Bon nombre de ces conseils peuvent également s'appliquer à JS, et vous souhaiterez peut-être profiler votre code pour voir s'il est trop lent. À l'ère actuelle des moteurs JavaScript hautes performances, des goulots d'étranglement mineurs dans le code peuvent souvent passer inaperçus. Malgré cela, il est toujours utile d’essayer d’écrire le code le plus rapide possible.
Au lieu de rechercher dans le DOM chaque action:
$ ('foo'). css ('background-color', 'red'); $ ('foo'). css ('color', 'green'); $ ('foo'). css ('width', '100px');Stocker l'objet dans une variable:
$ bar = $ ('foo'); $ bar.css ('couleur de fond', 'rouge'); $ bar.css ('couleur', 'vert'); $ bar.css ('width', '100px');Optimisez vos boucles. Étant donné une vanille pour la boucle:
var cars = ['Mini', 'Ford', 'Jaguar']; pour (int i = 0; i < cars.length; ++i) // do something Bien que n'étant pas intrinsèquement mauvais, cette boucle peut être faite plus rapidement. Pour chaque itération, la boucle doit calculer la valeur du tableau de voitures (voiture.longueur). Si vous stockez cela dans une autre variable, vous pouvez gagner en performance, surtout si vous travaillez avec de grands ensembles de données:
pour (int i = 0, j = cars.length; i < j; ++i) // do something Maintenant, la longueur du tableau cars est stockée dans j. Cela ne doit plus être calculé à chaque itération. Si vous utilisez chaque(), vous n’avez pas besoin de le faire, bien que JS vanilla correctement optimisé puisse surperformer JQuery. JQuery brille vraiment grâce à la vitesse de développement et de débogage. Si vous ne travaillez pas sur le Big Data, jQuery est généralement plus que rapide.
Vous devriez maintenant connaître suffisamment de bases pour être un ninja jQuery!
Utilisez-vous jQuery régulièrement? Avez-vous cessé de l'utiliser pour une raison quelconque? Faites-nous savoir vos pensées dans les commentaires ci-dessous!
En savoir plus sur: JavaScript, jQuery.