close

Udanganyifu wa DOM na jQuery -Mbinu na Mifano

Udanganyifu wa DOM na jQuery hukuruhusu kurekebisha, kuongeza, kuondoa au kuingiliana na data kwenye ukurasa wa wavuti kwa kulenga muundo wa DOM. jQuery hutoa mbinu na vitendakazi vinavyofaa kufanya kazi za kudanganya DOM.

Hapa kuna maelezo kwa kila sehemu pamoja na mifano maalum:

 

Kuchagua vipengele

  • $("p"): Chagua <p> vipengele vyote kwenye ukurasa.
  • $(".myClass"): Chagua vipengele vyote vilivyo na darasa myClass.
  • $("#myElement"): Chagua kipengele kilicho na kitambulisho myElement.
  • $("parentElement").find(".childElement"): Chagua vipengele vyote vya watoto vilivyo na darasa childElement ndani ya parentElement.

Mfano:

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

 

Kubadilisha maudhui

  • $("#myElement").html("<b>Hello World</b>"): Weka maudhui ya HTML kwa kipengele kilicho na kitambulisho myElement.
  • $("p").text("New text"): Weka maudhui ya maandishi kwa <p> vipengele vyote.

Mfano:

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

 

Kuongeza na kuondoa vipengele

  • $("ul").append("<li>New item</li>"): Ongeza <li> kipengele mwishoni mwa orodha isiyopangwa( <ul>).
  • $(".myClass").remove(): Ondoa vipengele vyote vilivyo na darasa myClass kutoka kwa ukurasa.

Mfano:

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

 

Kubadilisha sifa na madarasa

  • $("img").attr("src", "new-image.jpg"): Badilisha src thamani ya sifa kwa <img> vipengele vyote.
  • $("#myElement").addClass("newClass"): Ongeza darasa newClass kwenye kipengee kilicho na kitambulisho myElement.
  • $("#myElement").removeClass("oldClass"): Ondoa darasa oldClass kutoka kwa kipengee kilicho na kitambulisho myElement.

Mfano:

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

 

Ushughulikiaji wa tukio

$("button").click(function() { }): Sajili kidhibiti cha tukio wakati <button> kipengele kinapobofya.

Mfano:

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

 

Athari na uhuishaji

  • $("#myElement").hide(): Ficha kipengele na kitambulisho myElement.
  • $("#myElement").show(): Onyesha kipengele kilicho na kitambulisho myElement.
  • $("#myElement").fadeOut(): Tekeleza athari ya kufifia kwenye kipengee kilicho na kitambulisho myElement.
  • $("#myElement").fadeIn(): Tekeleza madoido ya kufifia kwenye kipengele kwa kitambulisho myElement.

Mfano:

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