Apprendre jQuery

Manipuler le DOM

jQuery nous propose plusieurs méthodes pour manipuler le DOM. Avec ces méthodes, nous pouvons supprimer, créer, cloner, ajouter… Bref nous pouvons remodeler le DOM à notre convenance.

Méthode	Description
`.addClass()`	Ajoute un ou plusieurs noms de classe à des éléments sélectionnés
`.after()`	Insére le contenu après les éléments sélectionnés
`.append()`	Insére le contenu à la fin les éléments sélectionnés
`.appendTo()`	Insére le contenu sélectionné à la fin les éléments sélectionnés
`.attr()`	Définit ou retourne les attributs / valeurs des éléments sélectionnés
`.before()`	Insére le contenu avant les éléments sélectionnés
`.clone()`	Effectue une copie des éléments sélectionnés
`.css()`	Définit ou retourne une ou plusieurs propriétés de style pour les éléments sélectionnés
`.detach()`	Supprime les éléments sélectionnés (conserve les données et les événements)
`.empty()`	Supprime tous les nœuds enfants et le contenu de l'élément sélectionné
`.hasClass()`	Vérifie si l'un des éléments sélectionnés ont un nom de classe spécifié
`.height()`	Définit ou retourne la hauteur des éléments sélectionnés
`.html()`	Définit ou retourne le contenu des éléments sélectionnés
`.innerHeight()`	Renvoie la hauteur d'un élément (y compris le padding, mais pas les border)
`.innerWidth()`	Renvoie la largeur d'un élément (y compris le padding, mais pas les border)
`.insertAfter()`	Insère des éléments HTML après les éléments sélectionnés
`.insertBefore()`	Insère des éléments HTML avant les éléments sélectionnés
`.offset()`	Définit ou retourne les coordonnées de l'offset (left et top) pour les éléments sélectionnés (en position relative dans le document)
`.offsetParent()`	Retourne l'élément le premier parent positionné
`.outerHeight()`	Renvoie la hauteur d'un élément (y compris le padding et les border)
`.outerWidth()`	Renvoie la largeur d'un élément (y compris le padding et les border)
`.position()`	Renvoie la position (par rapport à l'élément parent) d'un élément
`.prepend()`	Introduire le contenu au début des éléments sélectionnés
`.prependTo()`	Insére des éléments de HTML au début des éléments sélectionnés au format html
`.prop()`	Définit ou retourne propriétés / valeurs des éléments sélectionnés
`.remove()`	Supprime les éléments sélectionnés (y compris des données et des événements)
`.removeAttr()`	Supprime un ou plusieurs attributs à partir d'éléments sélectionnés
`.removeClass()`	Supprime une ou plusieurs classes à partir d'éléments sélectionnés
`.removeProp()`	Supprime une propriété définie par la méthode prop()
`.replaceAll()`	Remplace les éléments sélectionnés avec de nouveaux éléments HTML
`.replaceWith()`	Remplace les éléments sélectionnés par un nouveau contenu
`.scrollLeft()`	Définit ou retourne la position de la barre de défilement horizontale des éléments sélectionnés
`.scrollTop()`	Définit ou retourne la position de la barre de défilement vertical des éléments sélectionnés
`.text()`	Insére des éléments de HTML au début des éléments sélectionnés au format texte
`.toggleClass()`	Bascule entre l'ajout / suppression d'une ou plusieurs classes à partir d'éléments sélectionnés
`.unwrap()`	Supprime l'élément parent des éléments sélectionnés
`.val()`	Définit ou retourne la value des éléments sélectionnés (pour les éléments de formulaire)
`.width()`	Définit ou retourne la largeur des éléments sélectionnés
`.wrap()`	Entoure d'un balisage HTML l'élément sélectionné
`.wrapAll()`	Entoure d'un balisage HTML tous les éléments sélectionnés
`.wrapInner()`	Entoure d'un balisage HTML le contenu de l'élément sélectionné