Différences
Ci-dessous, les différences entre deux révisions de la page.
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 17:53] – [Le DOM et jQuery] philippe | web:javascript:avance:dom [2021/08/11 09:19] (Version actuelle) – modification externe 127.0.0.1 | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | [[|{{ : | ||
+ | ===== Le DOM et jQuery ===== | ||
+ | |||
+ | < | ||
+ | |||
+ | [Mise à jour le 14/10/2020] | ||
+ | {{ : | ||
+ | |||
+ | * **Sources** et compléments | ||
+ | * Livre "< | ||
+ | * < | ||
+ | * Site < | ||
+ | |||
+ | * **Lectures connexes** | ||
+ | * [[web: | ||
+ | |||
+ | ==== 1. Qu' | ||
+ | < | ||
+ | |||
+ | //"Peu encombrant, rapide et riche en fonctionnalités, | ||
+ | |||
+ | //Exemple// | ||
+ | * Modification du seul élément **p**aragraphe de la page ci-dessous. | ||
+ | |||
+ | <code html *.html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | </ | ||
+ | < | ||
+ | <p>Ce texte est destiné à être changé</ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <code javascript *.js> | ||
+ | // Méthode JavaScript "pure et dure" | ||
+ | document.getElementsByTagName(" | ||
+ | |||
+ | // Méthode jQuery | ||
+ | $(" | ||
+ | </ | ||
+ | |||
+ | * 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(" | ||
+ | } | ||
+ | |||
+ | // Méthode jQuery | ||
+ | $(" | ||
+ | </ | ||
+ | |||
+ | <note tip> | ||
+ | |||
+ | ==== 2. La fonction jQuery (et son raccourci) ==== | ||
+ | {{ : | ||
+ | <note important> | ||
+ | |||
+ | Ce raccourci évite d' | ||
+ | |||
+ | |||
+ | ==== 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// | ||
+ | |||
+ | // | ||
+ | |||
+ | <code css> | ||
+ | /* Sélecteur CSS */ | ||
+ | | | ||
+ | /* Sélecteur d' | ||
+ | | | ||
+ | h1 { | $(" | ||
+ | | ||
+ | } | | ||
+ | | | ||
+ | /* Sélecteur class */ | | ||
+ | | | ||
+ | .multiple { | $(" | ||
+ | | ||
+ | } | | ||
+ | | | ||
+ | /* Sélecteur id */ | ||
+ | | | ||
+ | #unique { | $(" | ||
+ | | ||
+ | } | | ||
+ | </ | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | <note warning> | ||
+ | |||
+ | ==== 4. Principe de fonctionnement d'une requête ==== | ||
+ | Comme son nom l' | ||
+ | |||
+ | // | ||
+ | |||
+ | {{ : | ||
+ | |||
+ | // Exemples de code // | ||
+ | |||
+ | <code javascript *.js> | ||
+ | $(" | ||
+ | |||
+ | $(" | ||
+ | |||
+ | $("# | ||
+ | </ |