La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Xavier Tannier jQuery. Programmation Web jQuery Xavier Tannier Introduction Prérequis : – XHTML – CSS – Javascript Contenu : présentation.

Présentations similaires


Présentation au sujet: "Xavier Tannier jQuery. Programmation Web jQuery Xavier Tannier Introduction Prérequis : – XHTML – CSS – Javascript Contenu : présentation."— Transcription de la présentation:

1 Xavier Tannier jQuery

2 Programmation Web jQuery Xavier Tannier Introduction Prérequis : – XHTML – CSS – Javascript Contenu : présentation rapide de jQuery, le principal framework JavaScript 2

3 Programmation Web jQuery Xavier Tannier Quest-ce que le framework jQuery ? Une librairie légère pour Javascript Une simplification de nombreuses procédures Javascript : – Manipulation déléments HTML / DOM – Manipulation de propriétés CSS – Gestion des événements – Animations, effets, – AJAX – Autres. Des plugins (jQuery UI, etc.) 3

4 Programmation Web jQuery Xavier Tannier Comment utiliser jQuery ? On le télécharge sur jquery.com (version pour mobile sur Et on le déclare : Ou on lutilise directement en ligne HTML HTML 4

5 Programmation Web jQuery Xavier Tannier Comment utiliser jQuery ? // Cache lélément courant. $(this).hide() Javascript // Cache tous les éléments $("p").hide() $(sélecteur).action() // Cache tous les éléments ayant class="test" $(".test").hide() // Cache tous les éléments ayant id="test" $("#test").hide() 5

6 Programmation Web jQuery Xavier Tannier Comment utiliser jQuery ? // Quand on clique sur le boutton #button_id, // lélément #p_id est masqué $("#button_id").click(function(){ $("#p_id").hide(); }); Javascript // On charge souvent les définitions de fonctions // quand le document est prêt, pour éviter dagir // sur des éléments nexistant pas encore $(document).ready(function(){ $("#button_id").click(function(){ $("#p_id").hide(); }); $(sélecteur).action() 6

7 Programmation Web Xavier Tannier jQuery Exemples // Sélectionne tous les éléments $("*") // Sélectionne lélément HTML courant $(this) // Sélectionne tous les éléments // ayant un attribut « href » $("[href]") // Sélectionne tous les // éléments ayant // lattribut target="_blank" $("a[target='_blank']") // Sélectionne les éléments // ayant class="intro" $("p.intro") // Sélectionne le premier élément $("p:first") // Sélectionne le premier // de chaque $("ul li:first-child") // Sélectionne tous les // et les éléments (input) // ayant le type="button" $(":button") 7

8 Programmation Web Xavier Tannier jQuery Les événements // Quand on clique sur un élément, // la fonction se déclenche $("p").click(function(){ // contenu de la fonction }); // Quand on clique sur un élément, // la fonction se déclenche $("p").click(fonction_predefinie); Tous les événements de Javascript sont traités, par exemple : clickkeypresssubmitload dblclickkeydownchangeresize mouseenterkeyupfocusscroll mouseleave blurunload 8

9 Programmation Web Xavier Tannier jQuery Les effets (1/2) // On cache lélément #id $("#id").hide(); // On montre lélément #id $("#id").show(); // On cache progressivement // lélément #id $("#id").fadeOut(); // On inverse progressivement // laffichage de lélément #id $("#id").fadeToggle(); // On cache lélément #id // dans 1 seconde $("#id").hide(1000); // On inverse laffichage // de lélément #id $("#id").toggle(); // On montre progressivement // lélément #id $("#id").fadeIn(); // On change en 2 secondes // lopacité de lélément #id // jusquà la valeur 0.15 $("#id").fadeTo(2000, 0.15); // On change « lentement » // lopacité de lélément #id // jusquà la valeur 0.15 $("#id").fadeTo("slow", 0.15); 9

10 Programmation Web Xavier Tannier jQuery Les effets (2/2) // On montre lélément #id // en le faisant glisser $("#id").slideDown(); // On cache lélément #id // en le faisant glisser $("#id").slideUp(); // On change progressivement les // propriétés de lélément // jusquà ce quil arrive aux // propriétés spécifiés // (valeurs absolues) $("#id").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); // (valeurs relatives) $("#id").animate({ left:'250px', height:'+=150px', width:'+=150px' }); // On change laffichage // de lélément #id // en le faisant glisser $("#id").slideToggle(); // On arrête les animations concernant lélément $("#id").stop(); 10

11 Programmation Web Xavier Tannier jQuery Manipulation de larbre DOM (1/2) // Renvoie le contenu textuel // de lélément $("#id").text() // Modifie le contenu textuel // de lélément $("#id").text("texte") // Renvoie la valeur dun // élément (par exemple, // champ de formulaire) $("#id").val() // Modifie la valeur dun // élément (par exemple, // champ de formulaire) $("#id").val("valeur") // Renvoie le contenu HTML // de lélément $("#id").html() // Modifie le contenu HTML // de lélément $("#id").html("texte HTML") // Renvoie la valeur dun // attribut délément $("#id").attr("href") // Modifie la valeur dun // attribut délément $("#id").attr("href", "http://...") 11

12 Programmation Web Xavier Tannier jQuery Manipulation de larbre DOM (2/2) // Ajoute du texte à la // fin de lélément $("#id").append("texte") // Ajoute du texte au // début de lélément $("#id").prepend("texte") // Supprime les éléments // ayant la classe « className » $("p").remove(".className") // Supprime lélément $("#id").remove() // Vide lélément $("#id").empty() 12

13 Programmation Web Xavier Tannier jQuery Manipulation de CSS // Ajoute la classe // « className » à lélément $("#id").addClass("className") // Enlève la classe // « className » à lélément $("#id").removeClass("className") // Renvoie la valeur dune // propriété CSS de lélément $("#id").css("color") // Modifie la valeur dune // propriété CSS de lélément $("#id").css("color", "#000000") // Ajoute ou enlève la classe // « className » à lélément // (selon la situation précédente) $("#id").toggleClass("className") // Renvoient/Modifient les // diverses valeurs de taille // de lélément $("#id").width() $("#id").heigth() $("#id").innerWidth() $("#id").innerHeigth() $("#id").outerWidth() $("#id").outerHeigth() 13

14 Programmation Web jQuery Xavier Tannier Pour aller plus loin 14


Télécharger ppt "Xavier Tannier jQuery. Programmation Web jQuery Xavier Tannier Introduction Prérequis : – XHTML – CSS – Javascript Contenu : présentation."

Présentations similaires


Annonces Google