Kaip pradėti naudotis „jQuery“: palengvinkite „Java“ programavimą

Atskleidimas: Jūsų palaikymas padeda išlaikyti svetainę! Mes uždirbame siuntimo mokestį už kai kurias paslaugas, kurias rekomenduojame šiame puslapyje.


Pagaliau daugiau nei 90% visų svetainių veikė „JavaScript“. „JQuery“ yra pati populiariausia „JavaScript“ biblioteka. Daugelyje šiuolaikinių svetainių ji naudojama maždaug 65% iš 10 milijonų populiariausių žiniatinklio svetainių..

Tai reiškia, kad jei norite būti žiniatinklio kūrėju, svetainės dizaineriu ar žiniatinklio valdytoju, turite žinoti, kaip dirbti su „jQuery“.

Įvadas į jQuery

Contents

Kas yra jQuery?

„JavaScript“ yra programavimo kalba, naudojama interaktyvumui pridėti prie svetainių. „jQuery“ yra iš anksto sukurtų „JavaScript“ funkcijų biblioteka, kuri tvarko užduotis, paprastai valdomas naudojant „JavaScript“. Iš esmės „jQuery“ leidžia lengviau ir greičiau naudoti „JavaScript“.

„jQuery“ yra komandų biblioteka, leidžianti lengvai rasti, pasirinkti ir manipuliuoti HTML elementais tinklalapyje, atsižvelgiant į lankytojų veiklą. Pvz., Naudodami „jQuery“ galite pasirinkti tam tikrą elementą, pavyzdžiui, visus

antraštės elementus ir priversdami juos tam tikru būdu manipuliuoti, atsižvelgiant į lankytojų veiklą, pvz., keičiant šrifto dydį, kai pelė užveda pelės žymeklį virš jų.

„JQuery“ pranašumas yra gebėjimas lengvai rasti ir pasirinkti HTML elementus, nereikalaujant, kad HTML elementui būtų taikomi jokie papildomi atributai..

„jQuery“ palengvina sunkius dalykus

Viską, ką galite padaryti naudodami „jQuery“, galite padaryti ir su „JavaScript“. Skirtumas tas, kad daugelį dalykų, kuriuos gali būti gana sudėtinga atlikti naudojant „JavaScript“, labai lengva padaryti naudojant „jQuery“. Pažvelkime į du pavyzdžius: perjungti ir įjungti.

Slėpti arba rodyti puslapio elementus paspaudus

CSS rodymo ypatybė gali būti naudojama HTML elementams slėpti. Pasirinkite bet kurį HTML elementą naudodamiesi CSS parinkikliu ir ekrano ypatybei pritaikykite nė vienos vertės reikšmę, o elementas bus paslėptas. Jei norite, kad HTML elementas būtų paslėptas komandoje, CSS rodymo ypatybė yra tai, kaip galite tai padaryti.

Nėra labai sunku naudoti „JavaScript“, norint paslėpti ar parodyti HTML elementą, kontroliuojant CSS rodymo ypatybę. Tačiau „jQuery“ perjungimo () metodas apima daug integruotų parinkčių, kurios leidžia lengvai sukurti galingus perjungimo efektus, kuriuos būtų labai sunku kopijuoti naudojant „JavaScript“. Jei į „HTML“ dokumentą į „jQuery“ sąsają įtraukiate „jQuery“ vartotojo sąsają, taip pat galite naudoti daugybę „jQuery“ vartotojo sąsajos efektų norėdami valdyti, kaip paslėpti ir rodomi perjungiami elementai..

Jei norite išmokti naudoti „jQuery“ perjungimo () metodą, yra daug vietų, kur pradėti:

  • Sužinokite „jQuery“: nemokamas „jQuery“ fondo mokymo šaltinis. Verta baigti visą „jQuery“ pamoka ir mes susiejome su šaltiniais šio dokumento pabaigoje. Tačiau naudokite šią nuorodą, jei norite patekti tiesiai į skyrių, kuriame paaiškinamas perjungimo būdas.
  • „jQuery“ API dokumentacija: perjungimo metodo ir visų kartu su juo naudojamų parinkčių apžvalga.
  • „jQuery“ vartotojo sąsajos efektai ir perjungimas: „jQuery“ vartotojo sąsaja praplečia perjungimo metodą ir suteikia daugybę efektų. Be to, jame yra tiesioginė demonstracinė versija, kaip efektai papildo perjungimo metodą.
  • „jQuery toggle“ () metodas „W3Schools“: greitas perjungimo metodo įvadas ir kodo smėlio dėžė, kurioje galite tai išbandyti.
  • „JQuery Toggle Effect“ mokymo programa, kurią pateikė Akshay Jaiswal, ir „jQuery Toggle effect“, kurią pateikė Harry Finnas. Tai dvi „YouTube“ vaizdo įrašų vadovėliai, kurie trumpai parodo, kaip sukurti HTML dokumentą, kuriame yra „jQuery“, ir naudojant perjungimo metodą, norint paslėpti ar parodyti HTML elementą..

Vykdykite scenarijų naudodami „Trigger“ įvykių tvarkyklę

Kita užduotis, kurią „jQuery“ padaro labai lengva, yra suaktyvinti įvykių tvarkytoją, net jei tikrasis įvykis dar nepasibaigė. Pvz., Tarkime, kad turite scenarijų, kuris vykdomas kiekvieną kartą, kai paspaudžiamas konkretus mygtukas, naudojant „JavaScript“ paspaudimo įvykį. O kas, jei jūs taip pat norite, kad tas pats scenarijus būtų paleistas bet kuriuo metu, atliekamas kitas veiksmas, tarsi būtų paspaustas pats mygtukas? Atsakymas yra trigerio () įvykių tvarkytojas.

