close

Manipulación DOM con jQuery -Técnicas y Ejemplos

La manipulación de DOM con jQuery le permite modificar, agregar, eliminar o interactuar con datos en una página web apuntando a la estructura DOM. jQuery proporciona métodos y funciones convenientes para realizar tareas de manipulación de DOM.

Aquí hay explicaciones para cada sección junto con ejemplos específicos:

 

Selección de elementos

  • $("p"): selecciona todos <p> los elementos de la página.
  • $(".myClass"): Selecciona todos los elementos con la clase myClass.
  • $("#myElement"): Seleccione el elemento con el ID myElement.
  • $("parentElement").find(".childElement"): Seleccione todos los elementos secundarios con la clase childElement dentro del parentElement.

Ejemplo:

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

 

Cambio de contenido

  • $("#myElement").html("<b>Hello World</b>"): establece el contenido HTML para el elemento con el ID myElement.
  • $("p").text("New text"): establece el contenido del texto para todos <p> los elementos.

Ejemplo:

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

 

Adición y eliminación de elementos.

  • $("ul").append("<li>New item</li>"): Agrega un <li> elemento al final de la lista desordenada( <ul>).
  • $(".myClass").remove(): Elimina todos los elementos con la clase myClass de la página.

Ejemplo:

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

 

Cambio de atributos y clases

  • $("img").attr("src", "new-image.jpg"): cambie el src valor del atributo para todos <img> los elementos.
  • $("#myElement").addClass("newClass"): Agrega la clase newClass al elemento con el ID myElement.
  • $("#myElement").removeClass("oldClass"): Elimina la clase oldClass del elemento con el ID myElement.

Ejemplo:

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

 

Manejo de eventos

$("button").click(function() { }): registra una función de controlador de eventos cuando <button> se hace clic en un elemento.

Ejemplo:

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

 

Efectos y animaciones

  • $("#myElement").hide(): Ocultar el elemento con el ID myElement.
  • $("#myElement").show(): Muestra el elemento con el ID myElement.
  • $("#myElement").fadeOut(): Realice un efecto de fundido de salida en el elemento con ID myElement.
  • $("#myElement").fadeIn(): Realice un efecto de fundido de entrada en el elemento con ID myElement.

Ejemplo:

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