Introduction 
à 
M. DIENG Abdoulaye
Sommaire 
1. Qu’est ce que jQuery ? 
a) Problématique 
b) Présentation 
c) Position concurrentielle 
2. Préalables 
a) Inc...
Qu’est ce que jQuery ? 
var d=Date.parse("Sun Jan 5 12:05:12 +0000 2014"); 
document.write(d); 
1388923512000 
13889235120...
Qu’est ce que jQuery ? 
présentation 
• Pb : incompatibilité du Javascript entre les navigateurs 
• Sol : bibliothèque per...
Qu’est ce que jQuery ? 
Position concurrentielle 
5
Préalables 
inclure la bibliothèque 
• En local (dans le site) 
– Télécharger la bibliothèque (fichier .js) à partir de 
h...
Préalables 
syntaxe 
• jQuery repose sur une seule fonction javascript nommée 
jQuery() et abrégée en $(). 
– Elle accepte...
Préalables 
disponibilité du DOM 
• DOM (Document Object Model ) est la modélisation objet d'un 
document, fournissant une...
Sélectionner du contenu 
présentation 
• Tout contenu est sélectionné avant d’être manipulé 
• Un sélecteur permet de trou...
Sélectionner du contenu 
quelques sélecteurs CSS classiques 
Expression Retour 
elem Les balises elem. 
elem bal Balises b...
Sélectionner du contenu 
sélecteurs pour formulaires 
Expression Retour 
:input Tout les éléments input, textarea, select ...
Sélectionner du contenu 
filtres 
Expression Retour 
elt:hidden ou elt:visible Éléments cachés ou Éléments visibles 
elt:p...
Manipuler du contenu 
quelques méthodes 
• html() renvoie le code HTML du contenu du 1er élément trouvé 
• html(str) modif...
Mettre en forme du contenu 
quelques méthodes 
• css('propriété') récupère la valeur d'une propriété CSS 
Ex : $('h1').css...
Gérer des événements 
• Syntaxe 
– nomEvent(fn) attache une fonction à l’événement nomEvent 
– nomEvent() déclenche l’évén...
Utiliser des effets 
quelques méthodes de base 
• show() / hide() affiche / cache les éléments en question. 
• toggle() af...
Utiliser des effets 
animation personnalisée 
• animate(style [,durée] [,modèle] [,fonction]) 
– style (objet contenant de...
Effectuer des requêtes AJAX 
présentation 
• AJAX (Asynchronous JavaScript and XML) : technologie qui 
permet l’échange de...
Effectuer des requêtes AJAX 
autres outils 
• $.get( url [, data ] [, success(rslt,statut,xhr) ] [, dataType ] ) 
raccourc...
Prochain SlideShare
Chargement dans…5
×

Introduction au Jquery

505 vues

Publié le

.

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
505
Sur SlideShare
0
Issues des intégrations
0
Intégrations
12
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction au Jquery

  1. 1. Introduction à M. DIENG Abdoulaye
  2. 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. 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. 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. 5. Qu’est ce que jQuery ? Position concurrentielle 5
  6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×