Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
FORMATION À JQUERY
Alain Da Silva
2017
Thomas Morin 2Formation à jQuery 2Formation à jQueryAlain Da Silva
La bibliothèque JavaScript libre jQuery
Utilise JavaScript de façon facultative et non-intrusiveDans la page HTML (<script>), on appelle la librairie jQuery, des fonctions personnalisées, et un " lanceur ".
Encourage la séparation de la forme et du contenu Les styles (fichiers .css) Les scripts (fichiers .js) Le contenu html (fichier .html avec un contenu sémantique)
Est complétée par des pluginsjQuery UI, jQuery.validate, DataTables, jQGrid…
Introduction
Thomas Morin 3Formation à jQuery 3Formation à jQueryAlain Da Silva
Interaction entre HTML et JavaScript
Parcours et modification du DOM (Document Object Model)
Manipulations des styles CSS (Cascading Style Sheets)
Gestion des événements et animations
Echange de données avec Ajax
Tout cela repose sur une fonction unique : jQuery( )
Introduction
Thomas Morin 4Formation à jQuery 4Formation à jQueryAlain Da Silva
Utilisation
Télécharger une version de jQuery sur le site officielhttp://code.jquery.com/jquery-1.12.1.min.js
Appeler le fichier .js à la fin de <body> (ou dans <head>) ... <body> … <script type="text/javascript" src="jquery-1.12.1.min.js"></script> <script type="text/javascript" src="monScript.js"></script>
</body> ...
Utiliser jQuery dans n'importe quel script JavaScript suivant l'appel
Introduction
Thomas Morin 5Formation à jQuery 5Formation à jQueryAlain Da Silva
Les objets de jQuery
Le document, la fenêtre $document = jQuery(document) $fenetre = jQuery(window)
Un nœud ou un groupe de nœuds du DOM $objet = jQuery(parametres)
Alias " $ " et encapsulation pour éviter les conflits (function ($) { $objet = $(parametres)
// $objet = jQuery(parametres) })(jQuery);
Syntaxe
Thomas Morin 6Formation à jQuery 6Formation à jQueryAlain Da Silva
Les fonctions de jQuery
Méthodes de jQuery : des fonctions comme les autres// chaine = jQuery.trim(chaine) ;
chaine = $.trim(chaine) ;
Méthodes des objets jQuery // $objet = jQuery(sélecteur) ;
$objet = $("sélecteur") ; $objet.methode(paramètres);
Bonne pratique : préfixer les objets jQuery par $
Syntaxe
Thomas Morin 7Formation à jQuery 7Formation à jQueryAlain Da Silva
Des fonctions anonymes en paramètre de fonctions
Exemple : commencer au chargement de la page // Encapsulation (function ($) {
// Méthode .ready( ) pour le document $(document).ready(function(){
// Fonction $.trim de jQuery var text = $.trim(" Mon text ") ;
// Fonction alert native de javascript alert( text ) ; }); // ferme la fonction anonyme et la méthode })(jQuery);
Syntaxe
Thomas Morin 8Formation à jQuery 8Formation à jQueryAlain Da Silva
Le même chemin qu’en CSS
Syntaxe général : var $capture = $("sélecteur")
Élément, identifiant et classe de la CSS2 var $h1 = $("h1") ; var $top = $("#top") ;
Attributs de la CSS3 var $lienSommaire = $("a[href=‘./sommaire.htm’] ") ;
Opérateurs var $suivant = $("h1 *, h2+*") ;
Pseudo-éléments var $selected = $(" option:selected ") ;
Sélection et style
Thomas Morin 9Formation à jQuery 9Formation à jQueryAlain Da Silva
Modifier les styles avec la méthode .css()
Paires de clés et de valeurs $node.css("color", "red") ; $node.css("font-style", "italic") ;
Information sur le style var color = $node.css("color");
Sélection et style
Thomas Morin 10Formation à jQuery 10Formation à jQueryAlain Da Silva
JSON : La notation d’objet en javaScript
Une écriture synthétique // Déclaration
var monJSON = { chaine : "du texte", nombre : 4, vecteur : ["a","b","c"], fonction : function(a) { alert(a) ; } }
// Appelvar maChaine = monJSON.chaine ;monJSON.fonction('bonjour') ;
Sélection et style
Thomas Morin 11Formation à jQuery 11Formation à jQueryAlain Da Silva
Modifier les styles avec la méthode .css()
JSON avec la fonction .css()var paramsCss = { color : "red", fontStyle : "italic"} ;$node.css(paramsCss) ;
//$node.css({color : "red",fontStyle:"italic"}) ;
Sélection et style
Thomas Morin 12Formation à jQuery 12Formation à jQueryAlain Da Silva
TRAVAUX PRATIQUES 1
Sélection et style
45 min
Thomas Morin 13Formation à jQuery 13Formation à jQueryAlain Da Silva
Attributs avec la méthode .attr()
Paires de clés et de valeurs $a.attr("href","../sommaire.htm") ;
Format Json $a.attr({ title: "Sommaire", href: "../sommaire.htm" }) ;
Obtenir les attributs d’un nœud var href = $lien.attr("href ") ;
Attributs, classes, contenus texte et html
Thomas Morin 14Formation à jQuery 14Formation à jQueryAlain Da Silva
Propriétés avec la méthode .prop()
S'utilise exactement comme .attr()
Exception : les attributs à « état » (checked, selected, ...)$a.attr("checked") // "checked" ou undefined$a.prop("checked") // true ou false
Meilleur sur les attributs dynamiques $a.attr("checked") // l'état initial$a.prop("checked") // l'état courant
Attributs, classes, contenus texte et html
Thomas Morin 15Formation à jQuery 15Formation à jQueryAlain Da Silva
Modifier la classe d’un élément
Ajouter ou retirer la classe d’un élément $node.addClass("nouvelle_classe") ; $node.removeClass("ancienne_classe"); $node.toggleClass("actif") ;
Information sur la classe if($objet.hasClass("ma_classe")) {
// ... Instructions ... }
Manipuler les classes ou injecter du style ?
Attributs, classes, contenus texte et html
Thomas Morin 16Formation à jQuery 16Formation à jQueryAlain Da Silva
Contenus texte et html
Insérer du contenu texte $a.text("Revenir au sommaire")
Insérer du contenu html $a.html("<strong> Revenir au sommaire </strong>")
Récupérer les contenus texte et html html = $a.html() ;
// Retourne "<strong> Revenir au sommaire </strong>" texte = $a.text() ;
// Retourne "Revenir au sommaire"
Attributs, classes, contenus texte et html
Thomas Morin 17Formation à jQuery 17Formation à jQueryAlain Da Silva
TRAVAUX PRATIQUES 2
Attributs, classes, contenus texte et html
45min
Thomas Morin 18Formation à jQuery 18Formation à jQueryAlain Da Silva
Plusieurs nœuds peuvent composer l’objet
<ul> <li>…</li> <li>…</li> </ul> <ul> <li>…</li> </ul>
Sélection des items <li> var $li = $("li") ; alert($li.length) ; // Propriété length : nombre d’item alert($li.text()) ; // Fusionne les contenus texte alert($li.html()) ; // Contenu html du premier item
Parcourir et modifier le DOM
Thomas Morin 19Formation à jQuery 19Formation à jQueryAlain Da Silva
Parcourir les nœuds d’un objet jQuery
Boucle sur les nœuds : .each() $enfants.each(function(i){ var $fils = $(this) ; // this est le nœud javascript $fils.css("color" , "red") ; })
Occurrence d’un nœud : . eq() $fils2 = $enfants.eq(1) ; // Les index commencent à 0
Retrouver le nœud « javascript » : .get() ou []tag2 = $enfants.get(1).tagName// Balise du 2nd fils // tag2 = $enfants[1].tagName
Parcourir et modifier le DOM
Thomas Morin 20Formation à jQuery 20Formation à jQueryAlain Da Silva
Parcourir les nœuds autour d’un objet jQuery
< Ancêtre > < Parent > <Frère>…</Frère > < Nœud > < Enfant > < Descendant /> </ Enfant > </ Nœud > <Frère>…</Frère > </ Parent > </ Ancêtre >
Parcourir et modifier le DOM
Thomas Morin 21Formation à jQuery 21Formation à jQueryAlain Da Silva
Des méthodes pour parcourir
Syntaxe$enfants = $parent.find("p") ;
Descendrefind(), children()
Remonterparents(), parent(), closest(), parentsUntil()
En latéralnext(), prev(), nextUntil(), prevUntil(), nextAll(), prevAll(),siblings()
Manipulerfilter(), not(), add()
Parcourir et modifier le DOM
Thomas Morin 22Formation à jQuery 22Formation à jQueryAlain Da Silva
Des méthodes pour modifier
Syntaxe $parent.append($nouvelEnfant) ;
Insérer dans un nœud à la fin/au début append(), prepend(), appendTo(), prependTo(), html()
Entourer wrap(), unWrap(), wrapInner()
Insérer après/avant un noeud after(), before(), insertAfter(), insertBefore()
Supprimer/Remplacer remove(), empty(), detach(), replaceWith()
Parcourir et modifier le DOM
Thomas Morin 23Formation à jQuery 23Formation à jQueryAlain Da Silva
Créer un élément avec jQuery() ou clone()
Créer un élément avec une chaîne de caractère $a = $("<a href='../sommaire.htm'>Sommaire</a>") ;
Création avec le JavaScript natif $a = $(document.createElement("a")) ;
$a.text("Sommaire").attr("href","../sommaire.htm") ;
Dupliquer un élément$b = $a ;$b = $a.clone() ; //on peut chainer$a.clone().appendTo("p.introduction") ;
Parcourir et modifier le DOM
Thomas Morin 24Formation à jQuery 24Formation à jQueryAlain Da Silva
Trier un tableau selon l’identifiant des lignes
$tBody = $("#tableau tbody") ;
// Capture des lignes du tableau $tBody.children("tr")
// Tri selon l’identifiant .sort(function(ligneA,ligneB) { // Fonction de tri : var valeurA = $(ligneA).attr("id") ; var valeurB = $(ligneB) .attr("id") ; return valeurA > valeurB ? 1 : -1 ; })
// Les lignes sont ajoutée à $tBody dans l’ordre de tri .appendTo($tBody) ;
Parcourir et modifier la DOM
Thomas Morin 25Formation à jQuery 25Formation à jQueryAlain Da Silva
TRAVAUX PRATIQUES 3
Parcourir et modifier la DOM
1h
Thomas Morin 26Formation à jQuery 26Formation à jQueryAlain Da Silva
Fonction déclenchée par l’évènement
Exemple avec la méthode "click" $("a").click(
// Fonction anonyme en paramètre : function() {
// Nœud courant : celui qu’on a cliqué var $noeudClique = $(this) ;
// Instruction var title = $noeudClique.attr("title"); alert(title) ; } // ferme la fonction anonyme ) // ferme la le méthode click
Évènements
Thomas Morin 27Formation à jQuery 27Formation à jQueryAlain Da Silva
Quelques évènements classiques
Chargement du DOM $(document).ready()
Modification de la taille de la fenêtre $(window).resize()
Cliquer, survoler avec la souris click(), hover(), mousemove(), mousedown(), mouseup(), ...
Clavierkeyup(), keydown(), keypress()...
Formulaires submit(), change(), focus(), blur(), select() ...
Évènements
Thomas Morin 28Formation à jQuery 28Formation à jQueryAlain Da Silva
Plusieurs fonctions comme paramètres
Survoler : événements " entrer " et " sortir " $(".pseudo-lien").hover(
// La souris arrive sur l’élément function(){
$(this).addClass("pseudo-hover") ; },
// La souris quitte l’élément function(){ $(this).removeClass("pseudo-hover") ; } ) ;
Évènements
Thomas Morin 29Formation à jQuery 29Formation à jQueryAlain Da Silva
Passer l’évènement en paramètre
Exemple avec la position du curseur
// Quand on déplace la souris $body.mousemove(function(event) {
// Event est l’évènement passé en parametre var curseurX = event.pageX ; var curseurY = event.pageY ;
// Affiche les coordonnées de la souris $p.html(curseurX + ", " + curseurY ) ; })
Utile également pour la méthode .hover()
Évènements
Thomas Morin 30Formation à jQuery 30Formation à jQueryAlain Da Silva
Valeur de retour
L’action est annulée lorsque la fonction renvoie « faux »
// Quand on soumet le formulaire $("form").submit(function(){
// Pop-up (javascript natif) : var bool = confirm("Soumettre le formulaire ?") ;
// Si bool vaut "false", le fourmulaire n’est pas soumis return bool ; });
Utile également pour la méthode .click()
Évènements
Thomas Morin 31Formation à jQuery 31Formation à jQueryAlain Da Silva
Événement personnalisé
Méthode « on »$("form").on("monEvenement",function(){ // code à executer à chaque fois que l'évènement est déclencher
});
S'utilise aussi pour tous les évènements « classiques »$("#bouton1").on("click",function(){ … })
Méthode « off » //enlève les actions attachés à l'évenement$("bouton1").off("click")
Évènements
Thomas Morin 32Formation à jQuery 32Formation à jQueryAlain Da Silva
Déclencher l’évènement
Sans fonction passée en paramètre, les méthodes déclenchent l’événement automatiquement :
// Soumet un formulaire : $("form").submit() ;
// Clique sur le premier bouton trouvé $("button").eq(0).click() ;
Évènements
Thomas Morin 33Formation à jQuery 33Formation à jQueryAlain Da Silva
Déclencher l’évènement
Possibilité de déclencher tout type événement // Déclenche un évenement personnalisé $("button").trigger("monEvenement") ;
// Déclenche un évenement classique $("button").trigger("click") ;// $("button").click() ;
Évènements
Thomas Morin 34Formation à jQuery 34Formation à jQueryAlain Da Silva
TRAVAUX PRATIQUES 4
Évènements
1h
Thomas Morin 35Formation à jQuery 35Formation à jQueryAlain Da Silva
Syntaxe des méthodes pour les animations
Exemple avec la méthode fadeOut $("h1").fadeOut(
// Paramètre (durée en milliseconde) 2000,
// Fonction déclenchée quand la transition est terminée : function(){ alert("Le titre a disparu !") ; } ) ;
Les effets
Thomas Morin 36Formation à jQuery 36Formation à jQueryAlain Da Silva
Quelques effets classiques
Jouer sur la transparence fadeIn(durée), fadeOut(durée), fadeTo(durée,opacité),
Jouer sur la hauteur slideUp(durée), slideDown(durée), slideToggle(durée)
Montrer, cacher Hide(durée), Show(durée)
Toujours la possibilité d’ajouter une fonction à exécuter à la fin de l'animation (" callback ").
Les effets
Thomas Morin 37Formation à jQuery 37Formation à jQueryAlain Da Silva
Effet personnalisé avec .animate()
Transition d’un objet vers le style que vous indiquez : $objet.animate(
// Style au format Json : { opacity : 0.5, width:"500px" },
// Durée de l’animation : 2000, function() {
// ...instructions quand c’est fini... } )
Les effets
Thomas Morin 38Formation à jQuery 38Formation à jQueryAlain Da Silva
Temporiser les effets
Arrêter l’animation en cours : $animated.stop( clearQueue, // Passé à true, vide la pile d’exécution
jumpToEnd // Passé à true, force l’animation à se terminer )
Désactiver toutes les animations : $.fx.off = true
Temporiser avec .delay() $objet.hide(2000).delay(1000).show(2000) ;
Les effets
Thomas Morin 39Formation à jQuery 39Formation à jQueryAlain Da Silva
Exemple
$objet.css("background","#c5d6e7") // Première animation
.animate( { left: "+=250" }, 1000 ) // Pause d’une seconde
.delay(1000)
// Seconde animation .animate( { left: "-=250" }, 1000 , function() {
// Quand la seconde animation est finie $(this).css("background","#e68984") })
Les effets
Thomas Morin 40Formation à jQuery 40Formation à jQueryAlain Da Silva
TRAVAUX PRATIQUES 5
Les effets
45min
Thomas Morin 41Formation à jQuery 41Formation à jQueryAlain Da Silva
Échange de données avec le serveur
Interroger le serveur sans recharger la page Ajax pour " Asynchronous JavaScript and XML "
Déclencher quand on veut la page est chargée un bouton est cliqué une option est sélectionnée …
Principale utilisation (pour cette formation) : charger un document traiter le document chargé modifier la DOM
Ajax
Thomas Morin 42Formation à jQuery 42Formation à jQueryAlain Da Silva
Méthode Ajax pour effectuer une requête HTTP
$.ajax( { url : "exemple.php", data: { name: "Alexis", prenom: "Laiho" } … //+ d'une trentaine de paramètres possibles // voir http://api.jquery.com/jQuery.ajax
}).done(function(){ ...}).fail(function(){ ...}).always(function(){ ...});
Ajax
Thomas Morin 43Formation à jQuery 43Formation à jQueryAlain Da Silva
Méthode GET pour charger un document
$.get( // URL :
"auteurs.xml.asp ",
// Paramètres : {identifiant: "auteur1" },
// Fonction exécutée quand le document est chargé : function(data) {
// data est le contenu textuel de la page $(data).each(function(){…}) ;
});
Ajax
Thomas Morin 44Formation à jQuery 44Formation à jQueryAlain Da Silva
Méthode POST pour charger un document
$.post( // URL :
"authentification.asp", // Paramètres :
{login: "mon-login", password: "mon-pwd" },
// Fonction exécutée quand le document est chargé : function(data) { if(data !== "ok" ) alert("login ou mot de passe incorrect") ; } );
Ajax
Thomas Morin 45Formation à jQuery 45Formation à jQueryAlain Da Silva
Méthode LOAD pour charger un document
Utilisable en local
Injecte le document chargé dans un conteneur $conteneur.load( "fichier.html", function() { var data = $objet.html() ;
// ...instructions... } );
Ajax
Thomas Morin 46Formation à jQuery 46Formation à jQueryAlain Da Silva
Paramètres de la fonction de retour
data (1er paramètre) : Contenu du fichier chargé sous forme de chaîne de caractère
error (2nd paramètre) : Indique la réussite du chargement
Exemple $("#success").load("/not-here.php",function(data, status) {
// Si le chargement échoue status vaut "error" if (status == "error") alert("Échec !") ;
// Data est une chaîne de caractère else alert(data) ; });
Ajax
Thomas Morin 47Formation à jQuery 47Formation à jQueryAlain Da Silva
TRAVAUX PRATIQUES 6
1h
Ajax
Thomas Morin 48Formation à jQuery 48Formation à jQueryAlain Da Silva
Utiliser des plugins
Télécharger et installer les fichiers sources
Appeler les scripts et les styles dans le header
Utiliser les plugins comme des méthodes natives de jQuery $("a").monPlugin(mesParametres)
Enjeux Bien choisir les paramètres Parfois, adapter la CSS
Plugins
Thomas Morin 49Formation à jQuery 49Formation à jQueryAlain Da Silva
Exemples de plugins (1)
Jquery UI : Grosse boîte à outils et support pour d’autres plugins : glisser/déposer,
auto-complétion, formulaires avancés... http://jqueryui.com/
dataTables :Faire des tableaux dynamiqueshttps://www.datatables.net/
Jqgrid :Autre plugin pour manipuler des donnéeshttp://jqgrid.com/
Super Scrollorama : Animations/Transitions au scroll (site 'onepage')http://johnpolacek.github.io/superscrollorama/
Plugins
Thomas Morin 50Formation à jQuery 50Formation à jQueryAlain Da Silva
Exemples de plugins (2)
Et plein d'autres sur https://plugins.jquery.com/
ou google...
Plugins
Thomas Morin 51Formation à jQuery 51Formation à jQueryAlain Da Silva
TRAVAUX PRATIQUES 7
1h
Fonctions
Thomas Morin 52Formation à jQuery 52Formation à jQueryAlain Da Silva
Des extensions de l’objet jQuery ($)
Fonctions et propriétés de jQuery $.mesProprietes = {texte:"a",nombre:22} $.maFonction = function(parametres) {
// ...Instructions... } // Exemples : $.fx.off, $.trim()
Méthodes des objets jQuery $.fn.maMethode = function (parametres) {
// ...Instructions... }) // Exemple : $.fn.prepend()
Fonctions
Thomas Morin 53Formation à jQuery 53Formation à jQueryAlain Da Silva
Grouper les extensions avec $.extend()
Fonctions et propriétés de jQuery : $.extend({ maFonction : function(parametres) {...}, mesPropriétés : {...} }); // $.maFonction = function(parametres) {…}
Méthodes des objets jQuery : $.fn.extend({ maMethode1 : function(parametres) {...}, maMethode2 : function(parametres) {...} }); // $.fn.maMethode1 = function(parametres) {…}
Fonctions
Thomas Morin 54Formation à jQuery 54Formation à jQueryAlain Da Silva
Construire des méthodes chainées
Déclaration de la fonction $.fn.maMethode = function {
// mot réservé « this », c’est un objet jQuery ! var $lesNoeuds = this ;
// Instructions, par exemple : alert ($lesNoeuds.length) ;
// La méthode retourne l’objet auquel elle s’applique return $lesNoeuds ; // return this ;}
Utilisation chaînée $objet.find(" h2 ").maMethode().autreMethode() ;
// exemple de méthodes non chaînés : .attr(" href ") ou .css(" color ") => string
Fonctions
Thomas Morin 55Formation à jQuery 55Formation à jQueryAlain Da Silva
Parcourir les nœuds de l’objet jQuery
Méthode .each() pour parcourir un à un les nœuds auxquels la méthode s’applique :
$.fn.maMethode = function () {var $lesNoeuds = this ;// boucle .each() sur les nœuds$lesNoeuds.each(function(i){
var $noeudCourant = $(this) ; //...instructions...
}) ; return $lesNoeuds ;}
Fonctions
Thomas Morin 56Formation à jQuery 56Formation à jQueryAlain Da Silva
Configuration avec $.extend(conf,options)
Les paramètres passés à la fonction écrasent les paramètres par défaut
$.fn.maMethode = function(options) { // Configuration dans un objet jSon
var confDefaut = { vitesse : 2000 , callback : function(a) { ... } } conf = $.extend(confDefaut ,options) ;
// ... Instructions en utilisant conf.vitesse, conf.callback alert(conf.vitesse) ; }
Fonctions
Thomas Morin 57Formation à jQuery 57Formation à jQueryAlain Da Silva
Canevas « classique » des méthodes
$.fn.maMethode = function(options) {
// Groupe de nœuds auxquels la méthode s’applique var $lesNoeuds = this ;
// Configuration par défaut : var confDefaut = {…} ;
// Les paramètres écrasent la configuration : var conf = $.extend(confDefaut,options) ;
// Instructions $lesNoeuds.each(function(){ ... }) ;
// Retourne le groupe de nœuds return $lesNoeuds ;}
Fonctions
Thomas Morin 58Formation à jQuery 58Formation à jQueryAlain Da Silva
Canevas « compact » des méthodes
$.fn.maMethode = function(options) { // Configuration dans un objet jSon écrit à la volée :
var conf = $.extend({ vitesse : 2000 , callback : function(a) { ... } },options) ;
// Les instructions et le retour sont chaînés : return this.each(function(){ var noeudCourant = $(this) ;
// ... Instructions })}
Fonctions
Thomas Morin 59Formation à jQuery 59Formation à jQueryAlain Da Silva
Concevoir sa fonction comme un plugin
Une fonction principale : $.fn.monPlugin = function(conf) {…}
Des paramètres par défaut : $.monPlugin.default = {...}
Des fonctions utilisée par le plugin : $.monPlugin.outil = function() {...}
Des feuilles de style associées <link rel="stylesheet" type="text/css" href="mon.plugin.css"/>
Fonctions
Thomas Morin 60Formation à jQuery 60Formation à jQueryAlain Da Silva
Des canevas prêts à l'emploi
https://jqueryboilerplate.com/
Fonctions
Thomas Morin 61Formation à jQuery 61Formation à jQueryAlain Da Silva
TRAVAUX PRATIQUES 8
Plugins
1h30
Thomas Morin 62Formation à jQuery 62Formation à jQueryAlain Da Silva
Ressources, documentation
Jquery.com
Jsfiddle.net
Stackoverflow.com
W3Schools.com
JqueryUI.com
Openclassrooms
Alsacreation
...
Ressources