Pagrindinis trigerio metodo naudojimas apima paleidimo metodo taikymą konkrečiam įvykiui ir jo naudojimą, kad suaktyvintų antrą įvykį, kai įvyksta pirmasis įvykis. Tai gali atrodyti sudėtinga, tačiau pagrindinis trigerio metodo naudojimas yra paprastas. Naudokite šiuos išteklius, kad aprašytumėte pagrindus, taip pat pažvelkite į keletą sudėtingesnių metodo naudojimo būdų.

  • Įvykių tvarkytuvų suaktyvinimas: naudokite šią nuorodą, norėdami patekti tiesiai į skyrių apie įvykių tvarkytojų suaktyvinimą „Mokymo jQuery“ vadove..
  • „jQuery“ API dokumentacija: trigerio metodo ir visų su juo naudojamų parametrų bei parinkčių apžvalga.
  • „jQuery trigger“ () metodas „W3Schools“: „jQuery trigger“ metodo įvadas ir kodo smėlio dėžė kodo testui.
  • Kaip sukurti pasirinktinius įvykius „jQuery“: Svetainės taško pamoka, paaiškinanti, kaip sukurti pasirinktinius „jQuery“ įvykius, kad įjungimo metodą būtų galima naudoti su tinkintais įvykiais, o ne su įmontuotais „jQuery“ įvykiais..
  • Neskaitykite tikrųjų renginių pavadinimų naudodami „jQuery“! Daugelis kūrėjų naudoja įprastus „jQuery“ įvykius, tokius kaip "paspauskite" kaip įvykio tipas, dėl kurio suaktyvinamas įvykis. Tačiau tai gali sukelti problemų, ir Davidas Walshas rekomenduoja naudoti pasirinktinius įvykius su trigerio metodu.

„JQuery“ naudojimo pranašumai

Jei „jQuery“ tik palengvina „JavaScript“ naudojimą, kodėl mes išvis naudojame „jQuery“? Kodėl gi ne tik klijuoti „JavaScript“ ir vengti mokytis visiškai naujo komandų ir jų diegimo rinkinio?

„Wikipedia“ duomenimis, „jQuery“ siūlo bent keturis privalumus.

  1. „jQuery“ skatina atskirti scenarijus ir HTML. Nors scenarijus galima rašyti tiesiai į HTML dokumentus, dabartinė interneto dizaino ir kūrimo bendruomenės mintis yra ta, kad visi HTML, CSS ir „JavaScript“ turėtų būti prižiūrimi atskirai. Tai apsunkina tai, kad turi būti būdas susieti scenarijus su konkrečiais HTML elementais ir įvykiais. Be „jQuery“ paprasčiausias būdas tai padaryti yra pridėti įvykio atributus į HTML dokumentą, iškviečiantį „JavaScript“ funkcijas. Tačiau „jQuery“ išvengia poreikio tai padaryti pateikdami paprastą sintaksę, skirtą dinamiškai pridėti įvykių tvarkytuvus, naudojant „JavaScript“. Tai leidžia visiškai atskirti „JavaScript“ nuo HTML dokumento.
  2. „jQuery“ skatina programuotojus rašyti trumpesnius, aiškesnius scenarijus. „jQuery“ yra sukurtas trumpumui. Viskas, ką galite padaryti su jQuery, galite padaryti ir su paprastu „JavaScript“. Tačiau jQuery kodas paprastai bus daug trumpesnis ir aiškesnis nei „JavaScript“ kodas, norint įvykdyti tą pačią užduotį.
  3. „JQuery“ naudojimas pašalina nenuoseklumą naršyklėse. Įvairūs naršyklių varikliai „Java“ teikia šiek tiek skirtingai, tačiau „jQuery“ buvo sukurta valdyti skirtingų naršyklių skirtumus ir užtikrinti nuoseklią naršyklių patirtį..
  4. „jQuery“ yra išplečiama. „JQuery“ biblioteka buvo sukurta lengvai papildyti naujais elementais, įvykiais ir metodais. Kai šie nauji elementai bus įtraukti į vietinę „jQuery“ biblioteką, juos bus galima lengvai panaudoti visoje svetainėje kaip papildinį.

Darbo su „jQuery“ pradžia

Jei esate pasirengęs pradėti mokytis naudotis „jQuery“ ir dar nesate susipažinęs su „JavaScript“, pirmiausia reikia išmokti „jQuery“..

Kaip jau minėjome, „jQuery“ yra „JavaScript“ komandų biblioteka. Dėl to „jQuery“ laikosi tos pačios pagrindinės sintaksės ir struktūros kaip „JavaScript“. Norint įsisavinti „jQuery“, labai svarbu gerai suprasti „JavaScript“ sintaksę, struktūrą ir pagrindines funkcijas. Pasak „jQuery“ fondo:

Visos „jQuery“ galios pasiekiamos naudojant „JavaScript“, todėl norint gerai suprasti, susisteminti ir suderinti savo kodą, labai svarbu gerai suvokti „JavaScript“. Reguliariai dirbant su „jQuery“, bėgant laikui, gali būti patobulintas jūsų „JavaScript“ įgudimas, gali būti sunku pradėti rašyti „jQuery“ neturint žinių apie „JavaScript“ įmontuotus konstruktus ir sintaksę..

Jūsų vystymosi aplinka

Prieš pradėdami kodavimą, turite nustatyti savo kūrimo aplinką. Geros žinios yra tai, kad viskas, ko jums tikrai reikia norint pradėti rašyti „jQuery“, yra interneto naršyklė, teksto rengyklė ir „jQuery“ kopija..

Nors bet kuri interneto naršyklė tai darys, kūrėjai naudoja „Mozilla Firefox“ arba „Google Chrome“. Jei taip pat turėtumėte turėti „Internet Explorer“ ar „Edge“, „Opera“ ir „Safari“, kad galėtumėte išbandyti savo kodą keliose naršyklėse, jei dar nenaudojate „Firefox“ ar „Chrome“, atsisiųskite ir įdiekite naujausią vienos ar abiejų šių nemokamų programų versiją ir naudoti jį plėtros tikslais.

Žinoma, kodą rašyti galėjote naudoti „Notepad“, bet kodėl gi jūs? Yra daugybė puikių teksto rengyklių, kurias galima įsigyti nemokamai arba už labai pagrįstą kainą. Jos teikia daug funkcijų, palengvinančių kodavimą ir mažiau linkusių į klaidas. Kai kurie mūsų mėgstamiausi yra „Atom“, „TextMate“ „Apple“ kompiuteriams, „Notepad ++“, skirti „Windows“ kompiuteriams, ir skliausteliuose.

