En grundläggande guide till JQuery för Javascript-programmerare

Annons

JQuery är ett av de mest populära JavaScript-biblioteken på planeten (vad är JavaScript Vad är JavaScript och kan Internet existera utan det?JavaScript är en av de saker som många tar för givet. Alla använder det. Läs mer ). Vid tidpunkten för starten, JavaScript (kommer att kallas JS härifrån i) var på en mycket annan plats. 14 januari 2006 var dagen då jQuery tillkännagavs kl BarCampNYC. JS saknade fortfarande något - webbläsare stödde alla delar av det, men massor av hackor och lösningar måste implementeras för att följa dem.

JQuery kom med och ändrade allt. JQuery gjorde det mycket enkelt att skriva webbläsarkompatibel kod. Du kan animera webbsidor utan att ha en examen i datavetenskap - hooray! Tio år senare är jQuery fortfarande kung, och om du aldrig har använt den tidigare, vad kan du göra med det?

Förutom att använda dina JavaScript-färdigheter kanske du vill läsa några HTML- och CSS-handledning Lär dig HTML och CSS med dessa steg för steg-tutorialsÄr du nyfiken på HTML, CSS och JavaScript? Om du tror att du har en skicklighet för att lära dig att skapa webbplatser från grunden - här är några bra steg-för-steg-tutorials som är värda att prova.

Läs mer först om du inte är bekant med dem heller.

Vi har introducerade jQuery Att göra webben interaktiv: en introduktion till jQueryjQuery är ett skriptbibliotek på klientsidan som nästan alla moderna webbplatser använder - det gör webbplatser interaktiva. Det är inte det enda Javascript-biblioteket, men det är det mest utvecklade, mest stödda och mest använda ... Läs mer tidigare, så denna guide till JQuery kommer att fokusera på faktiskt kodning.

Komma igång

Du kanske känner till JS-sättet att välja id från dokumentobjektmodellen (DOM):

document.getElementById ( 'foo');

JQuery tar detta ett steg längre. Du behöver inte ringa olika metoder för att välja klasser, id eller flera element. Så här väljer du en id:

