Pagrindinis „JQuery“ vadovas „Javascript“ programuotojams

Skelbimas

JQuery yra viena populiariausių „JavaScript“ bibliotekų planetoje (kas yra „JavaScript“ Kas yra „JavaScript“ ir ar be jo gali egzistuoti internetas?„JavaScript“ yra vienas iš tų dalykų, kuriuos daugelis laiko savaime suprantamu dalyku. Visi tuo naudojasi. Skaityti daugiau ). Įsigalėjimo metu „JavaScript“ (bus vadinama JS toliau nuo čia) buvo visai kitoje vietoje. 2006 m. Sausio 14 d. Buvo diena, kai „jQuery“ buvo paskelbta „BarCampNYC“. JS dar šiek tiek trūko - naršyklėse buvo palaikomos visos jo dalys, tačiau norint atitikti reikalavimus, reikėjo įdiegti daugybę įsilaužimų ir būdų.

JQuery atėjo kartu ir viską pakeitė. „JQuery“ labai lengvai parašė naršyklę atitinkantį kodą. Galite animuoti tinklalapius neturėdami kompiuterių mokslo laipsnio - hore! Po dešimties metų „jQuery“ vis dar yra karalius, ir jei jūs niekada to nenaudojote anksčiau, ką galite su juo padaryti?

Galbūt norėsite ne tik patobulinti „JavaScript“ įgūdžius, bet ir perskaityti keletą dalykų HTML ir CSS vadovėliai Sužinokite HTML ir CSS naudodamiesi šiais „žingsnis po žingsnio“ vadovėliais

Norite sužinoti apie HTML, CSS ir „JavaScript“? Jei manote, kad turite žinių apie tai, kaip kurti svetaines nuo nulio, - tai keletas puikių žingsnis po žingsnio vadovėlių, kuriuos verta išbandyti. Skaityti daugiau pirmiausia, jei ir su jais nepažįsti.

Mes turime pristatė „jQuery“ Padaryti internetą interaktyviu: „jQuery“ įvadas„jQuery“ yra kliento scenarijų biblioteka, kurią naudoja beveik kiekviena šiuolaikinė svetainė - ji daro svetaines interaktyviomis. Tai ne vienintelė „Javascript“ biblioteka, tačiau ji yra labiausiai išsivysčiusi, labiausiai palaikoma ir plačiausiai naudojama ... Skaityti daugiau anksčiau, todėl šiame „JQuery“ vadove pagrindinis dėmesys bus skiriamas faktiškai kodavimui.

Darbo pradžia

Galbūt esate susipažinęs su JS būdu pasirinkti ID iš dokumento objekto modelio (DOM):

document.getElementById ('foo');

Na, JQuery žengia šį žingsnį toliau. Jums nereikia skambinti skirtingais metodais, kad pasirinktumėte klases, ID ar kelis elementus. Štai kaip pasirenkate ID:

$ ('# baras');

Lengva tiesa? Ta pati sintaksė yra beveik bet kokio DOM elemento parinkimas. Štai kaip pasirenkate klases:

$ ('. baz');

Taip pat galite kūrybiškai pasisemti realios galios. Taip pasirenkama viskas td elementai viduje a stalas išskyrus pirmąjį.

$ ('table td'). ne (': pirma');

Atkreipkite dėmesį, kaip parinkėjų vardai beveik tiksliai atitinka jų CSS atitikmenis. Galite priskirti objektus reguliariai JS kintamieji:

var xyzzy = $ ('# tėvas. vaikas');

Arba galite naudoti „jQuery“ kintamuosius:

var $ xyzzy = $ ('# tėvas. vaikas');

Dolerio ženklas yra naudojamas tik norint parodyti, kad šis kintamasis yra „jQuery“ objektas, o tai labai padeda sudėtinguose projektuose.

Galite pasirinkti elemento tėvą:

$ ('vaikas'). tėvas ();

Arba broliai / seserys:

$ ('vaikas'). seserys ();

Kai tik naršyklė bus paruošta, turite vykdyti savo kodą. Štai kaip tai padaryti:

$ (dokumentas). jau (funkcija () {console.log ('paruošta!'); });

Daugiau galios

Dabar, kai žinote pagrindus, pereikime prie sudėtingesnių dalykų. Duota html lentelė:

Padaryti
Modelis
Spalva


„Ford“
Palydos
Juoda


Mini
Cooperis
Raudona


„Ford“
Kortina
Balta

Tarkime, kad norite, kad visos kitos eilutės būtų skirtingos spalvos (žinomos kaip „Zebra“ juostelės). Dabar galite naudoti CSS tam:

# vežimėliai tr: n-tas vaikas (lygus) {fono spalva: raudona; }

Tai galima pasiekti naudojant „jQuery“:

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

Tai darant, bus pasiektas tas pats net yra klasė, apibrėžta CSS. Atkreipkite dėmesį, kaip nereikia visos stotelės prieš klasės pavadinimą. Šitie yra paprastai reikalingas tik pagrindiniam selektoriui. Idealiu atveju, jei tai pradėtumėte, naudotumėte CSS, nors tai nėra didelis dalykas.

