Kā sākt darbu ar jQuery: atvieglojiet JavaScript programmēšanu

Atklāšana: Jūsu atbalsts palīdz vietnei darboties! Mēs nopelnām nodošanas maksu par dažiem pakalpojumiem, kurus mēs iesakām šajā lapā.


Visbeidzot, vairāk nekā 90% visu vietņu darbojās JavaScript. Kā vispopulārāko JavaScript bibliotēku jQuery izmanto lielākā daļa mūsdienu vietņu, un apmēram 65% no 10 miljoniem populārāko vietņu tīklā.

Tas nozīmē, ka, ja vēlaties būt tīmekļa izstrādātājs, vietnes izstrādātājs vai tīmekļa pārzinis, jums jāzina, kā strādāt ar jQuery.

Ievads jQuery

Contents

Kas ir jQuery?

JavaScript ir programmēšanas valoda, ko izmanto, lai vietnēm pievienotu interaktivitāti. jQuery ir iebūvētu JavaScript funkciju bibliotēka, kas apstrādā uzdevumus, kurus parasti pārvalda ar JavaScript. Būtībā jQuery ļauj vienkāršāk un ātrāk izmantot JavaScript.

jQuery ir komandu bibliotēka, kas, reaģējot uz apmeklētāju darbībām, ļauj ērti atrast, atlasīt un manipulēt ar HTML elementiem tīmekļa vietnē. Piemēram, izmantojot jQuery, jūs varat atlasīt noteiktu elementu, piemēram, visus

galvenes elementiem un liek ar tiem kaut kādā veidā manipulēt, pamatojoties uz apmeklētāja darbībām, piemēram, mainot fonta lielumu, kad pele virzās virs tiem.

JQuery stiprā puse ir spējā viegli atrast un atlasīt HTML elementus, nepieprasot HTML elementam piemērot papildu atribūtus.

jQuery atvieglo smagas lietas

Visu, ko varat darīt ar jQuery, varat darīt arī ar JavaScript. Atšķirība ir tā, ka daudzas lietas, kuras var būt diezgan sarežģīti izpildīt ar JavaScript, ir ļoti viegli izdarīt ar jQuery. Apskatīsim divus piemērus: pārslēgšana un aktivizēšana.

Slēpt vai parādīt lapas elementus ar Toggle

CSS displeja īpašumu var izmantot HTML elementu paslēpšanai. Atlasiet jebkuru HTML elementu, izmantojot CSS selektoru, un displeja īpašumam piemērojiet nevienu vērtību, un elements tiks paslēpts no skata. Ja vēlaties HTML elementu paslēpt komandā, CSS displeja īpašums ir veids, kā jūs to varat padarīt.

Nav ļoti grūti izmantot JavaScript, lai paslēptu vai parādītu HTML elementu, kontrolējot CSS displeja īpašumu. Tomēr jQuery pārslēgšanas () metode ietver daudzas iebūvētās opcijas, kas ļauj viegli radīt jaudīgus pārslēgšanas efektus, kurus būtu ļoti grūti dublēt ar JavaScript. Ja HTML dokumentā papildus katla plāksnes jQuery iekļaujat jQuery UI, varat arī izmantot vairākus jQuery UI efektus, lai kontrolētu, kā pārslēgtie elementi tiek paslēpti un parādīti.

Ja vēlaties uzzināt, kā izmantot jQuery pārslēgšanas () metodi, ir daudz vietu, lai sāktu:

  • Uzziniet jQuery: bezmaksas mācību resurss no jQuery fonda. Pilnīga jQuery apmācība ir pabeigšanas vērta, un resursos šī dokumenta beigās mēs atrodam saiti. Tomēr izmantojiet šo saiti, ja vēlaties tieši doties uz sadaļu, kurā izskaidrota pārslēgšanas metode.
  • jQuery API dokumentācija: pārslēgšanas metodes pārskats un visas iespējas, kuras var izmantot līdztekus tai.
  • jQuery UI efekti un pārslēgšana: jQuery UI paplašina pārslēgšanas metodi ar vairākiem efektiem. Turklāt tam ir tieša demonstrācija par to, kā efekti papildina pārslēgšanas metodi.
  • jQuery toggle () metode W3Schools: ātrs ievads pārslēgšanas metodē un koda smilšu kaste, kur to izmēģināt.
  • JQuery Toggle Effect apmācība, kuru autors Akshay Jaiswal, un jQuery Toggle effect, autors Harijs Soms ir divas YouTube video pamācības, kas īsi parāda, kā izveidot HTML dokumentu, kurā ietilpst jQuery un kurā tiek izmantota pārslēgšanas metode, lai HTML elementu paslēptu vai parādītu..

Izpildiet skriptu ar aktivizēšanas notikumu apstrādātāju

Vēl viens uzdevums, kuru jQuery padara ārkārtīgi vieglu, ir aktivizēt notikumu apstrādātāju, pat ja faktiskais notikums vēl nav atklājies. Piemēram, pieņemsim, ka jums ir skripts, kas tiek izpildīts katru reizi, kad tiek noklikšķināts uz noteiktas pogas, izmantojot JavaScript onclick notikumu. Ko darīt, ja vēlaties, lai tas pats skripts tiktu palaists jebkurā laikā, notiek cita darbība, it kā būtu noklikšķināts uz pašas pogas? Sprūda () notikumu apstrādātājs ir atbilde.

