Mifano ya jQuery ni rahisi na maelezo. Mfano wa kutumia jQuery. Nakala () mfano

→ mifano ya jQuery kwa Kompyuta

jQuery ni maktaba ya javascript inayojumuisha vitendaji vya kivinjari - vifungashio vya kudhibiti vipengee vya DOM (Mfano wa Kitu cha Hati). Kanuni yake kuu ni matumizi ya moja kwa moja ya utaratibu unaohitajika, kulingana na kivinjari. Kwa mfano, kupata kipengele cha html cha hati kwa kitambulisho hutokea kwa njia tofauti katika vivinjari tofauti. Kabla ya jQuery, nilitumia kazi hii:

Kazi getObj(objID)( if (document.getElementById) (return document.getElementById(objID);) vinginevyo ikiwa (document.all) (return document.all;) vinginevyo ikiwa (document.layers) (return document.layers;) )

Ili kufanya kitendo sawa katika jQuery, fanya hivi:

$("#objID") au jQuery("#objID")

Kupiga simu $() kazi ni sawa na jQuery() , kwani ya kwanza ni lakabu kwa ya pili. Ikiwa hautumii maktaba zingine kama jQuery, unaweza kufikia nafasi ya majina kwa usalama kupitia $(). Vinginevyo, ni bora kutumia jina la moja kwa moja la kitu - jQuery. Zaidi ya hayo, tunafikiri kwamba hakuna maktaba nyingine.

Kuanza na jQuery

Basi hebu tuanze. Hatua ya kwanza ni kupata toleo jipya zaidi la maktaba ya jQuery kutoka kwa tovuti rasmi ya mradi http://jquery.com/ au pakua jQuery hapa. Kuna matoleo mawili kwenye kumbukumbu na kwenye tovuti rasmi: iliyoshinikizwa na kuendelezwa. Kwenye wavuti ni bora kutumia iliyoshinikwa, na ikiwa unataka kujaribu, tumia ya pili. Kwanza kabisa, tunajumuisha maktaba ya jQuery kwenye mwili wa ukurasa:

Baada ya hayo, nafasi ya majina ya javascript inafafanuliwa kwa njia ambayo simu kwa $() kazi inachukuliwa na jQuery na unaweza kupata kitu chochote cha hati ya html kama kitu kwa kutumia usemi $("#objID") . Ambapo objID ni kitambulisho cha kitu.

jQuery na CSS

Kama mfano wa kwanza, hebu tuangalie jinsi jQuery na CSS zinavyofanya kazi. Kuna njia mbili kuu za kuendesha CSS kwa kutumia jQuery: kubadilisha sifa moja au kadhaa mara moja. Zinatekelezwa kupitia css() kazi. Kwa nadharia inaonekana kitu kama hiki:

$("#objID").css("onyesha","block") $("#objID").css(( display:"block, margin:"10px", color:"#ffffff" ))

Mfano wa kubadilisha sifa moja ya CSS

Mfano wa kubadilisha sifa moja ulikuwa wa mafanikio!

Chanzo:

Mfano wa kubadilisha sifa moja ulikuwa wa mafanikio!

Mfano wa kubadilisha sifa nyingi za CSS

Mfano wa kubadilisha sifa nyingi!

Chanzo:

function demo_css())( $("#span2").css(( color:"#ffffff", padding:"5px", background:"#980000" )); ) Mfano wa kubadilisha sifa nyingi!

Kubadilisha maandishi na html

Ili kubadilisha maandishi au msimbo wa html, kuna vitendaji text() na html() .

$("#objID").text("True la la") $("#objID").html("

Kweli la

Zaidi ya hayo, ukijaribu kuingiza msimbo wa HTML kwa kutumia maandishi () kazi, utaipokea katika hali yake ya asili. Nakala() kazi huepuka kila kitu.

Nakala () mfano

Chanzo:

kazi set_text())( $("#span3").text("Asante!");)

Mfano wa kutumia html()

Chanzo:

function set_html())( $("#span4").html("Asante! Hii ni bora zaidi."); )

Kusimamia Sifa na jQuery

attr() chaguo za kukokotoa hudhibiti sifa za kipengele chochote. Kwa msaada wake unaweza kuongeza au kubadilisha kichwa, href, thamani, src na kadhalika.

Attr() mfano

Chanzo:

kazi plus_ten())( var cur_value = $("#text").attr("thamani"); cur_value = parseInt(cur_value) + 10; $("#text").attr("thamani",cur_value); )

Washughulikiaji wa Tukio katika jQuery

