web:javascript:avance:dom

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:javascript:avance:dom [2020/10/14 18:31] – philippeweb:javascript:avance:dom [2025/06/19 19:30] (Version actuelle) – modification externe 127.0.0.1
Ligne 1: Ligne 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 Java​Script, 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>