Galvenā sprūda metodes izmantošana ietver sprūda metodes piemērošanu konkrētam notikumam un tās izmantošanu, lai izraisītu otru notikumu, kad pirmais notikums iziet. Tas varētu izklausīties sarežģīti, taču principiāli izmantot sprūda metodi ir vienkārši. Izmantojiet šādus resursus, lai apskatītu pamatus, kā arī iepazīstieties ar dažiem sarežģītākiem metodes lietojumiem.

  • Notikumu apstrādātāju aktivizēšana: izmantojiet šo saiti, lai dotos uz sadaļu par notikumu apstrādātāju aktivizēšanu apmācības jQuery apmācībā..
  • jQuery API dokumentācija: pārskats par sprūda metodi un visiem parametriem un opcijām, kuras var izmantot ar to.
  • jQuery sprūda () metode W3Schools: ievads jQuery sprūda metodē un koda smilšu kaste koda pārbaudei.
  • Kā izveidot pielāgotus notikumus jQuery: vietnes punkta apmācība, kurā izskaidrots, kā izveidot pielāgotus jQuery pasākumus, lai sprūda metodi varētu izmantot pielāgotajos pasākumos, nevis iebūvētajos jQuery pasākumos.
  • Nelietojiet jQuery reālu notikumu nosaukumus! Daudzi izstrādātāji izmanto standarta jQuery pasākumus, piemēram, "klikšķis" kā notikuma tips, pēc kura tiek aktivizēts notikums. Tomēr tas var radīt problēmas, un Deivids Valss iesaka pielāgotus pasākumus izmantot ar sprūda metodi.

JQuery lietošanas priekšrocības

Ja jQuery tikai atvieglo JavaScript izmantošanu, kāpēc mēs vispār izmantojam jQuery? Kāpēc ne tikai pieturēties pie JavaScript un izvairīties no tā, ka jums jāiemācās pilnīgi jauns komandu un ieviešanas komplekts?

Saskaņā ar Wikipedia, jQuery piedāvā vismaz četras priekšrocības.

  1. jQuery veicina skriptu un HTML nodalīšanu. Kaut arī skriptus var ierakstīt tieši HTML dokumentos, pašreizējā tīmekļa dizaina un attīstības kopienas domāja, ka HTML, CSS un JavaScript visi jāuztur atsevišķi. To sarežģī fakts, ka ir jābūt iespējai skriptus saistīt ar noteiktiem HTML elementiem un notikumiem. Bez jQuery vienkāršākais veids, kā to izdarīt, ir HTML dokumentam pievienot notikumu atribūtus, kas izsauc JavaScript funkcijas. Tomēr jQuery apiet vajadzību to darīt, nodrošinot vienkāršu sintakse notikumu apstrādātāju dinamiskai pievienošanai, izmantojot JavaScript. Tas ļauj pilnībā nošķirt JavaScript no HTML dokumenta.
  2. jQuery mudina kodētājus rakstīt īsākus, skaidrākus skriptus. jQuery ir paredzēts īsumam. Visu, ko varat darīt ar jQuery, varat darīt arī ar parasto JavaScript. Tomēr jQuery kods parasti būs daudz īsāks un skaidrāks nekā JavaScript kods, lai veiktu to pašu uzdevumu.
  3. Izmantojot jQuery, tiek novērsta dažādu pārlūku neatbilstība. Lai gan JavaScript dažādu pārlūku motoros tiek atveidoti nedaudz atšķirīgi, jQuery ir izstrādāts, lai apstrādātu dažādu pārlūku atšķirības un nodrošinātu pastāvīgu pārlūku pieredzi.
  4. jQuery ir paplašināms. JQuery bibliotēka ir izstrādāta tā, lai to varētu viegli papildināt ar jauniem elementiem, notikumiem un metodēm. Kad šie jaunie vienumi ir pievienoti vietējai jQuery bibliotēkai, tos var viegli izmantot atkārtoti vietnē kā spraudni.

Darba sākšana ar jQuery

Ja esat gatavs sākt mācīties, kā lietot jQuery, un jūs vēl neesat pazīstams ar JavaScript, pirmais solis jQuery apguvē ir Java valodas apguve..

Kā mēs jau minējām, jQuery ir JavaScript komandu bibliotēka. Tā rezultātā jQuery ievēro to pašu pamata sintakse un struktūru kā JavaScript. Lai apgūtu jQuery, ir ļoti svarīgi precīzi izprast JavaScript sintakse, struktūru un pamatfunkcijas. Saskaņā ar jQuery Foundation:

Visam jQuery spēkam var piekļūt, izmantojot JavaScript, tāpēc, lai saprastu, strukturētu un atkļūdotu savu kodu, ir svarīgi, lai jūs pilnībā uztvertu JavaScript. Regulāri strādājot ar jQuery, laika gaitā var uzlabot jūsu prasmes, izmantojot JavaScript, var būt grūti sākt rakstīt jQuery bez darba zināšanām par Java iebūvētajām konstrukcijām un sintakse.

Jūsu attīstības vide

Pirms kodēšanas sākšanas jums ir jāiestata sava attīstības vide. Labās ziņas ir tas, ka viss, kas jums patiešām nepieciešams, lai sāktu rakstīt jQuery, ir tīmekļa pārlūks, teksta redaktors un jQuery kopija.

Kaut arī jebkurš tīmekļa pārlūks to darīs, izstrādātāji izmanto vai nu Mozilla Firefox, vai Google Chrome. Kaut arī jums vajadzētu būt pieejamiem arī Internet Explorer vai Edge, Opera un Safari, lai pārbaudītu savu kodu vairākos pārlūkos, ja jūs vēl neizmantojat Firefox vai Chrome, dodieties lejupielādēt un instalēt vienas vai abu šo bezmaksas lietojumprogrammu jaunāko versiju un izmantot to attīstības vajadzībām.

Protams, jūs varētu izmantot Notepad, lai rakstītu kodu, bet kāpēc jūs to darītu? Ir daudz lielisku teksta redaktoru, kas pieejami par brīvu vai par ļoti saprātīgām izmaksām un kas nodrošina daudzas funkcijas, kas paredzētas, lai padarītu kodēšanu vieglāku un mazāk pakļautu kļūdām. Daži no mūsu iecienītākajiem elementiem ir Atom, TextMate Apple datoriem, Notepad ++ Windows datoriem un Kronšteini.

