Accéder au DOM HTML et sélectionner des éléments en jQuery - Pierre... https://www.pierre-giraud.com/jquery-apprendre-cours/acces-dom-html-s...

 

Besoin de l'aide de Dieu?

Ces quatre étapes tirées de la bible te

montrent exactement quoi faire.
questions2vie.com

Accéder au DOM HTML et sélectionner des éléments en jQuery

Ce site utilise des cookies pour vous fournir la meilleure expérience de navigation possible. En continuant sur ce site, vous acceptez l'utilisation des cookies. Réglages ACCEPTER

1 sur 5 26/06/2021 à 13:18

Accéder au DOM HTML et sélectionner des éléments en jQuery - Pierre... https://www.pierre-giraud.com/jquery-apprendre-cours/acces-dom-html-s...

INTRODUCTION AU COURS JQUERY Dans cette nouvelle partie, nous allons comprendre pourquoi jQuery est une option de choix pour
des opérations de manipulation du DOM HTML et allons présenter les différents outils offerts par
1. Introduction au cours jQuery jQuery pour sélectionner, insérer, modifier ou supprimer des éléments ou des attributs ainsi que
pour modifier les styles CSS des éléments.
2. Inclure la bibliothèque jQuery dans nos
pages pour l’utiliser

3. Découverte de la syntaxe de base de

jQuery
MANIPULATION DU DOM
JQUERY
4. Accéder au DOM HTML et sélectionner
des éléments en jQuery
5. Se déplacer dans le DOM ou traverser
le DOM avec jQuery
6. Manipuler le DOM avec les méthodes
de type getter et setter jQuery
7. Insérer ou déplacer des éléments et leur
contenu dans le DOM avec jQuery
Rappels sur le DOM
AVEC
Le DOM (Document Object Model ou Modèle Objet de Document en Français) est une interface
créée automatiquement par le navigateur lors du chargement d’une page HTML.
Cette interface offre une représentation structurée et hiérarchisée d’un document HTML en le
présentant sous forme d’arbre (on parle de “DOM tree”) avec l’élément html servant de tronc ou de
“racine”, les éléments enfants de html formant les premières branches de l’arbre, et les descendants
de ces éléments formant des ramifications successives et etc.
Le DOM est une interface très intéressante pour un développeur Javascript puisqu’on va pouvoir
utiliser cette interface en JavaScript pour accéder aux différents contenus HTML d’un document et
pour les manipuler. Cela va être très utile dans le cas où on souhaite modifier le contenu ou
l’apparence d’une page suite à certaines actions d’un utilisateur ou évènements.

8. Copier, remplacer ou supprimer des

éléments du DOM en jQuery

9. Manipuler les attributs des éléments en Découvrez votre

jQuery
niveau de QI
10. Manipuler les styles CSS des éléments
avec jQuery Obtenez des résultats
immédiats. Recevez
GESTION D’ÉVÈNEMENTS AVEC
JQUERY votre certi�cat et votre
test-iq.org rapport de QI.
11. Introduction à la gestion
d’évènements avec jQuery
Imaginons par exemple qu’on souhaite laisser à l’utilisateur la possibilité de changer la couleur de
12. Gestion des événements déclenchés fond de notre site en cliquant sur un bouton, ou encore qu’on veuille proposer des contenus qui
par la souris avec jQuery
vont se déplier / replier lors d’un clic : tout cela ne va être possible qu’en manipulant le DOM.

13. Gestion des événements déclenchés

par le clavier avec jQuery
La manipulation d’un document en JavaScript n’est généralement pas très complexe mais peut
parfois produire des résultats inattendus ou, dans certains cas, nous forcer à écrire des scripts
14. Gestion des événements spécifiques relativement longs.
aux formulaires avec jQuery
jQuery a pour objectif de nous simplifier l’accès au DOM et à la manipulation d’un document en
15. Gestion avancée des événements avec
nous fournissant des sélecteurs et des méthodes qui vont s’avérer très puissants et très simples
jQuery on(), off() et l’objet Event
d’utilisation.
CRÉATION D’EFFETS ET D’ANIMATIONS
AVEC JQUERY

16. Créer des effets de fondu ou de slide

avec jQuery La sélection d’éléments en jQuery
17. Afficher ou cacher des éléments HTML La façon la plus simple de sélectionner des éléments HTML en jQuery va être d’utiliser des
avec jQuery sélecteurs CSS. En effet, je vous rappelle ici que jQuery simplifie grandement la sélection
d’éléments en supportant l’intégralité des sélecteurs CSS.
18. Créer des effets ou animations
personnalisés avec jQuery
De plus, jQuery met également à notre disposition des “pseudo-sélecteurs” qui vont nous
19. Gestion avancée des animations avec permettre de sélectionner précisément et simplement certains éléments spécifiques aux
jQuery formulaires HTML.

