Plan. Introduction Concepts de base. Filtrage. 1 jquery. 2 Les sélecteurs. 3 Les événements. jquery Les sélecteurs Les événements

Transcription

1 Plan Introduction Concepts de base 1 Introduction Concepts de base 2 3

2 Principe Introduction Concepts de base est une bibliothèque JavaScript qui a pour but de soulager le développeur des tâches fastidieuses de gestion de compatibilité inter-navigateurs, ainsi que de lui fournir des effets classiques clef en main.

3 Utilisation I Introduction Concepts de base Chargement de la bibliothèque (disponible sur Il suffit ensuite de l incorporer à l aide d un élément script dans l entête du document HTML : <script type="text/javascript" href="cheminrelatifverslefichier.js"></script> Le script doit être présent sur le serveur afin de limiter les risques de rejet du code lié à la protection contre les scripts inter-domaines.

4 Utilisation II Introduction Concepts de base Lancement au chargement de la page : méthode ready $(document).ready(gestionnairealancer) Par exemple : $(document).ready(function(){...}) ou encore : $(document ). ready(mongestionnaire) ; function MonGestionnaire(evt) {... } Il suffit de placer cette ligne de code entre les balises <script> et </script> dans l entête du document HTML.

5 Plan Introduction Concepts de base 1 Introduction Concepts de base 2 3

6 Concepts de base I Introduction Concepts de base Sélection d éléments (...)ou $(...) $("p") = document.getelementbytagname("p") ; $(".menu") sélectionne les balises de classe ".menu" $("#info") =>document.getelementbyid("info") ; $("#info") > li") sélectionne toutes les balises enfants <li> de la balise d id "#info" Les fonctions $(selecteur).fonction() ; exécute la fonction sur le sélecteur $(selecteur).fonction1().fonction2().fonction3() ; exécute les fonctions dans l ordre

7 Concepts de base II Introduction Concepts de base exemple : Modifier un style : $("p").css("color","red") ; document.getelementbyid("info").style.color="red" ; Récupérer le texte d un élément div $("#info").text() ; document.getelementbyid("info").firstchild.nodevalue ; Récupérer la valeur d un champ <input> d id "nom" $("#nom").val() ; document.getelementbyid("nom").value ;

8 Ensemble d expressions permettant de désigner les éléments du document. Il existe plusieurs types : Basic, Hiérarchie, Attribut, Filtres Basic Hiérarchie Attribut Filtres Tous les sélecteurs retournent un tableau d éléments.

9 Sélecteur de base La fonction $ (ou ) permet de sélectionner directement des éléments. se basent sur les sélecteurs CSS et XPath : $("#ident") : élément d identifiant ident ; équivalent à document.getelementbyid("ident") $("nomélément") : éléments portant de nom nomelement (équivalent à document.getelementbytagname("ident")). Par exemple, $("table") sélectionne tous les éléments table du document. $(".uneclasse") : éléments de classe uneclasse, i.e. tous ceux pour lesquels l attribut class vaut uneclasse. De même, $(".truc.machin") sélectionne les éléments portant les classes truc et machin. $(" ") : tous les éléments. Remarque : dans certains cas, c est un tableau que l on obtiendra. La taille de ce tableau est évidemment disponible grâce à la propriété

10 Sélecteur de base La fonction $ (ou ) permet de sélectionner directement des éléments. se basent sur les sélecteurs CSS et XPath : $("#ident") : élément d identifiant ident ; équivalent à document.getelementbyid("ident") $("nomélément") : éléments portant de nom nomelement (équivalent à document.getelementbytagname("ident")). Par exemple, $("table") sélectionne tous les éléments table du document. $(".uneclasse") : éléments de classe uneclasse, i.e. tous ceux pour lesquels l attribut class vaut uneclasse. De même, $(".truc.machin") sélectionne les éléments portant les classes truc et machin. $(" ") : tous les éléments. Remarque : dans certains cas, c est un tableau que l on obtiendra. La taille de ce tableau est évidemment disponible grâce à la propriété

11 Sélecteur de base La fonction $ (ou ) permet de sélectionner directement des éléments. se basent sur les sélecteurs CSS et XPath : $("#ident") : élément d identifiant ident ; équivalent à document.getelementbyid("ident") $("nomélément") : éléments portant de nom nomelement (équivalent à document.getelementbytagname("ident")). Par exemple, $("table") sélectionne tous les éléments table du document. $(".uneclasse") : éléments de classe uneclasse, i.e. tous ceux pour lesquels l attribut class vaut uneclasse. De même, $(".truc.machin") sélectionne les éléments portant les classes truc et machin. $(" ") : tous les éléments. Remarque : dans certains cas, c est un tableau que l on obtiendra. La taille de ce tableau est évidemment disponible grâce à la propriété

12 Sélecteur de base La fonction $ (ou ) permet de sélectionner directement des éléments. se basent sur les sélecteurs CSS et XPath : $("#ident") : élément d identifiant ident ; équivalent à document.getelementbyid("ident") $("nomélément") : éléments portant de nom nomelement (équivalent à document.getelementbytagname("ident")). Par exemple, $("table") sélectionne tous les éléments table du document. $(".uneclasse") : éléments de classe uneclasse, i.e. tous ceux pour lesquels l attribut class vaut uneclasse. De même, $(".truc.machin") sélectionne les éléments portant les classes truc et machin. $(" ") : tous les éléments. Remarque : dans certains cas, c est un tableau que l on obtiendra. La taille de ce tableau est évidemment disponible grâce à la propriété

13 Sélecteur de base La fonction $ (ou ) permet de sélectionner directement des éléments. se basent sur les sélecteurs CSS et XPath : $("#ident") : élément d identifiant ident ; équivalent à document.getelementbyid("ident") $("nomélément") : éléments portant de nom nomelement (équivalent à document.getelementbytagname("ident")). Par exemple, $("table") sélectionne tous les éléments table du document. $(".uneclasse") : éléments de classe uneclasse, i.e. tous ceux pour lesquels l attribut class vaut uneclasse. De même, $(".truc.machin") sélectionne les éléments portant les classes truc et machin. $(" ") : tous les éléments. Remarque : dans certains cas, c est un tableau que l on obtiendra. La taille de ce tableau est évidemment disponible grâce à la propriété

14 Sélecteur de base La fonction $ (ou ) permet de sélectionner directement des éléments. se basent sur les sélecteurs CSS et XPath : $("#ident") : élément d identifiant ident ; équivalent à document.getelementbyid("ident") $("nomélément") : éléments portant de nom nomelement (équivalent à document.getelementbytagname("ident")). Par exemple, $("table") sélectionne tous les éléments table du document. $(".uneclasse") : éléments de classe uneclasse, i.e. tous ceux pour lesquels l attribut class vaut uneclasse. De même, $(".truc.machin") sélectionne les éléments portant les classes truc et machin. $(" ") : tous les éléments. Remarque : dans certains cas, c est un tableau que l on obtiendra. La taille de ce tableau est évidemment disponible grâce à la propriété

15 Sélecteurs hiérarchiques $("ancestor descendant)" : tous les éléments descendants correspondants à descendant de l élément ancestor. $("parent > child)" : tous les fils correspondants à child des éléments spécifiés par parent. $("prev + next") : tous les éléments correspondants à next après les éléments spécifiés par prev. $("prev siblings") : tous les frères des éléments spécifiés par prev correspondants au sélecteur siblings.

16 Sélecteurs : formulaire :input : tous les éléments de saisie : textarea, select et button. :text : tous les champs de texte. :password : les champs de mots de passe. :submit : les éléments d envois. :button : les boutons. :hidden : les éléments cachés.

17 Plan 1 Introduction Concepts de base 2 3

18 sur l arborescence :first / :last : le premier/dernier élément d une collection. Par exemple, $(".truc :last") sélectionne le dernier élément de classe truc. :not(selecteur) permet de retirer de la sélection tous les éléments spécifiés. Par exemple, $(".truc :not(.machin)") permet de sélectionner tous les éléments de classe truc ne possédant pas la classe machin. :header : tous les titres (h1, h2, etc.) :eq(n) : l élément à la position "N". :gt(n)/ :lt(n) les éléments ayant un index sup/inf à "N". :animated tous les éléments animés. :odd et :even sélectionne tous les éléments d ordre respectivement impair et pair d une collection. Par exemple, $(tr :even) sélectionne les lignes de tableau n 0, 2, 4, etc.

19 Filtres de contenu contains(texte) sélectionne tous les éléments contenant un texte donné has(sélecteur) sélectionne les éléments contenant au moins un élément sélectionné par sélecteur.par exemple, $("li :has(ul)") sélectionne les éléments d item de liste (li) contenant au moins une liste. :empty sélectionne les éléments vides.

20 Filtres de visibilité :visible sélectionne les éléments qui sont visibles :hidden sélectionne les éléments qui ont été cachés

21 Filtres d attributs [attribut] sélectionne les éléments possédant l attribut attribut. Par exemple, $("img[longdesc]") sélectionne les éléments img possédant un attribut longdesc. [attribute=valeur] sélectionne les éléments possédant un attribut attribut valant valeur. Par exemple, $("td[colspan=2]") sélectionne les cellules de tableaux s étendant sur deux colonnes.

22 Les évènements Nom d évènements : blur, focus, load, resize, scroll, unload, error, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup event(fn) : effectue la fonction fn lorsque event est déclenché. event() : lève l événement event. Ex : $("p").click(function()alert("salut!"))