close

Manipulacja DOM za pomocą jQuery- Techniki i przykłady

Manipulowanie DOM za pomocą jQuery umożliwia modyfikowanie, dodawanie, usuwanie lub interakcję z danymi na stronie internetowej poprzez celowanie w strukturę DOM. jQuery zapewnia wygodne metody i funkcje do wykonywania zadań związanych z manipulacją DOM.

Oto wyjaśnienia dla każdej sekcji wraz z konkretnymi przykładami:

 

Wybieranie elementów

  • $("p"): Wybierz wszystkie <p> elementy na stronie.
  • $(".myClass"): Wybierz wszystkie elementy z klasą myClass.
  • $("#myElement"): Wybierz element o identyfikatorze myElement.
  • $("parentElement").find(".childElement"): Wybierz wszystkie elementy podrzędne z klasą childElement w parentElement.

Przykład:

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

 

Zmiana treści

  • $("#myElement").html("<b>Hello World</b>"): Ustaw zawartość HTML elementu o identyfikatorze myElement.
  • $("p").text("New text"): Ustaw zawartość tekstu dla wszystkich <p> elementów.

Przykład:

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

 

Dodawanie i usuwanie elementów

  • $("ul").append("<li>New item</li>"): Dodaj <li> element na końcu listy nieuporządkowanej( <ul>).
  • $(".myClass").remove(): Usuń wszystkie elementy z klasą myClass ze strony.

Przykład:

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

 

Zmiana atrybutów i klas

  • $("img").attr("src", "new-image.jpg"): Zmień src wartość atrybutu dla wszystkich <img> elementów.
  • $("#myElement").addClass("newClass"): Dodaj klasę newClass do elementu o identyfikatorze myElement.
  • $("#myElement").removeClass("oldClass"): Usuń klasę oldClass z elementu o identyfikatorze myElement.

Przykład:

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

 

Obsługa zdarzeń

$("button").click(function() { }): Zarejestruj funkcję obsługi zdarzeń po <button> kliknięciu elementu.

Przykład:

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

 

Efekty i animacje

  • $("#myElement").hide(): Ukryj element o identyfikatorze myElement.
  • $("#myElement").show(): Pokaż element z identyfikatorem myElement.
  • $("#myElement").fadeOut(): Wykonaj efekt zanikania na elemencie o identyfikatorze myElement.
  • $("#myElement").fadeIn(): Wykonaj efekt zanikania na elemencie o identyfikatorze myElement.

Przykład:

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