Prochaine révision | Révision précédente |
web:javascript:avance:dom [2020/10/12 17:38] – créée philippe | web:javascript:avance:dom [2021/08/11 09:19] (Version actuelle) – modification externe 127.0.0.1 |
---|
| [[|{{ :suivant.png?nolink&30|}}]] [[|{{ :retour.png?nolink&30|}}]][[web:javascript|{{ :iconemaison.jpg?nolink&30|Accueil JavaScript}}]] |
| |
| ===== Le DOM et jQuery ===== |
| |
| <html><span style="color:red;">EN COURS DE REDACTION</span></html> |
| |
| [Mise à jour le 14/10/2020] |
| {{ :web:javascript:avance:jquery.png?nolink&200|}} {{ :web:web.png?nolink&100|}} |
| |
| * **Sources** et compléments |
| * Livre "<html><a href="https://www.eyrolles.com/Informatique/Collection/12651/tete-la-premiere/" target="_blank">jQuery tête la première"</a></html> Ryan Benetti Dunod |
| * <html><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics" title="Les bases de JavaScript, orienté objet" target="_blank">MDN web docs Mozilla</a></html> |
| * Site <html><a href="https://jquery.com/" target="_blank">jQuery</a></html> |
| |
| * **Lectures connexes** |
| * [[web:dom|Fonctionnement du navigateur et DOM]] |
| |
| ==== 1. Qu'est-ce que jQuery? ==== |
| <note>jQuery est une **bibliothèque JavaScript**.</note> |
| |
| //"Peu encombrant, rapide et riche en fonctionnalités, il simplifie considérablement la manipulation de documents HTML, la gestion des événements, etc. grâce à une API facile à utiliser qui fonctionne sur une multitude de navigateurs"//. <html><a href="https://jquery.com/" target="_blank">jQuery.com</a></html> |
| |
| //Exemple// |
| * Modification du seul élément **p**aragraphe de la page ci-dessous. |
| |
| <code html *.html> |
| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Document</title> |
| </head> |
| <body> |
| <p>Ce texte est destiné à être changé</p> |
| </body> |
| </html> |
| </code> |
| |
| <code javascript *.js> |
| // Méthode JavaScript "pure et dure" |
| document.getElementsByTagName("p")[i].innerHTML = "Texte changé"; |
| |
| // Méthode jQuery |
| $("p").html("Texte changé"); |
| </code> |
| |
| * Pour changer **tous les éléments** **p**aragraph de la page (par exemple 5) |
| |
| <code javascript *.js> |
| // Méthode JavaScript "pure et dure" |
| for (i = 0; i < 5; i++) { |
| document.getElementsByTagName("p")[i].innerHTML = "Texte changé"; |
| } |
| |
| // Méthode jQuery |
| $("p").html("Texte changé"); |
| </code> |
| |
| <note tip>jQuery permet de manipuler le DOM sans en connaître toutes les subtilités.</note> |
| |
| ==== 2. La fonction jQuery (et son raccourci) ==== |
| {{ :web:javascript:avance:foncjquery.png?nolink|}} |
| <note important>Le signe dollar avec ses parenthèses **$()** est l'abréviation de la fonction jQuery.</note> |
| |
| Ce raccourci évite d'écrire jQuery(). On peut placer différentes choses dans la fonction jQuery. |
| |
| |
| ==== 3. Les styles à la rencontre des scripts ==== |
| jQuery utilise les mêmes sélecteurs CSS que ceux que l'on emploie pour styler la page afin d'en //manipuler les éléments//. |
| |
| //Exemples// |
| |
| <code css> |
| /* Sélecteur CSS */ | /* Sélecteur jQuery */ |
| | |
| /* Sélecteur d'élément */ | |
| | |
| h1 { | $("h1").hide(); /* Masque tous les éléments h1 de la page */ |
| text-align:center; | |
| } | |
| | |
| /* Sélecteur class */ | |
| | |
| .multiple { | $(".multiple").slideUp(); /* Déplace vers le haut tous les éléments */ |
| color:red; | /* avec le nom multiple */ |
| } | |
| | |
| /* Sélecteur id */ | |
| | |
| #unique { | $(".unique").fadeout(); /* Fait disparaître l'élément qui a l'id */ |
| color:red; | /* unique */ |
| } | |
| </code> |
| |
| {{ :web:javascript:avance:fonctjquery.png?nolink |}} |
| |
| <note warning>Les sélecteurs **CSS** sélectionnent des éléments pour leur ajouter un __style__; les sélecteurs **jQuery** sélectionnent des éléments pour leur ajouter un //comportement// </note> |
| |
| ==== 4. Principe de fonctionnement d'une requête ==== |
| Comme son nom l'implique, jQuery concerne les **//requêtes//**. On demande quelque chose à l'aide d'un sélecteur et l'interpréteur JavaScript demande au DOM d'exécuter la requête. |
| |
| //Exemple// |
| |
| {{ :web:javascript:avance:selecteurjq.png?nolink |}} |
| |
| // Exemples de code // |
| |
| <code javascript *.js> |
| $("button").click(function(){// Code de la fonction}) // Un clic sur un bouton exécute une fonction |
| |
| $("p").hide(); // on efface le texte contenu dans les paragraphes |
| |
| $("#mon_id").css({"background-color":"blue"}); // <div id="mon_id"></div> devient bleu |
| </code> |