JQUERY AJAX

20. Introduction à l’Ajax avec jQuery

Test de QI : quel est
21. Création de requêtes Ajax avec jQuery votre QI
Ce site utilise des cookies pour vous fournir la meilleure expérience de navigation possible. En continuant sur ce site, vous acceptez l'utilisation des cookies. Réglages ACCEPTER

2 sur 5 26/06/2021 à 13:18

Accéder au DOM HTML et sélectionner des éléments en jQuery - Pierre... https://www.pierre-giraud.com/jquery-apprendre-cours/acces-dom-html-s...

23. Annexe : Liste des méthodes jQuery

Ajax
test-iq.org Ouvrir

On va notamment pouvoir sélectionner des éléments input en fonction de la valeur de leur attribut
type grâce aux pseudo-sélecteurs jQuery :text, :password, :checkbox, :radio, :submit, :file, :image,
:button et :reset.

jQuery nous permet également de sélectionner certains éléments de formulaire en fonction de leur
état. Pour cela, on utilisera les pseudo-sélecteurs :

:input pour cibler tous les éléments input, textarea, select et button ;
:checked pour cibler les éléments cochés ou sélectionnés pour des input type="checkbox",
input type="radio" et des éléments de liste select ;
:selected pour cibler les éléments option sélectionnés dans une liste select ;
:disabled pour cibler les éléments input qui possèdent un attribut disabled ;
:enabled pour cibler tous les éléments qui ne possèdent pas d’attribut disabled.

Enfin, jQuery nous fournit également quelques méthodes qui vont nous permettre d’affiner nos
sélections. On peut notamment ici citer les méthodes has(), filter(), not(), first(), last() et eq().

La méthode jQuery has()

La méthode jQuery has() va nous permettre d’affiner une sélection en ne sélectionnant que les
éléments d’une sélection initiale qui possèdent des éléments enfants correspondant au sélecteur
passé en argument de cette fonction.

Cette méthode renvoie un objet jQuery qui contient la sous-sélection.

Ce site utilise des cookies pour vous fournir la meilleure expérience de navigation possible. En continuant sur ce site, vous acceptez l'utilisation des cookies. Réglages ACCEPTER

3 sur 5 26/06/2021 à 13:18

Accéder au DOM HTML et sélectionner des éléments en jQuery - Pierre... https://www.pierre-giraud.com/jquery-apprendre-cours/acces-dom-html-s...

On va ainsi par exemple pouvoir ne sélectionner que les éléments span d’une page qui possèdent
un certain attribut class.

ED IT O N
HTML JS Result

/*On ne sélectionne que les éléments span

qui possèdent un attribut
class="souligne"*/
Cours jQuery
$(document).ready(function(){
Un paragraphe écrit en HTML
$("span").filter(".souligne").css("color",
Un élément span non contenu dans un élément p
"green");
}); Un deuxième paragraphe

Un troisième paragraphe

Resources 1× 0.5× 0.25× Rerun

La méthode jQuery not()

Ce site utilise des cookies pour vous fournir la meilleure expérience de navigation possible. En continuant sur ce site, vous acceptez l'utilisation des cookies. Réglages ACCEPTER

4 sur 5 26/06/2021 à 13:18

Accéder au DOM HTML et sélectionner des éléments en jQuery - Pierre... https://www.pierre-giraud.com/jquery-apprendre-cours/acces-dom-html-s...

2 réflexions au sujet de “Accéder au DOM HTML et sélectionner des éléments en jQuery”

Connexion Confidentialité CGV Sitemap

© Pierre Giraud - Toute reproduction interdite - Mentions légales

torkhan
22 novembre 2019 à 10 h 04 min

Bonjour,
La méthode jQuery filter()

La méthode jQuery——- has()——- va nous permettre ……..=>—–fillter() —- (je pense.)

pour not():  » Un élément span non contenu dans un élément p » => n’ayant pas l ‘attribut class= » souligne » (je pense.)

J’en profite pour saluer votre énormissime et extrêmement pédagogique travail sur ces pages.
A 47 je me reconverti dans le dev et je peux vous assurer que tout cela m’est d’une aide précieuse!

Connectez-vous pour répondre

Pierre GIRAUD
11 décembre 2019 à 7 h 37 min

Bonjour,

Oui merci pour la première correction. Pour la deuxième correction, ma phrase était bonne mais un peu alambiquée; je l’ai reprise.

Amicalement,

Connectez-vous pour répondre

Laisser un commentaire
Vous devez vous connecter pour publier un commentaire.

Ce site utilise des cookies pour vous fournir la meilleure expérience de navigation possible. En continuant sur ce site, vous acceptez l'utilisation des cookies. Réglages ACCEPTER

5 sur 5 26/06/2021 à 13:18