$ (# Bar ');

Lätt rätt? Det är exakt samma syntax för att välja nästan alla DOM-element. Så här väljer du klasser:

$ ( 'Baz.');

Du kan också bli kreativ för verklig kraft. Detta väljer alla td element inuti tabell utom den första.

$ ('tabell td'). inte (': först');

Lägg märke till hur väljarens namn matchar nästan exakt deras CSS-motsvarigheter. Du kan tilldela objekt till regelbunden JS-variabler:

var xyzzy = $ ('# förälder. barn');

Eller så kan du använda jQuery-variabler:

var $ xyzzy = $ ('# förälder. barn');

Dollartecknet används enbart för att indikera att denna variabel är ett jQuery-objekt, något som är till stor hjälp vid komplexa projekt.

Du kan välja förälder till ett element:

$ (Barn) förälder ().

Eller syskon:

$ (Barn) syskon ().

Du måste köra din kod när webbläsaren är klar. Så här gör du:

$ (dokument). redan (funktion () {console.log ('redo!'); });

Mer kraft

Nu när du känner till grunderna, låt oss gå vidare till några mer komplexa saker. Får en html-tabell:

Göra
Modell
Färg


Vadställe
Eskort
Svart


Mini
Tunnbindare
Röd


Vadställe
Cortina
Vit

Säg att du vill göra varannan rad en annan färg (känd som Zebra Stripes). Nu kan du använda CSS för detta:

#cars tr: nth-child (jämnt) {bakgrund-färg: röd; }

Så här kan man uppnå med jQuery:

$ ('tr: jämnt'). addClass ('jämnt');

Detta kommer att uppnå samma sak, förutsatt att detta även är en klass definierad i CSS. Lägg märke till hur hela stoppet före klassnamnet inte behövs. Dessa är vanligtvis krävs endast för huvudväljaren. Helst skulle du använda CSS för detta till att börja med, även om det inte är en stor sak.

JQuery kan också dölja eller ta bort rader:

. $ ( '# Ford Cortina) hide ();. $ ( '# Ford Cortina) Ta bort ();

Du behöver inte dölja ett element innan du tar bort det.

funktioner

JQuery-funktioner är precis som JS. De använder lockiga hängslen och kan acceptera argument. Där det blir riktigt intressant är genom återuppringningar. Återuppringningar kan tillämpas på nästan alla jQuery-funktioner. De anger en kodkod som ska köras när kärnhandlingen är klar. Detta ger enorm funktionalitet. Om de inte fanns, och du skrev din kod och förväntar dig att den skulle fungera på ett linjärt sätt, skulle JS fortsätta att köra nästa kodrad medan du väntar på den föregående. Återuppringningar säkerställer att koden bara körs när den ursprungliga uppgiften är klar. Här är ett exempel:

$ ('tabell'). hide (function () {alert ('MUO-regler!'); });

Varnas - den här koden kör en varning för varje element. Om din väljare är något på sidan mer än en gång får du flera varningar.

Du kan använda återuppringningar med andra argument:

$ ('tr: jämnt'). addClass ('jämnt', funktion () {console.log ('Hej'); });

Lägg märke till hur det finns en semikolon efter stängningsreglarna. Detta behövs normalt inte för en JS-funktion, men den här koden anses fortfarande vara på en rad (eftersom återuppringningen är inom parentes).

Animation

JQuery gör det mycket enkelt att animera webbsidor. Du kan bleka element in eller ut:

$ ( ". Fade1) FadeIn (långsam). $ ('# fade2'). fadeOut (500);

Du kan ange tre hastigheter (långsam, medium, snabb) eller ett tal som representerar hastigheten i millisekunder (1000 ms = 1 sekund). Du kan animera nästan alla CSS-element. Detta animerar väljarens bredd från dess nuvarande bredd till 250px.

$ ('foo'). animera ({bredd: '250px'});

Det är inte möjligt att animera färger. Du kan också använda återuppringningar med animering:

$ ('bar'). animera ({höjd: '250px'}, funktion () {$ ('bar'). animera ({bredd: '50px'} });

Loops

Loops lyser verkligen i jQuery. Varje() används för att iterera över varje element av en viss typ:

$ ('li'). varje (funktion () {console.log ($ (detta)); });

Du kan också använda ett index:

$ ('li'). varje (funktion (i) {console.log (i + '-' + $ (detta)); });

Detta skulle skriva ut 0då 1 och så vidare.

Du kan också använda varje() att iterera över matriser, precis som i JS:

var cars = ['Ford', 'Jaguar', 'Lotus']; $ .each (bilar, funktion (i, värde) {console.log (värde); });

Observera det extra argument som heter värde - detta är värdet på arrayelementet.

Det är värt att notera det varje() kan ibland vara långsammare än vanilj JS-slingor. Detta beror på den extra behandlingsomkostnad som jQuery utför. För merparten av tiden är detta inte en fråga. Om du är orolig för prestanda eller arbetar med stora datasätt, kan du överväga att benchmarka din kod med jsPerf först.

AJAX

Asynkron JavaScript och XML eller AJAX är verkligen väldigt enkelt med jQuery. AJAX driver en enorm mängd Internet, och det är något vi har täckt i del 5 jQuery Tutorial (del 5): AJAX dem alla!När vi nära slutet av vår mini-tutorial-serie för jQuery är det dags att ta en mer djupgående titt på en av de mest använda funktionerna i jQuery. AJAX tillåter en webbplats att kommunicera med ... Läs mer av vår jQuery handledning jQuery Tutorial - Komma igång: Basics & SelectorsFörra veckan talade jag om hur viktigt jQuery är för alla moderna webbutvecklare och varför det är fantastiskt. Den här veckan tror jag det är dags att vi blir smutsiga med lite kod och lärde oss hur ... Läs mer . Det ger ett sätt att delvis ladda en webbsida - ingen anledning att ladda hela sidan när du bara vill uppdatera fotbollsresultatet, till exempel. jQuery har flera AJAX-metoder, det enklaste är ladda():

$ (# Baz) belastning ( 'några / url / page.html.');

Detta utför ett AJAX-samtal till den angivna sidan (några / url / page.html) och skjuter in data i väljaren. Enkel!

Du kan utföra HTTP GET förfrågningar:

$ .get ('några / url', funktion (resultat) {console.log (resultat); });

Du kan också skicka data med POSTA:

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

Det är väldigt enkelt att skicka formulärdata:

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

De serialisera () -funktionen får all formdata och förbereder den för överföring.

Löften

Löften används för uppskjuten körning. De kan vara svåra att lära sig, men jQuery gör det lite mindre besvärligt. ECMAScript 6 introducerar infödda löften för JS, men webbläsarsupport är i bästa fall flagnigt. För tillfället är jQuery-löften mycket bättre på stöd för webbläsare.

Ett löfte är nästan exakt som det låter. Koden ger ett löfte om att återvända vid ett senare skede när den är klar. Din JavaScript-motor fortsätter med att köra någon annan kod. En gång löfte beslutar (returnerar), någon annan kod kan köras. Löften kan tänkas som återuppringningar. De jQuery-dokumentation förklarar mer detaljerat.

Här är ett exempel:

// dfd == uppskjuten. var dfd = $. Uppskjuten (); funktion doThing () {$ .get ('some / slow / url', function () {dfd.resolve (); }); return dfd.promise (); } $. när (doThing ()). sedan (funktion () {console.log ('YAY, det är klart'); });

Lägg märke till hur löften görs (dfd.promise ()), och det löses endast när AJAX-samtalet är slutfört. Du kan använda en variabel för att hålla reda på flera AJAX-samtal och bara slutföra en annan uppgift när alla har gjorts.

Prestandatips

Nyckeln till att pressa prestanda från din webbläsare är att begränsa åtkomst till DOM. Många av dessa tips kan också gälla JS, och du kanske vill profilera din kod för att se om den är oacceptabelt långsam. I den nuvarande tidsåldern för högpresterande JavaScript-motorer kan mindre flaskhalsar i koden ofta bli obemärkt. Trots detta är det fortfarande värt att försöka skriva den snabbaste koden du kan.

Istället för att söka efter DOM för varje åtgärd:

$ ('foo'). css ('bakgrundsfärg', 'röd'); $ ('foo'). css ('färg', 'grön'); $ ('foo'). css ('bredd', '100 px');

Lagra objektet i en variabel:

$ bar = $ ('foo'); $ bar.css ('bakgrundsfärg', 'röd'); $ bar.css ('färg', 'grön'); $ bar.css ('bredd', '100px');

Optimera dina slingor. Fick en vanilj för slinga:

var cars = ['Mini', 'Ford', 'Jaguar']; för (int i = 0; i 

Även om det inte i sig är dåligt, kan denna slinga göras snabbare. För varje iteration måste slingan beräkna värdet på biluppsättningen (cars.length). Om du lagrar detta i en annan variabel kan du få prestanda, särskilt om du arbetar med stora datasätt:

för (int i = 0, j = bilar. längd; i 

Nu lagras längden på bilarna i j. Detta behöver inte längre beräknas i varje iteration. Om du använder varje(), du behöver inte göra detta, även om korrekt optimerad vanilj JS kan överträffa jQuery. Där jQuery verkligen lyser är genom utvecklingen och felsökningshastigheten. Om du inte arbetar med big data är jQuery vanligtvis mer än snabbt.

Du bör nu känna tillräckligt med grunderna för att bli en jQuery-ninja!

Använder du jQuery regelbundet? Har du slutat använda det av några skäl? Låt oss veta dina tankar i kommentarerna nedan!