Galiausiai, kadangi „jQuery“ yra komandų biblioteka, pagrįsta „JavaScript“, turėsite paskambinti „jQuery“ biblioteka iš bet kurio dokumento, kuriame naudojama „jQuery“. Norėdami tai padaryti, turėsite atsisiųsti „jQuery“ arba susieti su „jQuery“ biblioteka, esančia internete..

Šaltiniai

Mes ieškojome žiniatinklio, norėdami rasti geriausius „jQuery“ vadovus, el. Knygas ir interaktyvius kursus. Mes rekomenduojame, kad jūs pasinaudotumėte keliais iš šių šaltinių ir dirbtumėte naudodamiesi ištekliais, kurie geriausiai atitinka jūsų mokymosi stilių.

Mūsų rekomenduojama mokymo eiga prasideda nuo kelių pagrindinių interaktyvių vadovėlių, kurie parodys „jQuery“ galią ir parodys, kas įmanoma naudojant populiariausią pasaulyje „JavaScript“ biblioteką. Toliau pasinerkite į „jQuery“, apžvelgdami išsamius vadovus, kuriuos siūlo kai kurie gerbiamiausi interneto svetainių kūrimo pavadinimai, įskaitant „Mozilla“ kūrėjų tinklą ir „jQuery“ fondą. Galiausiai įsisavinkite „jQuery“, naudodamiesi el. Knygos ar popieriaus viršelio tekstu.

Nemokami interaktyvūs kursai

Yra tik tiek, kad rašytinis dokumentas gali padėti paaiškinti, kaip veikia programavimo kalba ir ką ji gali padaryti. Jei norite iš tikrųjų sutvarkyti kalbos galią, turite ją pamatyti. Nemokami interaktyvūs kursai yra vienas iš geriausių būdų greitai įsisavinti pagrindinę programavimo kalbos sintaksę, kartu mokantis, ką ji tikrai gali padaryti.

Kadangi „jQuery“ fondas rekomenduoja išmokti „JavaScript“ prieš pasineriant į „jQuery“, rekomenduojame tą patį padaryti. Šie nemokami kursai leis jums greitai parašyti pagrindinį „JavaScipt“:

  • „JavaScript“ kelių kelionės 1 dalis iš „CodeSchool“: Tik 1 dalis šios kelionės yra nemokama. Likusi kelionės dalis yra paslėpta už atlyginimo sienos. Vykdykite nemokamą turinį ir tada eikite į Codecademy, kad mokytumėtės toliau.
  • „JavaScript“ pateikė „Codecademy“: Šis viso ilgio internetinių kursų turinys yra nemokamas. Prieiga prie viktorinų yra neprivaloma ir kainuoja. Kurso baigimas turėtų užtrukti apie dešimt valandų, ir jis leis jums parašyti pagrindinį „JavaScript“ kodą. Naudodamiesi šiuo kursu po diržu, būsite pasirengę kovoti su tam tikra „jQuery“ problema.

Yra du interaktyvūs „jQuery“ kursai, kuriuos turėtumėte aplankyti, jei norite gauti gerą pagrindinį supratimą apie tai, kas įmanoma naudojant „jQuery“. Šie kursai apima:

  • Išbandykite „jQuery“: nemokamas „jQuery“ įvadas, kurį parengė „jQuery“ fondas bendradarbiaudamas su „CodeSchool“.
  • „jQuery by Codecademy“: Šis kursas bus baigtas maždaug trimis valandomis. Kaip ir „JavaScript“ kurso atveju, kurso turinys yra nemokamas, tačiau jei norite surengti viktorinas, turėsite sumokėti už jas. Mūsų rekomendacija yra išnaudoti nemokamą turinį ir pereiti prie papildomų išteklių. Kai baigsite, jūs žinosite, kaip naudoti „jQuery“ HTML elementams pasirinkti, kaip formuoti tuos elementus ir kaip susieti svetainės lankytojų veiksmus su „jQuery“ kodu, kad svetainė reaguotų interaktyviai..

Pramonės vadovų giluminiai patarimai ir mokymosi vadovai

„Java“ ir „jQuery“ mokymasis turėtų vykti kartu. Jei esate pasirengęs gilintis į „jQuery“, taip pat turėsite išplėsti savo žinias apie „JavaScript“. Viena geriausių vietų sužinoti apie „JavaScript“ yra „Mozilla“ kūrėjų tinklas (MDN). Peržiūrėkite šiuos puikius išteklius:

  • „JavaScript“ pagrindai: Nors galbūt išmokote „JavaScript“ naudojimo faktus per mūsų rekomenduojamus interaktyvius kursus, MDN sužinosite, kaip profesionalūs kūrėjai galvoja apie „JavaScript“ ir juos naudoja. Jei atidžiai perskaitysite, šis dokumentas užtruks keletą valandų.
  • „JavaScript“ vadovas: Šiame išsamiame vadove ir vadove bus pateiktos visos pagrindinės „JavaScript“ kalbos temos, įskaitant funkcijas, klaidų tvarkymą, kilpas, gramatiką, išraiškas ir dar daugiau. Padarykite tai naudodamiesi šiuo vadovu ir žinosite daugiau „JavaScript“, nei vidutiniai interneto dizaineriai.

Jei tai padarėte naudodamiesi „MDN“ „JavaScript“ šaltiniais, būsite visiškai pasirengę dalyvauti „jQuery“ fondo siūlomuose mokymuose. „JQuery“ fondo svetainėje rasite išsamų mokymo centrą, suskirstytą į skyrius. Kiekvienas skyrius yra skirtas konkrečiai temai, pavyzdžiui, apie „jQuery“, efektus, „Ajax“, papildinius ir kt. Šis autoritetingas šaltinis yra išsamus ir techninis – tik tai, ko jums prireiks, jei įvaldysite „jQuery“.

El. Knygos ir knygos

