Comhréir Bunúsach jQuery- Roghnú, Ionramháil, agus Éifeachtaí

Baineann comhréir bhunúsach jQuery úsáid as roghnóir(roghnóir ar stíl CSS) agus modhanna chun na heilimintí roghnaithe a ionramháil. Seo roinnt samplaí bunúsacha comhréire de jQuery:

 

Roghnú eilimintí

  • Roghnaigh eilimintí de réir ainm chlib HTML: $("tagname") Sampla: $("p") roghnaíonn gach <p> eilimint ar an leathanach.

  • Roghnaigh eilimintí de réir rang CSS: $(".classname") Sampla: $(".myClass") roghnaíonn sé gach eilimint leis an rang "myClass".

  • Roghnaigh eilimintí de réir aitheantais: $("#idname") Sampla: $("#myElement") roghnaíonn sé an eilimint leis an ID "myElement".

  • Roghnaigh eilimintí de réir aitreabúide: $("[attribute='value']") Sampla: $("[data-type='button']") roghnaíonn sé eilimintí leis an aitreabúid data-type a leagtar ar "cnaipe".

  • Roghanna a chomhcheangal: $("tagname.classname"), $("#idname .classname"), ...

 

Gnéithe roghnaithe a ionramháil

  • Ag athrú ábhar eiliminte: .html(), .text() Sampla: $("#myElement").html("New content") socraítear ábhar HTML na heiliminte le ID "myElement".

  • Tréithe na n-eilimintí a mhodhnú: .attr(), .prop() Sampla: $("img").attr("src", "newimage.jpg") athraíonn src tréith gach <img> eilimint.

  • Trí aicmí CSS d'eilimint a ionramháil: .addClass(), .removeClass(), .toggleClass() Sampla: $("#myElement").addClass("highlight") cuireann sé an rang "aird a tharraingt" leis an eilimint le ID "myElement".

  • Eilimintí folaithe/taispeáint: .hide(), .show(), .toggle() Sampla: $(".myClass").hide() folaíonn sé gach eilimint leis an rang "myClass".

  • Láimhseáil imeachtaí ar eilimintí: .click(), .hover(), .submit(), ... Sampla: $("button").click(function() { ... }) cláraíonn sé láimhseálaí imeacht cliceáil

 

Ag obair le bailiúcháin eilimintí

  • Ag atriall trí bhailiúchán: .each() Sampla: $("li").each(function() { ... }) athrá thar gach <li> eilimint ar an leathanach.

  • Bailiúchán a scagadh: .filter(), .not() Sampla: $("div").filter(".myClass") scagtar na <div> heilimintí agus roghnaíonn sé iad siúd leis an rang "myClass".

  • Eilimintí a chur isteach i mbailiúchán: .append(), .prepend(), .after(), .before() Sampla: $("#myElement").append("<p>New paragraph</p>") cuireann eilimint nua <p> leis an eilimint a bhfuil ID "myElement" air.

 

Éifeachtaí agus beochan

  • Éifeachtaí fadeIn/fadeOut á bhfeidhmiú: .fadeIn(), .fadeOut() Sampla: $("#myElement").fadeIn(1000) fadaítear san eilimint le ID “myElement” thar thréimhse 1 soicind.

  • Éifeachtaí slideUp/sleamhnán Síos a dhéanamh: .slideUp(), .slideDown() Sampla: $(".myClass").slideUp(500) sleamhnáin suas na heilimintí go léir leis an rang "myClass" thar thréimhse 0.5 soicind.

  • Beochan saincheaptha a dhéanamh: .animate() Sampla: $("#myElement").animate({ left: '250px', opacity: '0.5' }) beocht an eilimint le ID "myElement" trína suíomh clé agus a teimhneacht a athrú.

 

Léiríonn na samplaí seo conas gnéithe éagsúla de chomhréir bhunúsach jQuery a úsáid chun gnéithe a roghnú, a n-airíonna a ionramháil, agus éifeachtaí nó beochan a chur i bhfeidhm. Tairgeann jQuery sraith shaibhir modhanna agus feidhmiúlachtaí chun tascanna forbartha gréasáin a shimpliú agus a fheabhsú.