TOC

Une introduction à jQuery

introduction

HTML, CSS et JavaScript sont les trois langages fondamentaux du Web. Nous structurons nos sites Web avec HTML, les stylons avec CSS et ajoutons des fonctionnalités interactives avec JavaScript. En fait, la plupart des animations et des actions résultant du clic, du survol ou du défilement d’un utilisateur sont construites avec JavaScript.

jQuery est la bibliothèque JavaScript «Write Less, Do More». Ce n’est pas un langage de programmation, mais plutôt un outil utilisé pour rendre la rédaction de tâches JavaScript communes plus concise. jQuery présente l’avantage supplémentaire d’être cross-browser compatible, ce qui signifie que vous pouvez être certain que la sortie de votre code sera rendue comme prévu dans tout navigateur moderne.

En comparant un programme simple «Hello, World!» En JavaScript et en jQuery, nous pouvons voir la différence de la façon dont ils sont écrits.

JavaScript

document.getElementById("demo").innerHTML = "Hello, World!";

jQuery

$("#demo").html("Hello, World!");

Ce court exemple montre comment jQuery peut atteindre le même résultat final qu’un JavaScript simple de manière succincte.

Buts

Ce guide ne suppose aucune connaissance préalable de jQuery et aborde les sujets suivants:

  • Comment installer jQuery dans un projet Web.

  • Les définitions des concepts de développement Web importants tels que API, DOM et CDN.

  • Sélecteurs, événements et effets jQuery communs.

  • Exemples pour tester les concepts appris tout au long de l’article.

Conditions préalables

Avant de commencer ce guide, vous aurez besoin des éléments suivants:

  • Une connaissance de base de HTML et CSS. Vous devez déjà savoir comment configurer un site Web simple et maîtriser les sélecteurs CSS tels que les identifiants, les classes et les pseudo-éléments.

  • Une compréhension des principes fondamentaux de la programmation. Bien qu’il soit possible de commencer à écrire jQuery sans une connaissance avancée de JavaScript, familiarisez-vous avec les concepts de variables et Datatypes, ainsi que https: // www. taniarascia.com/javascript-day-two/[math et logic] aidera de manière significative.

Configuration de jQuery

jQuery est un fichier JavaScript que vous lierez dans votre code HTML. Il y a deux façons d’inclure jQuery dans un projet:

  • Téléchargez une copie locale.

  • Lien vers un fichier via Content Delivery Network (CDN).

Nous utiliserons le CDN pour faire référence à jQuery dans nos exemples. Vous pouvez trouver la dernière version de jQuery dans Google’s Hosted Libraries. Si vous préférez le télécharger, vous pouvez btenir 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 répertoire + css / +, + scripts.js + dans le répertoire + js / + et d’un principal + index.html + à la racine du répertoire. projet.

project/
├── css/
|   └── style.css
├── js/
|   └── scripts.js
└── index.html

Pour commencer, créez un squelette HTML et enregistrez-le sous le nom + index.html.

index.html

<!doctype html>
<html lang="en">

<head>
 <title>jQuery Demo</title>
 <link rel="stylesheet" href="css/style.css">
</head>

<body>
</body>

</html>

Créez un lien vers le CDN jQuery juste avant la balise de fermeture + </ body> +, suivi de votre propre fichier JavaScript personnalisé, + scripts.js +.

index.html

<!doctype html>
<html lang="en">

<head>
 <title>jQuery Demo</title>
 <link rel="stylesheet" href="css/style.css">
</head>

<body>



</body>

</html>

Votre fichier JavaScript (+ scripts.js +) doit être inclus below la bibliothèque jQuery dans le document ou cela ne fonctionnera pas.

À ce stade, la bibliothèque jQuery est en cours de chargement sur votre site et vous avez un accès complet à l’API jQuery.

Utiliser jQuery

À la base, jQuery est utilisé pour se connecter aux éléments HTML du navigateur via le DOM.

Le * modèle d’objet document * (DOM) est la méthode par laquelle JavaScript (et jQuery) interagit avec le code HTML dans un navigateur. Pour voir exactement ce qu’est le DOM, dans votre navigateur Web, cliquez avec le bouton droit de la souris sur la page Web actuelle, puis sélectionnez * Inspecter *. Cela ouvrira les outils de développement. Le code HTML que vous voyez ici est le DOM.

Chaque élément HTML est considéré comme un * noeud * dans le DOM - un objet que JavaScript peut toucher. Ces objets sont organisés en arborescence, + <html> + étant plus proche de la racine, chaque élément imbriqué constituant une branche plus loin dans l’arbre. JavaScript peut ajouter, supprimer et modifier n’importe lequel de ces éléments.

