JAVASCRIPT - Jquery

Programmer en
Javascript
Mme JANJARY JIHAD
PARTIE 5 Manipuler
JQUERY
Découvrir JQUERY
Fonctions essentielles et chaînage
JQuery est une bibliothèque JavaScript open-source inventée par John Resig en 2006. Cette
bibliothèque est compatible avec les différents navigateurs web.
Le rôle de JQuery est de simplifier l'utilisation de JavaScript et la manipulation du DOM sur les site
Web. En effet, les traitements nécessitant l’écriture de nombreuses lignes de code JavaScript sont
encapsulés dans des méthodes appelées dans une seule ligne de code.
JQUERY : Installation
On peut utiliser deux manières pour utiliser JQuery dans les pages html :
Méthode 1 : Téléchargement de JQuery
Il existe deux versions de JQuery a téléchargées depuis le site https://jquery.com/download/
• Version de production : version minifiée et compressée pour la phase de l’hébergement.
• Version de développement : version non compressée et lisible, pour la phase de développement et
de tests.
La bibliothèque jQuery téléchargée correspond à un fichier JavaScript. Pour l’utiliser il faut le référencer
avec la balise <script> dans la section <head> :
Méthode 2 : JQuery via CDN (Content Delivery Network)

On peut inclure JQuery à partir d'un CDN (Content Delivery Network) sans besoin de télécharger les
fichiers.
Exemple d’utilisation de JQuery hébergé par Google :
Un document HTML type ressemble donc finalement à ceci
Syntaxe de JQUERY
La syntaxe de JQuery est basée sur les sélecteurs :
• $() est un raccourci vers la fonction jQuery() qui trouve des éléments dans une page et crée des
objets jQuery qui référencent ces éléments.
• Par exemple : $('p') et jQuery('p') : sélectionne tous les éléments p (paragraphe).
• Sélecteur correspond à sélecteur CSS pour interroger (ou rechercher) des éléments HTML.
• Action correspond à une action à effectuer sur le(s) élément(s) sélectionnés.
• Exemples :
• $(this).hide() : masque l'élément courant.
• $("p").hide() : masque tous les éléments p .
• $(".test").hide() : masque tous les éléments avec class="test".
• $("#test").hide() : masque l'élément avec id="test".
Sélection par relation
✓ Les éléments qui sont "liés" sont souvent désignés par du vocabulaire familial. Vous avez des
éléments parent, enfant, et frères dans votre structure de balises, et déterminer quel élément est
quel membre de la famille revient à déterminer la structure tout entière.
Les descendants
• $("ancêtre descendant") : sélectionne tous les éléments qui sont au sein d'un élément ancêtre
✓ Exemple : sélectionner tous les li au sein d’un ol dans la structure de balises.
• jQuery:
• HTML:
Les descendants : exemple
Sélectionner tous les descendants directs d'un élément
Parents et enfants
• $("parent > enfant") : sélectionne tous les enfants qui sont descendants immédiats d'un élément
parent (aussi appelé sélecteur combinateur d'enfant)
• Exemple : sélectionner tous les li qui descendent directement de ol
✓ jQuery:
✓ HTML:
Les jumeaux
$(élément ~ frères): sélectionne tous les frères du premier élément spécifié.
Exemple : sélectionner les frères li du premier li
✓ jQuery:
✓ HTML:
Les jumeaux
$(élément + frère) : sélectionne l'élément frère qui suit immédiatement l'élément spécifié.
Exemple : sélectionner le premier frère d’un li donné.
✓ jQuery:
✓ HTML:
Les sélecteurs
Sélecteur CSS Sélecteur jQuery Signification
ul $('ul') Les balises <ul>
ul.bleu $('ul.bleu’) La balise <ul> de classe bleu

ul#bleu $(‘ul#bleu') La balise <ul> de ID bleu
div ul $('div ul') La balise <ul> contenue dans la balise <div>
div ul li[class="pair"] $('div ul li[class="pair"]') La balise <li> contenue dans une balise <ul>,
elle- même contenue dans une balise <div>, et
dont 'attribut class vaut pair
li[class] $('li[class]') Les balises <li> qui possèdent un attribut class
li[class="impair"] $('li[class="impair"]') Les balises <li> qui possèdent un attribut class

de valeur impair
* $('*') Toutes les balises du document
Sélection par attribut
Sélecteur Signification
['nom*="valeur" '] Éléments qui possèdent un attribut nom qui contient

(partiellement ou totalement) la valeur spécifiée.
['nom~="valeur"'] Éléments qui possèdent un attribut nom qui contient
la valeur spécifiée, délimité par des espaces.
['nom$="valeur"'] Éléments qui possèdent un attribut nom qui se
termine par la valeur spécifiée.
['nom!="valeur"'] Éléments qui ne possèdent pas l'attribut nom, ou qui
possèdent un attribut nom différent de la valeur
spécifiée.
['nom^="valeur"'] Éléments qui possèdent un attribut nom qui commence par la valeur
spécifiée.
Sélection par filtre
✓ Pour les besoins des développeurs, jQuery met en place une sélection d'éléments beaucoup plus
poussée que CSS à l'aide de filtres qui ont une syntaxe particulière : deux points suivis du nom du
sélecteur.
✓ Parmi les très nombreux sélecteurs proposés par le Framework figurent ceux qui permettent de
sélectionner un élément suivant sa place sur la page :
• :first, qui sélectionnera le tout premier élément donné
• :eq(index), qui se chargera de retourner l'élément possédant l’indice spécifié
• :last, qui permettra de sélectionner le dernier élément
✓ Exemple:
❖ $('p:first'); // sélection du premier paragraphe trouvé
❖ $('p:eq(2)'); // sélection de 3ème paragraphe trouvé (l'indice commence à 0)
❖ $('a:last'); // ici, on sélectionne le dernier lien de la page
✓ :first : sélectionne la première occurrence d'un élément
✓ :last : sélectionne la dernière occurrence d'un élément
✓ :eq(indice) : sélectionne l'élément à un indice donné
✓ :gt(indice) : sélectionne le ou les élément(s) situé(s) à un indice supérieur au nombre spécifié
✓ :lt(indice) : sélectionne le ou les éléments à un indice plus petit que le nombre spécifié
✓ :not(sélecteur) : sélectionne les éléments qui ne font pas partie du sélecteur
✓ :hidden : sélectionne les éléments cachés (les éléments dont la valeur CSS display est none, qui
sont de type="hidden", ont une hauteur et une largeur nulles, ou ont un ancêtre lui-même invisible)
✓ :visible : sélectionne les éléments visibles
✓ :contains("texte") : éléments qui contiennent le texte spécifié
✓ :has("élément") : éléments qui contiennent l'élément spécifié
✓ [attribut] : éléments qui ont l'attribut spécifié, par exemple $("[align]")
✓ [attribut="valeur"] : éléments qui ont l'attribut et la valeur spécifiés, par exemple $("[align=center]")
✓ [attribut!="valeur"] : Les éléments qui n'ont pas l'attribut et la valeur spécifiés, par exemple
$("[align!=center]")
✓ :input : sélectionne les éléments input
✓ :password : sélectionne les zones de mot de passe
✓ :text : sélectionne les zones de texte
✓ :checkbox : sélectionne les cases à cocher
✓ $(":checkbox") est la même chose que $( "[type=checkbox]" ), mais le raccourci du filtre vous
permet d'en écrire moins !
✓ :radio : sélectionne les boutons d'option
✓ :submit : sélectionne les boutons de validation
Filtre HTML JQuery
:gt(indice) $("li:gt(0)")
:lt(indice) $("li:lt(2)")
:not(sélecteur) $("li:not('.legume')")
L'événement ready pour le document
✓ Les méthodes jQuery se trouvent dans l’événement ready de l’objet document qui permet
d'empêcher l'exécution du code jQuery avant la fin du chargement du document.
✓ Exemples d'actions qui peuvent échouer si les méthodes sont exécutées avant le chargement
complet du document :
• Masquer un élément qui n'est pas encore crée.
• Obtenir la taille d'une image qui n'est pas encore chargée.
Notion de chaînage
✓ Les instructions JQuery peuvent être écrites soit l'une après l'autre (dans des lignes différentes) ou
en utilisant la technique de chaînage.
✓ Le chaînage permet d'exécuter plusieurs actions JQuery l'une après l'autre (dans la même ligne),
sur le même élément.
✓ Exemple : Les méthodes css(), slideUp() et slideDown() sont appelées sur le paragraphe identifié
par l’ID « p1 ». Ainsi, l'élément "p1" devient d'abord rouge, puis il glisse
✓ vers le haut, puis vers le bas :
Notion de chaînage: Les méthodes
✓ Les effets
❖ .show() : affiche le(s) élément(s) sélectionné(s).
❖ .hide() : masque le(s) élément(s) sélectionné(s).
❖ .toggle() : affiche ou masque le(s) élément(s) sélectionné(s) en fonction de son/leur état actuel.
❖ .fadeIn() : fait apparaître en fondu le(s) élément(s) sélectionné(s).
❖ .fadeOut() : fait disparaître en fondu le(s) élément(s) sélectionné(s).
❖ .fadeTo() : amène progressivement le(s) élément(s) sélectionné(s) à une opacité donnée.
❖ .slideUp() : masque le(s) élément(s) sélectionné(s) avec un défilement vers le haut.
❖ .slideDown() : masque le(s) élément(s) sélectionné(s) avec un défilement vers le bas.
❖ .slideToggle() : affiche ou masque le(s) élément(s) sélectionné(s) avec un défilement en fonction de
son/leur état actuel.
✓ Modifier le contenu HTML
❖ .html() : retourne/modifie le code HTML stocké dans l'élément.
❖ .text() : retourne/modifie la valeur textuelle stockée dans l'élément
❖ .replaceWith() : remplace le(s) élément(s) sélectionné(s) entièrement
❖ .remove() : supprime les éléments de la page
❖ .before() : insère du contenu avant le(s) élément(s) sélectionné(s)
❖ .after() : insère du contenu après le(s) élément(s) sélectionné(s)
❖ .prepend() : insère du contenu à l'intérieur du/des élément(s) sélectionné(s) (après la balise HTML ouvrante)
❖ .append() : insère du contenu à l'intérieur du/des élément(s) sélectionné(s) (avant la balise HTML fermante
❖ .attr() : définit un attribut et sa valeur ou simplement récupère sa valeur
❖ .removeAttr() : supprime un attribut
❖ .addClass() : ajoute une nouvelle classe à/aux élément(s) sélectionné(s) (sans remplacer sa classe actuelle)
❖ .removeClass() : supprime une classe du/des élément(s) sélectionné(s)
❖ .css() : récupère ou définit les propriétés CSS d'un élément, même plusieurs propriétés à la fois
✓ Parcourir le DOM
❖ .find() : trouve un/des élément(s) correspondant au paramètre dans la sélection actuelle
❖ .parent() : accède au parent direct d'un/des élément(s) ou à ses parents si on utilise
.parents()
❖ .children() : accède aux enfants de(s) élément(s)
Les formulaires
✓ Équivalente à la propriété value en JavaScript, la méthode val() sert à manipuler le contenu

des éléments de formulaire. Elle fonctionne exactement de la même manière que text() et
n'admet aucune balise structurelle.
✓ Exemple:
• $('input').val();
// retourne le contenu de l'élément input
• $('input').val('Nouvelle valeur !');
// modifie le contenu actuel de l'élément (écrase puis écrit)
Notion de chaînage: Exemple
Supposons que nous voulions ajouter du texte dans un élément div avec l'ID "conteneur" et
changer sa couleur en rouge
Désactiver un lien href en JQUERY
La méthode removeAttr() de JQuery permet de supprimer l’attribut « href » du lien, qui devient
non cliquable
Activer un lien href en JQUERY
La méthode attr() de JQuery permet d’jouter l’attribut « href » à un lien.
Les événements en JQUERY
• Les événements DOM ont une méthode jQuery équivalente.
• Exemple d’événements:
1. 'click', function() { ... }
2. 'scroll', function() { ... }
3. 'hover', function() { ... }
4. 'mouseover', function() { ... }
5. 'mouseenter', function() { ... }
6. 'mouseleave', function() { ... }
7. 'keydown', function() { ... }
8. 'keyup', function() { ... }
9. 'keypress', function() { ... }
10. 'focus', function() { ... }
11. 'blur', function() { ... }
12. 'resize', function() { ... }
1. click : dans cet exemple, lorsque l'utilisateur clique sur le bouton "Cliquez-moi", une boîte
de dialogue s'affiche avec le message "Le bouton a été cliqué !".
2. hover : dans cet exemple, lorsque l'utilisateur survole un élément avec la souris, la couleur
d'arrière-plan de cet élément change en jaune.
Intégration de plugins existants
Intérêt des plugins
• Un plugin est un code écrit dans un fichier JavaScript standard. Il fournit des méthodes jQuery utiles qui peuvent
être utilisées avec les méthodes de la bibliothèque jQuery.
• L’installation des modules JQuery additionnels, appelés JQuery plugins permet d’étendre les fonctionnalités
offertes par JQuery et gagner en termes de rapidité du développement en réutilisant des codes existants.
Intégrer des plugins existants

• Il existe de nombreux sites proposant des plugins jQuery. Parmi ces sites, on peut utiliser le site officiel
https://jquery.com/plugins.
• Pour intégrer un plugin dans une page HTML, il faut télécharger le plugin à partir du site dédié puis le référencer
dans la page HTML.
Intégration de plugins existants
Utilisation de plugins existants
Exemple https://github.com/loebi-ch/jquery-clock-timepicker/blob/master/README.md
Exercice 1
Programmez les événements suivants :
1. En cliquant sur un bouton, affichez un message de bienvenue.
2. En cliquant dans une zone de texte, sa couleur de fond passe au jaune.
3. Soit un élément html (paragraphe, titre, …). Supprimez et ajoutez un style différent à cet élément
en utilisant JQuery. Pour cela, créez deux classes de style et appliquez par défaut une première à
un élément. En cliquant sur un bouton, changez la propriété associée des éléments à un autre style.
4. Basculer les propriétés de style de d’un élément suite à un événement de clic.
5. Créez un bouton et une zone de texte. En cliquant sur le bouton, le texte écrit dans la zone de
texte doit s'afficher sur le bouton.

JAVASCRIPT - Jquery

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

JAVASCRIPT - Jquery

Transféré par

Droits d'auteur :

Formats disponibles

Programmer en

Méthode 2 : JQuery via CDN (Content Delivery Network)

ul $('ul') Les balises <ul>

ul.bleu $('ul.bleu’) La balise <ul> de classe bleu

li[class="impair"] $('li[class="impair"]') Les balises <li> qui possèdent un attribut class

['nom*="valeur" '] Éléments qui possèdent un attribut nom qui contient

✓ Équivalente à la propriété value en JavaScript, la méthode val() sert à manipuler le contenu

Intégrer des plugins existants

Vous aimerez peut-être aussi