Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Accéder au DOM HTML et sélectionner des éléments en jQuery Besoin de l'aide de

Accéder au DOM HTML et sélectionner des éléments en jQuery Besoin de l'aide de Dieu? Ces quatre étapes tirées de la bible te montrent exactement quoi faire. questions2vie.com   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 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... 1 sur 5 26/06/2021 à 13:18 INTRODUCTION AU COURS JQUERY 1. Introduction au cours jQuery 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 AVEC 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 8. Copier, remplacer ou supprimer des éléments du DOM en jQuery 9. Manipuler les attributs des éléments en jQuery 10. Manipuler les styles CSS des éléments avec jQuery GESTION D’ÉVÈNEMENTS AVEC JQUERY 11. Introduction à la gestion d’évènements avec jQuery 12. Gestion des événements déclenchés par la souris avec jQuery 13. Gestion des événements déclenchés par le clavier avec jQuery 14. Gestion des événements spécifiques aux formulaires avec jQuery 15. Gestion avancée des événements avec jQuery on(), off() et l’objet Event CRÉATION D’EFFETS ET D’ANIMATIONS AVEC JQUERY 16. Créer des effets de fondu ou de slide avec jQuery 17. Afficher ou cacher des éléments HTML avec jQuery 18. Créer des effets ou animations personnalisés avec jQuery 19. Gestion avancée des animations avec jQuery JQUERY AJAX 20. Introduction à l’Ajax avec jQuery 21. Création de requêtes Ajax avec 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 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. Rappels sur le DOM 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. Imaginons par exemple qu’on souhaite laisser à l’utilisateur la possibilité de changer la couleur de fond de notre site en cliquant sur un bouton, ou encore qu’on veuille proposer des contenus qui vont se déplier / replier lors d’un clic : tout cela ne va être possible qu’en manipulant le DOM. 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 relativement longs. jQuery a pour objectif de nous simplifier l’accès au DOM et à la manipulation d’un document en nous fournissant des sélecteurs et des méthodes qui vont s’avérer très puissants et très simples d’utilisation. La sélection d’éléments en jQuery La façon la plus simple de sélectionner des éléments HTML en jQuery va être d’utiliser des 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. De plus, jQuery met également à notre disposition des “pseudo-sélecteurs” qui vont nous permettre de sélectionner précisément et simplement certains éléments spécifiques aux formulaires HTML. Découvrez votre niveau de QI Obtenez des résultats immédiats. Recevez votre certicat et votre rapport de QI. test-iq.org Test de QI : quel est 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 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 sur 5 26/06/2021 à 13:18 23. Annexe : Liste des méthodes jQuery Ajax 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. test-iq.org Ouvrir 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 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... 3 sur 5 26/06/2021 à 13:18 On va ainsi par exemple pouvoir ne sélectionner que les éléments span d’une page qui possèdent un certain attribut class. /*On ne sélectionne que les éléments span qui possèdent un attribut class="souligne"*/ $(document).ready(function(){ $("span").filter(".souligne").css("color", "green"); }); Cours jQuery Un paragraphe écrit en HTML Un élément span non contenu dans un élément p Un deuxième paragraphe Un troisième paragraphe Resources HTML JS E D I T O N Result 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 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... 4 sur 5 26/06/2021 à 13:18 2 réflexions au sujet de “Accéder au DOM HTML et sélectionner des éléments en jQuery” 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. Connexion Confidentialité CGV Sitemap © Pierre Giraud - Toute reproduction interdite - Mentions légales 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 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... 5 sur 5 26/06/2021 à 13:18 uploads/Management/ acceder-au-dom-html-et-selectionner-des-elements-en-jquery-pierre-giraud.pdf