close

jQuery ile DOM Manipülasyonu- Teknikler ve Örnekler

jQuery ile DOM manipülasyonu, DOM yapısını hedefleyerek bir web sayfasındaki verileri değiştirmenize, eklemenize, kaldırmanıza veya verilerle etkileşim kurmanıza olanak tanır. jQuery, DOM manipülasyon görevlerini gerçekleştirmek için uygun yöntemler ve işlevler sağlar.

Belirli örneklerle birlikte her bölüm için açıklamalar aşağıda verilmiştir:

 

Elemanları seçme

  • $("p") <p>: Sayfadaki tüm öğeleri seçin .
  • $(".myClass"): Sınıfla birlikte tüm öğeleri seçin myClass.
  • $("#myElement"): Kimliği olan öğeyi seçin myElement.
  • $("parentElement").find(".childElement") childElement: Sınıf içindeki tüm alt öğeleri seçin parentElement.

Örnek:

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

 

içeriği değiştirme

  • $("#myElement").html("<b>Hello World</b>"): Kimliğe sahip öğe için HTML içeriğini ayarlayın myElement.
  • $("p").text("New text"): Tüm öğeler için metin içeriğini ayarlayın <p>.

Örnek:

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

 

Öğe ekleme ve çıkarma

  • $("ul").append("<li>New item</li>"): <li> Sırasız listenin() sonuna bir öğe ekleyin <ul>.
  • $(".myClass").remove(): Sınıftaki tüm öğeleri myClass sayfadan kaldırın.

Örnek:

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

 

Nitelikleri ve sınıfları değiştirme

  • $("img").attr("src", "new-image.jpg"): src Tüm <img> öğeler için öznitelik değerini değiştirin.
  • $("#myElement").addClass("newClass") newClass: Kimliği olan öğeye sınıfı ekleyin myElement.
  • $("#myElement").removeClass("oldClass") oldClass: Kimliği olan öğeden sınıfı kaldırın myElement.

Örnek:

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

 

Olay işleme

$("button").click(function() { }): Bir öğe tıklandığında bir olay işleyici işlevi kaydedin <button>.

Örnek:

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

 

Efektler ve animasyonlar

  • $("#myElement").hide(): Kimliği olan öğeyi gizleyin myElement.
  • $("#myElement").show(): Kimliği olan öğeyi göster myElement.
  • $("#myElement").fadeOut(): Kimliğe sahip öğe üzerinde bir karartma efekti gerçekleştirin myElement.
  • $("#myElement").fadeIn(): Kimliğe sahip öğe üzerinde bir solma efekti gerçekleştirin myElement.

Örnek:

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