Ce document présente une introduction à jQuery, une bibliothèque JavaScript qui simplifie la manipulation des éléments du DOM et la gestion des événements. Il aborde des sujets tels que l'inclusion de la bibliothèque, la syntaxe de jQuery, la sélection et la manipulation de contenu, ainsi que la réalisation de requêtes AJAX. Il fournit également des exemples pratiques pour démontrer les différentes fonctionnalités de jQuery.

1. Introduction
à
M. DIENG Abdoulaye

2. Sommaire
1. Qu’est ce que jQuery ?
a) Problématique
b) Présentation
c) Position concurrentielle
2. Préalables
a) Inclure la bibliothèque
b) Syntaxe
c) Disponibilité du DOM
3. Sélectionner du contenu
4. Manipuler des éléments
5. Mettre en forme du
contenu
6. Gérer les évènements
7. Utiliser des effets
8. Effectuer des requêtes
AJAX
2

3. Qu’est ce que jQuery ?
var d=Date.parse("Sun Jan 5 12:05:12 +0000 2014");
document.write(d);
1388923512000
1388923512000 NaN
var d= new Date("01-05-2014");
document.write(d);
Sun Jan 05 2014 00:00:00 GMT+0000 (Maroc)
Invalid Date
Sun Jan 5 00:00:00 UTC 2014
problématique
3

4. Qu’est ce que jQuery ?
présentation
• Pb : incompatibilité du Javascript entre les navigateurs
• Sol : bibliothèque permettant une spécification unique,
indépendante du navigateur
• jQuery = bibliothèque javascript open-source et cross-browser
• Créer en 2006 par John Resig
• jQuery permet de :
– manipuler la structure du contenu d’une page Web
– changer la présentation du contenu
– créer des animations
– gérer des événements
– Simplifier le dialogue client/serveur
– simplifier des commandes de JavaScript
4

5. Qu’est ce que jQuery ?
Position concurrentielle
5

6. Préalables
inclure la bibliothèque
• En local (dans le site)
– Télécharger la bibliothèque (fichier .js) à partir de
http://jquery.com/download/
– Inclure la biblio dans toute page :
<script src="chemin/vers/jquery.js"></script>
• En ligne via CDN (Content Delivery Networks) avec l’élément
script et l’attribut src valant l’une des URL suivantes :
– code.jquery.com/jquery-1.10.2.min.js
– ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
– ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js
– cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js
6

7. Préalables
syntaxe
• jQuery repose sur une seule fonction javascript nommée
jQuery() et abrégée en $().
– Elle accepte des paramètres (élément DOM, sélecteur CSS
ou fonction)
– Elle retourne l’objet appelant
– Elle est chaînable
Ex : $('#element').hide().css('color', 'red').fadeIn('slow');
• Philosophie de jQuery
$('Trouver du contenu').EnFaireQuelqueChose();
7

8. Préalables
disponibilité du DOM
• DOM (Document Object Model ) est la modélisation objet d'un
document, fournissant une interface d'accès aux différents
éléments d'un document HTML.
• Avant toute action sur une page, il faut s’assurer que son
contenu est prêt à être manipulé.
• Pour ce faire, passer le code de l’action à $(document).ready()
comme suit :
$(document).ready(function() {
// le code ici
});
• Ou plus simplement :
$(function(){
// le code ici
});
8
tp1

9. Sélectionner du contenu
présentation
• Tout contenu est sélectionné avant d’être manipulé
• Un sélecteur permet de trouver du contenu en fonction
d’identifiants, de classes, de types, d’attributs ou d’autres
sélecteurs propres au CSS ou au jQuery.
• Tout sélecteur doit être passé, entre quotes, à la fonction $().
9

10. Sélectionner du contenu
quelques sélecteurs CSS classiques
Expression Retour
elem Les balises elem.
elem bal Balises bal contenues dans une balise elem.
elem > bal Balises bal directement descendantes d’une balise elem.
elem + bal Balises bal immédiatement précédées d'une balise elem.
elem ~ bal Balises bal précédées d'une balise elem.
#nomId Balise ayant l'id "nomId".
.nomClasse Balises ayant la classe "nomClasse".
elem[attr] Balises elem dont l'attribut "attr" est spécifié.
elem[attr="val"] Balises elem dont l'attribut "attr" vaut val.
elem[attr^="val"] Balises elem dont l'attribut "attr" commence par val.
elem[attr$="val"] Balises elem dont l'attribut "attr" se termine par val.
elem[attr*="val"] Balises elem dont l'attribut "attr" contient val. 10

11. Sélectionner du contenu
sélecteurs pour formulaires
Expression Retour
:input Tout les éléments input, textarea, select et button
:button Éléments button.
:checkbox ou :radio Éléments de type checkbox ou de type radio
:checked ou :selected Éléments qui sont cochés ou sélectionnés
:radio Éléments de type radio
:image Tous les boutons de type image
:submit ou :reset Éléments de type submit ou de type reset
:text ou :password Éléments de type text ou de type password
:enabled Éléments activés
:focus Élément qui a le focus
11

12. Sélectionner du contenu
filtres
Expression Retour
elt:hidden ou elt:visible Éléments cachés ou Éléments visibles
elt:parent Éléments qui ont des éléments enfants.
elt:header Balises de titres : h1, h2, h3, h4, h5 et h6.
elt:not(s) Éléments qui ne sont pas sélectionnés par le sélecteur s.
elt:has(s) Élts qui contiennent des éléments sélectionnés par le sélecteur s.
elt:contains(t) Éléments qui contiennent du texte t.
elt:empty Éléments dont le contenu est vide.
elt:eq(n) ou elt:nth(n) Le n-ième élément, en partant de zéro.
elt:gt(n) Éléments dont l'index est plus grand que n.
elt:lt(n) Éléments dont l'index est plus petit que n.
elt:first ou elt:last Le premier élément (équivaut à :eq(0)) ou le dernier élément
elt:even ou elt:odd Éléments dont l'index est pair ou éléments dont l'index est imp1a2 ir
tp2

