Å gjøre nettet interaktivt: en introduksjon til jQuery

Annonse

jQuery 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. Det er en av byggesteinene til ethvert moderne nettsted. Men hva er jQuery, hva gjør det så populært, og hvorfor skal du bry deg om det hvis du begynner som webutvikler?

Hva er jQuery?

jQuery er en forlengelse av Javascript, et bibliotek av Javascript funksjoner og verktøy som gir visuell stil, og som gjør avanserte funksjoner enkle å implementere på bare noen få kodelinjer. Det støttes på tvers av nettlesere og åpen kildekode. I tillegg kan du utvide jQuery-funksjonaliteten med brukervennlige plugins.

jQuery er bygget på toppen av Javascript, men den legger til metoder og funksjonalitet som ikke finnes i rent Javascript. Det ble opprettet for å forenkle Javascript-bruken og fjerne problemene med forskjellige Javascript-implementeringer i forskjellige nettlesere. Med jQuery kan du bare skrive en gang, og jQuery vil tolke koden riktig for alle nettlesere.

Hovedfunksjonen til jQuery er for DOM-manipulering (DOM er dokumentobjektmodellen), og det betyr den underliggende strukturen på enhver webside du besøker. Hver eneste ting du ser på siden - og mange du ikke ser - er representert i DOM.

jQuery er ikke det eneste Javascript-biblioteket der ute, men det er det mest populære - omtrent 55% av de topp 10.000 nettstedene bruker det. prototype, MooTools og Scriptaculous er populære alternativer, men støttes ikke så godt.

Klientside vs serverside

De fleste websider genereres på serversiden - MakeUseOf bruker PHP og MySQL (i form av WordPress) for å hente artikkeldataene fra en database og deretter bruke en mal på disse dataene. Den resulterende siden sendes til nettleseren din, tolkes og vises til deg. Hvis du klikker på en kobling, blir en ny forespørsel til databasen, og enda en side genereres. Men hva hvis du vil lage en slags interaktivitet på siden? Et skjema som sjekker hva brukeren skriver (som Twitter, som teller hvor mange bokstaver du har igjen), a -knappen som får opp en dialogboks, eller kanskje du vil laste inn litt mer data uten å laste inn hele side?

Dette er hvor klient-side scripting kommer inn i spillet. Det er her klienten - nettleseren din - gjør det tunge løftet. De fleste nettsteder, denne inkludert, bruker litt av begge.

Hvorfor bruke jQuery?

Visuell teft

jQuery lar deg endre deler av nettsiden som svar på brukerhandlinger. Som et raskt eksempel, Klikk på denne lenken - hver lenke på siden vil bytt til rødt. Ubrukelig? Kanskje, men du får poenget. Bildefremvisning er en vanlig bruk av jQuery. Å balansere meningsløse visuelle effekter og virkelig nyttige tillegg til brukeropplevelsen er en del av ferdigheten i å være webutvikler.

Her er en hurtigliste av noen virkelig fantastiske effekter du kan oppnå.

Lett hendelser

Nesten all programvare fungerer på en hendelsesmodell - klikk på noe, og en klikkhendelse blir utløst. Dra fingeren over et nettbrett, og en drahendelse utløses. Programmer “lytter” til disse hendelsene og gjør noe - jQuery lar deg gjøre dette i en nettleser.

Utfør AJAX ganske enkelt

Asynkron Javascript og XML er en måte å kommunisere til en ekstern server uten å måtte laste inn en annen side. Et godt eksempel på dette er Facebook-statusstrømmen. Prøv å bla gjennom alle oppdateringene dine til du kommer til bunns. Det kan du ikke. Så snart du kommer til slutten, oppdager jQuery at du er i nærheten, og sender en AJAX-forespørsel om flere statuser som skal vises.

Den injiserer dem deretter inn på den nåværende siden, uten at du skjønner det. Du får en uendelig strøm med oppdateringer, men de er ikke alle lastet opp i starten.

Avanserte brukergrensesnitt

Sammen med jQuery UI core plugin, kan du bygge komplette webapplikasjoner ved hjelp av standardformkomponenter; fremdriftslinjer, glidebrytere, knapper, faner, dra og slipp - alt er der. Et enkelt temasystem lar deg tilpasse utseendet og følelsen, eller du kan bruke en av standardverdiene.

Bør jeg bry meg?

Hvis du har noen interesse i det hele tatt utvikle nettsteder Hvilket programmeringsspråk å lære - nettprogrammeringI dag skal vi se på de forskjellige nettprogrammeringsspråkene som driver Internett. Dette er den fjerde delen i en nybegynner-programmeringsserie. I del 1 lærte vi det grunnleggende om ... Les mer , ja - jQuery er en ting du absolutt trenger å lære. Hvis du noen gang har spurt deg selv "Hvordan kan jeg få X til å gjøre Y når brukeren gjør Z?", så kommer du til å elske jQuery. Å legge det til på nettstedet ditt er så enkelt som legge til en lenke til den i overskriften; eller fortelle WordPress å laste den inn.

Vil du lære jQuery? Gi oss beskjed i kommentarene, så ser jeg hva jeg kan gjøre.

Bildetillegg: Dynamisk roterende billboard laget med jQuery, PistolSlut.com, Diagram laget med jQuery