Kai atliksite savo išteklius, kuriuos jau aprėpėme, būsite pasirengę naudoti „jQuery“ bet kokiam įprastam interneto dizaino scenarijui išspręsti. Be to, turėsite pakankamai žinių, kad galėtumėte rasti pagalbą, kurios jums reikia norint išspręsti sudėtingesnes problemas naudojant „jQuery“ API.

Kai būsite pasirengę tapti pažangiu „jQuery“ kūrėju, yra keli tekstai, kurie gali jums padėti.

Nemokamos elektroninės knygos

Mes suradome dvi nemokamas elektronines knygas, turinčias puikią reputaciją „jQuery“ bendruomenėje. Turėdami tam tikrą „jQuery“ kodavimo patirtį pagal savo diržą, sukurkite naują supratimo apie populiariausią „JavaScript“ biblioteką lygį, atlikdami savo darbą per vieną arba abu šiuos aukštos kokybės tekstus:

  • „jCuery“ pagrindai, kuriuos pateikė „BoCoup, LLC .: Dalis el. knygos ir dalis interaktyvios vadovėlės. Šis tekstas apima„ jQuery “tiek rašytiniu formatu, tiek su praktiniais pavyzdžiais..
  • „jQuery Succinctly“, parašė Cody Lindley ir priglobta „Syncfusion“: Šimtas puslapių teksto, apimantis sąvokas, būtinas pažengusiam „jQuery“ tobulinimui. Jei tik pradedate, tai nėra jums skirtas tekstas, tačiau jei esate pakankamai kompetentingas „JavaScript“ ar „jQuery“ kūrėjas, pasiruošęs žengti kitą žingsnį, šis tekstas yra puikus pasirinkimas.

Minkštu viršeliu tekstai

Jei jums labiau patinka fizinis tekstas, čia pateikiami keli geriausi šiandien galimi „jQuery“ tekstai:

  • „JQuery“ mokymasis: Karlas Švedbergas, dabartinis „jQuery“ fondo patarėjų tarybos narys, kartu su žiniatinklio kūrėju ir įtakingu „Drupal“ programuotoju Jonathanu Chafferiu sukūrė šį tekstą, kad jis būtų tinkamas „Java“ naujokėms ar patyrusiems kūrėjams. Šis tekstas taip pat prieinamas „Kindle“.
  • „JavaScript“ ir „JQuery“, interaktyvios internetinės svetainės kūrimas: Šis Jono Ducketto tekstas papildo pagrindinį jo tekstą HTML ir CSS ir gali būti populiariausias „JavaScript“ ir „jQuery“ tekstas, prieinamas šiandien..
  • „jQuery in Action“: Bear Bibeault, Yehuda Katz ir Aurelio De Rosa: Katz ir De Rosa yra aktyvūs „jQuery“ fondo nariai – Katz kaip patarėjų tarybos narys ir De Rosa kaip „Content“ komandos narys. Šis autoritetingas tekstas yra greitas „jQuery“ vaizdas, idealiai tinkantis pradedantiems „JavaScript“ kūrėjams.

Projektavimas naudojant jQuery

Šiame skyriuje nagrinėsime, kaip „jQuery“ naudoti kuriant nuostabias sąveikaujančias svetaines. Jo pabaigoje žinosite turimus įrankius ir turėsite visas reikalingas žinias, išteklius ir įrankius..

„JavaScript“

„JavaScript“ yra programavimo kalba, įmontuota kiekvienoje šiuolaikinėje interneto naršyklėje. Kartu su HTML ir CSS, tai yra trečioji šiuolaikinių interneto technologijų triada.

„JavaScript“ yra aukšto lygio bendroji programavimo kalba, kurią galima naudoti atliekant įvairias scenarijų užduotis tiek žiniatinklyje, tiek internete. Pagrindinis būdas, kuriuo dizaineriai naudoja „JavaScript“, yra aktyvinti vartotojo sąveiką. Stiliaus pakeitimai ir AJAX skambučiai yra du vartotojo sąveikos pavyzdžiai, kuriuos galima įjungti naudojant „JavaScript“. Pažvelkime į kiekvieną trumpai.

Bet pirmiausia žengsime žingsnį atgal ir aptarsime kai kuriuos „JavaScript“ aspektus.

Stilius keičiamas naudojant „JavaScript“

Nors tinklalapio stilius paprastai yra kaskadinių stiliaus lapų (CSS) sritis, „JavaScript“ gali būti naudojama manipuliuoti CSS. Stiliais galima tiesiogiai manipuliuoti, pasirenkant elementą ir naudojant stiliaus ypatybę:

Mano skyriaus turinys

document.getElementById ("mano-div") .style.backgroundColor = "mėlyna";

Tas „JavaScript“ elementas sugriebia elementą su „my-div“ ID ir taiko foninę mėlynos spalvos spalvą. Nors tiesiogiai manipuliuoti CSS su „JavaScript“ yra naudinga, jei norite pakeisti daugybę stilių iš karto, yra daug lengviau įtraukti šiuos stilius į savo svetainės CSS ir pritaikyti stilius naudojant „JavaScript“. Tai gali padaryti vienas iš būdų:

.pirmosios valstybės {
fono spalva: # 303030;
spalva: #fff;
kraštas: 3px kietas #ddd;
plotis: 200 taškų;
aukštis: 200 taškų;
}
.antrosios valstybės {
fono spalva: #ddd;
spalva: # 333;
kraštinė: 3 taškų kietas # 333;
plotis: 300 taškų;
aukštis: 300 taškų;
}

Mano skyriaus turinys

document.getElementById ("mano-div") .onclick = function () {
this.className = "antra valstybė";
}

Dabar, kai bus spustelėtas „div“ elementas su „id-atributu„ my-div “, pirmosios būsenos klasė bus pašalinta ir pakeista antrosios būsenos klase, o antrosios būsenos klasė bus pritaikyta CSS.

Pridėti klasės animaciją

Turinio atnaujinimas skraidant naudojant AJAX

AJAX, reiškianti asinchroninį „JavaScript“ ir XML, yra technika, naudojama norint pridėti turinį į tinklalapį neatnaujinant puslapio. Pagrindinė idėja yra ta, kad „JavaScript“ siunčia duomenis į interneto serverį užkulisiuose, gauna atsakymą iš serverio ir, remdamasi tuo atsakymu, koreguoja tinklalapio turinį..

