En grunnleggende guide til JQuery for Javascript-programmerere

Annonse

jQuery er et av de mest populære JavaScript-bibliotekene på planeten (hva er JavaScript Hva er JavaScript, og kan Internett eksistere uten det?JavaScript er en av de tingene mange tar for gitt. Alle bruker det. Les mer ). Når den ble startet, vil JavaScript (bli referert til som JS herfra og inn) var på et veldig annet sted. 14. januar 2006 var dagen da jQuery ble kunngjort kl BarCampNYC. JS manglet fremdeles noe - nettlesere støttet alle deler av det, men mange hacks og midlertidige løsninger måtte implementeres for å overholde.

JQuery kom og forandret alt. JQuery gjorde det veldig enkelt å skrive nettleserkompatibel kode. Du kan animerte nettsider uten å ha en grad i informatikk - høres! Ti år på er jQuery fortsatt konge, og hvis du aldri har brukt den før, hva kan du gjøre med det?

I tillegg til å pusse opp dine JavaScript-ferdigheter, kan det være lurt å lese noen HTML og CSS tutorials Lær HTML og CSS med disse trinnvise tutorialsEr du nysgjerrig på HTML, CSS og JavaScript? Hvis du tror at du har en evne til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise tutorials som er verdt å prøve.

Les mer først hvis du heller ikke er kjent med dem.

Vi har introduserte jQuery Å gjøre nettet interaktivt: en introduksjon til jQueryjQuery er et script-bibliotek på klientsiden som nesten alle moderne nettsteder bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er det mest utviklede, mest støttede og mest brukte ... Les mer før, så denne guiden til JQuery vil fokusere på faktisk koding.

Starter

Du er kanskje kjent med JS-måten å velge IDer fra Document Object Model (DOM):

document.getElementById ( 'foo');

Vel, JQuery tar dette et skritt videre. Du trenger ikke å ringe forskjellige metoder for å velge klasser, IDer eller flere elementer. Slik velger du en id:

$ ( '# Bar');

Lett ikke sant? Det er nøyaktig den samme syntaks for å velge nesten alle DOM-elementer. Slik velger du klasser:

$ ( 'Baz.');

Du kan også bli kreativ for litt virkelig kraft. Dette velger alle td elementer inne i bord bortsett fra den første.

$ ('tabell td'). ikke (': først');

Legg merke til hvordan velgernavnene samsvarer nesten nøyaktig med deres CSS-kolleger. Du kan tilordne objekter til regelmessig JS-variabler:

var xyzzy = $ ('# foreldre. barn');

Eller du kan bruke jQuery-variabler:

var $ xyzzy = $ ('# foreldre. barn');

Dollartegnet brukes bare for å indikere at denne variabelen er et jQuery-objekt, noe som er veldig nyttig i komplekse prosjekter.

Du kan velge overordnet element:

$ ( 'Barn') foreldre (.);

Eller søsknene:

$ ( 'Barn') søsken ().;

Du må utføre koden din når nettleseren er klar. Slik gjør du det:

$ (dokument). allerede (funksjon () {console.log ('klar!'); });

Mer makt

Nå som du kjenner det grunnleggende, la oss gå videre til mer komplekse ting. Gitt en HTML-tabell:

Gjøre
Modell
Farge


Ford
Eskorte
Svart


Mini
Cooper
rød


Ford
Cortina
Hvit

Si at du vil gjøre annenhver rad til en annen farge (kjent som Zebra Stripes). Nå kan du bruke CSS for dette:

#cars tr: nth-child (jevn) {bakgrunnsfarge: rød; }

Slik kan det oppnås med jQuery:

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

Dette vil oppnå det samme, forutsatt at det til og med er en klasse definert i CSS. Legg merke til hvordan full stopp før klassenavnet ikke er nødvendig. Disse er som oftest bare nødvendig for hovedvelgeren. Ideelt sett vil du bruke CSS for dette til å begynne med, selv om det ikke er så viktig.

JQuery kan også skjule eller fjerne rader:

. $ ( '# FordCortina') hide ();. $ ( '# FordCortina') remove ();

