Introduction à JQuery

L'intérêt de JQuery est de rendre plus simple l'usage de JavaScript.

Pour commencer à étudier JQuery il est très fortement recommandé d'avoir des connaissances de base en :

Qu'est ce que JQuery ?

JQuery est une bibliothèque Javascript dite "lightweight" : write less, do more (écrivez moins, faites plus).

jQuery permet de réaliser en une seule ligne de code de nombreuses tâches qui nécessite plusieurs lignes de code JavaScript.

JQuery simplifie également un grand nombre de choses comme les appels AJAX et la manipulation du DOM.

Fonctionnalités de la bibliothèque JQuery :

manipulation HTML/DOM
manipulation CSS
Méthodes et évènements HTML
Effets et animations
AJAX
...

Même si il existe d'autres bibliothèques JavaScript, JQuery est la plus populaire et est largement utilisé par les géants du Web (Google, Microsoft,...).

Comment ajouter JQuery à vos pages Web ?

Il y a deux possibilités :

Télécharger la bibliothèque JQuery depuis le site jquery.com
Inclure JQuery depuis un site externe

Télécharger la bibliothèque JQuery

Il y a deux versions de la librairie JQuery :

Version de production : A utiliser pour les sites Web qui sont en production car elle est minimisée et compressée
Version de développement : A utiliser pour les tests et les sites en cours de développement (non compressée et le code est lisible)

Les deux versions peuvent être téléchargées depuis le site officiel JQuery

La library JQuery est un fichier JavaScript qu'il suffit d'inclure dans le <head> de votre page web avec la balise HTML <script> :

Le fichier "jquery-3.6.0.min.js" doit être dans le même dossier que les pages dans lesquelles vous voulez l'utiliser, si vous le mettez dans un autre dossier, veillez à préciser le bon chemin.

Inclure JQuery depuis un site externe

Si vous ne voulez pas télécharger et héberger JQuery vous même, vous pouvez l'inclure depuis le site de Google ou celui de Microsoft :

La syntaxe JQuery

Avec JQuery vous sélectionnez des éléments HTML et réalisez des actions sur eux. La syntaxe de base est :

$(selecteur).action()

$ est le marqueur de JQuery
(selecteur) pour sélectionner les éléments HTML
action() action à réaliser sur les éléments

Exemples de sélecteurs :

$(this).hide() // Masque l'élément courant
$("p").hide() // Masque tous les éléments <p>
$(".test").hide() // Masque tous les éléments dont la class est "test"
$("#test").hide() // Masque tous l'élément dont l'id est "test"

L'évènement

Il est nécessaire d'attendre que la page Web soit complètement chargée avant d'exécuter du code JQuery.

Il y a deux syntaxes possibles :

$(document).ready(function() {

// Placer le code JQuery ici...

});

ou

$(function() {

// Placer le code JQuery ici...

});

Premier code JQuery

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Premier code JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>Bonjour, nous sommes le <span id="laDate"></span>.</p>

<script>
$(function() { // On attend que la page soit complètement chargée (Document Ready)

function rafraichir() {// Définition de la fonction "rafraichir()"
var d = new Date(); // Création d'un nouvel objet date nommé d
$("#laDate").text(d.toLocaleDateString() + ', il est ' + d.toLocaleTimeString());
}

// Cette partie du code est appelée une seule fois après le chargement de la page
rafraichir();
setInterval(rafraichir, 1000); // La fonction rafraichir() sera appelée toutes les 1000ms
});
</script>
</body>
</html>

Enregistrer ce fichier sous le nom "JQuery_01.html" et l'ouvrir avec un navigateur Web.

Remarques

On peut voir qu'il est possible de mélanger le JQuery et le JavaScript : normal, JQuery est une bibliothèque JavaScript.
Il est possible de faire la même chose uniquement en JavaScript. Ici la sélection de la balise "laDate" est plus simple avec JQuery (en JavaScript il aurai fallu utiliser getElementById.

JQuery et AJAX

AJAX permet d'échanger des données entre une page Web et un serveur et de mettre à jour des parties de la page sans recharger la page entière.

AJAX = Asynchronous JavaScript and XML.

Exemples d'applications WEB utilisant AJAX : Gmail, Google Maps, Youtube, Facebook,...

jQuery fournit plusieurs méthodes pour utiliser AJAX.

Avec les méthodes AJAX de JQuery, vous pouvez demander à un serveur distant du texte, du html ou du JSON en utilisant soit HTTP Get, soit HTTP Post. Une fois que le contenu reçu, il peut être directement utilisé pour être intégré dans l'élément sélectionné de votre page Web.

Deuxième code JQuery

Dans Notepad++, créer un nouveau fichier et taper le code suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Deuxième code JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p id="p1">Un premier paragraphe.</p>
<p id="p2">Un deuxième paragraphe.</p>
<p id="p3">Un troisième paragraphe.</p>

<button>Lire fichier externe</button>

<script>
$(function() { // On attend que la page soit complètement chargée (Document Ready)

$("button").click(function(){ // Code exécuté lors du clic sur le bouton
$("#p2").load("test-ajax.txt");
});

$("html").mousemove(function(event){// Code exécuté si on bouge la souris au dessus de la page
$("#p3").html("Position de la souris : X" + event.pageX + " / Y" + event.pageY);
});
});
</script>
</body>
</html>

Enregistrer ce fichier sous le nom "JQuery_02.html" et l'ouvrir avec un navigateur Web. Enregistrer le fichier "test-ajax.txt" dans le même dossier que "JQuery_02.html".

Remarques

La méthode load() charge le fichier depuis le serveur Web et met le contenu du fichier dans l'élément sélectionné (#p2 : le paragraphe dont l'id est p2).
Seul l'élément sélectionné est mis à jour, pas besoin de recharger complètement la page.
L'opérateur + permet de concaténer du texte.

Articles connexes

Vous avez apprécié cet article ? Partagez le !