„JQuery“ taip pat gali paslėpti ar pašalinti eiles:

$ ('# fordCortina'). hide (); $ ('# fordCortina'). pašalinti ();

Prieš pašalindami elementą, jums jo nereikia slėpti.

Funkcijos

„JQuery“ funkcijos yra tokios pat kaip JS. Jie naudoja garbanotas petnešas ir gali sutikti su argumentais. Ten, kur tai išties įdomu, yra per skambučius. Atšaukimus galima pritaikyti beveik bet kuriai „jQuery“ funkcijai. Jie nurodo kodo fragmentą, kuris bus paleistas atlikus pagrindinį veiksmą. Tai suteikia didžiulį funkcionalumą. Jei jų nebuvo, o jūs parašėte kodą, tikėdamasis, kad jis bus vykdomas linijiškai, JS ir toliau vykdys kitą kodo eilutę laukdama ankstesnės. Atgalinės funkcijos užtikrina, kad kodas vykdomas tik tada, kai bus atlikta pradinė užduotis. Štai pavyzdys:

$ ('lentelė'). slėpti (function () {alert ('MUO taisyklės!'); });

Įspėkite - šis kodas vykdo kiekvieno elemento įspėjimą. Jei jūsų pasirinkėjas yra kažkas puslapyje daugiau nei vieną kartą, gausite kelis įspėjimus.

Galite naudoti atšaukimus su kitais argumentais:

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

Atkreipkite dėmesį, kaip yra pusiau dvitaškis po užsegimo petnešomis. Paprastai to nereikia JS funkcijai, tačiau laikoma, kad šis kodas yra vienoje eilutėje (nes atšaukimas yra skliausteliuose).

Animacija

„JQuery“ leidžia labai lengvai animuoti tinklalapius. Galite išblukinti elementus į vidų arba į jį:

$ ('. fade1'). fadeIn ('lėtai'); $ ('# fade2'). fadeOut (500);

Galite nurodyti tris greičius (lėtas, vidutinis, greitas) arba skaičių, nurodantį greitį milisekundėmis (1000 ms = 1 sekundė). Galite pagyvinti beveik bet kuris CSS elementas. Tai pagyvina selektoriaus plotį nuo jo dabartinio pločio iki 250 pikselių.

$ ('foo'). animuoti ({plotis: '250px'});

Neįmanoma pagyvinti spalvų. Taip pat galite naudoti atšaukimus naudodami animaciją:

$ ('baras'). animuoti ({aukštis: '250 piks.'), funkcija () {$ ('juosta'). animuoti ({plotis: '50 piks.') });

Kilpos

„JQuery“ ciklai tikrai šviečia. Kiekvienas () naudojamas pakartoti kiekvieną tam tikro tipo elementą:

$ ('li'). kiekvienas (function () {console.log ($ (this))); });

Taip pat galite naudoti rodyklę:

$ ('li'). kiekvienas (funkcija (i) {console.log (i + '-' + $ (ši)); });

Tai atspausdintų 0, tada 1 ir taip toliau.

Taip pat galite naudoti kiekvienas () pakartoti masyvus, kaip ir JS:

var automobiliai = ['Ford', 'Jaguar', 'Lotus']; $ .each (automobiliai, funkcija (i, vertė) {console.log (reikšmė); });

Atkreipkite dėmesį į papildomą argumentą, vadinamą vertės - tai yra masyvo elemento reikšmė.

Verta paminėti tai kiekvienas () gali kartais būti lėtesnis nei vanilės JS kilpos. Taip yra dėl papildomų „jQuery“ apdorojimo išlaidų. Didžiąją laiko dalį tai nėra problema. Jei nerimaujate dėl našumo arba dirbate su dideliais duomenų rinkiniais, apsvarstykite galimybę palyginti savo kodą jsPerf Pirmas.

AJAX

Asinchroninis „JavaScript“ ir XML arba AJAX su „jQuery“ yra labai lengva. AJAX naudoja didžiulį interneto kiekį, ir tai yra kažkas, ką mes apžvelgėme 5 dalis „jQuery“ vadovėlis (5 dalis): AJAX jie visi!Artėjant „jQuery“ mini vadovėlių serijos pabaigai, atėjo laikas pažvelgti į vieną iš labiausiai naudojamų „jQuery“ funkcijų. AJAX leidžia svetainei bendrauti su ... Skaityti daugiau mūsų „jQuery“ pamoka „jQuery“ pamoka - pradžia: pagrindai ir parinkėjaiPraėjusią savaitę aš kalbėjau apie tai, kokia svarbi „jQuery“ bet kuriam šiuolaikiniam interneto kūrėjui ir kodėl tai nuostabu. Šią savaitę, manau, atėjo laikas susitepti rankas su kažkokiu kodu ir išmokti, kaip ... Skaityti daugiau . Tai suteikia galimybę iš dalies įkelti tinklalapį - nėra priežasties perkrauti visą puslapį, kai norite tik atnaujinti, pavyzdžiui, futbolo rezultatą. „jQuery“ turi kelis AJAX metodus, iš kurių lengviausias įkelti ():