Visbeidzot, tā kā jQuery ir komandu bibliotēka, kas balstīta uz JavaScript, jums būs jāizsauc jQuery bibliotēka no jebkura dokumenta, kas izmanto jQuery. Lai to izdarītu, jums būs jālejupielādē jQuery vai jāveido saite uz tiešsaistē mitinātu jQuery bibliotēku..

Resursi

Mēs meklējām tīmeklī labākās jQuery apmācības, e-grāmatas un interaktīvos kursus. Mēs iesakām izmantot vairākus no šiem resursiem un strādāt, izmantojot resursus, kas vislabāk atbilst jūsu mācību stilam.

Mūsu ieteiktā apmācības gaita sākas ar dažām interaktīvām pamācībām, kas parādīs jQuery jaudu un parādīs, kas ir iespējams ar pasaules populārāko JavaScript bibliotēku. Pēc tam padziļinieties jQuery, pārskatot padziļinātas apmācības, kuras piedāvā daži no visiecienītākajiem nosaukumiem tīmekļa izstrādē, tostarp Mozilla izstrādātāju tīkls un jQuery Foundation. Visbeidzot, apgūstiet jQuery, izmantojot savu e-grāmatas vai grāmatas tekstu.

Bezmaksas interaktīvie kursi

Ir tikai tik daudz, ka rakstisku dokumentu var darīt, lai izskaidrotu, kā darbojas programmēšanas valoda un ko tā var darīt. Lai patiešām iegūtu valodas spēju, jums tas jāredz darbībā. Bezmaksas interaktīvie kursi ir viens no labākajiem veidiem, kā ātri apgūt programmēšanas valodas pamata sintakse, vienlaikus apgūstot arī to, ko tā patiešām var darīt.

Tā kā jQuery fonds iesaka iemācīties JavaScript pirms ienirt jQuery, mēs iesakām rīkoties tāpat. Šie bezmaksas kursi ļaus jums ātri rakstīt JavaScipt:

  • JavaScript ceļa brauciena 1. daļa no CodeSchool: tikai šī ceļa brauciena 1. daļa ir bezmaksas. Pārējais ceļojuma laiks ir paslēpts aiz algas sienas. Izpildiet bezmaksas saturu un pēc tam dodieties uz Codecademy, lai turpinātu mācīties.
  • Codecademy JavaScript: Šis pilnmetrāžas tiešsaistes kursa saturs ir bezmaksas. Piekļuve viktorīnām nav obligāta, un tai ir cenu zīme. Kursa pabeigšanai vajadzētu aizņemt apmēram desmit stundas, un tas ļaus jums uzrakstīt pamata JavaScript kodu. Izmantojot šo kursu zem jostas, jūs būsit gatavs tikt galā ar kādu jQuery.

Ir divi interaktīvi jQuery kursi, kas jums jāveic, lai iegūtu labu pamata izpratni par to, kas ir iespējams ar jQuery. Šajos kursos ietilpst:

  • Izmēģiniet jQuery: bezmaksas ievads jQuery, ko izveidojis jQuery fonds sadarbībā ar CodeSchool.
  • jQuery by Codecademy: Kursa pabeigšana prasīs apmēram trīs stundas. Tāpat kā JavaScript kursa gadījumā, kursa saturs ir bezmaksas, bet, ja vēlaties piedalīties viktorīnās, jums par to būs jāmaksā. Mūsu ieteikums ir izskatīt bezmaksas saturu un pēc tam pāriet uz papildu resursiem. Kad esat pabeidzis, jūs zināt, kā izmantot jQuery HTML elementu atlasīšanai, kā šos elementus veidot stilā un kā vietnes apmeklētāju darbības saistīt ar jQuery kodu, lai vietne reaģētu interaktīvi..

Padziļinātas konsultācijas un apmācības ceļveži no nozares vadītājiem

JavaScript un jQuery apgūšanai vajadzētu būt cieši saistītām. Ja esat gatavs padziļināties ar jQuery, jums būs jāpaplašina arī zināšanas par JavaScript. Viena no labākajām vietām, kur uzzināt par JavaScript, ir Mozilla izstrādātāju tīkls (MDN). Apskatiet šos lieliskos resursus:

  • JavaScript pamati: Lai arī jūs, iespējams, esat iemācījušies pamatus, kā faktiski izmantot JavaScript, izmantojot mūsu ieteiktos interaktīvos kursus, MDN jūs uzzināsit, kā profesionāli izstrādātāji domā par JavaScript un to lieto. Ja uzmanīgi izlasīsit, šī dokumenta pilnīga sagremošana prasīs pāris stundas.
  • JavaScript ceļvedis: Šis plašais ceļvedis un apmācība iepazīstinās jūs ar visām JavaScript valodas pamata tēmām, ieskaitot funkcijas, kļūdu apstrādi, cilpas, gramatiku, izteicienus un daudz ko citu. Izveidojiet to caur šo ceļvedi, un jūs uzzināsit vairāk JavaScript, nekā vidusmēra tīmekļa dizaineri.

Ja jūs to izdarījāt, izmantojot JavaScript resursus MDN, jūs būsiet pilnībā gatavs piedalīties jQuery fonda piedāvātajās apmācībās. JQuery fonda vietnē jūs atradīsit plašu Mācību centru, kas ir sadalīts nodaļās. Katra nodaļa ir veltīta noteiktai tēmai, piemēram, par jQuery, efektiem, Ajax, spraudņiem un citām. Šis autoritatīvais resurss ir detalizēts un tehnisks – tikai tā, kas jums būs nepieciešama, ja jūs apgūsit jQuery.

Grāmatas un grāmatas

Kad būsit strādājis pie resursiem, kurus mēs jau esam iekļāvuši, jūs būsit gatavs izmantot jQuery, lai risinātu jebkuru kopīgu tīmekļa dizaina scenāriju. Turklāt jūs būsiet pietiekami zinoši, lai atrastu nepieciešamo palīdzību sarežģītāku problēmu risināšanai, izmantojot jQuery API.

