Introduction
HTML, CSS et JavaScript sont les trois langages fondamentaux du web. Nous structurons nos sites Web avec HTML, les stylisons avec CSS et ajoutons des fonctionnalités interactives avec JavaScript. En fait, la plupart des animations et toute action résultant d’un clic, d’un survol ou d’un défilement de l’utilisateur sont construites avec JavaScript.
jQuery est la bibliothèque JavaScript « écrire moins, faire plus”. Ce n’est pas un langage de programmation, mais plutôt un outil utilisé pour rendre l’écriture des tâches JavaScript courantes plus concise., jQuery a l’avantage supplémentaire d’être compatible avec plusieurs navigateurs, ce qui signifie que vous pouvez être certain que la sortie de votre code sera rendue comme prévu dans n’importe quel navigateur moderne.
En comparant un simple « Hello, World! »programme en JavaScript et jQuery, nous pouvons voir la différence de la façon dont ils sont tous deux écrits.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Ce petit exemple montre comment jQuery peut atteindre le même résultat final comme un simple JavaScript de manière succincte.,
objectifs
Ce guide ne suppose aucune connaissance préalable de jQuery, et couvrira les sujets suivants:
- Comment installer jQuery dans un projet web.
- Les définitions des concepts de développement web importants tels que L’API, le DOM et le CDN.
- sélecteurs, événements et effets jQuery courants.
- exemples pour tester les concepts appris tout au long de l’article.
Prérequis
Avant de commencer ce guide, vous aurez besoin des éléments suivants:
- Une connaissance de base de HTML et de CSS., Vous devez déjà savoir comment configurer un site Web simple et comprendre les sélecteurs CSS tels que les Id, les classes et les pseudo-éléments.
- une compréhension des fondamentaux de la programmation. Bien qu’il soit possible de commencer à écrire jQuery sans une connaissance avancée de JavaScript, la familiarité avec les concepts de variables et de types de données ainsi que les mathématiques et la logique aidera considérablement.
configuration de jQuery
jQuery est un fichier JavaScript que vous allez lier dans votre HTML. Il existe deux façons d’inclure jQuery dans un projet:
- téléchargez une copie locale.,
- lien vers un fichier via le réseau de diffusion de contenu (CDN).
remarque: un réseau de diffusion de contenu (CDN) est un système de plusieurs serveurs qui fournissent du contenu web à un utilisateur en fonction de son emplacement géographique. Lorsque vous créez un lien vers un fichier jquery hébergé via CDN, il arrivera potentiellement plus rapidement et plus efficacement à l’utilisateur que si vous l’hébergiez sur votre propre serveur.
Nous allons utiliser le CDN pour référencer jQuery dans nos exemples. Vous pouvez trouver la dernière version de jQuery dans les bibliothèques hébergées de Google., Si au lieu de cela vous souhaitez le télécharger, vous pouvez obtenir une copie de jQuery sur le site officiel.
nous allons commencer cet exercice en créant un petit projet web. Il sera composé de style.css dans le css/ répertoire scripts.js dans le js/ répertoire, et l’un des principaux index.html à la racine du projet.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.htmlPour commencer, faites un squelette HTML et l’enregistrer en tant que index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Lien vers le jQuery CA juste avant la balise fermante </body> balise, suivis par votre propre fichier JavaScript, scripts.js.
votre fichier JavaScript (scripts.js) doit être inclus sous la bibliothèque jQuery dans le document ou cela ne fonctionnera pas.
Remarque: Si vous avez téléchargé une copie locale de jQuery, enregistrez-la dans votre dossierjs/ et liez-la àjs/jquery.min.js.,
à ce stade, la bibliothèque jQuery est maintenant chargée dans votre site, et vous avez un accès complet à l’API jQuery.
remarque: une interface de programmation D’Application (API) est une interface qui permet aux logiciels d’interagir les uns avec les autres. Dans ce cas, L’API pour jQuery contient toutes les informations et la documentation nécessaires pour accéder à jQuery.
en utilisant jQuery
à la base, jQuery est utilisé pour se connecter avec des éléments HTML dans le navigateur via le DOM.,
Le Document Object Model (DOM) est la méthode par laquelle JavaScript (et jQuery) interagissent avec le HTML dans un navigateur. Pour afficher exactement ce QU’est le DOM, dans votre navigateur web, faites un clic droit sur la page Web actuelle, sélectionnez inspecter. Cela ouvrira des outils de développement. Le code HTML que vous voyez ici est le DOM.
chaque élément HTML est considéré comme un nœud dans le DOM – un objet que JavaScript peut toucher. Ces objets sont disposés dans une structure arborescente, avec <html> étant plus proche de la racine, et chaque élément imbriqué étant une branche plus loin le long de l’arbre., JavaScript peut ajouter, supprimer et modifier l’un de ces éléments.
Si vous cliquez à nouveau avec le bouton droit de la souris sur le site et cliquez sur Afficher la source de la Page, vous verrez la sortie HTML brute du site web. Il est facile au début de confondre le DOM avec la source HTML, mais ils sont différents – la source de la page est exactement ce qui est écrit dans le fichier HTML. Il est statique et ne changera pas, et ne sera pas affecté par JavaScript. Le DOM est dynamique et peut changer.
la couche la plus externe du DOM, la couche qui enveloppe tout le nœud<html>, est l’objet document., Pour commencer à manipuler la page avec jQuery, nous devons d’abord nous assurer que le document est « prêt”.
Créer le fichier scripts.js dans votre js/ répertoire et tapez le code suivant:
$(document).ready(function() { // all custom jQuery will go here});Tous jQuery code que vous écrivez sera enveloppé dans le code ci-dessus. jQuery détectera cet état de préparation afin que le code inclus dans cette fonction ne s’exécute qu’une fois que le DOM est prêt pour l’exécution du code JavaScript., Même si, dans certains cas, JavaScript ne sera pas chargé tant que les éléments ne seront pas rendus, inclure ce bloc est considéré comme une meilleure pratique.
Dans l’introduction de cet article, vous avez vu un simple « Bonjour, Monde!” script. Pour lancer ce script et imprimer du texte dans le navigateur avec jQuery, nous allons d’abord créer un élément de paragraphe vide au niveau du bloc avec L’ID demo qui lui est appliqué.
...<body><p></p>...jQuery est appelé avec et représenté par le signe dollar ($)., Nous accédons au DOM avec jQuery en utilisant principalement la syntaxe CSS, et appliquons une action avec une méthode. Un exemple jQuery de base suit ce format.
$("selector").method();comme un ID est représenté par un symbole de hachage (#) en CSS, nous accéderons à l’ID de démonstration avec le sélecteur#demo. html() est une méthode qui modifie le code HTML dans un élément.
nous allons maintenant mettre notre coutume » Hello, World! »programme dans le wrapper jQuery ready()., Ajoutez cette ligne à votre fichierscripts.js dans la fonction existante:
$(document).ready(function() { $("#demo").html("Hello, World!");});une Fois que vous avez enregistré le fichier, vous pouvez ouvrir votre index.html fichier dans votre navigateur. Si tout a fonctionné correctement, vous verrez la sortie Hello, World!.
sélecteurs
les sélecteurs sont la façon dont nous disons à jQuery sur quels éléments nous voulons travailler. La plupart des sélecteurs jQuery sont les mêmes que ceux que vous connaissez dans CSS, avec quelques ajouts spécifiques à jQuery., Vous pouvez afficher la liste complète des sélecteurs jQuery sur leurs pages de documentation officielles.
pour accéder à un sélecteur, utilisez le symbole jQuery$, suivi de parenthèses().
$("selector")les chaînes entre guillemets doubles sont préférées par le guide de style jQuery, bien que les chaînes entre guillemets simples soient également souvent utilisées.
Voici un bref aperçu de certains des sélecteurs les plus couramment utilisés.,
de manière générale, les classes et les id sont ce que vous rencontrerez le plus de classes lorsque vous voulez sélectionner plusieurs éléments, et id lorsque vous souhaitez sélectionner un seul.
événements jQuery
dans le » bonjour, monde! »par exemple, le code s’exécutait dès que la page était chargée et que le document était prêt, et ne nécessitait donc aucune interaction de l’utilisateur. Dans ce cas, nous aurions pu écrire le texte directement dans le HTML sans nous soucier de jQuery. Cependant, nous devrons utiliser jQuery si nous voulons faire apparaître du texte sur la page en cliquant sur un bouton.,
de Retour à votre index.html fichier et ajouter une balise <button> élément. Nous utiliserons ce bouton pour écouter notre événement click.
...<body><button>Click me</button><p></p>Nous allons utiliser la balise click() méthode à appeler une fonction contenant notre « Hello, World!” code.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}Voici le code final.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});Enregistrer le scripts.js fichier, et de rafraîchissement index.html dans le navigateur., Maintenant, lorsque vous cliquez sur le bouton, le » bonjour, monde!” texte apparaîtra.
Un événement est une fois que l’utilisateur interagit avec le navigateur. Habituellement, cela se fait avec la souris ou le clavier. L’exemple que nous venons de créer utilisait un événement click. À partir de la documentation officielle de jQuery, vous pouvez afficher une liste complète des méthodes d’événement jQuery. Vous trouverez ci-dessous un bref aperçu de certaines des méthodes d’événements les plus couramment utilisées.
pour que les images s’animent ou s’estompent pendant qu’un utilisateur défile vers le bas de l’écran, utilisez la méthodescroll()., Pour quitter un menu à l’aide de la touche ESC, utilisez la méthode keydown(). Pour créer un menu déroulant en accordéon, utilisez la méthode click().
la compréhension des événements est essentielle pour créer du contenu de site web dynamique avec jQuery.
effets jQuery
Les effets jQuery fonctionnent main dans la main avec les événements en vous permettant d’ajouter des animations et de manipuler des éléments sur la page.
nous allons faire un exemple où nous ouvrons et fermons une superposition contextuelle., Alors qu’on pourrait utiliser deux Id – on pour ouvrir la superposition et un autre pour fermer – nous allons plutôt utiliser une classe pour ouvrir et fermer la superposition avec la même fonction.
supprimez les balises<button>Et<p> dans le corps de votre fichierindex.html et ajoutez ce qui suit à votre document HTML:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...notre style.css fichier, nous allons utiliser une quantité minimale de CSS pour cacher la balise overlay par display: none et de la centrer sur l’écran.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}de Retour dans le scripts.js fichier, nous allons utiliser la balise toggle() méthode, qui fera basculer le CSS display propriété entre none et block, le masquage et l’affichage de la superposition lorsque l’utilisateur clique dessus.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Actualiser index.html. Vous allez maintenant pouvoir basculer la visibilité du modal en cliquant sur les boutons., Vous pouvez modifier toggle() de fadeToggle() ou slideToggle() pour voir un peu d’autres intégrée effets jQuery.
Voici un bref aperçu de certaines des méthodes d’effet les plus couramment utilisées.
-
toggle()– bascule: commute la visibilité d’un ou plusieurs éléments.show()ethide()sont liés d’une façon d’effets. -
fadeToggle()– bascule de fondu: change la visibilité et anime l’opacité d’un ou plusieurs éléments.,fadeIn()etfadeOut()sont liés d’une façon d’effets. -
slideToggle()– Slide Toggle permet de basculer la visibilité d’un ou plusieurs éléments avec un effet de glissement.slideDown()etslideUp()sont liés d’une façon d’effets. -
animate()– Animer effectue des effets d’animation personnalisés sur la propriété CSS d’un élément.,
Nous utilisons les événements jQuery pour écouter une interaction utilisateur telle que le clic d’un bouton, et nous utilisons les effets jQuery pour manipuler davantage les éléments une fois que cette action a lieu.
Conclusion
dans ce guide, nous avons appris comment sélectionner et manipuler des éléments avec jQuery, et comment les événements et les effets fonctionnent ensemble pour créer une expérience Web interactive pour l’utilisateur.
à partir de là, vous devriez avoir une compréhension plus approfondie des capacités de jQuery et être sur le point d’écrire votre propre code.