JQuery põhijuhend Javascripti programmeerijatele

Reklaam

JQuery on üks populaarsemaid JavaScripti teeke kogu planeedil (mis on JavaScript Mis on JavaScript ja kas Internet saab ilma selleta eksisteerida?JavaScript on üks neist asjadest, mida paljud peavad iseenesestmõistetavaks. Kõik kasutavad seda. Loe rohkem ). Selle loomise ajal oli JavaScripti (edaspidi: JS edaspidi siit) oli hoopis teises kohas. 14. jaanuar 2006 oli päev, mil jQuery välja kuulutati BarCampNYC. JS-il oli endiselt pisut puudust - brauserid toetasid kõiki selle osi, kuid vastavuse tagamiseks tuli rakendada palju häkke ja lahendusi.

JQuery tuli kaasa ja muutis kõike. JQuery tegi brauseriga ühilduva koodi kirjutamise väga lihtsaks. Veebilehti saate animeerida ka ilma infotehnoloogia kraadi omandamata - jaa! Kümne aasta pärast on jQuery endiselt kuningas ja kui te pole seda kunagi varem kasutanud, mida saate sellega teha?

Lisaks oma JavaScripti oskuste arendamisele võiksite läbi lugeda ka mõned HTML ja CSS õpetused Õppige HTML-i ja CSS-i nende samm-sammult juhendavate dokumentide abil

Kas olete huvitatud HTMList, CSSist ja JavaScriptist? Kui arvate, et teil on nullist veebisaitide loomise õppimiseks vajalik teadmine - siin on mõned suurepärased samm-sammult õpetamisvõimalused. Loe rohkem esiteks, kui te pole ka nendega tuttav.

Meil on tutvustas jQuery Veebi interaktiivseks tegemine: jQuery sissejuhatusjQuery on kliendipoolne skriptikogu, mida kasutab peaaegu iga kaasaegne veebisait - see muudab veebisaidid interaktiivseks. See pole ainus Javascripti teek, kuid see on kõige enam arenenud, kõige toetatud ja laialdasemalt kasutatav ... Loe rohkem enne, nii et see JQuery juhend keskendub tegelikult kodeerimisele.

Alustamine

Võib-olla olete tuttav dokumendiobjekti mudeli ID-de valimise JS-iga (DOM):

document.getElementById ('foo');

Noh, JQuery astub selle sammu edasi. Klasside, ID-de või mitme elemendi valimiseks ei pea te helistama erinevatele meetoditele. ID valimiseks toimige järgmiselt.

$ ('# riba');

Lihtne, eks? Peaaegu kõigi DOM-i elementide valimiseks on täpselt sama süntaks. Klasside valimiseks toimige järgmiselt.

$ ('. baz');

Samuti võite loovuse saada mõne tõelise jõu jaoks. See valib kõik td elemendid a laud välja arvatud esimene.

$ ('tabeli td'). mitte (': esimene');

Pange tähele, kuidas valijate nimed vastavad peaaegu täpselt nende CSS-i kolleegidele. Saate objekte määrata korrapärane JS muutujad:

var xyzzy = $ ('# vanem .laps');

Või võite kasutada jQuery muutujaid:

var $ xyzzy = $ ('# vanem .laps');

Dollarimärki kasutatakse ainult selleks, et näidata, et see muutuja on jQuery objekt, millest on palju abi keerukates projektides.

Saate valida elemendi vanema:

$ ('laps'). vanem ();

Või õed-vennad:

$ ('laps'). õed-vennad ();

Kui brauser on valmis, peate oma koodi täitma. Selleks tehke järgmist.

$ (dokument). juba (funktsioon () {console.log ('valmis!'); });

Rohkem jõudu

Nüüd, kui teate põhitõdesid, liikugem edasi mõne keerukama kraami juurde. Antud html-tabel:

Tegema
Mudel
Värv


Ford
Eskort
Must


Mini
Cooper
Punane


Ford
Cortina
Valge

Oletame, et soovite muuta iga teise rea erinevaks värviks (tuntud kui Sebra triibud). Nüüd võiksite CSS-i kasutada selleks:

#kärud tr: n-ndal lapsel (isegi) {taustavärv: punane; }

Seda saab jQuery abil saavutada järgmiselt:

$ ('tr: isegi'). addClass ('isegi');

Sellega saavutatakse sama tingimus isegi on CSS-is määratletud klass. Pange tähele, kuidas klassi nime ette jäävat peatust pole vaja. Need on tavaliselt vajalik ainult peavalija jaoks. Ideaalis kasutaksite selleks CSS-i, kuigi see pole suur asi.