Si vous cliquez à nouveau sur le site avec le bouton droit de la souris et cliquez sur * Afficher le source de la page *, vous verrez le résultat HTML brut du site Web. Au début, il est facile de confondre le DOM avec la source HTML, mais ils sont différents: la source de la page correspond 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éez le fichier + scripts.js + dans votre répertoire + js / + et tapez le code suivant:

js / scripts.js

$(document).ready(function() {
   // all custom jQuery will go here
});

Tout le code jQuery que vous écrivez sera encapsulé dans le code ci-dessus. jQuery détectera cet état de préparation, de sorte que le code inclus dans cette fonction ne sera exécuté que lorsque le DOM sera prêt à exécuter le code JavaScript. Même si, dans certains cas, JavaScript ne sera pas chargé jusqu’à ce que les éléments soient restitués, ce bloc est considéré comme la meilleure pratique.

Dans l’introduction de cet article, vous avez vu un script simple «Bonjour le monde!». Pour lancer ce script et imprimer du texte sur le navigateur avec jQuery, nous allons d’abord créer un élément de paragraphe vide au niveau du bloc auquel sera appliqué l’ID + demo +.

index.html

...
<body>


...

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 de base de jQuery suit ce format.

$("selector").method();

Puisqu’un identifiant est représenté par un symbole dièse (+ # +) en CSS, nous accéderons à l’identifiant de démonstration avec le sélecteur + # demo +. + html () + est une méthode qui modifie le code HTML d’un élément.

Nous allons maintenant placer notre programme personnalisé «Hello, World!» Dans le wrapper jQuery + ready () +. Ajoutez cette ligne à votre fichier + scripts.js dans la fonction existante:

js / scripts.js

$(document).ready(function() {

});

Une fois le fichier enregistré, vous pouvez ouvrir votre fichier + index.html dans votre navigateur. Si tout fonctionne correctement, vous verrez la sortie + Hello, World! +.

Si le DOM vous avait laissé perplexe auparavant, vous pouvez le voir en action maintenant. Cliquez avec le bouton droit sur le texte «Hello, World!» Sur la page et choisissez * Inspect Element *. Le DOM va maintenant afficher + <p id =" demo "> Hello, World! </ P> +. Si vous * View Page Source *, vous ne verrez que + <p id =" demo "> </ p> +, le HTML brut que nous avons écrit.

Sélecteurs

Les sélecteurs permettent à jQuery de savoir sur quels éléments nous voulons travailler. La plupart des sélecteurs jQuery sont identiques à ceux que vous connaissez en CSS, avec quelques ajouts spécifiques à jQuery. Vous pouvez afficher la liste complète des sélecteurs jQuery sur leurs pages de documentation officielle.

Pour accéder à un sélecteur, utilisez le symbole jQuery + $ +, suivi des parenthèses + () +.

$("selector")

Les chaînes entre guillemets sont préférées par la jQuery style guide, bien que les chaînes entre guillemets simples soient également souvent utilisées.

Vous trouverez ci-dessous un bref aperçu de certains des sélecteurs les plus couramment utilisés.

  • + $ (" * ") + - * Wildcard: * sélectionne tous les éléments de la page.

  • + $ (this) + - * Current: * sélectionne l’élément en cours d’utilisation dans une fonction.

  • + $ (" p ") + - * Tag: * sélectionne chaque instance de la balise + <p> +.

  • + $ (". exemple ") + - * Classe: * sélectionne l’élément every auquel est appliquée la classe + exemple +.

  • + $ (" # exemple ") + - * Id: * sélectionne une seule instance de l’identifiant unique + exemple +.

  • + $ (" [type = 'text'] ") + - * Attribute: * sélectionne n’importe quel élément avec + text + appliqué à l’attribut + type +.

  • + $ (" p: premier de type ") + - * Pseudo Elément: * sélectionne le premier + <p> +.

En règle générale, les classes et les identifiants sont ce que vous rencontrerez le plus souvent: les classes lorsque vous souhaitez sélectionner plusieurs éléments et les identifiants lorsque vous souhaitez en sélectionner un seul.

Événements jQuery

Dans l’exemple «Hello, World!», Le code a été exécuté dès que la page a été chargée et que le document était prêt, et n’a donc nécessité aucune interaction de l’utilisateur. Dans ce cas, nous aurions pu écrire le texte directement dans le HTML sans se soucier de jQuery. Cependant, nous aurons besoin d’utiliser jQuery si nous voulons que le texte apparaisse sur la page en un clic.

Revenez dans votre fichier + index.html et ajoutez un élément` + <button> + `. Nous allons utiliser ce bouton pour écouter notre événement clic.

index.html

...
<body>


<p id="demo"></p>

Nous allons utiliser la méthode + click () + pour appeler une fonction contenant notre code «Hello, World!».

js / scripts.js

$(document).ready(function() {

});

Notre élément + <button> + a un identifiant appelé + trigger +, que nous sélectionnons avec + $ (" # trigger ") +. En ajoutant + click () +, nous lui demandons d’écouter un événement click, mais nous ne l’avons pas encore fait. Nous allons maintenant appeler une fonction qui contient notre code, dans la méthode + click () +.

function() {
   $("#demo").html("Hello, World!");
}

Voici le code final.

js / scripts.js

$(document).ready(function() {
   $("#trigger").click(function() {


});

Enregistrez le fichier + scripts.js et actualisez` + + index.html` dans le navigateur. Maintenant, lorsque vous cliquez sur le bouton, le texte “Hello, World!” Apparaîtra.

Un * événement * correspond à tout moment où l’utilisateur interagit avec le navigateur. Cela se fait généralement avec la souris ou le clavier. L’exemple que nous venons de créer utilisait un événement de clic. Dans la documentation officielle de jQuery, vous pouvez afficher a liste complète des méthodes d’événement jQuery. Vous trouverez ci-dessous un bref aperçu des méthodes d’événement les plus couramment utilisées.

  • + click () + - * Click: * s’exécute en un seul clic de souris.

  • + hover () + - * Hover: * est exécuté lorsque la souris survole un élément. + mouseenter () + et + mouseleave () + s’appliquent uniquement à la souris qui entre ou sort d’un élément, respectivement.

  • + submit () + - * Submit: * est exécuté lorsqu’un formulaire est soumis.

  • + scroll () + - * Scroll: * s’exécute lorsque l’écran défile.

  • + keydown () + - * Keydown: * est exécuté lorsque vous appuyez sur une touche du clavier.

Pour que les images s’animent ou se fondent au fur et à mesure qu’un utilisateur fait défiler l’écran, utilisez la méthode + scroll () +. Pour quitter un menu à l’aide de la touche + ESC +, utilisez la méthode + keydown () +. Pour créer un menu accordéon déroulant, utilisez la méthode + click () +.

Comprendre les événements est essentiel pour créer du contenu de site Web dynamique avec jQuery.

Effets jQuery

jQuery effects travaillent main dans la main avec les événements en vous permettant d’ajouter des animations et de manipuler des éléments de la page.

Nous allons faire un exemple où nous ouvrons et fermons une superposition popup. Bien que nous puissions utiliser deux identifiants - un pour ouvrir la superposition et un autre pour la fermer -, nous utiliserons plutôt une classe pour ouvrir et fermer la superposition avec la même fonction.

Supprimez les balises + <button> + et + <p> + actuelles du corps de votre fichier + index.html et ajoutez les éléments suivants à votre document HTML:

index.html

...
<body>





...

Dans notre fichier + style.css +, nous utiliserons une quantité minimale de CSS pour masquer le + superposition + avec + display: none + et le centrer à l’écran.

css / style.css

.overlay {
 display: none;
 position: fixed;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 height: 200px;
 width: 200px;
 background: gray;
}

De retour dans le fichier + scripts.js +, nous allons utiliser la méthode + toggle () +, qui bascule la propriété CSS + display + entre + none + et + block +, masquant et montrant la superposition lorsque vous cliquez dessus.

js / scripts.js

$(document).ready(function() {



});

Actualiser + index.html. Vous pourrez maintenant basculer la visibilité du modal en cliquant sur les boutons. Vous pouvez modifier + toggle () + en + + fadeToggle () + ou + slideToggle () + pour afficher quelques autres effets jQuery intégrés.

Vous trouverez ci-dessous un bref aperçu des méthodes d’effet les plus couramment utilisées.

  • + toggle () + - * Toggle: * change la visibilité d’un élément ou des éléments. + show () + et + hide () + sont les effets unidirectionnels associés.

  • + fadeToggle () + - * Fade Toggle: * change la visibilité et anime l’opacité d’un élément ou des éléments. + fadeIn () + et + fadeOut () + sont les effets unidirectionnels associés.

  • + slideToggle () + - * * Slide Toggle * active ou désactive la visibilité d’un ou de plusieurs éléments avec un effet de glissement. + slideDown () + et + slideUp () + sont les effets unidirectionnels associés.

  • + animate () + - * Animate * 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 qu’un clic sur un bouton, et nous utilisons des effets jQuery pour manipuler davantage les éléments une fois cette action effectuée.

Conclusion

Dans ce guide, nous avons appris à sélectionner et à manipuler des éléments avec jQuery et à comprendre comment les événements et les effets fonctionnent ensemble pour offrir une expérience Web interactive à l’utilisateur.

À partir de là, vous devriez avoir une meilleure compréhension des capacités de jQuery et être sur votre chemin pour écrire votre propre code.

Related