Orodha kamili inapatikana katika http://api.jquery.com/category/events/. Nitatoa mifano michache tu. Kidhibiti cha mbofyo cha kawaida zaidi cha tukio. Katika jQuery unaweza kuikata kupitia click() kazi.

Bonyeza () Mfano

Chanzo:

$("#butt").click(function())( alert("Je, uliamua kuiangalia?"); ));

Keyup () mfano

Ingiza kitu:

Uliingiza:

Chanzo:

Ingiza kitu:
Umeweka: $("#text2").keyup(function())( ikiwa ($("#text2").val())( $("#text2_target").css((chinichini:"#980000" )); ) mwingine ( $("#text2_target").css((chinichini:"#ffffff")); ) $("#text2_target").maandishi($("#text2").val()); ));

Mfano wa kutumia bind()

Bonyeza juu yangu!


Chanzo:

div#log( background:#1C93A5; width:300px; height:100px; padding:10px; color:#fff; ) Bofya kwangu!
$(document).ready(function() ( $("#logi").bind("bofya", kazi(e) ( $("#coord").html("X coordinate: "+ e.pageX + " Y kuratibu: " + e.pageY + ""); )); ));

JQuery ni maktaba kubwa. Ilisaidia kuzuia mitego yote ya IE6 kikamilifu. Hapo awali, uoanifu wa vivinjari mbalimbali lilikuwa tatizo kubwa linalowakabili wasanidi programu. JQuery ilikabiliana vyema na tofauti zote katika kuonyesha mipangilio katika vivinjari tofauti.

Leo, vivinjari vina suluhisho bora za umoja. Tunaweza kutumia haki zote za ES5 kwa raha, na pia tunayo HTML5 API, ambayo hurahisisha zaidi kuchakata vipengele vya DOM. Wasanidi programu wako kwenye hatihati ya kusahaulika na wanaondoka kwenye jQuery kwa baadhi ya miradi. Hasa katika kesi ya microservices na mipango isiyo ngumu.

Usinielewe vibaya - JQuery bado ni maktaba nzuri sana, na bila shaka, 70% ya wakati itabidi uitumie. Ingawa kwa kurasa ndogo zilizo na JS ndogo, unaweza kutumia VanillaJS au mfumo mwingine. Hizi zinafaa kwa programu za rununu.

Kweli, hapa kuna mifano 10 ya nambari ya kufanya kazi ambayo unaweza kufanya bila jQuery.

Kufuatilia upakiaji wa ukurasa kukamilika tukio

Jambo la kwanza unalofanya unapotumia jQuery ni kufunga msimbo kwa $(document).ready() mbinu ili kujua wakati DOM iko tayari kudanganywa. Bila JQuery, tunaweza kutumia tukio la DOMContentLoaded. Hapa kuna mfano wa nambari:

// Sikiliza tukio la DOMContentLoaded kwa hati nzima, na chaguo la kukokotoa lisilojulikana // Unaweza kufunga msimbo wako kwenye mikono ya chaguo hili la kukokotoa // na itatekeleza ukurasa unapopakiwa. document.addEventListener("DOMContentLoaded", chaguo la kukokotoa () ( // hodi yetu ya Kihawai, itaonyeshwa kwenye kiweko cha kiweko.log("Aloha"); ));

Viteuzi vya kipengele bila JQuery

Siku moja, tutalazimika kuchagua vipengee kwa kutumia kitambulisho, darasa au vitambulisho, na jQuery ni mojawapo bora zaidi. Viteuzi ambavyo vinafanana kabisa na sintaksia ya CSS. Leo, vivinjari vimeanzisha API mbili muhimu - querySelector na querySelectorAll.

// Unaweza kutumia document.querySelector kupata kipengele cha kwanza kinacholingana na vigezo // inachukua hoja moja tu - wateuzi wa CSS. var lochNess = document.querySelector(".monsters"); console.log("Inatoka Uskoti - " + lochNess.textContent); // tunaweza pia kupata mkusanyiko kwa kutumia document.querySelectorAll. // inarejesha orodha ya vipengele vya dom vinavyolingana na kigezo var scary = document.querySelectorAll(" .monsters") ; console.log("Ficha na utafute mabingwa: "); kwa (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

  • Nessy
  • Mguu mkubwa
  • La chupacabra

Kuunda na kufuta vidhibiti tukio (mbinu)

Kusikiliza matukio ni sehemu ya msingi ya kujenga programu za wavuti. Kihistoria, kumekuwa na kambi mbili kubwa - IE na zingine. Lakini leo, tunatumia tu addEventListener

