Dele:
En grunnleggende veiledning til JQuery for Javascript-programmerere
JQuery er et av de mest populære JavaScript-bibliotekene på planeten (hva er JavaScript Hva er JavaScript, og kan Internett eksistere uten det? Hva er JavaScript, og kan Internett eksistere uten det? JavaScript er en av de tingene som mange tar for gitt . Alle bruker det. Les mer). På tidspunktet for begynnelsen vil JavaScript (bli referert til som JS her inne i) var på et helt annet sted. 14. januar 2006 var dagen da jQuery ble annonsert på BarCampNYC. JS manglet fortsatt noe - nettlesere støttet alle deler av det, men mange hack og løsninger måtte implementeres for å overholde.
JQuery kom sammen og forandret alt. JQuery gjorde det veldig enkelt å skrive nettleserkompatibel kode. Du kan animere nettsider uten å ha en grad i datavitenskap - hooray! 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 på JavaScript-ferdighetene dine, vil du kanskje lese noen HTML- og CSS-opplæringsprogrammer. Lær HTML og CSS med disse trinnvise opplæringsprogrammene. Lær HTML og CSS med disse trinnvise opplæringsprogrammene. Nysgjerrig om HTML, CSS og JavaScript? Hvis du tror at du har mulighet til å lære å lage nettsteder fra bunnen av - her er noen gode trinnvise opplæringsprogrammer verdt å prøve. Les mer først hvis du ikke er kjent med dem heller.
Vi har introdusert jQuery Making The Web Interactive: En introduksjon til jQuery Gjør Web Interactive: En introduksjon til jQuery jQuery er et script-bibliotek på kundesiden som nesten alle moderne nettsider bruker - det gjør nettsteder interaktive. Det er ikke det eneste Javascript-biblioteket, men det er den mest utviklede, mest støttede og mest brukte ... Les mer før, så denne veiledningen til JQuery vil fokusere på faktisk koding.
Starter
Du kan være kjent med JS-måten å velge ids fra dokumentobjektmodellen (DOM):
document.getElementById ( 'foo');Vel, JQuery tar dette et skritt videre. Du trenger ikke å ringe forskjellige metoder for å velge klasser, ids eller flere elementer. Slik velger du et id:
$ ( '# Bar');Enkelt rett? Det er nøyaktig samme syntaks for å velge nesten hvilket som helst DOM-element. Slik velger du klasser:
$ ( 'Baz');Du kan også bli kreativ for noen ekte kraft. Dette velger alt td elementer inne i a bord bortsett fra den første.
$ ('table td'). ikke (': først');Legg merke til hvordan seleksjonsnavnene samsvarer nesten nøyaktig deres CSS-kolleger. Du kan tilordne objekter til regelmessig JS-variabler:
var xyzzy = $ ('# foreldre .child');Eller du kan bruke jQuery-variabler:
var $ xyzzy = $ ('# foreldre .child');Dollartegnet er bare brukt til å indikere at denne variabelen er et jQuery-objekt, noe som er svært nyttig på komplekse prosjekter.
Du kan velge foreldre til et element:
$ ( 'Barn') foreldre (.);Eller søskenene:
. $ ( 'Barn') søsken ();Du må utføre koden din når nettleseren er klar. Slik gjør du det:
$ (dokument) .ready (funksjon () console.log ('klar!'););Mer makt
Nå som du vet det grunnleggende, la oss gå videre til noen 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 lage hverandre en annen farge (kjent som Sebra striper). Nå kan du bruke CSS for dette:
#cars tr: nth-child (even) bakgrunnsfarge: rød; 
Slik kan det oppnås med jQuery:
$ ( 'Tr: selv'). AddClass ( 'selv');Dette vil oppnå det samme, forutsatt det til og med er en klasse definert i CSS. Legg merke til hvordan fullstoppet 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 en stor avtale.
JQuery kan også skjule eller fjerne rader:
$ ( '# FordCortina') skjule (.); $ ( '# FordCortina') fjerne (.);Du trenger ikke å skjule et element før du fjerner det.
funksjoner
JQuery-funksjoner er akkurat som JS. De bruker curly braces og kan akseptere argumenter. Hvor det blir veldig interessant er gjennom tilbakekallinger. Tilbakeringinger kan brukes til nesten hvilken som helst jQuery-funksjon. De spesifiserer et stykke kode for å løpe når kjernevirkningen er fullført. Dette gir stor funksjonalitet. Hvis de ikke eksisterte, og du skrev koden din forutsatt at den skulle kjøre lineært, ville JS fortsette å utføre neste linje kode mens du ventet på den forrige. Tilbakeringinger sikrer at koden bare kjøres når den opprinnelige oppgaven er fullført. Her er et eksempel:
$ ('table'). skjul (funksjon () alarm ('MUO regler!'););Vær advart - denne koden utfører et varsel for hvert element. Hvis selgeren din er noe på siden mer enn en gang, vil du få flere varsler.
Du kan bruke tilbakeringinger med andre argumenter:
$ ('tr: jevn'). addClass ('even', funksjon () console.log ('Hello'););Legg merke til hvordan det er et halvtarm etter avslutningsbraketten. Dette ville normalt ikke være nødvendig for en JS-funksjon, men denne koden er fortsatt ansett for å være på en linje (da tilbakekallingen er inne parenteser).
animasjon
JQuery gjør det veldig enkelt å animere nettsider. Du kan fade elementer inn eller ut:
$ ( 'Fade1. ') FadeIn (' sakte.'); $ ( '# Fade2') fadeout (500).;Du kan spesifisere tre hastigheter (sakte, middels, rask) eller et tall som representerer hastigheten i millisekunder (1000ms = 1 sekund). Du kan animere nesten et hvilket som helst CSS-element. Dette animerer bredden på velgeren fra sin nåværende bredde til 250px.
$ ('foo'). animere (bredde: '250px');Det er ikke mulig å animere farger. Du kan også bruke tilbakeringinger med animasjon:
$ ('bar'). animate (høyde: '250px', funksjon () $ ('bar'). animate (width: '50px');Loops
Loops 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) console.log (i + '-' + $ (dette)););Dette ville skrive ut 0, deretter 1 og så videre.
Du kan også bruke Hver() å iterere over arrays, akkurat som i JS:
Var biler = ['Ford', 'Jaguar', 'Lotus']; $ .each (biler, funksjon (jeg, verdi) console.log (verdi););Legg merke til det ekstra argumentet som heter verdi - dette er verdien av arrayelementet.
Det er verdt å merke seg Hver() kan noen ganger være langsommere enn vanilje JS-løkker. Dette skyldes den ekstra behandlingskostnaden som jQuery utfører. For det meste er dette ikke et problem. Hvis du er bekymret for ytelse, eller jobber med store datasett, bør du vurdere å benchmark koden din med jsPerf først.
AJAX
Asynkron JavaScript og XML eller AJAX er veldig veldig enkelt med jQuery. AJAX driver en stor del av Internett, og det er noe vi har dekket i del 5 jQuery Tutorial (Del 5): AJAX dem alle! jQuery opplæring (del 5): AJAX dem alle! Når vi er i nærheten av vår jQuery mini-opplæringsserie, er det på tide at vi tok en mer grundig titt på en av de mest brukte funksjonene i jQuery. AJAX gjør det mulig for et nettsted å kommunisere med ... Les mer om vår jQuery-veiledning jQuery-veiledning - Komme i gang: Grunnleggende og Selectors jQuery-veiledning - Komme i gang: Grunnleggende og valgorer I forrige uke snakket jeg om hvor viktig jQuery er for enhver moderne webutvikler og hvorfor det er Rått. Denne uken, jeg tror det er på tide at vi fikk våre hender skitne med noe kode og lærte hvordan ... Les mer. Det gir en måte å delvis laste inn en nettside - ingen grunn til å laste hele siden opp når du bare vil oppdatere fotballpoengene, for eksempel. jQuery har flere AJAX-metoder, det enkleste å være 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 utføre HTTP GET forespørsler:
$ .get ('noen / url', funksjon (resultat) console.log (result););Du kan også sende data ved hjelp av POST:
$ .post ('noen / andre / url', 'make': 'Ford', 'modell': 'Cortina');Det er veldig enkelt å sende skjemadata:
$ .post ('url', $ ('form'). serialize (), funksjon (resultat) console.log (result);De serialiserer () funksjonen får alle formdataene og forbereder den til overføring.
Promises
Løfter brukes til utsatt utførelse. De kan være vanskelig å lære, men jQuery gjør det litt mindre plagsomt. ECMAScript 6 introduserer innfødte løfter til JS, men nettleserstøtten er i beste fall flaky. For nå er jQuery-løfter mye bedre på kryssbrowser-støtte.
Et løfte er nesten akkurat som det høres ut. Koden vil gi et løfte om å returnere på et senere tidspunkt når det er fullført. Din JavaScript-motor vil fortsette å utføre en annen kode. En gang løftet løser (retur), kan et annet stykke kode kjøres. Løfter kan tenkes som tilbakekallinger. Dokumentasjonen for jQuery forklarer mer detaljert.
Her er et eksempel:
// dfd == utsatt var dfd = $ .Deferred (); funksjon doThing () $ .get ('litt / sakte / url', funksjon () dfd.resolve ();); returnere dfd.promise (); $ .when (doThing ()). deretter (funksjon () console.log ('YAY, det er ferdig'););Legg merke til hvordan løftet er gjort (dfd.promise ()), og det er kun løst når AJAX-anropet er fullført. Du kan bruke en variabel til å holde oversikt over flere AJAX-anrop, og bare fullføre en annen oppgave når alle har blitt gjort.
Ytelse Tips
Nøkkelen til å presse ytelsen ut av nettleseren din begrenser tilgangen til DOM. Mange av disse tipsene kan gjelde for JS, og du vil kanskje profilere koden din for å se om det er uakseptabelt sakte. I dagens alder av høyytelses-JavaScript-motorer, kan små flaskehalser i kode ofte gå ubemerket. Til tross for dette er det fortsatt verdt å prøve å skrive den raskeste koden du kan.
I stedet for å søke i DOM for hver handling:
$ ('foo'). css ('bakgrunnsfarge', 'rød'); $ ('foo'). css ('farge', 'grønn'); $ ('foo'). css ('bredde', '100px');Lag objektet i en variabel:
$ bar = $ ('foo'); $ bar.css ('bakgrunnsfarge', 'rød'); $ bar.css ('farge', 'grønn'); $ bar.css ('bredde', '100px');Optimaliser sløyfer. Gitt en vanilje for sløyfe:
Var biler = ['Mini', 'Ford', 'Jaguar']; for (int i = 0; i < cars.length; ++i) // do something Selv om det ikke er dårlig, kan denne sløyfen gjøres raskere. For hver iterasjon må sløyfen beregne verdien av bilens matrise (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 = cars.length; i < j; ++i) // do something Nå lagres bilens rekkevidde i j. Dette må ikke lenger beregnes i hver iterasjon. Hvis du bruker Hver(), Du trenger ikke å gjøre dette, selv om riktig optimalisert vanilje JS kan overgå jQuery. Hvor jQuery virkelig skinner er gjennom utviklingshastigheten og feilsøkingen. Hvis du ikke jobber med store data, er jQuery vanligvis mer enn rask.
Du bør nå vite nok grunnleggende om å være en jQuery ninja!
Bruker du jQuery regelmessig? Har du stoppet å bruke den av noen grunn? Gi oss beskjed om dine tanker i kommentarene nedenfor!
Utforsk mer om: JavaScript, jQuery.