Document

[[|{{ :suivant.png?nolink&30|}}]] [[|{{ :retour.png?nolink&30|}}]][[web:javascript|{{ :iconemaison.jpg?nolink&30|Accueil JavaScript}}]] ===== Le DOM et jQuery ===== EN COURS DE REDACTION [Mise à jour le 14/10/2020] {{ :web:javascript:avance:jquery.png?nolink&200|}} {{ :web:web.png?nolink&100|}} * **Sources** et compléments * Livre "jQuery tête la première" Ryan Benetti Dunod * MDN web docs Mozilla * Site jQuery * **Lectures connexes** * [[web:dom|Fonctionnement du navigateur et DOM]] ==== 1. Qu'est-ce que jQuery? ==== jQuery est une **bibliothèque JavaScript**. //"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"//. jQuery.com //Exemple// * Modification du seul élément **p**aragraphe de la page ci-dessous.





    
    Document


    Ce texte est destiné à être changé


// Méthode JavaScript "pure et dure"
document.getElementsByTagName("p")[i].innerHTML = "Texte changé";

// Méthode jQuery
$("p").html("Texte changé");

* Pour changer **tous les éléments** **p**aragraph de la page (par exemple 5)


// 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é");

jQuery permet de manipuler le DOM sans en connaître toutes les subtilités. ==== 2. La fonction jQuery (et son raccourci) ==== {{ :web:javascript:avance:foncjquery.png?nolink|}} Le signe dollar avec ses parenthèses **$()** est l'abréviation de la fonction jQuery. 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//


      /* 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                                  */
}                                    |

{{ :web:javascript:avance:fonctjquery.png?nolink |}} 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// ==== 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 //


$("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"}); //  devient bleu