Kad esat gatavs kļūt par modernu jQuery izstrādātāju, ir daži teksti, kas var jums palīdzēt.

Bezmaksas e-grāmatas

Mēs atradām divas bezmaksas e-grāmatas, kurām ir lieliska reputācija jQuery kopienā. Izmantojot zināmu jQuery kodēšanas pieredzi zem jostas, izveidojiet jaunu izpratni par populārāko JavaScript bibliotēku, strādājot caur vienu vai abiem šiem augstas kvalitātes tekstiem:

  • jCuery pamati, izveidojis BoCoup, LLC .: Daļa e-grāmatas un daļa interaktīvās apmācības. Šis teksts aptver jQuery gan rakstiskā formātā, gan ar praktiskiem piemēriem.
  • jQuery kodolīgi, raksta Kodija Lindlija un mitina sinhronizācija: simts lappušu teksts, kas aptver jēdzienus, kas nepieciešami progresīvai jQuery izstrādei. Ja jūs tikko sākat darbu, tas nav jums domāts teksts, bet, ja esat pietiekami kompetents JavaScript vai jQuery izstrādātājs, kurš ir gatavs spert nākamo soli, šis teksts ir lieliska izvēle.

Brošēta grāmata

Ja vēlaties fizisku tekstu, šeit ir daži no labākajiem šodien pieejamajiem jQuery tekstiem:

  • JQuery apguve: Kārlis Švedbergs, pašreizējais jQuery fonda padomnieku padomes loceklis, kopā ar Jonathan Chaffer, tīmekļa izstrādātāju un ietekmīgu Drupal programmētāju, izstrādāja šo tekstu tā, lai tas būtu piemērots gan Java iesācējiem, gan pieredzējušiem izstrādātājiem. Šis teksts ir pieejams arī iekurtai.
  • JavaScript un JQuery, interaktīva Web lapas izstrāde: Šis Jona Duketa teksts papildina savu vadošo tekstu HTML un CSS, un tas, iespējams, ir populārākais JavaScript un jQuery teksts, kas šodien pieejams..
  • jQuery darbībā – Lācs Bibeaults, Yehuda Katz un Aurelio De Rosa: Katz un De Rosa ir aktīvi jQuery fonda locekļi – Katz kā Padomnieku padomes loceklis un De Rosa kā Content komandas loceklis. Šis autoritatīvais teksts ir ātrdarbīgs jQuery apskats, kas ir ideāli piemērots iesācēju JavaScript izstrādātājiem.

Projektēšana ar jQuery palīdzību

Šajā sadaļā mēs apskatīsim, kā izmantot jQuery, lai izstrādātu pārsteidzoši mijiedarbīgas vietnes. Beigās jūs zināt pieejamos rīkus un visas nepieciešamās zināšanas, resursus un rīkus..

JavaScript

JavaScript ir programmēšanas valoda, kas ir iebūvēta katrā mūsdienu tīmekļa pārlūkprogrammā. Kopā ar HTML un CSS tas ir trešais posms mūsdienu tīmekļa tehnoloģiju triādē.

JavaScript ir augsta līmeņa vispārējā programmēšanas valoda, kuru var izmantot visdažādākajiem skriptu izpildes darbiem gan tīmeklī, gan ārpus tā. Galvenais veids, kā dizaineri izmanto JavaScript, ir aktivizēt lietotāju mijiedarbību. Dizaina izmaiņas un AJAX zvani ir divi lietotāju mijiedarbības piemēri, kurus var darbināt ar JavaScript. Apskatīsim katru īsi.

Bet vispirms mēs atkāpsimies un apspriedīsim dažus JavaScript aspektus.

Stila maiņa ar JavaScript

Lai gan tīmekļa lapas veidošana parasti ir kaskādes stilu lapu (CSS) joma, JavaScript var izmantot, lai manipulētu ar CSS. Ar stiliem var tieši manipulēt, atlasot elementu un izmantojot stila rekvizītu, piemēram:

Manas div

document.getElementById ("my-div") .style.backgroundColor = "zils";

Šis JavaScript kods satver elementu ar My-div ID un piemēro zilu fona krāsu. Lai arī tieši manipulēt ar CSS ar JavaScript ir noderīgi, ja vēlaties mainīt stilu kopumu vienlaikus, ir daudz vieglāk iekļaut šos stilus savas vietnes CSS un pēc tam tos lietot, izmantojot JavaScript. Tas ir viens no veidiem, kā to var izdarīt:

.pirmās valsts {
fona krāsa: # 303030;
krāsa: #fff;
apmale: 3px ciets #ddd;
platums: 200 pikseļi;
augstums: 200 pikseļi;
}
.otrā štata {
fona krāsa: #ddd;
krāsa: # 333;
apmale: 3px ciets # 333;
platums: 300 pikseļi;
augstums: 300 pikseļi;
}

Manas div

document.getElementById ("my-div") .onclick = function () {
this.className = "otrais štats";
}

Tagad, noklikšķinot uz elementa div ar id-atribūtu my-div, pirmā stāvokļa klase tiks noņemta un aizstāta ar otrā stāvokļa klasi, un tiks piemērota otrā stāvokļa klase CSS..

Pievienojiet klases animāciju

Satura atjaunināšana lidojumā ar AJAX

AJAX, kas apzīmē asinhrono JavaScript un XML, ir paņēmiens, ko izmanto, lai Web vietnei pievienotu saturu, neatsvaidzinot lapu. Pamatideja ir tāda, ka JavaScript sūta datus uz tīmekļa serveri aizkulisēs, saņem atbildi no servera un pielāgo tīmekļa lapu saturu, pamatojoties uz šo atbildi.