13. Manipuler du contenu
quelques méthodes
• html() renvoie le code HTML du contenu du 1er élément trouvé
• html(str) modifie le contenu de tout élément trouvé
• text() renvoie la valeur textuelle du contenu du 1er élément trouvé
• text(str) modifie le contenu de tout élément trouvé
• val() récupère la valeur (chaîne ou tableau de chaînes) d’un champ de
formulaire
• val(str |[str1,str2, …] ) définit la ou les valeur(s) des éléments d'un
formulaire
• prepend(str) et append(str) permettent d'ajouter un élément ou du
texte à l'intérieur de la balise.
• before(str) et after(str) permettent d'ajouter un élément ou du texte à
l'extérieur de la balise.
• attr('nomAttr') récupère la valeur d’un attribut nomAttr du 1er élément
13
• attr(‘nomAttr’,valeur) modifie la valeur d’un attribut de tout élement
tp3

14. Mettre en forme du contenu
quelques méthodes
• css('propriété') récupère la valeur d'une propriété CSS
Ex : $('h1').css('fontSize'); // retourne par exemple "19px"
• css('propriété',valeur) définit une propriété CSS
• css({prop1: val1, prop2: val2, …}) définit +sieurs propriétés CSS
Ex : $('h1').css({ 'fontSize' : '100px', 'color' : 'red' });
• addClass(str) / removeClass(str) ajoute / enlève une ou +sieurs
classes. Plusieurs classes sont séparées par des espaces.
Ex : $("p").removeClass("maClasse
taClasse").addClass("saClasse");
• width() et height() récupèrent les dimensions du 1er élément
• width(val) et height(val) définissent les dimensions de tout
élément
14

15. Gérer des événements
• Syntaxe
– nomEvent(fn) attache une fonction à l’événement nomEvent
– nomEvent() déclenche l’événement nomEvent dans le code
• Quelques événements :
focus : avoir le focus; blur : perte du focus;
change : modif du contenu; load : chargement d’un élément;
click : clic de souris; submit : soumission d’un formulaire;
• Quelques méthodes :
– bind("nomEvent1 nomEvent2 …", fn) : lie un gestionnaire à
un ou +sieurs événements pour chaque élément identifié.
– hover(fn_over, fn_out ) : appelle successivement 2 fonctions
quand la souris survole puis quitte un élément
– toggle( fn1, fn2, ... ) : appelle successivement +sieurs
fonctions à chaque fois que l'élément est cliqué
15
Tp4&5

16. Utiliser des effets
quelques méthodes de base
• show() / hide() affiche / cache les éléments en question.
• toggle() affiche l’élément s’il est caché, sinon le cache
• slideDown() déroule verticalement les éléments en question.
• slideUp() enroule verticalement les éléments en question.
• slideToggle() déroule l’élément s’il est enroulé, sinon l’enroule
• fadeIn() / fadeOut() fait apparaître / disparaître les éléments en
question en modifiant l'opacité de manière progressive.
• Ces méthodes peuvent prendre comme paramètres :
– une durée - entier (en ms) ou chaîne (normal, fast ou slow)-
– une fonction de rappel exécutée à la fin de l'animation.
16

17. Utiliser des effets
animation personnalisée
• animate(style [,durée] [,modèle] [,fonction])
– style (objet contenant des couples propriété/valeur CSS) :
style de l’élément à la fin de l’animation
– durée (entier (en ms) ou chaîne (normal, fast ou slow)) :
durée de l'animation
– modèle (chaîne (swing ou linear)) : modèle de progression
de l'animation.
– fonction : fonction de rappel à exécutée lorsque l'animation
sera terminée.
17
Tp6&7

18. Effectuer des requêtes AJAX
présentation
• AJAX (Asynchronous JavaScript and XML) : technologie qui
permet l’échange de données avec un serveur, et la mise à jour
des parties d'une page Web sans la recharger entièrement.
• $.ajax([options] ) : envoie une requête et retourne l'objet
jqXHR
• Principales options sous la forme {clef1:val1, clef2:val2, …}
– type:"GET|POST", type de requête
– url:"URL_cible", URL du script qui traitera la requête
– data:{key1:value1, key2:value2, …}, données à envoyer
• Principales méthodes de l'objet jqXHR
– .done(function(response, textStatus, jqXHR){}), invoquée en
cas de succès
– .fail(function(jqXHR, textStatus, errorThrown){}) invoquée
18

19. Effectuer des requêtes AJAX
autres outils
• $.get( url [, data ] [, success(rslt,statut,xhr) ] [, dataType ] )
raccourci de $.ajax() avec un type GET
• $.post( url [, data ] [, success(rslt,statut,xhr) ] [, dataType ] )
raccourci de $.ajax() avec un type POST
• $('selecteur').load( url [, data ] [, complete(rslt, statut, xhr) ])
– Charge des données à partir de url et place le code HTML
renvoyé dans l'élément identifié par selecteur.
– "url selecteur" permet d’affiner le contenu à charger
– complete() : fonction de rappel à exécutée lorsque les
donnée sont chargées
19
Tp8&9