Tai gali atrodyti šiek tiek per daug teoriškai, todėl pasinaudokime praktiškumu. AJAX įgalina tokius dalykus kaip automatinio užbaigimo funkcijos, begalinis slinktis ir momentinės paieškos rezultatai. Kiekvienu atveju žiniatinklio puslapis siunčia duomenis į žiniatinklio serverį ir įkelia atsakymą į tinklalapį neatnaujindamas.

AJAX skambučio įgyvendinimas yra sudėtingas uždavinys, peržengiantis pagrindinį „Java“ programavimą. Tačiau kaip AJAX, kaip sąsajos kūrėjas ar dizaineris, yra viena „JavaScript“ funkcija, be kurios vargu ar galite apsieiti. Kitame skyriuje išryškinsime puikų AJAX šaltinį.

„JavaScript“ šaltiniai

Jei jūsų „JavaScript“ įgūdžiai yra šiek tiek aprūdę, pateikiame tris puikius šaltinius, kurie padės jums greičiau įsikurti:

  • „CodeCademy“ „JavaScript“ kursas pristato sintaksę, kilpas, valdymo srautą, duomenų struktūras ir objektus naršyklės interaktyviame kurse.
  • „Mozilla“ kūrėjų tinklo (MDN) „Java“ pagrindų mokymo programa yra „JavaScript“ sintaksės, kintamųjų, operatorių, sąlygų, funkcijų ir įvykių įvadas..
  • „MDN AJAX Getting Started“ yra trumpa instrukcija, apimanti pagrindinius AJAX skambučius. MDN taip pat galima rasti papildomų straipsnių, apimančių pažangias AJAX technologijas.

Nors „JavaScript“ yra galinga, „jQuery“ leidžia nuveikti daug daugiau ir mažiau pastangų.

„jQuery“: Pasiruošimas roko pasauliui

Pagalvokite apie „jQuery“ kaip iš anksto sukonstruotų „Java“ elementų pluoštą. Pažvelkime į pagrindinį pavyzdį. Štai kaip pasirinkti elementą su „my-div“ ID pirmiausia „JavaScript“, o paskui – „jQuery“.

// „JavaScript“
document.getElementById (‘mano div’as’);