Tas varētu šķist nedaudz pārāk teorētiski, tāpēc pieņemsim praktiski. AJAX ļauj veikt tādas darbības kā automātiskās pabeigšanas funkcijas, bezgalīga ritināšana un tūlītējas meklēšanas rezultāti. Katrā ziņā Web lapa nosūta datus uz tīmekļa serveri un ielādē atbildi tīmekļa vietnē, neatsvaidzinot.

AJAX zvana ieviešana ir sarežģīts uzdevums, kas pārsniedz JavaScript pamata programmēšanu. Tomēr kā AJAX kā lietojumprogrammu izstrādātājs vai dizaineris ir JavaScript funkcija, bez kuras diez vai var iztikt. Nākamajā sadaļā mēs uzsvērsim lielisku AJAX resursu.

JavaScript resursi

Ja jūsu JavaScript prasmes ir nedaudz sarūsējušas, šeit ir trīs lieliski resursi, kas ļaus jums atjaunot ātrumu:

  • CodeCademy’s JavaScript kurss iepazīstina ar sintakse, cilpām, vadības plūsmu, datu struktūrām un objektiem pārlūka balstītā interaktīvā kursā.
  • Mozilla izstrādātāju tīkla (MDN) JavaScript pamatinformācija ir ievads JavaScript sintaksei, mainīgajiem, operatoriem, nosacījumiem, funkcijām un notikumiem.
  • MDN AJAX darba sākšana ir īsa apmācība, kas aptver pamata AJAX zvanus. MDN ir pieejami arī papildu raksti, kas attiecas uz uzlabotajām AJAX metodēm.

Kaut arī JavaScript ir spēcīgs, jQuery ļauj jums izdarīt daudz vairāk ar mazāku piepūli.

jQuery: Gatavošanās pasaules rokai

Padomājiet par jQuery kā iepriekš izveidotu JavaScript bloku kopu. Apskatīsim pamata piemēru. Lūk, kā jūs vispirms atlasīsit elementu ar my-div ID JavaScript un nākamo jQuery.

// JavaScript
document.getElementById (‘my-div’);

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

Elementa izvēli pēc id ir diezgan viegli izdarīt abās valodās. Tomēr, kā redzat, jQuery darbībā tas prasa apmēram 25 mazāk taustiņu, nevis JavaScript.

JQuery pievienošana HTML dokumentam

Lai varētu to izmantot, ir jāielādē jQuery, un ir divi vienkārši veidi, kā to izdarīt. Varat lejupielādēt jQuery un iekļaut vietējo kopiju vai izmantot mitinātu kopiju, piemēram, Google mitinātās bibliotēkas.

Šis ir kods, kuru iekļaujat HTML dokumentā, lai ielādētu jQuery:

Ņemiet vērā, ka, rakstot jQuery, pēc jQuery kodola ielādēšanas kods ir jāielādē.

JQuery lietošana ar WordPress

Viens īpašs apsvērums, kas jāapzinās, ir tas, ka, lietojot jQuery WordPress vietnē, jums ir jQuery jāizmanto sava koda prefiksam, nevis $. Ir daži risinājumi, kurus varat izmantot, lai $ prefikss darbotos, bet, ja tas nenotiek, vienkārši prefiksējiet kodu ar jQuery, piemēram:

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

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

jQuery CSS

Tāpat kā jūs varat izmantot JavaScript, lai manipulētu ar CSS, tāpat varat rīkoties ar jQuery.

Ar jQuery mēs diezgan efektīvi varam manipulēt ar klasēm. Zemāk esošais skripts vēro, kā peles klikšķis uz elementa tiek norādīts ar mana div nosaukuma numuru, pēc tam noņem vienu klasi un pievieno citu klasi. Varat izmantot šo kodu, lai mainītos starp divām CSS klasēm.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
if ($ (‘# my-div’) .hasClass (‘first-state’)) {
$ (‘# my-div’) .removeClass (‘pirmais stāvoklis’);
$ (‘# my-div’) .addClass (‘otrais stāvoklis’);
}
cits, ja ($ (‘# my-div’) .hasClass (‘otrais stāvoklis’)) {
$ (‘# my-div’) .removeClass (‘otrais stāvoklis’);
$ (‘# my-div’) .addClass (‘pirmais stāvoklis’);
}
})

Tas ir noderīgi, lai gan mēs to būtu varējuši izdarīt daudz vienkāršāk, tā vietā izmantojot .toggleClass ().

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (myDiv) .toggleClass (‘pirmais stāvoklis’);
$ (myDiv) .toggleClass (‘otrais stāvoklis’);
})

Apskatīsim šo pāreju darbībā.

Pārslēgt klases animāciju

Ir daudzas citas jQuery CSS metodes. Īpaši svarīgi, ka .css () metodi var izmantot, lai tieši manipulētu ar mērķa elementa CSS. Citas metodes, piemēram, .height () un .width (), var izmantot, lai atlasītu noteiktas CSS vērtības.

jQuery efekti

JQuery ir iebūvēti visdažādākie efekti. Šie efekti ir savērti kopā ar citām jQuery metodēm un funkcijām, lai kontrolētu lappuses elementu izmaiņu izpildi.

Tas ir kumoss, tāpēc apskatīsim piemēru. Ja atgriezīsimies pie mūsu .toggleClass () funkcijas, mēs varam pievienot dažus efektus, lai izlīdzinātu pāreju.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (this) .fadeOut (‘lēns’, function () {
$ (this) .toggleClass (‘pirmais stāvoklis’);
$ (this) .toggleClass (‘otrais stāvoklis’);
})
$ (šis) .fadeIn (‘lēns’);
})

Tas, ko šis kods dara, ir izbalināt elementu, pārslēgt klases un izbalināt mainīto elementu atpakaļ.

Pārslēgt efekta animāciju