Du trenger ikke å skjule et element før du fjerner det.

funksjoner

JQuery-funksjoner er akkurat som JS. De bruker krøllete seler og kan godta argumenter. Hvor det blir veldig interessant er gjennom tilbakeringinger. Tilbakekalling kan brukes på nesten enhver jQuery-funksjon. De spesifiserer et stykke kode som skal kjøres når kjernehandlingen er fullført. Dette gir enorm funksjonalitet. Hvis de ikke eksisterte, og du skrev koden din og ventet at den skulle kjøres på en lineær måte, ville JS fortsette å utføre den neste kodelinjen mens du ventet på den forrige. Tilbakekalling sikrer at koden bare kjøres når den opprinnelige oppgaven er fullført. Her er et eksempel:

$ ('tabell'). skjul (funksjon () {varsling ('MUO-regler!'); });

Vær advart - denne koden utfører et varsel for hvert element. Hvis velgeren din er noe på siden mer enn en gang, vil du få flere varsler.

Du kan bruke tilbakeringinger med andre argumenter:

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

Legg merke til hvordan det er en halvkolon etter stengene. Dette vil normalt ikke være nødvendig for en JS-funksjon, men denne koden anses fortsatt for å være på en linje (ettersom tilbakeringingen er inne i parentes).

animasjon

JQuery gjør det veldig enkelt å animere websider. Du kan visne elementer inn eller ut:

$ ( 'Fade1 ') fadeIn (' sakte.'); $ ('# fade2'). fadeOut (500);

Du kan spesifisere tre hastigheter (langsom, middels, rask) eller et tall som representerer hastigheten i millisekunder (1000ms = 1 sekund). Du kan animere nesten ethvert CSS-element. Dette animerer bredden på velgeren fra gjeldende bredde til 250 px.

$ ('foo'). animere ({bredde: '250px'});

Det er ikke mulig å animere farger. Du kan også bruke tilbakeringinger med animasjon:

