close

Manipulazzjoni DOM b'jQuery -Tekniċi u Eżempji

Il-manipulazzjoni tad-DOM b'jQuery tippermettilek timmodifika, iżżid, tneħħi jew tinteraġixxi ma' data fuq paġna web billi timmira l-istruttura DOM. jQuery jipprovdi metodi u funzjonijiet konvenjenti biex iwettqu kompiti ta 'manipulazzjoni DOM.

Hawn huma spjegazzjonijiet għal kull taqsima flimkien ma 'eżempji speċifiċi:

 

Għażla ta' elementi

  • $("p"): Agħżel <p> l-elementi kollha fuq il-paġna.
  • $(".myClass"): Agħżel l- elementi kollha bil- klassi myClass.
  • $("#myElement"): Agħżel l- element bl- ID myElement.
  • $("parentElement").find(".childElement"): Agħżel l-elementi tfal kollha bil-klassi childElement fi ħdan il- parentElement.

Eżempju:

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

 

Nibdlu l-kontenut

  • $("#myElement").html("<b>Hello World</b>"): Issettja l-kontenut HTML għall-element bl-ID myElement.
  • $("p").text("New text"): Issettja l-kontenut tat-test għall <p> -elementi kollha.

Eżempju:

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

 

Żieda u tneħħija ta 'elementi

  • $("ul").append("<li>New item</li>"): Żid <li> element fl-aħħar tal-lista mhux ordnata( <ul>).
  • $(".myClass").remove(): Neħħi l-elementi kollha bil-klassi myClass mill-paġna.

Eżempju:

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

 

Jinbidlu attributi u klassijiet

  • $("img").attr("src", "new-image.jpg"): Ibdel il- src valur tal-attribut għall <img> -elementi kollha.
  • $("#myElement").addClass("newClass"): Żid il-klassi newClass mal-element bl-ID myElement.
  • $("#myElement").removeClass("oldClass"): Neħħi l-klassi oldClass mill-element bl-ID myElement.

Eżempju:

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

 

Immaniġġjar ta' avvenimenti

$("button").click(function() { }): Irreġistra funzjoni tal-immaniġġjar tal-avvenimenti meta <button> jiġi kklikkjat element.

Eżempju:

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

 

Effetti u animazzjonijiet

  • $("#myElement").hide(): Aħbi l- element bl- ID myElement.
  • $("#myElement").show(): Uri l-element bl-ID myElement.
  • $("#myElement").fadeOut(): Wettaq effett ta 'fade-out fuq l-element bl-ID myElement.
  • $("#myElement").fadeIn(): Wettaq effett fade-in fuq l-element bl-ID myElement.

Eżempju:

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