TP2 – Introduction à jQuery et aux plugins
A. Introduction
jQuery est un ensemble de fonctions JavaScript encapsulées dans un seul et unique fichier
appelé généralement jquery???.js (où ??? est la version de jquery) Il s’agit d’une bibliothèque
gratuite et dont le code source est modifiable
Dans ce TP on a va remplacer le traitement JavaScript du TP précédent et on va refaire le
traitement en utilisant jQuery quand c’est possible.
Récupérer le fichier « exemple-2.html » : il s’agit du résultat final du TP précédent
B. Bouton 1 : Modifier la taille du titre
Supprimer le contenu de la fonction en question et saisir le code suivant :
function augmenter_titre()
{
$("#titre").css("font-size", "28px");
}
Tester le script : Est-ce ça fonctionne ? ____ Afficher la console et lire le message d’erreur.
Qu’est ce que ça veut dire ?
___________________________________________________________________
Il faut donc inclure le fichier jquery ???.js dans le document en utilisant la base <script
src=’…’></script> Modifier le code HTML, enregistrer et vérifier que tout fonctionne bien
Explications du traitement jquery :
- Le « $ » permet de faire appel à jQuery
- Le « # » indique que ce qui suit est un identifiant
- « .css() » est une méthode (fonction) de jquery, elle indique qu’on va modifier (ou
récupérer) une propriété CSS :
o Le 1er paramètre est la propriété en question
o Le 2ème paramètre est généralement optionnel :
S’il est vide, donc on va récupérer la valeur de l’attribut
Sinon on va modifier la valeur de l’attribut (ici on va définir la taille à 28px
jQuery se base sur les sélecteurs CSS :
- « #x » désigne un élément dont l’identifiant est « x » : <…id=’x’…>
- « x » désigne un ou TOUS les éléments de type <x …>
- « .x » désigne un ou TOUS les éléments dont la casse est « x » : <… class=’x’…>
En utilisant les données ci-dessous, remplacer le contenu de chaque fonction afin de ne plus
utiliser les instructions comme « document… » ou « getElement… » :
1. var a = $("span").length; a est la taille du tableau, donc le nombre de span.
2. $("span").css("font-size", "18px") ; Change la taille de TOUS les spans
3. $("span:even").css("font-size", "18px") ; Change la taille de TOUS les
spans pairs
4. L’opposé de « even » est « odd »
5. La fonction (méthode) .hide() permet de cacher un élément
1 TP2 – Introduction à jquery et aux plugins changuelSami.wordpress.Com
6. La fonction .append() permet d’ajouter n’importe quoi (texte, html, objet…) à un
élément
7. var c = $("#nom").val() récupérer le contenu de l’input dont l’identifiant est
« nom »
8. $(…).html() récupère ou modifie le contenu HTML de l’élément sélectionné
9. $(…).text() même principe que .html() mais s’applique au contenu textuel (c-a-d en
supprimant tout ce qui est HTML)
10.Quand un sélecteur retourne un tableau, il faut utiliser la méthode .eq(i) pour accéder à
l’élément n° i (voir exemple ci-dessous)
Exp : Afficher le contenu HTML de tous les span du document :
var t = $("span") ;
for (i=0; i<t.length; i++)
alert ( t.eq(i).html() );
C. Les plugins jquery
Concernant le dernier bouton (recherche d’un mot et le mettre en couleur de fond), est-ce
qu’il y a une différence (en terme de complexité) entre la méthode normale et l’utilisation de
jquery ? ______
C’est ici qu’on verra l’intérêt des plugins ! jquery.highlight est un plugin jquery qui - en une
seule instruction – remplace tout le traitement qu’on vient de faire.
1. Création d’une nouvelle classe CSS
Créer une nouvelle classe CSS dont le nom est « highlight » ATTENTION : il faut respecter ce
nom. Appliquer une couleur de fond pour cette classe (et si vous voulez d’autres style : gras,
taille police …)
2. Appel du plugin
Le fichier du plugin est « jquery.highlight.js » (à récupérer depuis le dossier partagé si vous ne
l’avez pas), il faut donc inclure ce fichier dans le document HTML. ATTENTION : le plugin
dépend de jquery, son intégration doit obligatoirement se faire APRES celui de jquery sinon
ça ne fonctionnera pas !
3. Modification du traitement de la fonction de recherche
Supprimer le contenu de la fonction chercher() et traduire le pseudo-algorithme suivant :
function chercher()
{
Récupérer le mot à chercher
Appliquer la méthode highlight() à tous les paragraphes et lui passer en
paramètre le mot à mettre en évidence : $(___)._________(___);
}
Sauvegarder et tester la page, si ça ne fonctionne pas afficher la console Firefox et corriger
les erreurs.
4. Bug
Faire une recherche d’un mot, ensuite faire une recherche d’un autre mot différent : on
remarque que l’ancien mot est encore mis en évidence ! Pour corriger ce bug il faut utiliser la
méthode unhighlight()
2 TP2 – Introduction à jquery et aux plugins changuelSami.wordpress.Com
