close

Manipulation DOM avec jQuery- Techniques et exemples

La manipulation DOM avec jQuery vous permet de modifier, ajouter, supprimer ou interagir avec des données sur une page Web en ciblant la structure DOM. jQuery fournit des méthodes et des fonctions pratiques pour effectuer des tâches de manipulation du DOM.

Voici des explications pour chaque section ainsi que des exemples spécifiques :

 

Sélection d'éléments

  • $("p"): sélectionne tous <p> les éléments de la page.
  • $(".myClass"): Sélectionne tous les éléments avec la classe myClass.
  • $("#myElement"): Sélectionnez l'élément avec l'ID myElement.
  • $("parentElement").find(".childElement"): Sélectionnez tous les éléments enfants avec la classe childElement dans le parentElement.

Exemple:

$("p").css("color", "red");

 

Modification du contenu

  • $("#myElement").html("<b>Hello World</b>"): définit le contenu HTML de l'élément avec l'ID myElement.
  • $("p").text("New text"): définissez le contenu du texte pour tous <p> les éléments.

Exemple:

$("p").text("New paragraph");

 

Ajout et suppression d'éléments

  • $("ul").append("<li>New item</li>"): Ajoute un <li> élément à la fin de la liste non ordonnée( <ul>).
  • $(".myClass").remove(): supprime tous les éléments avec la classe myClass de la page.

Exemple:

$("ul").append("<li>Item 4</li>");

 

Modification des attributs et des classes

  • $("img").attr("src", "new-image.jpg"): modifiez la src valeur de l'attribut pour tous <img> les éléments.
  • $("#myElement").addClass("newClass"): Ajoutez la classe newClass à l'élément avec l'ID myElement.
  • $("#myElement").removeClass("oldClass"): Supprimez la classe oldClass de l'élément avec l'ID myElement.

Exemple:

$("img").attr("alt", "New Image");

 

Gestion des événements

$("button").click(function() { }): enregistre une fonction de gestionnaire d'événements lorsqu'un <button> élément est cliqué.

Exemple:

$("button").click(function() {  
  alert("Button clicked!");  
});

 

Effets et animations

  • $("#myElement").hide(): Masque l'élément avec l'ID myElement.
  • $("#myElement").show(): Affiche l'élément avec l'ID myElement.
  • $("#myElement").fadeOut(): Effectue un effet de fondu sur l'élément avec l'ID myElement.
  • $("#myElement").fadeIn(): Effectue un effet de fondu sur l'élément avec l'ID myElement.

Exemple:

$("#myElement").fadeOut(1000, function() {  
  console.log("Fade out complete");  
});