JQuery saab ka ridu peita või eemaldada:

$ ('# fordCortina'). peida (); $ ('# fordCortina'). eemalda ();

Enne selle eemaldamist ei pea te elementi varjama.

Funktsioonid

JQuery funktsioonid on täpselt nagu JS. Nad kasutavad lokkis traksid ja suudavad argumente vastu võtta. Seal, kus see tõeliselt huvitavaks saab, on tagasikutsumiste kaudu. Tagasihelistamist saab rakendada peaaegu kõigi jQuery funktsioonide jaoks. Nad määravad kooditüki, mis käivitatakse pärast põhitoimingu lõpetamist. See pakub tohutut funktsionaalsust. Kui neid pole olemas ja kirjutasite oma koodi, eeldades, et see töötab lineaarselt, jätkab JS eelmise koodirida täitmist, oodates eelmist. Tagasilükked tagavad, et kood käivitatakse alles siis, kui algne toiming on lõpule viidud. Siin on näide:

$ ('tabel'). hide (function () {alert ('MUO reeglid!'); });

Hoiatus - see kood käivitab hoiatuse iga elemendi kohta. Kui teie valija on lehel mitu korda, saate mitu hoiatust.

Tagasikutsumisi saate kasutada koos teiste argumentidega:

$ ('tr: even'). addClass ('even', function () {console.log ('Hello'); });

Pange tähele, kuidas pärast sulgudes on semikoolon. JS-funktsiooni jaoks pole seda tavaliselt vaja, kuid seda koodi peetakse endiselt ühel real (kuna tagasihelistamine on sulgudes).

Animatsioon

JQuery abil on veebilehtede animeerimine väga lihtne. Elemente saab sisse või välja tuhmutada:

$ ('. fade1'). fadeIn ('aeglane'); $ ('# fade2'). fadeOut (500);

Saate määrata kolm kiirust (aeglane, keskmine, kiire) või arvu, mis tähistab kiirust millisekundites (1000 ms = 1 sekund). Saate animeerida peaaegu mis tahes CSS-i element. See animeerib valija laiuse praegusest laiusest 250 pikslile.

$ ('foo'). animeerima ({laius: '250px'});

Värve pole võimalik animeerida. Tagasisidet saate kasutada ka animatsiooniga:

$ ('bar'). animeerima ({kõrgus: '250px'}, funktsioon () {$ ('bar'). animeerima ({laius: '50px'} });

Silmused

Silmused paistavad jQuerys tõeliselt silma. Iga() kasutatakse itereerimiseks iga tüüpi elemendi korral:

$ ('li'). igaüks (function () {console.log ($ (this))); });

Võite kasutada ka indeksit:

$ ('li'). igaüks (funktsioon (i) {console.log (i + '-' + $ (see)); });

See prindiks 0, siis 1 ja nii edasi.

Võite ka kasutada iga() itereerima massiivide kohal, nagu JS-is:

var autod = ['Ford', 'Jaguar', 'Lotus']; $ .each (autod, funktsioon (i, väärtus) {console.log (väärtus); });

Pange tähele täiendavat argumenti, mida nimetatakse väärtus - see on massiivi elemendi väärtus.

Väärib märkimist iga() saab vahel olema aeglasem kui vanilje JS silmused. Selle põhjuseks on täiendav töötlemiskulud, mida jQuery täidab. Enamasti pole see probleem. Kui tunnete muret toimivuse pärast või töötate suurte andmekogumitega, kaaluge oma koodi võrdlemist jsPerf esimene.

AJAX

Asünkroonne JavaScript ja XML või AJAX on jQuery abil väga lihtne. AJAX kasutab tohutul hulgal Internetti ja see on midagi, mida me oleme hõlmanud 5. osa jQuery juhendaja (5. osa): AJAX kõik!JQuery minijuhendussarja lõpu lähedal on käes aeg uurida jQuery ühte kõige sagedamini kasutatavat funktsiooni. AJAX võimaldab veebisaidil suhelda ... Loe rohkem meie jQuery õpetus jQuery juhendaja - alustamine: põhitõed ja valijadEelmisel nädalal rääkisin sellest, kui oluline on jQuery iga kaasaegse veebiarendaja jaoks ja miks see on fantastiline. Sel nädalal arvan, et on aeg käes käsi mõne koodiga määrida ja saime teada, kuidas ... Loe rohkem . See annab võimaluse veebilehe osaliseks laadimiseks - pole põhjust kogu lehte uuesti laadida, kui soovite värskendada ainult näiteks jalgpalli tulemusi. jQuery'l on mitu AJAX-meetodit, neist lihtsaim koormus ():

