Programmering

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

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

JQuery är ett av de mest populära JavaScript-biblioteken på planeten (vad är JavaScript? Vad är JavaScript, och kan Internet existera utan det? 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 det startade JavaScript (kommer att kallas som JS hädanefter in) var på en mycket annorlunda plats. 14 januari 2006 var den dag då jQuery tillkännagavs på BarCampNYC. JS saknade fortfarande något - webbläsare stödde alla delar av det, men många hackar och lösningar måste genomföras för att uppfylla.

JQuery kom och förändrade allt. JQuery gjorde det väldigt enkelt att skriva en kod som är kompatibel med webbläsaren. Du kan animerade webbsidor utan att ha en examen i datavetenskap - höray! Tio år sedan är jQuery fortfarande kung, och om du aldrig har använt det tidigare, vad kan du göra med det?

Förutom att borsta på 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-handledning. Lär dig HTML och CSS med dessa steg för steg-handledning Är du nyfiken på HTML, CSS och JavaScript? Om du tycker att du har en förmåga att lära dig hur man skapar webbplatser från början - här är några bra steg-för-steg-tutorials värda att försöka. Läs mer först om du inte är bekant med dem heller.

Vi har introducerat jQuery Making the Web Interactive: En introduktion till jQuery Att göra webben interaktiv: En introduktion till jQuery jQuery är ett skrivbibliotek 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 den mest utvecklade, mest stödda och mest använda ... Läs mer innan, så den här guiden till JQuery kommer att fokusera på att faktiskt koda.

Komma igång

Du kanske är bekant med JS-sättet att välja ids från dokumentobjektmodellen (DOM):

document.getElementById ( 'foo');

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

$ (# Bar ');

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

$ ( 'Baz');

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

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

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

var xyzzy = $ ('# föräldra. schild');

Eller du kan använda jQuery-variabler:

var $ xyzzy = $ ('# föräldra. schild');

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

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

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

Eller syskonen:

. $ (Barn) syskon ();

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

$ (dokument) .ready (funktion () console.log ('redo!'););

Mer kraft

Nu när du vet grunderna, låt oss gå vidare till några mer komplexa saker. Givet 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 (even) bakgrundsfärg: röd;

Så här kan det uppnås med jQuery:

$ (Tr: ens). AddClass ( 'även');

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

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

$ (# Ford Cortina) dölja (). $ (# Ford Cortina) 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. Var det blir väldigt intressant är genom callbacks. Återuppringningar kan tillämpas på nästan vilken jQuery-funktion som helst. De anger en del kod som ska köras när kärnverkan är klar. Detta ger stor funktionalitet. Om de inte existerade, och du skrev din kod förväntar sig att den körs linjärt, fortsatte JS att utföra nästa rad kod medan man väntade på den tidigare. Återuppringar säkerställer att koden endast körs när den ursprungliga uppgiften är klar. Här är ett exempel:

$ ('tabell'). dölj (funktion () alert ('MUO rules!'););

Varnas - denna kod utförs en varning för varje element. Om din väljare är något mer än en gång på sidan kommer du att få flera varningar.

Du kan använda återuppringningar med andra argument:

$ ('tr: even'). addClass ('even', funktion () console.log ('Hello'););

Lägg märke till hur det finns en halvkolon efter stängningsskenorna. Detta skulle normalt inte behövas för en JS-funktion, men denna kod anses fortfarande vara på en rad (eftersom återuppringningen är inom parentes).

Animering

JQuery gör det väldigt enkelt att animera webbsidor. Du kan tona 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 (1000ms = 1 sekund). Du kan animera nästan vilket CSS-element som helst. Detta animerar bredden på väljaren från dess nuvarande bredd till 250px.

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

Det är inte möjligt att animera färger. Du kan även använda callbacks med animering:

$ 'bar'). animera (höjd: '250px', funktion () $ ('bar'). animate (width: '50px');

Loops

Loops skiner verkligen i jQuery. Varje() används för att iterera över varje element av en given 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 0, sedan 1 och så vidare.

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

Var bilar = ['Ford', 'Jaguar', 'Lotus']; $ .each (bilar, funktion (jag, värde) console.log (värde););

Observera det extra argumentet som heter värde - detta är värdet av matriselementet.

Det är värt att notera det varje() kan ibland vara långsammare än vanilj JS-slingor. Detta beror på den extra bearbetningskostnaden som jQuery utför. För det mesta är det inte ett problem. Om du är oroad över prestanda eller arbetar med stora dataset, bör du överväga att benchmarka din kod med jsPerf först.

AJAX

Asynkron JavaScript och XML eller AJAX är väldigt enkelt med jQuery. AJAX driver en stor del av Internet, och det är något vi har täckt i del 5 jQuery Tutorial (Del 5): AJAX dem alla! jQuery handledning (del 5): AJAX dem alla! När vi nära slutet av vår jQuery mini-tutorial-serie är det dags att vi tog en djupare titt på en av de mest använda funktionerna i jQuery. AJAX gör det möjligt för en webbplats att kommunicera med ... Läs mer om vår jQuery-handledning jQuery Handledning - Komma igång: Grunder och väljare JQuery Handledning - Komma igång: Grunder och väljare I förra veckan pratade jag om hur viktigt jQuery är för en modern webbutvecklare och varför det är grymt bra. Den här veckan tror jag att det är dags att vi fick våra händer smutsiga med lite kod och lärde oss hur ... Läs mer. Det ger ett sätt att delvis ladda upp en webbsida - ingen anledning att ladda om hela sidan när du bara vill uppdatera fotbollsspelet, till exempel. jQuery har flera AJAX metoder, det enklaste varandet ladda():

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

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

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

$ .get ('some / url', funktion (resultat) console.log (result););

Du kan också skicka data med POSTA:

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

Det är väldigt lätt att skicka formulärdata:

$. post ('url', $ ('form'). serialize (), 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 uppskjutet utförande. De kan vara svåra att lära sig, men jQuery gör det lite mindre besvärligt. ECMAScript 6 introducerar inhemska löften till JS, dock är webbläsarsupport i bästa fall flakig. För tillfället är jQuery-löften mycket bättre när det gäller cross-browser support.

Ett löfte är nästan exakt som det låter. Koden kommer att göra ett löfte att återvända vid ett senare tillfälle när det är klart. Din JavaScript-motor kommer att fortsätta att exekvera någon annan kod. En gång löftet beslutar (retur), kan någon annan kod köra. Löften kan betraktas som callbacks. Dokumentationen för jQuery förklarar mer ingående.

Här är ett exempel:

// dfd == uppskjuten var dfd = $ .Deferred (); funktion doThing () $ .get ('some / slow / url', funktion () dfd.resolve ();); returnera dfd.promise ();  $ .when (doThing ()). sedan (funktion () console.log ('YAY, det är klart'););

Lägg märke till hur löftet görs (dfd.promise ()), och det är endast löst när AJAX-samtalet är klart. 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.

Prestationstips

Nyckeln till att klämma ut prestanda ur din webbläsare begränsar åtkomsten till DOM. Många av dessa tips kan också gälla JS, och du kanske vill profilera din kod för att se om det är oacceptabelt långsamt. I den nuvarande åldern av högpresterande JavaScript-motorer kan små flaskhalsar i kod ofta vara obemärkt. Trots detta är det fortfarande värt att försöka skriva den snabbast utförande koden du kan.

I stället för att söka på DOM för varje åtgärd:

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

Spara objektet i en variabel:

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

Optimera dina loopar. Med en vanilj för loop:

Var bilar = ['Mini', 'Ford', 'Jaguar']; för (int i = 0; i < cars.length; ++i)  // do something

Medan det inte är något dåligt, kan den här slingan göras snabbare. För varje iteration måste slingan beräkna värdet på bilaruppsättningen (cars.length). Om du lagrar det i en annan variabel kan prestanda uppnås, särskilt om du arbetar med stora dataset:

för (int i = 0, j = cars.length; i < j; ++i)  // do something

Nu lagras längden på bilaruppsättningen i j. Detta behöver inte längre beräknas vid varje iteration. Om du använder varje(), du behöver inte göra detta, men korrekt optimerad vanilj JS kan överträffa jQuery. Där jQuery verkligen lyser är genom hastigheten att utveckla och felsöka. Om du inte arbetar med stora data är jQuery vanligtvis mer än snabb.

Du borde nu veta noggranna grunderna för att vara en jQuery ninja!

Användar du jQuery regelbundet? Har du slutat använda den av någon anledning? Låt oss veta dina tankar i kommentarerna nedan!

Utforska mer om: JavaScript, jQuery.