$ ('# baz') .krauti ('kai kurie / url / page.html');

Tai atlieka AJAX kvietimą į nurodytą puslapį (kai kurie / URL / puslapis.html) ir įveda duomenis į selektorių. Paprasta!

Galite atlikti HTTP GET prašo:

$ .get ('kai kurie / url', funkcija (rezultatas) {console.log (rezultatas); });

Duomenis taip pat galite siųsti naudodamiesi POST:

$ .post ('kai kurie / kiti / url', {'padaryti': 'Ford', 'modelis': 'Cortina'});

Pateikti formos duomenis labai lengva:

$ .post ('url', $ ('forma'). serialize (), function (rezultatas) {console.log (rezultatas); }

serializuoti () funkcija gauna visus formos duomenis ir paruošia juos perdavimui.

Pažadai

Pažadai naudojami atidedant vykdymą. Jų gali būti sunku išmokti, tačiau „jQuery“ daro jį šiek tiek mažiau varginantį. ECMAScript 6 pristato JS pažadą, tačiau geriausiu atveju naršyklės palaikymas yra silpnas. Kol kas „jQuery“ pažadai yra daug geresni palaikant kryžmines naršykles.

Pažadas beveik tiksliai toks, kaip atrodo. Kodas pažadės grįžti vėliau, kai bus baigtas. „JavaScript“ variklis pradės vykdyti kokį nors kitą kodą. Kartą pažadą išsisprendžia (grąžina), gali būti paleistas kitas kodas. Pažadai gali būti laikomi atšaukimais. jQuery dokumentacija paaiškina išsamiau.

Štai pavyzdys:

// dfd == atidėtas. var dfd = $ .Deferred (); function doThing () {$ .get ('kai kurie / lėtai / url', function () {dfd.resolve (); }); grįžti dfd.promise (); } $ .when (doThing ()). tada (function () {console.log ('YAY, ji baigta'); });

Atkreipkite dėmesį, kaip pažadai yra įvykdyti (dfd.promise ()), ir jis bus išspręstas tik tada, kai AJAX skambutis bus baigtas. Galite naudoti kintamąjį, kad galėtumėte sekti kelis AJAX skambučius, o kitą užduotį atliksite tik atlikę visus veiksmus.

Našumo patarimai

Svarbiausia, kad našumas būtų pašalintas iš jūsų naršyklės, yra prieigos prie DOM apribojimas. Daugelis šių patarimų gali būti taikomi ir JS, todėl galbūt norėsite profiliuoti savo kodą, kad pamatytumėte, ar jis yra nepriimtinai lėtas. Dabartiniame didelio našumo „JavaScript“ variklių amžiuje nedideli kodo trūkumai dažnai gali būti nepastebėti. Nepaisant to, vis tiek verta pabandyti parašyti greičiausiai veikiantį kodą, kokį tik galite.

Užuot ieškoję DOM kiekvieno veiksmo:

$ ('foo'). css ('fono spalva', 'raudona'); $ ('foo'). css ('spalva', 'žalia'); $ ('foo'). css ('plotis', '100 piks.');

Laikykite objektą kintamajame:

$ baras = $ ('foo'); $ bar.css ('fono spalva', 'raudona'); $ bar.css ('spalva', 'žalia'); $ bar.css ('plotis', '100 piks.');

Optimizuokite savo kilpas. Vanilė už kilpą:

var automobiliai = ['Mini', 'Ford', 'Jaguar']; už (int i = 0; i 

Nors tai nėra blogai, šią kilpą galima padaryti greičiau. Kiekvienai iteracijai kilpa turi apskaičiuoti automobilių masyvo vertę (automobilių.ilgis). Jei saugote tai kitame kintamajame, gali būti pasiektas našumas, ypač jei dirbate su dideliais duomenų rinkiniais:

už (int i = 0, j = automobilių ilgis; i 

Dabar automobilių masyvo ilgis saugomas j. Tai nebereikia skaičiuoti kiekvienoje iteracijoje. Jei naudojate kiekvienas (), jums to nereikia daryti, nors tinkamai optimizuotas vanilinis JS gali pralenkti „jQuery“. Kur „jQuery“ iš tikrųjų šviečia, yra tobulinimo ir derinimo greitis. Jei dirbate ne su dideliais duomenimis, „jQuery“ paprastai yra daugiau nei greita.

Dabar turėtumėte žinoti pakankamai pagrindų, kad galėtumėte būti „jQuery“ ninja!

Ar reguliariai naudojate „jQuery“? Ar dėl kokių nors priežasčių nustojote jį naudoti? Praneškite mums savo mintis komentaruose žemiau!