// jQuery
$ (‘# my-div’);

Elementą pasirinkti pagal ID gana lengva abiem kalbomis. Tačiau, kaip matote, jQuery atlikti reikia maždaug 25 mažiau klavišų nei „JavaScript“.

„JQuery“ pridėjimas prie HTML dokumento

Turite įkelti „jQuery“, kad galėtumėte juo naudotis, ir tai padaryti yra du paprasti būdai. Galite atsisiųsti „jQuery“ ir įtraukti vietinę kopiją arba naudoti priglobtą kopiją, pvz., „Google“ priglobtas bibliotekas.

Štai kodas, kurį įtraukėte į HTML dokumentą, norėdami įkelti „jQuery“:

Atminkite, kad rašydami „jQuery“, turite įkelti savo kodą, kai „jQuery“ branduolys bus įkeltas.

„JQuery“ naudojimas naudojant „WordPress“

Ypatingas dėmesys, kurį reikia žinoti, yra tas, kad kai naudojate „jQuery“ „WordPress“ svetainėje, naudokite „jQuery“, kad priešdėtumėte kodą, o ne $. Yra būdų, kuriuos galite naudoti norėdami, kad $ prefiksas veiktų, bet jei to nepavyks padaryti, tiesiog priešdėkite savo kodą naudodami „jQuery“, pavyzdžiui:

// Normali jQuery
$ (‘# my-div’);

// jQuery for WordPress
jQuery (‘# my-div’);

„jQuery CSS“

Kaip ir naudodamiesi „JavaScript“ manipuliuodami CSS, tą patį galite padaryti ir su „jQuery“.

Mes galime gana efektyviai manipuliuoti klasėmis naudodami „jQuery“. Žemiau pateiktas scenarijus stebi pelės paspaudimą ant elemento su „my-div“ ID, tada pašalina vieną klasę ir prideda kitą klasę. Šį kodą galite naudoti pakaitoms tarp dviejų CSS klasių.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
if ($ (‘# my-div’) .hasClass (‘first-state’)) {
$ (‘# my-div’) .removeClass (‘pirmoji būsena’);
$ (‘# my-div’) .addClass (‘antra būsena’);
}
else if ($ (‘# mano-div’) .hasClass (‘antra būsena’)) {
$ (‘# my-div’) .removeClass (‘antra būsena’);
$ (‘# my-div’) .addClass (‘pirmoji būsena’);
}
})

Tai naudinga, nors mes galėjome tai padaryti daug lengviau, naudodami .toggleClass ().

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (myDiv) .toggleClass (‘pirmoji būsena’);
$ (myDiv) .toggleClass (‘antra būsena’);
})

Pažiūrėkime tą perėjimą veikiant.

Perjungti klasės animaciją

Yra daugybė papildomų „jQuery CSS“ metodų. Svarbiausia, kad .css () metodas gali būti naudojamas tiesiogiai manipuliuojant tikslinio elemento CSS. Konkrečioms CSS reikšmėms nustatyti gali būti naudojami kiti metodai, tokie kaip .height () ir .width ().

„jQuery“ efektai

Į „jQuery“ yra integruota daugybė efektų. Šie efektai yra sudedami su kitais „jQuery“ metodais ir funkcijomis, kad būtų galima kontroliuoti puslapio elementų pakeitimų vykdymą.

Tai yra užkandis, todėl pažvelkime į pavyzdį. Grįždami prie savo funkcijos .toggleClass (), galime pridėti keletą efektų, kad išlygintume perėjimą.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (this) .fadeOut (‘lėtai’, function () {
$ (this) .toggleClass (‘pirmoji būsena’);
$ (this) .toggleClass (‘antra būsena’);
})
$ (tai) .fadeIn (‘lėtai’);
})

Kodas tai daro, tai išnyks elementas, perjungs klases ir sugrąžins pakeistą elementą atgal.

„Toggle Effect“ animacija

„FadeOut“ () ir „fadeIn ()“ efektai yra tik du iš kelių galimų „jQuery“ efektų. Be to, norint pritaikyti savo elgesį, visi efektai gali būti naudojami daugybe skirtingų variantų.

„jQuery“ renginiai

Šioje mokymo programoje jau keletą kartų matėme vieną „jQuery“ įvykį: .click (), kuris suaktyvėja vartotojui spustelėjus taikomą elementą. Tačiau yra daugybė papildomų renginių.

Įvykiai, naudojami nukreipiant vartotojo veiksmus, yra .click (), .dblclick (), .hover (), .mouseenter (), .mouseleave () ir .mousemove (), kurie visi yra savaime suprantami. Taip pat yra keletas įvykių tvarkytojų, stebinčių puslapio elementų pakeitimus:

  • .change () nustato, kai keičiasi formos elementai. Panašiai .submit () nustato, kai forma yra pateikta.
  • .fokusavimas () suaktyvėja, kai tikslinis elementas įgauna židinį.
  • .paruoštas () suaktyvinamas, kai tik naršyklė sukūrė tinklalapį.
  • .pakeisti dydį () suaktyvina kodą, kad jis būtų paleistas pakeitus peržiūros srities dydį.
  • .trigger () susieja vieną įvykį su kitu susijusiu įvykiu.

Yra papildomų „jQuery“ įvykių, kurių šiame trumpame vadove neapimame. Sužinokite daugiau, remdamiesi „jQuery“ dokumentacija arba siūlomais šaltiniais.

„jQuery“ vartotojo sąsaja

„jQuery“ vartotojo sąsaja yra „jQuery“ plėtinys, apimantis galingus vartotojo sąsajos valdiklius ir įrankius. „JQuery“ UI funkcijos, tokios kaip akordeono valdiklis, įgyvendinimas yra be galo paprastas, palyginti su tos pačios funkcijos kodavimu nuo nulio..

„jQuery“ UI funkcijas galima suskirstyti į keturias kategorijas: valdikliai, efektai, sąveika ir paslaugų programos. Pažvelkime į kiekvieną. Bet pirmiausia turime žinoti, kaip pridėti „jQuery“ vartotojo sąsają prie HTML dokumento.

„JQuery“ vartotojo sąsajos pridėjimas prie HTML dokumento

Įkeldami „jQuery“ vartotojo sąsają, turite dvi galimybes: atsisiųskite ją ir pridėkite vietinę kopiją arba CDN priglobtą kopiją..

Be to, atminkite šiuos dalykus:

  • CSS stiliaus lentelės nuoroda turėtų būti dokumento galvutėje.
  • „JQuery“ UI scenarijus turėtų viršyti uždarymo pagrindinę žymą.
  • „JQuery“ branduolys (jquery.js arba jquery.min.js) turi būti įkeltas prieš įkeliant „jQuery“ vartotojo sąsają (jquery-ui.js arba jquery-ui.min.js).

„jQuery“ vartotojo sąsajos temos

Atsisiųsdami „jQuery“ vartotojo sąsajos kopiją, atsisiuntimo kūrėjas leidžia įtraukti temą. Taip yra todėl, kad „jQuery“ UI valdikliams reikalingas numatytasis stilius. Jūsų pasirinkta „jQuery“ vartotojo sąsajos tema apibrėžia numatytuosius valdiklio stilius, o atitinkamas kodas yra įtrauktas į „jquery-ui.css“..

Jei pasirinksite „Google“ priglobtą parinktį, atminkite, kad temos pavadinimas yra priešais failo pavadinimą:… / smoothness / jquery-ui.css. Sklandumas yra numatytoji „jQuery“ vartotojo sąsajos tema. Kurdami URL galite naudoti bet kurią temą, pakeisdami temos pavadinimą.

Be to, „jQuery“ vartotojo sąsajos svetainėje yra „ThemeRoller“, kurį galite naudoti kurdami savo temą ir įtraukdami ją atsisiųsdami „jQuery“ vartotojo sąsają..

„jQuery“ vartotojo sąsajos valdikliai

Valdikliai gana lengvai sukuria naudingus vartotojo sąsajos elementus, kuriuos sukurti prireiktų daugybės kodų, naudojant „JavaScript“ ir CSS. Pažvelkime į kelis naudingiausius „jQuery“ valdiklius (spustelėkite bet kurį norėdami patekti į demonstracinę versiją):

  • Akordeonai leidžia paslėpti informaciją už antraštės ir ją rodyti, perjungiant kiekvieną skyrių į atidarytą ir uždarą.
  • Skirtukai yra alternatyva akordeonams. Tai yra erdvę taupantis būdas pateikti informaciją.
  • „JQuery“ vartotojo sąsajos mygtukai yra gražūs ir nuosekliai pateikti.
  • „Datepicker“ gali būti pridedamas prie formos, kad būtų tinkamai pasirinktos ir suformatuotos datos.
  • Pažangos juostos vizualiai parodo, kokia pažanga padaryta siekiant tikslo.
  • Skaidrės leidžia vartotojams pasirinkti vieną vertę arba reikšmių diapazoną, pateikiant formą.
  • „Spinner“ prideda rodykles aukštyn ir žemyn, kad būtų galima įvesti skaičius formos lauke.
  • Patarimai gali būti naudojami teikiant konkretaus lauko informaciją vartotojams formuoti.

Norėdami suteikti jums supratimą, kaip lengva valdiklius įgyvendinti, štai visas kodas, kurį jums reikės naudoti norint sukurti akordeonų rinkinį:

Akordeono 1 skyrius

Akordeono turinys. Galite naudoti pastraipas, sąrašus, nuorodas, bet ką.

Akordeono 2 skyrius

Kaip aš ir sakiau.

  • Tu
  • Gali
  • Naudokite
  • Sąrašai

Akordeono 3 skyrius

Viskas. Tai labai lengva.

$ (function () {
USD ( "# akordeonas" ) .akordionas ();
});

Kaip matote, HTML yra daug ilgesnis nei keletas „jQuery“ eilučių, reikalingų HTML paversti akordeonais.

„jQuery“ UI akordeonai, animacija

„jQuery“ UI efektai

Daugelis šios kategorijos metodų yra pagrindinių „jQuery“ metodų išplėtimai. Pvz., Jei norite manipuliuoti klasėmis, „jQuery“ vartotojo sąsajoje galimi .addClass (), .removeClass () ir .toggleClass () metodai, taip pat papildomas metodas .switchClass (). Skirtumas tas, kad „jQuery“ vartotojo sąsajoje šie metodai apima papildomas parinktis, pvz., Galimybę perėjimo efektus pridėti tiesiai prie paties metodo..

Pažvelkime į pavyzdį. Prisimeni, kai mes naudojome .fadeIn () ir .fadeOut () norėdami pakeisti div išvaizdą? Na, mes galime sukurti daug gražesnį efektą su daug mažiau kodo naudodami „jQuery“ vartotojo sąsają.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (this) .toggleClass (‘antra būsena’, 1000);
})

Štai tas perėjimas veiksme.

„jQuery UI“ perjungia klasės animaciją

Keletas papildomų efektų metodų, kuriuos norėsite žinoti, yra šie:

  • Metodas .show () pašalina ekraną: nėra; nuo tikslinio elemento.
  • Metodas .hide () prideda ekraną: nėra; į tikslinį elementą.
  • .Toggle () metodas perjungia taikomą elementą iš matomos į paslėptą būseną.
„jQuery“ UI efekto animacijos

Yra 15 skirtingų efektų animacijų, kurių pavadinimai yra „blind“, „bounce“, „clip“, „drop“ ir „sprogti“. Pažvelkime į skaidrių efekto pavyzdį.

var myDiv = $ (‘# my-div’);
var myButton = $ (‘# mano mygtukas’);
$ („myButton“) .click (function () {
$ (myDiv) .toggle ( "skaidrę" );
})

Šiuo atveju mes pridėjome mygtuką, norėdami paslinkti div ekraną. Pažiūrėkime, kaip atrodo mūsų padalinys, paslėptas su tuo „jQuery“.

„jQuery UI“ Slėpti animacijas

Šie „jQuery“ perėjimo efektai gali būti taikomi .show (), .hide () ir .toggle () metodams. „JQuery“ vartotojo sąsajos svetainėje yra efektų peržiūros įrankis, kurį galite naudoti norėdami nuspręsti, kuris efektas labiausiai tinka jūsų įgyvendinimui.

„JQuery“ UI perėjimų palengvinimas

„JQuery“ šerdį sudaro tik du palengvinimai: sūpynės ir tiesinės. Tačiau „jQuery“ vartotojo sąsaja prideda daugiau nei 20 patobulinimų. Pažvelkime į tai, kaip įgyvendinome .toggle () metodą, šį kartą pridėdami du skirtingus palengvinimus.

var myButton = $ (‘# mano mygtukas’);
$ („myButton“) .click (function () {
$ (‘# first-div’) .toggleClass (‘antra būsena’, 2000 m., ‘easInOutQuad’);
$ (‘# second-div’) .toggleClass (‘antra būsena’, 2000 m., ‘easyInOutExpo’);
})

Šiame pavyzdyje yra dvi dalybos. Abu pereis į antrąją būseną per 2 sekundes. Tačiau kiekvienas naudos skirtingą palengvinimą. Pažiūrėkime.

„jQuery UI“ lengvinanti animacija

jQuery UI sąveika

Sąveikos yra „jQuery“ UI metodų rinkinys, leidžiantis svetainių ir programų vartotojams pasirinkti ir perkelti puslapio elementus. Yra penkios „jQuery“ vartotojo sąsajos. Spustelėję bet kurią iš žemiau pateiktų nuorodų pateksite į kiekvienos sąveikos demonstraciją „jQuery“ UI svetainėje.

  • „Draggable“ sąveika leidžia vartotojams iš naujo pakeisti tinklalapio elementą, vilkdami ir numesdami jį pele.
  • Droppable sąveika veikia kartu su tempiama sąveika. Norėdami juo naudotis, tinklalapyje turi būti ir tempiamas, ir nuleidžiamas elementas. Kai tempiamas daiktas nuleidžiamas ant nuleidžiamo elemento, suaktyvinamas veiksmas.
  • Keičiamas dydis keičiamas tiksliai taip, kaip, jūsų manymu, turėtų būti: puslapio elementą galima pakeisti keičiamą dydį.
  • Pasirinkdami, sąrašo elementus galite pasirinkti pasirenkamus spustelėdami juos vienu kartu arba laikydami nuspaudę „Ctrl“ arba spustelėdami ir vilkdami kelis elementus, kad galėtumėte pasirinkti kelis elementus vienu metu..
  • Rūšiuoti leidžia sąrašo elementus pertvarkyti bet kokia tvarka.

„jQuery“ vartotojo sąsajos sąveika nėra tas dalykas, kurio tikėtumėtės įgyvendinti vidutinėje svetainėje. Tačiau jei kuriate interaktyvią žiniatinklio programą, žaidimą ar sudėtingą formą, ši sąveika bus naudinga.

„jQuery“ UI paslaugų programos

„jQuery“ vartotojo sąsają galima išplėsti, o tai padaryti naudojo valdiklio gamykla. Valdiklio gamykla leidžia sudėti kelis „jQuery“ UI metodus, stilius ir funkcijas į vieną daugkartinio naudojimo valdiklį..

Jei esate susipažinęs su objektų programavimu, gali būti naudinga galvoti apie „jQuery“ UI valdiklius kaip objektus. Taigi, „jQuery“ UI akordeonas iš tikrųjų yra akordeono klasės objektas. Valdiklių gamykla leidžia jums apibrėžti naujas valdiklių klases ir tada naudoti tą klasę kuriant kelis objektus, tokiu pačiu būdu sukurdami klasę ir vėl ir vėl naudodamiesi OOP.

Kitas naudingas jQuery UI įrankis yra .pozicijos () metodas. Šis metodas leidžia apibrėžti bet kurio elemento padėtį kito elemento ar vartotojo veiksmo atžvilgiu. Metodas yra gana paprastas, kai tik jį pakabinsite. Pažvelkime į pavyzdį.

$ (‘# second-div’) .pozicija ({
mano: „kairysis viršus“,
„dešiniajame apačioje“,
iš: „# first-div“
});

Šis bitų kodas sako, kad kairysis viršutinis elemento kampas, kurio ID yra „div-div“, turėtų būti išdėstytas dešiniajame apatiniame elemento kampe su „pirmosios div“ ID, taip:

„jQuery“ UI pozicijos animacija

Be to, elementus galima išdėstyti atsižvelgiant į vartotojo veiksmus. Koreguokime kodą, kad antrosios divos pozicijai nustatyti būtų naudojama pelės, o ne pirmosios divizijos padėtis.

$ (dokumentas) .mousemove (funkcija (įvykis) {
$ (‘# second-div’) .pozicija ({
mano: ‘centras’,
iš: renginys,
susidūrimas: ‘tinka’
})
})

Šis kodas prideda klausytoją įvykiui .mousemove (), kuris bus suaktyvintas bet kada, kai pele įves dokumentą. Kai tai atsitiks, tikslinės div. Pozicija () bus nustatyta pagal pelės padėtį.

Pažiūrėkime tai veikiantį.

„jQuery“ vartotojo sąsajos padėties „Mousemove“ animacija

„jQuery Mobile“

„jQuery Mobile“ yra dar vienas „jQuery“ bibliotekos plėtinys. Jis naudojamas kuriant jautriai reaguojančias svetaines ir programas.

Kai galvojate apie „jQuery Mobile“, tikrai reikėtų pabrėžti optimizuotą lietimą. Yra daug pagrindinių „jQuery“ ir „jQuery“ UI metodų ir įvykių, kurie tiesiog netaikomi mobiliajam įrenginiui, ir „jQuery Mobile“ adresai, kurie turi trūkumų. Skirtingai nuo „jQuery“ vartotojo sąsajos, kuri gali būti naudojama tik vienam ar dviem tinklalapio elementams įjungti, „jQuery Mobile“ yra sukurtas kaip viskas arba nieko neturintis sprendimas reaguojančioms į jutiklines svetaines ir programas..

Bibliotekoje yra daugybė reaguojančių, jutikliams optimizuotų mygtukų, datos parinkimo elementų, formos elementų, perbraukimo įvykių, naršymo elementų, lentelių, skirtukų, skaidrių ir dar daugiau. Be to, „jQuery Mobile“ apima „ThemeRoller“.

„JQuery Mobile“ naudojimo iššūkis yra jo metodas „viskas arba nieko“. Jis skirtas visiškai pakeisti svetainių ir programų stalinių kompiuterių versijas. Jei norite, kad būtų viena svetainė ar programa, veikianti visuose įrenginiuose, „jQuery Mobile“ nėra tai, ko ieškote. Jei naudojate „jQuery Mobile“ programai ar svetainei, kuri veikia visuose įrenginiuose – turinčiuose liečiamąjį, o ne – turėsite rasti būdą, kaip „jQuery Mobile“ įjungti ir išjungti, nustatant įrenginio tipą, dydį ir jutiklinio ekrano buvimą..

Projektavimo ištekliai

Mes jau nurodėme keletą vietų, kur galite sužinoti „JavaScript“. Jei dar nežinote „JavaScript“, prieš nardydami į „jQuery“, ugdykite šiuos įgūdžius. Kai turėsite „JavaScript“ po savo diržu, šie šaltiniai jus paspartins naudodamiesi „jQuery“, „jQuery“ vartotojo sąsaja ir „jQuery Mobile“..

  • „jQuery Foundation“ mokymosi centras yra oficiali (ir viena geriausių) vietų mokytis „jQuery“. Čia rasite skyriais pagrįstą kursą, apimantį pagrindus, įvykius ir efektus, AJAX, papildinius ir dar daugiau. Kai būsite pasiruošę, taip pat galite išmokti naudotis „jQuery“ vartotojo sąsaja ir „jQuery Mobile“.
  • Sužinokite apie „jQuery From Scratch“ – tai projekto pagrindu sukurta mokymo programa, kuri padės įgyti pasitikėjimo „jQuery“ programuotoju..
  • „CodeCademy jQuery“ kursas moko „jQuery“ sintaksės, taip pat kaip rašyti pagrindines funkcijas, modifikuoti DOM elementus, naudoti įvykius ir diegti efektus..
  • „Bocoup“ „jQuery Fundamentals“ yra elektroninė knyga su įmontuota „Java“ konsolė, kad galėtumėte išbandyti kodą tiesiai naršyklėje. Jis apima „jQuery“ pagrindus, aplanko ir manipuliuoja DOM elementais, įvykiais, efektais ir AJAX.

Dizaineriams reikia „jQuery“

„JQuery“, „jQuery“ vartotojo sąsajos ir „jQuery Mobile“ plėtiniai prideda daugybę valdiklių, sąveikų, metodų, efektų ir jutikliams optimizuotų įrankių. Juos įvaldžius tapsite geresniu dizaineriu ir kūrėju, nes galėsite kurti galingas, interaktyvias žiniatinklio programas, negaišdami jokių klavišų..

Kiti įdomūs dalykai

Mes turime daugiau vadovų, vadovėlių ir infografikų, susijusių su kodavimu ir svetainių kūrimu:

  • CSS3 – įvadas, vadovai & Šaltiniai: tai puiki vieta pradėti mokytis tinklalapio išdėstymo.
  • ASP.NET ištekliai: šis vadovas padės jums naudotis „Microsoft“ .NET sistema tinklalapiams kurti.

Kokį kodą turėtumėte išmokti?

Nesuprantate, kokią programavimo kalbą turėtumėte išmokti koduoti? Peržiūrėkite mūsų infografiką, kokį kodą turėtumėte išmokti? Jame ne tik aptariami skirtingi kalbų aspektai, bet ir atsakoma į svarbius klausimus, tokius kaip: „Kiek uždirbsiu„ Java “programavimui pragyvenimui?“

Kokį kodą turėtumėte išmokti?
Kokį kodą turėtumėte išmokti?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map