FadeOut () un fadeIn () efekti ir tikai divi no pieejamajiem jQuery efektiem. Turklāt visos efektos var izmantot vairākas dažādas iespējas, lai precīzi pielāgotu viņu uzvedību.

jQuery pasākumi

Šajā apmācībā jau vairākas reizes esam redzējuši vienu jQuery notikumu: .click (), kas tiek aktivizēts, kad lietotājs noklikšķina uz mērķa elementa. Tomēr ir pieejams daudz papildu pasākumu.

Notikumi, kas tiek izmantoti, lai atlasītu lietotāja darbības, ir .click (), .dblclick (), .hover (), .mouseenter (), .mouseleave () un .mousemove (), kas visi ir diezgan pašsaprotami. Ir arī vairāki notikumu apstrādātāji, kas vēro izmaiņas lapas elementos:

  • .change () nosaka, kad mainās formas elementi. Līdzīgi .submit () nosaka, kad tiek iesniegta veidlapa.
  • .fokuss () tiek aktivizēts, kad mērķa elements iegūst fokusu.
  • .gatavs () tiek aktivizēts, tiklīdz pārlūkprogramma ir izveidojusi tīmekļa lapu.
  • .mainīt izmēru () aktivizē koda palaišanu, kad tiek mainīts skata porta lielums.
  • .sprūda () sasaista vienu notikumu ar citu saistītu notikumu.

Ir arī citi jQuery pasākumi, kurus šajā īsajā rokasgrāmatā mēs neaptverām. Uzziniet vairāk, atsaucoties uz jQuery dokumentāciju vai ieteiktajiem resursiem.

jQuery UI

jQuery UI ir jQuery paplašinājums, kas ietver jaudīgus UI logrīkus un rīkus. JQuery UI funkcijas, piemēram, akordeona logrīka, ieviešana ir ārkārtīgi vienkārša, salīdzinot ar vienas un tās pašas funkcijas kodēšanu no jauna..

jQuery UI funkcijas var iedalīt četrās kategorijās: logrīki, efekti, mijiedarbība un utilītas. Apskatīsim katru. Bet vispirms mums jāzina, kā HTML dokumentam pievienot jQuery UI.

JQuery UI pievienošana HTML dokumentam

JQuery UI ielādēšanai ir divas iespējas: lejupielādējiet to un iekļaujiet vietējo kopiju vai iekļaujiet CDN mitinātu kopiju..

Turklāt paturiet prātā šos punktus:

  • CSS stila lapas saitei jāatrodas dokumenta galviņā.
  • JQuery UI skriptam vajadzētu būt tieši virs noslēguma pamatteksta.
  • Pirms jQuery UI (jquery-ui.js vai jquery-ui.min.js) ielādes jQuery kodols (jquery.js vai jquery.min.js) ir jāielādē..

jQuery UI motīvi

Lejupielādējot jQuery UI kopiju, lejupielādes veidotājs ļauj iekļaut motīvu. Tas notiek tāpēc, ka jQuery UI logrīkiem ir nepieciešams noklusējuma stils. Jūsu izvēlētā jQuery UI tēma definē noklusējuma logrīku stilus, un attiecīgais kods ir iekļauts jquery-ui.css.

Ja izvēlaties Google mitinātu opciju, ņemiet vērā, ka motīva nosaukums tiek ievietots tieši pirms faila nosaukuma:… / smoothness / jquery-ui.css. Gludums ir jQuery UI noklusējuma tēma. Veidojot URL, varat izmantot jebkuru motīvu, aizstājot motīva nosaukumu.

Turklāt jQuery UI vietne piedāvā ThemeRoller, kuru varat izmantot, lai izveidotu savu motīvu un iekļautu to, lejupielādējot jQuery UI..

jQuery UI logrīki

Logrīki pieliek diezgan lielas pūles, lai izveidotu noderīgus lietotāja saskarnes elementus, kuru izveidošanai nepieciešams daudz kodu, izmantojot tīru JavaScript un CSS. Apskatīsim dažus no visnoderīgākajiem jQuery logrīkiem (noklikšķiniet uz jebkura, lai nokļūtu demonstrācijā):

  • Akordeoni ļauj paslēpt informāciju aiz virsraksta un parādīt to, pārslēdzot katru sadaļu atvērtu un aizvērtu.
  • Cilnes ir alternatīva akordeoniem. Tie ir vietu taupošs veids, kā sniegt informāciju.
  • Pogas jQuery UI ir skaistas un konsekventi parādītas.
  • Datepicker var pievienot veidlapai, lai pārliecinātos, ka datumi ir pareizi izvēlēti un formatēti.
  • Progresa joslas vizuāli norāda, cik liels progress ir sasniegts mērķa sasniegšanā.
  • Bīdītāji ļauj lietotājiem, iesniedzot veidlapu, izvēlēties vienu vērtību vai vērtību diapazonu.
  • Spinner pievieno bultiņas uz augšu un uz leju, lai ievadītu ciparus formas laukā.
  • Rīka padomus var izmantot, lai lietotājiem sniegtu specifisku informāciju par lauku.

Lai dotu jums priekšstatu par to, cik viegli logrīki ir jāievieš, šeit ir viss kods, kas jums jāizmanto, lai izveidotu akordeonu komplektu:

Akordeona 1. nodaļa

Akordeona saturs. Jūs varat izmantot rindkopas, sarakstus, saites, neatkarīgi no tā.

Akordeona 2. nodaļa

Kā es teicu.

  • Jūs
  • Var
  • Izmantojiet
  • Saraksti

Akordeona 3. nodaļa

Tieši tā. Tas ir ļoti vienkārši.

$ (funkcija () {
USD ( "#akordija" ) .akordija ();
});

Kā redzat, HTML ir daudz garāks nekā dažas jQuery rindas, kas vajadzīgas, lai HTML pārvērstu akordeonos.

jQuery UI akordeoni animācija

jQuery UI efekti

