Formations à l'informatique et à l'électronique

Auteur : SD
Créé le : 30-08-2017

Introduction à JQuery

Logo 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 :

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

Il y a deux versions de la librairie JQuery :

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> :

<head>
<script src="jquery-3.2.1.min.js"></script>
</head>

Le fichier "jquery-3.2.1.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 :

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

ou

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>

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()

Exemples:

$(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 "Document Ready"

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.2.1/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

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 HTP 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.2.1/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

Articles connexes

Premiers pas en HTML
Premiers pas en CSS
Introduction au JavaScript
Le nom des couleurs en HTML
Codage des caractères spéciaux en HTML

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

Article connexe : Introduction au Javascript