Att göra webben interaktiv En introduktion till jQuery

jQuery är ett skrivbibliotek på kundsidan som nästan alla moderna webbplatser använder - det gör webbplatser interaktiva. Det är inte det enda Javascript-biblioteket, men det är den mest utvecklade, mest stödda och mest använda. Det är en av byggstenar på alla moderna webbplatser. Men vad är jQuery, vad gör det så populärt, och varför ska du ta hand om det om du börjar som webbutvecklare?

Vad är jQuery?

jQuery är en förlängning av Javascript, ett bibliotek med Javascript-funktioner och verktyg som lägger till visuell känsla, och gör avancerade funktioner enkla att implementera på bara några få rader kod. Den stöds över webbläsare och öppen källkod. Dessutom kan du också förlänga jQuery-funktionaliteten med lättanvända plugins.

jQuery är byggt ovanpå Javascript, men det lägger till metoder och funktionalitet som inte finns i ren Javascript. Det skapades för att förenkla Javascript-användningen och ta bort de problem som berörs av olika JavaScript-implementering i olika webbläsare. Med jQuery kan du bara skriva en gång, och jQuery tolkar din kod korrekt för alla webbläsare.

Huvudfunktionen för jQuery är för DOM-manipulation (DOM är Document Object Model), och det betyder den underliggande strukturen för vilken webbsida du besöker. Varje sak du ser på sidan - och många du inte ser - är representerade i DOM.

jQuery är inte det enda Javascript-biblioteket där ute, men det är det mest populära - cirka 55% av de 10.000 webbplatser som använder det. Prototyp, MooTools och Scriptaculous är populära alternativ, men inte lika bra som stöd.

Client Side vs Server Side

De flesta webbsidor genereras på serverns sida - MakeUseOf använder PHP och MySQL (i form av WordPress) för att hämta artikeldata från en databas och sedan tillämpa en mall på den data. Den resulterande sidan skickas till din webbläsare, tolkas och visas för dig. Att klicka på en länk gör en annan begäran till databasen, och ytterligare en sida genereras. Men vad händer om du vill skapa någon form av interaktivitet på sidan? En blankett som kontrollerar vad användaren skriver (som Twitter, som räknar med hur många bokstäver du har lämnat), en knapp som öppnar en dialogruta, eller kanske du vill ladda lite mer data utan att ladda hela sidan?

Det är här skript på kundsidan kommer i spel. Det är där kunden - din webbläsare - gör det tunga. De flesta webbplatser, inklusive den här, använder lite av båda.

Varför använd jQuery?

Visuell känsla

jQuery, låt oss ändra på delar av webbsidan som svar på användaråtgärder. Som ett snabbt exempel, klicka på den här länken - varje länk på sidan kommer byt till rött. Onyttig? Kanske, men du får poängen. Bildspel är en vanlig användning av jQuery. Att balansera meningslösa visuella effekter och genuint användbara tillägg till användarupplevelsen är en del av färdigheten att vara webbutvecklare.

Här är en snabb lista över några fantastiska effekter du kan uppnå.

Enkla händelser

Nästan all programvara fungerar på en händelsemodell - klicka på någonting, och ett klickhändelse utlöses. Dra ditt finger över en tablett, och en dra händelse utlöses. tillämpningar “lyssna” för dessa händelser och gör något - jQuery kan du göra det i en webbläsare.

Utför AJAX helt enkelt

Asynkron Javascript och XML är ett sätt att kommunicera med en fjärrserver utan att behöva ladda en annan sida. Ett bra exempel på detta är Facebook-statusflödet. Försök att bläddra igenom alla dina uppdateringar tills du kommer till botten. Du kan inte. Så snart du kommer till slutet upptäcker jQuery du är nära och skickar en AJAX-begäran om fler statuser att visa.

Det injicerar dem sedan i den aktuella sidan, utan att du förstår. Du får en oändlig ström av uppdateringar, men de är inte alla laddade i början.

Avancerade användargränssnitt

Tillsammans med jQuery UI core plugin kan du bygga fullständiga webbapplikationer med hjälp av standardformulärskomponenter. framstegsfält, reglage, knappar, flikar, dra och släpp - det är allt där. Ett enkelt tema system kan du anpassa utseendet och känna, eller du kan använda ett av standardinställningarna.

Ska jag bry mig?

Om du har något intresse alls i att utveckla webbplatser Vilket programmeringsspråk att lära dig - Webbprogrammering Vilket programmeringsspråk som ska läras - Webbprogrammering Idag ska vi titta på de olika webbprogrammeringsspråken som driver Internet. Detta är den fjärde delen i en nybörjare programmeringsserie. I del 1 lärde vi oss grunden till ... Läs mer, då ja - jQuery är en sak du definitivt behöver lära dig. Om du någonsin har frågat dig själv “Hur kan jag göra X göra Y när användaren gör Z?”, då kommer du att älska jQuery. Lägga till den på din webbplats är lika enkelt som att lägga till en länk till den i rubriken; eller säger WordPress att ladda den.

Vill du lära dig jQuery? Låt oss veta i kommentarerna och jag ser vad jag kan göra.

Bildkrediter: Dynamisk roterande skylt skapad med jQuery, PistolSlut.com, Diagram gjord med jQuery