Share
Avid lesere av Envato Tuts + kommer fra en rekke bakgrunner når det gjelder erfaring, kultur og hva de ønsker å lære. Når det gjelder teknologi, er det enkelt å ta for gitt de som nettopp har startet, spesielt hvis du har gjort noen form for utvikling i lengre tid.
Når det er sagt, en av de fine tingene om å bli utvikler er at når du har fått et håndtak på et bestemt språk og sett med ferdigheter, er det lett å oversette dem til andre utviklingsområder.
I et forsøk på å sikre at vi når det bredeste publikumet mulig, satser vi på å publisere innhold rettet mot nybegynnere som er nysgjerrige på et gitt språk, plattform eller applikasjon.
Og i denne artikkelen skal vi bare fokusere på jQuery. Spesielt skal vi se på det høyeste nivået på alt som jQuery tilbyr, og hvordan det kan hjelpe oss, og vi skal gjennomgå noen av prosjektene som også har kommet fram fra det første biblioteket.
Lær JavaScript: Den komplette veiledningen
Vi har bygget en komplett guide for å hjelpe deg med å lære JavaScript, enten du er bare i gang som webutvikler eller du vil utforske mer avanserte emner.
Først utgitt i 2006 av John Resig, utgikk jQuery et JavaScript-bibliotek på tverrplattform som gjorde det lettere å skrive løsninger på kundesiden..
På det tidspunktet dette ble utgitt, var det spesielt nyttig på grunn av inkonsekvensene som eksisterte blant JavaScript-implementeringer i Internet Explorer, Firefox og til slutt Google Chrome (som ikke ble utgitt før 2008).
Som definert av Wikipedia:
jQuery er et kryssplattforms-JavaScript-bibliotek designet for å forenkle klientens side-skripting av HTML. jQuery er det mest populære JavaScript-biblioteket som brukes i dag, med installasjon på 65% av de 10 millioner nettstedene med høyest trafikk på Internett. jQuery er gratis, åpen kildekode-programvare lisensiert under MIT-lisensen.
Videre sier jQuery-nettsiden selv:
jQuery er et raskt, lite og funksjonsrikt JavaScript-bibliotek. Det gjør ting som HTML-dokumentkryptering og -håndtering, hendelseshåndtering, animasjon og Ajax mye enklere med en brukervennlig API som fungerer på tvers av en rekke nettlesere. Med en kombinasjon av allsidighet og utvidbarhet har jQuery endret måten at millioner av mennesker skriver JavaScript.
Men hva betyr dette for oss som utviklere? Kanskje den beste måten for oss å forstå hva alt biblioteket tilbyr, er å undersøke hva det hevder å tilby.
Når en nettleser gjør en nettside, er det en visuell fremstilling av det som kalles DOM (eller dokumentobjektmodellen). Denne modellen kan konseptuelt modelleres som en tredata struktur der det er enkelte noder hver med røtter og blader.
Se for eksempel dette bildet som levert av Web-trinnboken:
Når du jobber med jQuery, kan du enkelt krysse innholdet i DOM for å nå eller finne nodene, elementene eller verdiene du sikter på å hente.
Dette betyr at hvis du leter etter teksten til a div element som har en unik ID, det er lett å gjøre.
Accentsconagua
/ ** * Denne koden ser etter en div med IDen til "mitt unike element" * og fjerner det fra visning. * / $ ('div # my-unique-element') .hide ();Hvis du prøver å gå gjennom alle span elementer, det kan du også gjøre:
/ ** * Dette er den grunnleggende måten å sette opp en loop i jQuery. Det vil * ta alle spanelementene på siden og deretter * tillate deg å iterere gjennom dem. * / $ ('span') .each (funksjon () // Behandle spanelementet her);Vi vurderer denne funksjonaliteten litt mer i neste avsnitt som det viser for å vise noe av det ekstra arbeidet du kan gjøre for å manipulere siden.
Gitt, disse eksemplene er enkle og ting kan bli mer komplisert, spesielt når vi introduserer metodekjetting. For eksempel:
$ excerpt.on ('keydown', funksjon (evt) hvis ((17 === evt.keyCode || 91 === evt.keyCode) || 86 === evt.keyCode) hvis (-1 = == $ .inArray (evt.keyCode, keymap)) keymap.push (evt.keyCode);) på ('keyup', funksjon () hvis user_has_pasted_content (keymap)) resize_textarea ; keymap = [];);På dette punktet skal du ikke vite hva som skjer med koden, men det er ment å vise deg hvor nyttig jQuery kan være i visse situasjoner ved hjelp av hjelpefunksjoner og metodekjetting.
Det er nok nok å si at kraften til jQuery ligger i evnen til å spørre DOM (derav navnet jQuery) og deretter gjøre justeringer til det ved bruk av et godt dokumentert API (som er fylt med eksempler på hvordan du bruker hver funksjon).
Man kan hevde at alt annet stammer fra den funksjonen alene. Så med det sagt, la oss fortsette å se på noe av det som ser ut.
Når det gjelder å faktisk manipulere DOM, har jQuery mye av funksjoner som tillater oss å endre hva våre besøkende ser.
Noen av disse funksjonene er enkle, som tillater oss å vise fram eller gjemme seg elementer som ikke er synlige når en side laster. Andre funksjoner tillater oss å lage nye elementer og føyer dem til et eksisterende element, eller foranstilt dem foran en hel liste.
Hvis du prøver å gå gjennom alle span elementer for å legge til en klasseattributt til dem, kan du også gjøre det:
/ ** * Dette er den grunnleggende måten å sette opp en loop i jQuery. Det vil * ta alle spanelementene på siden og deretter * legge til et tilpasset klasseattributt til dem. * / $ ('span') .each (funksjon () $ (dette) .addClass ('my-custom-class'););Dette knapt skraper overflaten av hva DOM-manipulasjonsfunksjonalitet er tilgjengelig i jQuery. Ved å se på API, under Manipulerings seksjonen, kan du se hvor mange alternativer som er tilgjengelige for oss (sammen med gode eksempler).
For å gi ytterligere eksempler kan vi også:
Husk at en av tingene som gjør jQuery til en attraktiv løsning for så mange utviklere, er at alle funksjonene og eksemplene vi ser på i denne artikkelen, er kompatible med nettleseren.
Hvis du er helt ny på JavaScript, er en ting som er nøkkelen til å forstå hvordan det fungerer med siden som vises i nettleseren, at den reagerer på ulike arrangementer.
Det vil si når en bruker klikker på et element, lager et tastetrykk, eller klikker musen, så øker nettleseren et signal som svarer til hendelsen som skjedde. Dette tillater oss å utnytte brukerens samspill med nettleseren.
Spesielt hver gang en bruker gjør det noe Til siden kan vi svare på en tilpasset hendelse. Problemet er at ikke alle nettlesere implementerer hendelser på samme måte (dette er grunnen til at det er behov for en spesifikasjon, men det er innhold for et annet innlegg).
Heldigvis gjør jQuery dette mye lettere ved å definere et konsistent navn for alle hendelsene slik at vi kan bruke samme navn for en hendelse som vi prøver å svare på, og det vil fungere over alle de store nettleserne.
Når jQuery først kom ut, var Flash fortsatt relativt populært, og generelle animasjoner på nettet var ikke helt døde.
Når vi snakker om animasjon i sammenheng med jQuery, snakker vi ikke om samme type effekter eller atferd som vi er vant til å se med eldre teknologi. I stedet snakker vi om effekter som gir brukerne tilbakemelding som noe har skjedd på skjermen. Videre er det mindre invasivt og kan legge til en fin stilstilstand til en side eller en applikasjon når den brukes riktig (alt kan misbrukes).
Du kan se hele effekter-APIen på denne siden, men det er verdt å merke seg at jQuery's effekter kan variere hvor som helst fra å håndtere enkelt fading i og fading ut av elementer eller skyveelementer i forhold til noe mer komplekst, for eksempel å manipulere køen av effekter som er registrert å brann mot et element.
Gitt, sistnevnte tilfelle antar at du har litt erfaring med effekten API, men det er noe som kommer naturlig gitt nok tid med biblioteket og dokumentasjonen.
Hvis du ikke er kjent med Ajax, er det egentlig en måte at en nettside kan ringe til serveren, håndtere svaret, og oppdatere en del av en side uten å oppdatere hele siden. Selv om teknologien har eksistert i en stund, er det fortsatt noe som er veldig kult og kan gi noen veldig fin funksjonalitet i sammenheng med en side eller en webapplikasjon når den brukes riktig og effektivt.
Selv om støtte for Ajax ikke er så ille som det var fem eller ti år siden, kan implementeringen av API-en på tvers av nettlesere variere noe så lite. Dette betyr at vi har til oppgave å skrive Ajax-kode spesielt for en nettleser Microsoft gir, som Google gir, som Apple gir, som Chrome gir, og så videre.
I hvert fall er det tilfelle uten jQuery. Takket være sin støtte til Ajax, kan vi utnytte Ajax på en rekke forskjellige måter uten å måtte komme inn i inkonsekvensene på tvers av nettleseren. Faktisk er det trivielt enkelt å håndtere FÅ og POST forespørsler mens du også har muligheten til å lage langt mer avanserte samtaler ved hjelp av $ .ajax metode.
Når du er vant til å ha API tilgjengelig i kjernen i søknaden din eller til din disposisjon, er det vanskelig å forestille seg ikke å jobbe med det (eller med noe som det).
En funksjon som mange server-side rammer og biblioteker tilbyr er muligheten til å lage utvidelser til kjerne kodebase. Moderne klientsidebiblioteker og -rammer tillater dette, og jQuery er ikke annerledes.
Si for eksempel at du jobber i en bestemt nisje der du finner deg selv å skape den samme funksjonaliteten for hvert prosjekt. Eller hva om du har et produkt du selger, og du har litt tilpasset kode som trenger å integrere med jQuery, men det kan kreve forskjellige parametere avhengig av prosjektet.
Hva gjør du da?
Heldigvis støtter jQuery plugins. Dette betyr at vi som utviklere ikke bare har mulighet til å trykke på plugins som andre har skrevet (noen av dem er tilgjengelige på jQuery-nettstedet, andre er tilgjengelige på GitHub), men vi kan også utvikle egne plugins.
Vi kan da gjenbruke denne koden i våre egne prosjekter, eller gjøre dem tilgjengelige på nettsteder som GitHub for andre å tilby bidrag, reparasjoner, funksjoner og så videre.
Siden starten har jQuery vokst til mer enn bare et JavaScript-bibliotek som gir oss muligheten til å utføre både enkle og kraftige operasjoner i en plattformskompatibel måte.
I tillegg til kjernebiblioteket har jQuery også resultert i to andre bemerkelsesverdige prosjekter som er verdt å nevne før vi pakker inn denne artikkelen. Selv om vi ikke skal se nærmere på hva hvert prosjekt gir, vil vi ta et høyt nivå på hvert prosjekt, hvis det ikke er noe annet enn å være klar over hva som er tilgjengelig for oss, bør vi trenge dette for fremtidig arbeid.
Fra jQuery UI hjemmeside:
jQuery UI er et kurert sett med brukergrensesnittinteraksjoner, effekter, widgets og temaer som er bygd oppe på jQuery JavaScript-biblioteket. Enten du bygger svært interaktive webapplikasjoner, eller du trenger bare å legge til en dataplukker til en skjermkontroll, er jQuery UI det perfekte valget.
Dette biblioteket ble først utgitt i 2007, omtrent et år etter at jQuery selv har gått. Det fungerer som et komplementært bibliotek til jQuery ved at det utnytter kompatibiliteten til biblioteket for å hjelpe til med å lage widgets som kan brukes på en nettside.
Mange av widgets inkluderer ofte brukte funksjoner. For eksempel:
Det finnes også avanserte funksjoner som effekter, verktøy og interaksjoner. Alt vi har dekket så langt (samt de tingene vi ikke har) inkluderer et bredt utvalg av tilbakeringinger, attributter og funksjoner som gjør at vi kan samhandle med dem i størst mulig grad.
Alle de nevnte funksjonene tilbyr også ulike temaer for å sikre at de passer til utseendet på nettstedet ditt. Til slutt er alle funksjonene som er skissert her og inkludert på nettstedet, godt dokumentert.
Fra jQuery Mobile hjemmeside:
jQuery Mobile er et HTML5-basert brukergrensesnitt som er utformet for å gi lydige nettsteder og apper som er tilgjengelige på alle smarttelefon-, nettbrett- og stasjonære enheter.
Dette biblioteket er den nyeste introduksjonen til bibliotekets familie som blir utgitt i 2010 (med den siste stabile utgivelsen i 2014).
I likhet med UI-motparten, tilbyr den et godt dokumentert API og tilpassede temaer som er ideelle for de ulike enhetene prosjektet ditt kan målrette mot.
Mens de to foregående bibliotekene tilbyr et sett med tverrplattformsfunksjoner som tillater oss å skrive jQuery og tilhørende widgets på en relativt enkel måte, inneholder jQuery Mobile et CSS-rammeverk som gjør at vi også kan designe brukergrensesnitt som er ideelle for naturen til vår respektive prosjekt.
Rammen inkluderer:
Derfra tilbyr biblioteket hva du kan forvente av et prosjekt som er rettet mot å gjøre webutvikling mye enklere for ulike mobile enheter. Disse inkluderer ting som:
Endelig er antall nettlesere som fortsatt er tilgjengelige og brukt i naturen høye. Selv om vi har sett en nedgang i bruken av eldre versjoner av Internet Explorer og bredere adopsjon av Chrome, har vi fortsatt visse brukere som stikker med eldre nettlesere av flere grunner..
Noen ganger er disse brukerne på eldre nettlesere på grunn av arten av selskapets intranett. Noen ganger har det å gjøre med de mobile enhetene og / eller telefonene de har blitt tildelt for jobben sin. Og noen ganger har det bare å gjøre med manglende evne til å oppgradere til noe bedre.
Uansett, skjønt. jQuery Mobile tilbyr støtte for de fleste nettlesere og operativsystemer som for øyeblikket er tilgjengelige. Hvis du ikke er sikker på om plattformen du målretter mot støttes av biblioteket, kan du alltid sjekke støttesiden til nettleseren.
Forstå hva jQuery er (og hva det ikke er) og hvordan det er relatert til JavaScript, er viktig, slik at du vet hva som blir gjort for deg og hva du kan gjøre når du trenger å jobbe med biblioteket.
Som tidligere nevnt, kan noen hevder at du trenger å lære JavaScript først og deretter lære jQuery; andre kan hevde at læring jQuery er en fin måte å jobbe deg bakover til JavaScript.
Uansett er jQuery et langvarig bibliotek i JavaScript-økonomien, og det er en som brukes i en rekke svært populære prosjekter (som WordPress), slik at det lærer at det vil gi deg et ben på en rekke forskjellige måter.
JavaScript har blitt et av de de facto-språkene for å jobbe på nettet. Det er ikke uten sine lærekurver, og det er nok av rammer og biblioteker for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.
Hvis det ikke er nok, er det nok dokumentasjon og åpen kildekode tilgjengelig for deg å lese og lese også. Det er også allment tilgjengelige plugins og en aktiv blogg for å holde deg i gang med alle nyhetene som skjer med bibliotekets utvikling.
For de som er interessert i JavaScript (spesielt i forbindelse med WordPress), er du velkommen til å følge meg på bloggen min og / eller Twitter på @tommcfarlin. Du kan også ta med alle mine kurs og opplæringsprogrammer på min profilside.
Ikke nøl med å legge igjen noen spørsmål eller kommentarer i feedet under, og jeg vil sikte på å svare på hver av dem.
