close

Asalin Haɗin kai na jQuery- Zaɓi, Gudanarwa, da Tasiri

Mahimmin tsarin jigon jQuery ya ƙunshi amfani da mai zaɓe(mai zaɓin salon CSS) da hanyoyin sarrafa abubuwan da aka zaɓa. Anan akwai wasu misalan jigon jigon jQuery:

 

Zaɓi abubuwa

  • Zaɓi abubuwa ta sunan tag HTML: $("tagname") Misali: $("p") yana zaɓar duk <p> abubuwan da ke shafin.

  • Zaɓi abubuwa ta hanyar CSS: $(".classname") Misali: $(".myClass") yana zaɓar duk abubuwan da ke da ajin "myClass".

  • Zaɓi abubuwa ta ID: $("#idname") Misali: $("#myElement") yana zaɓar kashi mai ID "myElement".

  • Zaɓi abubuwa ta sifa: $("[attribute='value']") Misali: $("[data-type='button']") zaɓi abubuwa tare da saita sifa data-type zuwa "button".

  • Haɗin zaɓe: $("tagname.classname"), $("#idname .classname")...

 

Yin sarrafa abubuwan da aka zaɓa

  • Canza abun ciki na wani kashi: .html(), .text() Misali: $("#myElement").html("New content") saita abun cikin HTML na kashi tare da ID "myElement".

  • Canza halayen kashi: .attr(), .prop() Misali: $("img").attr("src", "newimage.jpg") yana canza src sifa ta dukkan <img> abubuwa.

  • Yin sarrafa azuzuwan CSS na wani kashi: .addClass(), .removeClass(), .toggleClass() Misali: $("#myElement").addClass("highlight") yana ƙara ajin "highlight" zuwa kashi mai ID "myElement".

  • Boye/nuna abubuwa: .hide(), .show(), .toggle() Misali: $(".myClass").hide() yana ɓoye duk abubuwa tare da ajin "myClass".

  • Gudanar da abubuwan da suka faru akan abubuwa: .click(), .hover(), .submit(), ... Misali: $("button").click(function() { ... }) yin rijistar latsa mai kula da taron

 

Yin aiki tare da tarin abubuwa

  • Nassosi ta hanyar tarin: .each() Misali: $("li").each(function() { ... }) yana jujjuya kowane <li> kashi akan shafin.

  • Tace tarin: .filter(), .not() Misali: $("div").filter(".myClass") tace <div> abubuwa da zabar wadanda suke da ajin "myClass".

  • Saka abubuwa a cikin tarin: .append(), .prepend(), .after(), .before() Misali: $("#myElement").append("<p>New paragraph</p>") yana sanya sabon <p> kashi zuwa kashi mai ID "myElement".

 

Tasiri da rayarwa

  • Yin tasirin fadeIn/fadeOut: .fadeIn(), .fadeOut() Misali: $("#myElement").fadeIn(1000) yana dushewa a cikin kashi tare da ID "myElement" akan tsawon daƙiƙa 1.

  • Yin tasirin slideUp/slideDown: .slideUp(), .slideDown() Misali: $(".myClass").slideUp(500) zamewar dukkan abubuwa tare da ajin "myClass" a kan tsawon daƙiƙa 0.5.

  • Yin raye-rayen al'ada: .animate() Misali: $("#myElement").animate({ left: '250px', opacity: '0.5' }) Yana rayar da kashi tare da ID "myElement" ta canza matsayinsa na hagu da bayyane.

 

Waɗannan misalan suna nuna yadda ake amfani da ɓangarori daban-daban na asali na asali na jQuery don zaɓar abubuwa, sarrafa kaddarorin su, da amfani da tasiri ko rayarwa. jQuery yana ba da ɗimbin tsari na hanyoyi da ayyuka don sauƙaƙe da haɓaka ayyukan ci gaban yanar gizo.