Var btn = document.querySelectorAll("button"), list = document.querySelector("ul"); // Piga simu addEventListener kwenye tukio unalotaka. // huanza kufuatilia tukio la kubofya kwenye kipengele. btn.addEventListener("bonyeza", kazi () ( // Kitufe kinapobofya, tunataka kuanzisha kiwango cha tukio kwenye orodha yetu. // Ili kufanya hivyo, tunahitaji kuongeza tukio kwenye orodha yetu // ili kipanya kinapoelea juu ya kipengele, chaguo la kukokotoa litawaka. list .addEventListener("mouseover", enlarge); )); // Ili kughairi tukio la kukuza, tumia removeEventListener. btn.addEventListener("bonyeza", kitendakazi () ( // Kuondoa matukio hakutafanya kazi na vitendakazi ambavyo havijatajwa majina, tumia vilivyotajwa tu list.removeEventListener("mouseover", enlarge); )); // Wacha tuunde kazi ambayo itaongeza. var enlarge = kazi () ( // Ongeza darasa kwa vipengele list.classList.add("zoomed"); // wakati kielekezi kinaondoka kwenye orodha, ondoa darasa ili urudi kwenye orodha ya mizani ya kawaida.addEventListener("mouseout ", kazi ( ) ( list.classList.remove("zoomed")); ); // Sasa tunataka kuangazia majina wakati umebofya. // Mbofyo unapoanzishwa kwenye kipengee, kinapaswa kugeuka kijani kibichi // Shukrani kwa uwakilishi wa tukio, tunaweza kuongeza tu kidhibiti kwenye kipengele cha mzazi // Kwa njia hii, hatutaunda wasikilizaji wa tukio kwa kila moja.

  • . list.addEventListener("bofya", chaguo la kukokotoa (e) ( // onyesha kipengele lengwa katika kijani e.target.classList.add("kijani"); ));

    Washa ukuzaji Zima ukuzaji

    Bofya kwenye jina ili kuliangazia

    • Chewbacca
    • Han Solo
    • Luka
    • Boba fett

    Kijani ( rangi: kijani; ) .iliyokuza ( mshale: pointer; ukubwa wa fonti: 23px;)

    addEventListener alitumia hoja ya tatu, lakini hii ni hiari. Kama unaweza kuona, nambari inaonekana sawa na jQuery.

    Kuongeza, kuondoa madarasa bila jQuery katika JS safi

    Kusimamia madarasa ya vipengee bila jQuery ilikuwa shida kubwa katika siku za zamani. Lakini sivyo tena. Shukrani kwa mali ya classList. Na ikiwa unahitaji kubadilisha sifa, unaweza kutumia setAttribute.

    Var btn = document.querySelectorAll("button"), div = document.querySelector("#myDiv"); btn.addEventListener("click", kazi () ( // njia rahisi ya kupata sifa za kipengele console.log(div.id); )); // Element.classList huhifadhi madarasa yote ya vipengele kutoka kwa DOMTokenList. var madarasa = div.classList; btn.addEventListener("bonyeza", kazi () ( console.log(classes); )); btn.addEventListener("bofya", kazi () ( // Kuongeza na kuondoa madarasa.add("nyekundu");)); btn.addEventListener("bofya", kazi () ( // Geuza class classes.toggle("fidden"); ));

    Kitambulisho cha kuonyesha Madarasa ya rangi nyekundu Geuza mwonekano

    Mraba ( upana: 100px; urefu: 100px; ukingo-chini: 20px; mpaka: 1px kijivu thabiti; kipenyo cha mpaka: 5px; ) .imefichwa ( mwonekano: siri; ) .nyekundu ( rangi ya usuli: nyekundu; )

    Kupata na kubadilisha maudhui ya HTML ya kipengele

    jQuery ina njia za urahisi text() na html(). Badala yake, unaweza kutumia maandishiYaliyomo na sifa za innerHTML, ambazo zimekuwepo tangu muda mrefu kabla ya jQuery.

    Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("kifungo"); // Kwa njia hii unaweza kupata kwa urahisi maandishi yote ya kipengele mti var myContent = myText.textContent; console.log("textContent: " + myContent); // Tumia textContent kuchukua nafasi ya maandishi ya kipengele // kuondoa ya zamani, na kuweka maandishi mapya btn.addEventListener("click", kazi () ( myText.textContent = " Koalas ni wanyama bora "; )); // Ikiwa tunahitaji HTML ya kipengele, tumia innerHTML. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // Ili kuchukua nafasi ya html, toa tu btn.addEventListener mpya("click", kazi () ( myText.innerHTML = " Penguins ni wanyama bora zaidi "; ));

    Ni wanyama gani bora?

    Koala
    Penguins

    Kuingiza mpya na kufuta vipengele vilivyopo

    Licha ya ukweli kwamba JQuery hurahisisha sana kazi kwa kuongeza na kuondoa vitu, hakuna mtu alisema kuwa hii haiwezi kufanywa kwa msimbo safi wa JavaScript. Huu hapa ni mfano wa jinsi ya kuongeza, kuondoa, au kubadilisha kipengele kwenye ukurasa.

    Var lunch = document.querySelector("#lunch"); // Wacha tuseme tuna menyu ya chakula chetu cha mchana // Wacha tuongeze kitu kwake var addFries = kazi () ( // Kwanza tunaunda kipengee na kuijaza na yaliyomo var fries = document.createElement("div"); fries .innerHTML = "

  • Fries
    • "; // Mara tu hili likifanywa, tutatumia appendChild kuiingiza kwenye ukurasa. // Kipengele chetu kitaonekana kwenye ukurasa katika menyu ya chakula cha mchana.appendChild(fries); ); // Ongeza jibini kwenye burger yetu) var addCheese = kazi () ( var beef = document.querySelector("#Nyama ya Ng'ombe"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML = "Jibini"; // Chomeka kipande cha juu: // Chukua kipengee cha nyama ya ng'ombe na utumie kuingizaKabla. // Hoja ya kwanza kwenye kiingilioKabla ya mbinu ni kipengele chetu cha kuongeza // Hoja ya pili ni kipengele ambacho tutaongeza kabla yake. imeunda beef.parentNode.insertBefore(topSlice, nyama ya ng'ombe); //Chini kipande : // Inahitaji kufanya ujanja kidogo! // Toa kipengele kinachofuata cha karibu kama kigezo cha pili cha kuingizaKabla, // kwa njia hii tunaingiza yaliyomo "baada ya " kipengele unachotaka beef.parentNode.insertBefore(bottomSlice, beef.nextSibling); ); var removePickles = kazi () ( // ondoa kipengele var pickles = document.querySelector("#pickles"); ikiwa (kachumbari) ( pickles.parentNode.removeChild(pickles); ) ); // Kitamu! var btn = document.querySelectorAll("kifungo"); btn.addEventListener("bonyeza", addFries); btn.addEventListener("bofya", addCheese); btn.addEventListener("bofya", ondoaPickles);

    Ongeza kukaanga kwenye chakula cha mchana Ongeza jibini kwenye sandwich Ondoa kachumbari Chakula Changu cha Mchana

    • Sandwich yangu
    • Mkate
    • Kachumbari
    • Nyama ya ng'ombe
    • Mayo
    • Mkate

    Pamoja na ujio wa jQuery, waandaaji wa programu za wavuti wana fursa ya kuunda athari za kuvutia za kuona bila kutumia teknolojia ya flash. Nakala hii inatoa mifano kadhaa ya kushangaza ya matokeo gani ya kushangaza yanaweza kupatikana kwa kutumia zana za kawaida za kivinjari na mawazo yako.

    Athari ya glasi ya kukuza

    Athari iliyopangwa vizuri ambayo inakuwezesha kupanua sehemu ya picha ambayo mshale utakuwa iko. Katika vivinjari visivyojulikana na CSS3, glasi ya kukuza itakuwa mraba.

    Aviaslider

    Kitelezi hiki kina njia nane tofauti za kugeuza picha, ambayo kila moja inafurahisha jicho na mienendo yake iliyosafishwa vizuri.

    Urambazaji wa upana
    Onyesho la slaidi la picha kubwa
    Urambazaji kulingana na mduara

    Si mara nyingi sana kwamba unakutana na tovuti ambayo ina vipengele vingi vya pande zote. Programu-jalizi ya Urambazaji Viputo hukuruhusu kuunda urambazaji unaobadilika kulingana na miduara pekee.

    Paneli kunjuzi ya kuingia
    Zungusha

    Inakuruhusu kuzindua vipengele vya ukurasa karibu na mduara, na katika ndege tofauti za nafasi.

    Sanduku la kugeuza

    Programu-jalizi ya Flip hukuruhusu kugeuza vipengele kana kwamba ni kadi.

    Matunzio ya kuelea

    Matunzio ya picha yasiyo rasmi. Onyesho la kukagua yaliyomo ni kundi la picha zilizotawanyika zilizopigwa kwa kamera ya Polaroid.

    icarousel

    Slider rahisi lakini nzuri sana ya picha.

    Mtiririko wa picha

    Onyesho la slaidi lenye picha zinazosonga angani.

    Picha ya mwingiliano

    Njia ya kuvutia sana ya kutengeneza orodha ya bidhaa inayoingiliana.

    Mabadiliko ya Jqfancy
    Upigaji picha

    Inakuruhusu kupiga picha za sehemu binafsi za picha kwenye ukurasa. Bofya kwenye sehemu inayotakiwa ya picha na uone matokeo kwenye skrini.

    Mchanga wa haraka

    Programu-jalizi ya Quicksand itakuruhusu kupanga na kuchuja seti ya vipengee kwa kutumia madoido ya hali ya juu sana.

    Vidokezo vya muktadha wa slaidi

    Programu-jalizi hii itakuwa muhimu sana kwa kuunda maelezo ya kina ya vitu ngumu na ziara za maingiliano inapohitajika, huku ikichukua nafasi kidogo iwezekanavyo ili kutoa kiasi kikubwa cha habari.

    Sanduku za kuteleza

    Programu-jalizi ya visanduku vya kutelezesha itakusaidia kuunda matunzio yasiyo ya kawaida ya picha zenye manukuu.

    nyumba ya sanaa ya zoomer

    Matunzio ya picha ambayo vipengee vyake vitatokea kwa furaha unapoelea juu yake.

    Katika nakala hii, tutaangalia njia za mkato za AJAX za jQuery: pakia, pata, pataJSON, getScript na chapisho. Njia hizi hurahisisha sana kutekeleza maombi muhimu ya AJAX na, tofauti na kazi ya ajax, zinahitaji mistari michache ya msimbo kuandika.

    jQuery - njia ya kupakia

    Mbinu ya upakiaji imeundwa kurejesha data kutoka kwa seva katika URL maalum na kuiweka katika kipengele kimoja au zaidi zilizochaguliwa.

    Njia ya upakiaji ina syntax ifuatayo:

    Pakia(url [,data] [,kamili]) // vigezo katika mabano ya mraba ni hiari //url - mfuatano ulio na URL ambayo ombi lazima litumike //data (kigezo cha hiari) - data ambayo lazima itumwe kwa seva (katika muundo wa kamba au kitu) // kamili - vitendo vya ziada ambavyo lazima vifanyike baada ya ombi kukamilika (iliyoainishwa kwa kutumia kazi ya Kazi(responseText, textStatus, xhr) // majibuText - majibu ya seva // textStatus - hali ya majibu // xhr - XMLHTTPOmba kitu

    Mara nyingi, njia ya upakiaji hutumia GET kutuma ombi. Lakini pia inaweza kutumia njia ya POST. Hii hutokea tu wakati data ya kutumwa kwa seva imebainishwa sio katika muundo wa kamba, lakini kupitia kitu.

    Mifano ya kutumia njia ya mzigo

    1. Ingiza yaliyomo kwenye faili asidenav.tpl kwenye kizuizi chenye id="asidenav" baada ya DOM ya ukurasa kupakia:

    ... // baada ya kupakia DOM ya ukurasa $(function() ( // ingiza maudhui ya faili asidenav.tpl kwenye kipengele (#asidenav) // ikiwa faili haiko katika saraka sawa na HTML. hati, basi lazima ueleze zaidi njia kwake $("#asidenav").load("asidenav.tpl");

    2. Pakia sehemu ya faili ya demo.html kwenye kipengee unapobofya kitufe kilicho ndani yake:

    Pata maudhui ya demo.html ya faili ... $("#ajaxclick").click(function())( // pakia sehemu ya faili demo.html (#content1) kwenye kipengele id="content1" $. (hii).mzazi() .load("demo.html #content1");

    Yaliyomo kwenye faili ya demo.html:

    Onyesho la faili.html ......

    3. Pakia majibu content.php kwenye kipengele ambacho kina id="result" . Jibu hili litategemea thamani ya sifa ya maudhui ya data ambayo kitufe kilichotuma ombi la AJAX kwa seva inayo.

    Pakia maudhui 1 Pakia maudhui 2 Pakia maudhui 3 ... // unapobofya kitufe chenye darasa load-ajax-click $(".load-ajax-content").click(function())( // fafanua thamani ya sifa ya data -content var dataContent = $(this).attr("data-content");// omba data kutoka kwa faili kwa kutumia thamani ya sifa ya maudhui ya data, na itoe kwa kipengele id="matokeo." " if (dataContent) ( $ ("#result").load("content.php","content="+dataContent); ) ));



    MAKALA INAYOHUSIANA