close

Manipulace s DOM pomocí jQuery – techniky a příklady

Manipulace s DOM pomocí jQuery vám umožňuje upravovat, přidávat, odstraňovat nebo interagovat s daty na webové stránce cílením na strukturu DOM. jQuery poskytuje pohodlné metody a funkce pro provádění úloh manipulace s DOM.

Zde jsou vysvětlení pro každou sekci spolu s konkrétními příklady:

 

Výběr prvků

  • $("p"): Vyberte všechny <p> prvky na stránce.
  • $(".myClass"): Vyberte všechny prvky s třídou myClass.
  • $("#myElement"): Vyberte prvek s ID myElement.
  • $("parentElement").find(".childElement"): Vyberte všechny podřízené prvky s třídou childElement v rámci parentElement.

Příklad:

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

 

Změna obsahu

  • $("#myElement").html("<b>Hello World</b>"): Nastavte obsah HTML pro prvek s ID myElement.
  • $("p").text("New text"): Nastavte obsah textu pro všechny <p> prvky.

Příklad:

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

 

Přidávání a odebírání prvků

  • $("ul").append("<li>New item</li>"): Přidejte <li> prvek na konec neuspořádaného seznamu( <ul>).
  • $(".myClass").remove() myClass: Odstraňte ze stránky všechny prvky s třídou .

Příklad:

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

 

Změna atributů a tříd

  • $("img").attr("src", "new-image.jpg"): Změňte src hodnotu atributu pro všechny <img> prvky.
  • $("#myElement").addClass("newClass"): Přidejte třídu newClass k prvku s ID myElement.
  • $("#myElement").removeClass("oldClass"): Odeberte třídu oldClass z prvku s ID myElement.

Příklad:

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

 

Zpracování událostí

$("button").click(function() { }): Zaregistrujte funkci obsluhy události při <button> kliknutí na prvek.

Příklad:

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

 

Efekty a animace

  • $("#myElement").hide(): Skrýt prvek s ID myElement.
  • $("#myElement").show(): Zobrazit prvek s ID myElement.
  • $("#myElement").fadeOut(): Provede efekt zeslabení na prvku s ID myElement.
  • $("#myElement").fadeIn(): Provede efekt prolínání na prvku s ID myElement.

Příklad:

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