jQuery permet de manipuler simplement le DOM (rechercher la signification de DOM), nous allons pouvoir modifier le code HTML d'une page, à la volée, en utilisant du JavaScript.
Pour commencer, télécharger la bibliothèque sur le site officiel (http://jquery.com/download/), cliquer sur "Download the compressed, production jQuery 2.1.4", ce qui devrait vous permettre d'enregistrer le fichier «jquery-2.1.4.min.js» (attention le numéro de version sera sans doute différent quand vous lirez ces lignes)
En vous plaçant dans votre répertoire de travail, créer un répertoire "act_jquery"
À partir du répertoire "act_jquery" créer 2 autres répertoires :
À l'aide d'un éditeur de texte, créer les 2 fichiers suivants :
index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Test jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
</body>
</html>
Ce fichier index.html devra être placé dans le répertoire "act_jquery"
script.js
jQuery(function(){
jQuery('body').append('<h1>hello world!</h1>');
});
Le fichier script.js devra se trouver dans le répertoire "javascript"
Le répertoire "act_jquery" constituera votre structure de base, à chaque fois que vous voudrez créer un nouvel exemple, il vous suffira de "copier-coller" ce répertoire "act_jquery".
Tester cet exemple en double-cliquant sur le fichier index.html
Vous avez peut-être déjà constaté l'absence de contenu entre les balises «<body> » et «</body> » : notre page ne devrait donc rien afficher.
Et pourtant, un "hello world!" est bien affiché !
Ceci est dû à la présence du code javascript contenu dans le fichier script.js, détaillons un peu ce code :
Tous les fichier javascript utilisant jQuery commenceront par "jQuery(function(){...}". Cette structure nous permet d'avoir l'assurance que le navigateur « exécute » le code HTML avant "d'exécuter" le JavaScript, ce qui, dans certains cas, est indispensable.
«jQuery('body')» : nous créons un objet jQuery à l'aide de la méthode jQuery(). Cette méthode a pour paramètre un sélecteur CSS.
Petite parenthèse, qu'est-ce qu’un sélecteur CSS ? Considérons le fichier CSS suivant :
body
{
background-color : black ;
}
p
{
margin : 10px ;
}
#maBalise
{
background-color : green ;
}
.autresBalises
{
font-size : 15px ;
}
body, p, #maBalise, et .autresBalises sont des sélecteurs CSS. Un sélecteur CSS vous permet d'identifier des balises HTML (body : la balise body, p : tous les paragraphes de la page, #maBalise : la balise ayant pour id maBalise, .autresBalises : les balises ayant pour class autresBalises).
Reprenons l'explication de l'exemple développé dans le "À faire vous-même 1.1"
«jQuery('body')» : nous permet de créer un objet jQuery qui sera "lié" à la balise body de notre code HTML.
«jQuery('body').append('<h1>hello world!</h1>')» : nous exécutons la méthode append de l'objet jQuery que nous venons de créer. La méthode «append» permet d'« ajouter» le code HTML («<h1>hello world!</h1>») à l'intérieur de la balise body.
Avant l'exécution de «jQuery('body').append('<h1>hello world!</h1>')», nous avons :
<body>
</body>
Après l'exécution de «jQuery('body').append('<h1>hello world!</h1>')» :
<body>
<h1>hello world!</h1>
</body>
le fichier index.html n'est pas modifié, seul le DOM l'est (code HTML « chargée » dans le navigateur)
À partir de maintenant nous n'écrirons plus « jQuery », mais son alias (son raccourci) : le signe $. Le code va donc devenir :
$(function(){
$('body').append('<h1>hello world!</h1>');
});