close

Gudanar da DOM tare da jQuery -Techniques da Misalai

Yin amfani da DOM tare da jQuery yana ba ka damar gyara, ƙarawa, cirewa, ko yin hulɗa tare da bayanai akan shafin yanar gizon ta hanyar niyya tsarin DOM. jQuery yana ba da hanyoyi masu dacewa da ayyuka don yin ayyukan magudi na DOM.

Ga bayanin kowane sashe tare da takamaiman misalai:

 

Zaɓi abubuwa

  • $("p"): Zaɓi duk <p> abubuwan da ke shafin.
  • $(".myClass"): Zaɓi duk abubuwan da ke tare da ajin myClass.
  • $("#myElement"): Zaɓi kashi tare da ID myElement.
  • $("parentElement").find(".childElement"): Zaɓi duk abubuwan yara masu ajin childElement a cikin parentElement.

Misali:

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

 

Canza abun ciki

  • $("#myElement").html("<b>Hello World</b>"): Saita abun ciki na HTML don kashi tare da ID myElement.
  • $("p").text("New text"): Saita abun ciki na rubutu don duk <p> abubuwa.

Misali:

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

 

Ƙara da cire abubuwa

  • $("ul").append("<li>New item</li>"): Ƙara wani <li> kashi a ƙarshen jerin marasa tsari( <ul>).
  • $(".myClass").remove(): Cire duk abubuwa tare da ajin myClass daga shafin.

Misali:

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

 

Canza halaye da azuzuwan

  • $("img").attr("src", "new-image.jpg"): Canja src ƙimar sifa don duk <img> abubuwa.
  • $("#myElement").addClass("newClass"): Ƙara ajin newClass zuwa kashi tare da ID myElement.
  • $("#myElement").removeClass("oldClass"): Cire ajin oldClass daga kashi tare da ID myElement.

Misali:

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

 

Gudanar da taron

$("button").click(function() { }): Yi rijistar aikin mai gudanar da taron lokacin da <button> aka danna kashi.

Misali:

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

 

Tasiri da rayarwa

  • $("#myElement").hide(): Boye kashi tare da ID myElement.
  • $("#myElement").show(): Nuna kashi tare da ID myElement.
  • $("#myElement").fadeOut(): Yi tasirin fade-fita akan kashi tare da ID myElement.
  • $("#myElement").fadeIn(): Yi tasirin fade-in akan kashi tare da ID myElement.

Misali:

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