close

Manipulação de DOM com jQuery -Técnicas e Exemplos

A manipulação de DOM com jQuery permite que você modifique, adicione, remova ou interaja com dados em uma página da Web visando a estrutura de DOM. jQuery fornece métodos e funções convenientes para executar tarefas de manipulação de DOM.

Aqui estão as explicações para cada seção, juntamente com exemplos específicos:

 

Selecionando elementos

  • $("p"): Selecione todos <p> os elementos na página.
  • $(".myClass"): Selecione todos os elementos com a classe myClass.
  • $("#myElement"): Selecione o elemento com o ID myElement.
  • $("parentElement").find(".childElement"): selecione todos os elementos filhos com a classe childElement dentro do arquivo parentElement.

Exemplo:

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

 

Alterando o conteúdo

  • $("#myElement").html("<b>Hello World</b>"): Defina o conteúdo HTML para o elemento com o ID myElement.
  • $("p").text("New text"): Defina o conteúdo do texto para todos <p> os elementos.

Exemplo:

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

 

Adicionando e removendo elementos

  • $("ul").append("<li>New item</li>"): Adicione um <li> elemento no final da lista não ordenada( <ul>).
  • $(".myClass").remove(): Remova todos os elementos com a classe myClass da página.

Exemplo:

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

 

Alterando atributos e classes

  • $("img").attr("src", "new-image.jpg"): Altere o src valor do atributo para todos <img> os elementos.
  • $("#myElement").addClass("newClass"): Adicione a classe newClass ao elemento com o ID myElement.
  • $("#myElement").removeClass("oldClass"): Remova a classe oldClass do elemento com o ID myElement.

Exemplo:

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

 

Manipulação de eventos

$("button").click(function() { }): registra uma função de manipulador de eventos quando um <button> elemento é clicado.

Exemplo:

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

 

Efeitos e animações

  • $("#myElement").hide(): Oculte o elemento com o ID myElement.
  • $("#myElement").show(): Mostra o elemento com o ID myElement.
  • $("#myElement").fadeOut(): Execute um efeito de fade-out no elemento com o ID myElement.
  • $("#myElement").fadeIn(): Execute um efeito de fade-in no elemento com o ID myElement.

Exemplo:

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