close

Ionramháil DOM le jQuery- Teicnící agus Samplaí

Ligeann ionramháil DOM le jQuery duit sonraí ar leathanach gréasáin a mhodhnú, a chur leis, a bhaint nó idirghníomhú leo trí dhíriú ar struchtúr DOM. Soláthraíonn jQuery modhanna agus feidhmeanna áisiúla chun tascanna ionramhála DOM a dhéanamh.

Seo mínithe ar gach roinn mar aon le samplaí sonracha:

 

Roghnú eilimintí

  • $("p"): Roghnaigh gach <p> eilimint ar an leathanach.
  • $(".myClass"): Roghnaigh gach eilimint leis an rang myClass.
  • $("#myElement"): Roghnaigh an eilimint leis an ID myElement.
  • $("parentElement").find(".childElement"): Roghnaigh na heilimintí linbh go léir leis an rang childElement laistigh den parentElement.

Sampla:

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

 

Ábhar a athrú

  • $("#myElement").html("<b>Hello World</b>"): Socraigh an t-ábhar HTML don eilimint leis an ID myElement.
  • $("p").text("New text"): Socraigh an t-ábhar téacs do gach <p> eilimint.

Sampla:

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

 

Eilimintí a shuimiú agus a bhaint

  • $("ul").append("<li>New item</li>"): Cuir <li> eilimint ag deireadh an liosta neamhordaithe( <ul>).
  • $(".myClass").remove(): Bain gach eilimint leis an rang myClass den leathanach.

Sampla:

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

 

Athrú tréithe agus ranganna

  • $("img").attr("src", "new-image.jpg"): Athraigh an src luach aitreabúide do gach <img> eilimint.
  • $("#myElement").addClass("newClass"): Cuir an rang newClass leis an eilimint leis an ID myElement.
  • $("#myElement").removeClass("oldClass"): Bain an rang oldClass den eilimint leis an ID myElement.

Sampla:

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

 

Láimhseáil imeachtaí

$("button").click(function() { }): Cláraigh feidhm láimhseála imeachta nuair a <button> chliceáiltear eilimint.

Sampla:

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

 

Éifeachtaí agus beochan

  • $("#myElement").hide(): Folaigh an eilimint leis an ID myElement.
  • $("#myElement").show(): Taispeáin an eilimint leis an ID myElement.
  • $("#myElement").fadeOut(): Déan éifeacht céimnithe ar an eilimint leis an ID myElement.
  • $("#myElement").fadeIn(): Déan éifeacht céimnithe ar an eilimint leis an ID myElement.

Sampla:

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