$ ('bar'). animere ({høyde: '250px'}, funksjon () {$ ('bar'). animere ({bredde: '50px'} });

Loops

Looper skinner virkelig i jQuery. Hver() brukes til å iterere over hvert element av en gitt type:

$ ('li'). hver (funksjon () {console.log ($ (dette)); });

Du kan også bruke en indeks:

$ ('li'). hver (funksjon (i) {konsoll.log (i + '-' + $ (dette)); });

Dette ville trykke 0, deretter 1 og så videre.

Du kan også bruke Hver() å iterere over matriser, akkurat som i JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (biler, funksjon (i, verdi) {console.log (verdi); });

Legg merke til det ekstra argumentet som heter verdi - dette er verdien til array-elementet.

Det er verdt å merke seg det Hver() kan noen ganger være tregere enn vanilje JS-løkker. Dette skyldes den ekstra behandlingskostnaden som jQuery utfører. I det meste av tiden er dette ikke et spørsmål. Hvis du er bekymret for ytelse, eller jobber med store datasett, kan du vurdere å benchmarking koden din med jsPerf først.

AJAX

Asynkron JavaScript og XML eller AJAX er egentlig veldig enkelt med jQuery. AJAX driver enorme mengder Internett, og det er noe vi har dekket inn del 5 jQuery Tutorial (Del 5): AJAX dem alle!Da vi nærme slutten av min-tutorial-serien for jQuery, er det på tide at vi tar en mer dyptgående titt på en av de mest brukte funksjonene i jQuery. AJAX lar et nettsted kommunisere med ... Les mer av vår jQuery tutorial jQuery Tutorial - Komme i gang: Grunnleggende og velgereForrige uke snakket jeg om hvor viktig jQuery er for enhver moderne nettutvikler, og hvorfor det er kjempebra. Denne uken tror jeg det er på tide at vi skitne hendene med litt kode og lærte hvordan ... Les mer . Det gir en måte å laste inn en webside på - ingen grunn til å laste inn hele siden når du for eksempel bare vil oppdatere fotballpoengsummen. jQuery har flere AJAX-metoder, den enkleste er laste():

$ ( '# Baz') belastning ( 'noen / url / /side.html.');

Dette utfører et AJAX-anrop til den angitte siden (noen / url / /side.html) og skyver dataene inn i velgeren. Enkel!

Du kan opptre HTTP GET forespørsler:

$ .get ('noen / url', funksjon (resultat) {console.log (resultat); });

Du kan også sende data ved å bruke POST:

$ .post ('noen / andre / url', {'make': 'Ford', 'model': 'Cortina'});

Det er veldig enkelt å sende inn skjemadata:

$ .post ('url', $ ('form'). serialisere (), funksjon (resultat) {console.log (result); }

De serialize () -funksjonen får alle skjemadataene og forbereder dem for overføring.

Promises

Løfter brukes til utsatt utførelse. De kan være vanskelige å lære, men jQuery gjør det litt mindre plagsomt. ECMAScript 6 introduserer innfødte løfter til JS, men nettleserstøtte er i beste fall flassende. Foreløpig er jQuery-løfter mye bedre til støtte for nettlesere.

Et løfte er nesten nøyaktig som det høres ut. Koden gir et løfte om å komme tilbake på et senere tidspunkt når den er fullført. JavaScript-motoren din går videre til å utføre en annen kode. En gang løftet løser (returnerer), noe annet stykke kode kan kjøres. Løfter kan tenkes som tilbakeringinger. De jQuery-dokumentasjon forklarer nærmere.

Her er et eksempel:

// dfd == utsatt. var dfd = $. Utsatt (); funksjon doThing () {$ .get ('noen / sakte / url', funksjon () {dfd.resolve (); }); returnere dfd.promise (); } $ .when (doThing ()). deretter (funksjon () {console.log ('YAY, it is done'); });

Legg merke til hvordan løftet blir gitt (dfd.promise ()), og det løses bare når AJAX-samtalen er fullført. Du kan bruke en variabel for å holde oversikt over flere AJAX-samtaler, og bare fullføre en annen oppgave når alt er gjort.

Prestasjonstips

Nøkkelen til å presse ytelsen ut av nettleseren din er å begrense tilgangen til DOM. Mange av disse tipsene kan også gjelde for JS, og det kan være lurt å profilere koden din for å se om den er uakseptabelt treg. I den nåværende tidsalderen for JavaScript-motorer med høy ytelse, kan mindre flaskehalser i koden ofte ikke bli lagt merke til. Til tross for dette er det fremdeles verdt å prøve å skrive den koden som gir raskest

I stedet for å søke i DOM for hver handling:

$ ('foo'). css ('bakgrunnsfarge', 'rød'); $ ('foo'). css ('farge', 'grønn'); $ ('foo'). css ('bredde', '100 px');

Lagre objektet i en variabel:

$ bar = $ ('foo'); $ bar.css ('bakgrunnsfarge', 'rød'); $ bar.css ('farge', 'grønn'); $ bar.css ('bredde', '100px');

Optimaliser løkkene dine. Gitt en vanilje for sløyfe:

var cars = ['Mini', 'Ford', 'Jaguar']; for (int i = 0; i 

Selv om det ikke i seg selv er dårlig, kan denne sløyfen gjøres raskere. For hver iterasjon må sløyfen beregne verdien på biloppstillingen (cars.length). Hvis du lagrer dette i en annen variabel, kan du oppnå ytelse, spesielt hvis du jobber med store datasett:

for (int i = 0, j = biler. lengde; i 

Nå er lengden på biloppstillingen lagret i j. Dette trenger ikke lenger å beregnes i hver iterasjon. Hvis du bruker Hver(), trenger du ikke å gjøre dette, selv om riktig optimalisert vanilje JS kan overgå jQuery. Hvor jQuery virkelig skinner er gjennom hastigheten på å utvikle og feilsøke. Hvis du ikke jobber med big data, er jQuery vanligvis mer enn raskt.

Du bør nå kjenne nok grunnleggende for å være en jQuery ninja!

Bruker du jQuery regelmessig? Har du sluttet å bruke den av noen grunner? Gi oss beskjed om tankene dine i kommentarene nedenfor!