Lielākā daļa šīs kategorijas metožu ir jQuery galveno metožu paplašinājumi. Piemēram, ja vēlaties manipulēt ar klasēm, jQuery UI ir pieejamas .addClass (), .removeClass () un .toggleClass () metodes, kā arī papildu metode .switchClass (). Atšķirība ir tāda, ka jQuery UI šīs metodes ietver papildu iespējas, piemēram, iespēju pievienot pārejas efektus tieši pašai metodei.

Apskatīsim piemēru. Atcerieties, kad mēs izmantojām .fadeIn () un .fadeOut (), lai mainītu div izskatu? Mēs varam radīt daudz jauku efektu ar daudz mazāku kodu, izmantojot jQuery UI.

var myDiv = $ (‘# my-div’);
$ (myDiv) .click (function () {
$ (this) .toggleClass (‘otrais stāvoklis’, 1000);
})

Lūk, šī pāreja darbībā.

jQuery UI / Pārslēgt klases animāciju

Dažas papildu efektu metodes, kuras jūs vēlēsities zināt:

  • Izmantojot metodi .show (), displejs tiek noņemts: nav; no mērķa elementa.
  • Metode .hide () pievieno displeju: nav; uz mērķa elementu.
  • .Toggle () metode pārslēgs atlasīto elementu no redzama uz slēptu stāvokli.
jQuery UI efektu animācijas

Ir 15 dažādu efektu animācijas ar tādiem nosaukumiem kā akls, lielība, klips, nomest un eksplodēt. Apskatīsim slaida efekta piemēru.

var myDiv = $ (‘# my-div’);
var myButton = $ (‘# mana poga’);
$ (myButton) .click (function () {
$ (myDiv) .toggle ( "slidkalniņš" );
})

Šajā gadījumā mēs pievienojām pogu, lai slīdētu div ekrānā un ārpus tā. Paskatīsimies, kā izskatās mūsu divslānis, ja tas ir paslēpts ar tik nelielu jQuery.

jQuery UI Slēpt animāciju

Šos jQuery pārejas efektus var izmantot .show (), .hide () un .toggle () metodēm. JQuery UI vietnē ir efektu priekšskatīšanas rīks, kuru varat izmantot, lai izlemtu, kurš efekts vislabāk atbilst jūsu ieviešanai.

JQuery UI pāreju atvieglošana

JQuery kodols ietver tikai divus atvieglojumus: šūpoles un lineāro. Tomēr jQuery UI pievieno vairāk nekā 20 vienkāršojumus. Atskatīsimies uz .toggle () metodes ieviešanu, šoreiz pievienojot divus dažādus atvieglojumus.

var myButton = $ (‘# mana poga’);
$ (myButton) .click (function () {
$ (‘# first-div’) .toggleClass (‘otrais stāvoklis’, 2000, ‘easInOutQuad’);
$ (‘# second-div’) .toggleClass (‘otrais stāvoklis’, 2000, ‘easInOutExpo’);
})

Šajā piemērā ir divas divs. Abi pāries uz otro stāvokli pēc 2 sekundēm. Tomēr katrs izmantos atšķirīgu atvieglojumu. Apskatīsim.

jQuery UI vienkāršojoša animācija

jQuery UI mijiedarbība

Mijiedarbība ir jQuery UI metožu kopums, kas ļauj vietņu un lietotņu lietotājiem izvēlēties un pārvietot lapas elementus. Ir piecas jQuery UI mijiedarbības. Noklikšķinot uz jebkuras no zemāk esošajām saitēm, jūs nokļūsit katras mijiedarbības demonstrācijā jQuery UI vietnē.

  • Draggable mijiedarbība ļauj lietotājiem pārvietot Web lapas elementu, velkot un nometot to ar peli.
  • Droppable mijiedarbība darbojas cieši kopā ar velkamu mijiedarbību. Lai to lietotu, tīmekļa vietnē jābūt pieejamam gan vilkamam, gan nomināmam vienumam. Kad velkamais priekšmets tiek nomests uz nomināmā priekšmeta, tiek aktivizēta darbība.
  • Maināms lielums dara tieši to, kas, jūsuprāt, vajadzētu: tas padara lapas elementu maināmu.
  • Atlasāmie var padarīt vienumus sarakstā atlasāmus, vai nu noklikšķinot uz tiem pa vienam, vai arī turot nospiestu Ctrl vai noklikšķinot un velkot pāri vairākiem vienumiem, lai atlasītu vairākus vienumus vienlaikus..
  • Šķirojams ļauj saraksta elementus pārkārtot jebkurā secībā.

jQuery UI mijiedarbība nav tāda lieta, kādu jūs gaidījāt ieviest vidējā vietnē. Tomēr, ja veidojat interaktīvu tīmekļa lietotni, spēli vai sarežģītu formu, šī mijiedarbība būs noderīga.

jQuery UI utilītas

jQuery UI var pagarināt, un logrīku rūpnīca ir lietderība, ko tā izmanto. Logrīku rūpnīca ļauj jums vienā iepakojumā salikt vairākas jQuery UI metodes, stilus un funkcijas..

Ja esat pazīstams ar objektu orientētu programmēšanu, varētu būt noderīgi domāt par jQuery UI logrīkiem kā objektiem. Tātad, jQuery UI akordeons faktiski ir akordeona klases objekts. Logrīku rūpnīca jums ļauj definēt jaunas logrīku klases un pēc tam izmantot šo klasi, lai izveidotu vairākus objektus, tāpat kā jūs izveidojat klasi un atkārtoti to izmantojat OOP.

Vēl viena noderīga jQuery UI lietderība ir .position () metode. Šī metode ļauj definēt jebkura elementa pozīciju attiecībā pret citu elementu vai lietotāja darbību. Metode ir diezgan vienkārša, tiklīdz tā ir pakārtota. Apskatīsim piemēru.

$ (‘# otrā divdaļa’) .pozīcija ({
mans: ‘kreisā augšdaļa’,
at: ‘labajā apakšā’,
no: ‘# first-div’
});

Šis koda kods saka, ka elementa kreisajam augšējam stūrim ar otrās divdaļas id ir jābūt novietotam elementa labajā apakšējā stūrī ar pirmās divdesmijas numuru, piemēram:

jQuery UI pozīcijas animācija

Turklāt priekšmetus var novietot, pamatojoties uz lietotāja darbībām. Pielāgosim kodu, lai peles, nevis pirmās divdimensiju pozīcijas izmantotu otrās div. Pozīcijas noteikšanai.

$ (dokuments) .mousemove (funkcija (notikums) {
$ (‘# otrā divdaļa’) .pozīcija ({
mans: ‘centrs’,
no: pasākums,
sadursme: ‘der’
})
})

Šis kods pievieno klausītāju .mousemove () notikumam, kas tiks iedarbināts jebkurā laikā, kad peli ievada dokumentā. Kad tas notiks, mērķa div pozīcija () tiks noteikta, pamatojoties uz peles stāvokli.

Paskatīsimies to darbībā.

jQuery UI pozīcijas Mousemove animācija

jQuery Mobile

jQuery Mobile ir vēl viens jQuery bibliotēkas paplašinājums. To izmanto, lai izveidotu pieskārienam optimizētas atsaucīgas vietnes un lietotnes.

Domājot par jQuery Mobile, uzsvars tiešām būtu jāliek uz pieskārienu optimizētu. Ir daudzas galvenās jQuery un jQuery UI metodes un notikumi, kas vienkārši nav piemērojami mobilajai ierīcei, un jQuery Mobile adreses, kurām trūkst trūkumu. Atšķirībā no jQuery UI, kuru var izmantot, lai darbinātu tikai vienu vai divus vietnes aspektus, jQuery Mobile ir veidots kā viss vai nekas risinājums, kas paredzēts pieskārienjutīgām atsaucīgām vietnēm un lietotnēm..

Bibliotēkā ir liels klāsts reaģējošu, ar skārienu optimizētu pogu, datumu atlasītājiem, formas elementiem, zvēlšanas notikumiem, navigācijas elementiem, tabulām, cilnēm, slīdņiem un daudz ko citu. Turklāt jQuery Mobile ir iekļauts ThemeRoller.

Izmantojot jQuery Mobile, izaicinājums ir tā pieeja jeb viss jeb nekas. Tas ir paredzēts vietņu un lietotņu galddatoru versiju pilnīgai aizstāšanai. Ja jums labāk būtu viena vietne vai lietotne, kas darbojas visās ierīcēs, jQuery Mobile nav tas, ko meklējat. Ja jūs izmantojat jQuery Mobile lietotnei vai vietnei, kas darbojas visās ierīcēs – ar skārienjutīgu un nevis -, jums būs jāatrod veids, kā ieslēgt un izslēgt jQuery Mobile, atklājot ierīces tipu, izmēru un skārienekrāna klātbūtni..

Dizaina resursi

Mēs jau norādījām uz dažām vietām, kur varat uzzināt JavaScript. Ja jūs vēl nezināt kādu JavaScript, pirms niršanas jQuery izstrādājiet šīs prasmes. Kad zem jostas būs atrodams JavaScript, šie resursi palīdzēs jums ātrāk, izmantojot jQuery, jQuery UI un jQuery Mobile.

  • jQuery fonda mācību centrs ir oficiālā (un viena no labākajām) vietām, kur mācīties jQuery. Šeit jūs atradīsit uz nodaļām balstītu kursu, kas aptver pamatus, notikumus un efektus, AJAX, spraudņus un citu. Kad esat gatavs, varat arī uzzināt, kā lietot jQuery UI un jQuery Mobile.
  • Uzziniet jQuery From Scratch ir uz projektiem balstīta apmācība, kas palīdzēs iegūt pārliecību par jQuery programmētāju.
  • CodeCademy jQuery kurss māca jums jQuery sintakse, kā arī to, kā rakstīt pamatfunkcijas, modificēt DOM elementus, izmantot notikumus un ieviest efektus.
  • Bocoup jQuery Fundamentals ir e-grāmata ar iebūvētu JavaScript konsoli, lai jūs varētu izmēģināt kodu tieši pārlūkā. Tas aptver jQuery pamatus, pārvietojoties un manipulējot ar DOM elementiem, notikumiem, efektiem un AJAX.

Dizaineriem nepieciešama jQuery

JQuery, jQuery UI un jQuery Mobile paplašinājumi papildina daudzus logrīkus, mijiedarbību, metodes, efektus un skārienam optimizētus rīkus. To apgūšana padarīs jūs par labāku dizaineru un izstrādātāju, jo varēsit izveidot jaudīgas, interaktīvas tīmekļa lietotnes, netērējot nevienu taustiņu..

Citas interesantas lietas

Mums ir vairāk rokasgrāmatu, mācību materiālu un infografiku, kas saistīti ar kodēšanu un vietņu izstrādi:

  • CSS3 – ievads, ceļveži & Resursi: šī ir lieliska vieta, kur sākt apgūt tīmekļa lapu izkārtojumu.
  • ASP.NET resursi: šī rokasgrāmata palīdzēs jums izmantot Microsoft .NET sistēmu tīmekļa lapu izveidošanai.

Kāds kods jums jāiemācās?

Neizpratnē par to, kādā programmēšanas valodā jums vajadzētu iemācīties iekļūt? Iepazīstieties ar mūsu infografiku. Kāds kods jums jāiemācās? Tajā aplūkoti ne tikai dažādu valodu aspekti, bet arī sniegti atbildes uz svarīgiem jautājumiem, piemēram, “Cik daudz naudas es nopelnīšu Java programmēšanai iztikai?”

Kāds kods jums jāiemācās?
Kāds kods jums jāiemācās?

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