$ ('# baz'). load ('mõned / URL / leht.html');

See sooritab AJAX-kõne valitud lehele (mõned / url / leht.html) ja sisestab andmed valijasse. Lihtne!

Saad esineda HTTP GET taotlused:

$ .get ('mõned / url', funktsioon (tulemus) {console.log (tulemus); });

Andmeid saate saata ka kasutades POST:

$ .post ('mõni / muu / url', {'mark': 'Ford', 'mudel': 'Cortina'});

Vormi andmete esitamine on väga lihtne:

$ .post ('url', $ ('vorm'). serialize (), function (tulemus) {console.log (tulemus); }

järjestama () funktsioon saab kõik vormi andmed ja valmistab need edastamiseks ette.

Lubadused

Lubadusi kasutatakse täitmise edasilükkamiseks. Neid võib olla keeruline õppida, kuid jQuery muudab selle pisut vähem häirivaks. ECMAScript 6 tutvustab JS-ile kohalikke lubadusi, kuid parimal juhul on brauseri tugi ebakindel. Praegu on jQuery lubadused brauseriülese toe korral palju paremad.

Lubadus on peaaegu täpselt selline, nagu see kõlab. Kood lubab naasta hiljem, kui see on valmis. Teie JavaScripti mootor liigub mõne muu koodi täitmisele. Ükskord lubadus lahendab (naaseb), saab käivitada mõne muu koodi. Lubadusi võib mõelda nagu tagasilükkamisi. jQuery dokumentatsioon selgitab lähemalt.

Siin on näide:

// dfd == edasi lükatud. var dfd = $ .Deferred (); funktsioon doThing () {$ .get ('mõni / aeglane / url', funktsioon () {dfd.resolve (); }); tagasi dfd.promise (); } $ .when (doThing ()). seejärel (function () {console.log ('YAY, see on valmis'); });

Pange tähele, kuidas lubadus antakse (dfd.promise ()) ja see lahendatakse alles siis, kui AJAX-kõne on lõpule viidud. Võite kasutada muutujat, et jälgida mitut AJAX-kõnet, ja täitke teine ​​ülesanne alles siis, kui kõik on tehtud.

Näpunäited jõudluse kohta

Brauserist jõudluse pigistamise võti on DOM-ile juurdepääsu piiramine. Paljud neist näpunäidetest võiksid kehtida ka JS-i jaoks ja võiksite oma profiili profiilida, et näha, kas see on lubamatult aeglane. Kõrgjõudlusega JavaScripti mootorite praegusel ajastul võivad väikesed koodi kitsaskohad sageli märkamatuks jääda. Hoolimata sellest, tasub ikkagi proovida kirjutada võimalikult kiire kood.

Selle asemel, et otsida DOM-ist iga toimingu jaoks:

$ ('foo'). css ('taustavärv', 'punane'); $ ('foo'). css ('värv', 'roheline'); $ ('foo'). css ('laius', '100 pikslit');

Salvestage objekt muutujana:

$ baar = $ ('foo'); $ bar.css ('taustavärv', 'punane'); $ bar.css ('värv', 'roheline'); $ bar.css ('laius', '100 pikslit');

Optimeerige oma silmuseid. Silmuse jaoks antakse vanilje:

var autod = ['Mini', 'Ford', 'Jaguar']; jaoks (int i = 0; i 

Ehkki see pole olemuselt halb, saab selle aasa muuta kiiremaks. Iga iteratsiooni korral peab silmus arvutama autode massiivi väärtuse (autod.pikkus). Kui salvestate selle muusse muutujasse, on jõudlus saavutatav, eriti kui töötate suurte andmekogumitega:

jaoks (int i = 0, j = autode pikkus); i 

Nüüd on autode massiivi pikkus salvestatud j. Seda ei pea enam igas iteratsioonis arvutama. Kui kasutate iga(), ei pea te seda tegema, kuigi õigesti optimeeritud vanilli JS võib jQuery edestada. Seal, kus jQuery tegelikult paistab, on arendamise ja silumise kiirus. Kui te ei tööta suurandmete kallal, on jQuery tavaliselt enam kui kiire.

Nüüd peaksite teadma piisavalt põhitõdesid, et olla jQuery ninja!

Kas kasutate jQuery regulaarselt? Kas olete selle kasutamise mingil põhjusel lõpetanud? Andke meile oma mõtetest kommentaarides allpool!