Introduktion till jQuery (del 2): ​​Metoder och funktioner

Annons

Detta är en del av en pågående introduktion av nybörjare till jQuery webbprogrammeringsserier. Del 1 omfattade grunderna för jQuery 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 om hur du inkluderar det i ditt projekt och väljare. I del 2 kommer vi att fortsätta med grundläggande användning när vi tittar på några metoder du kan utföra på dessa DOM-element och några fler grundläggande språk.

$(väljare).metod();

Om du minns från lektion 1 är detta den grundläggande strukturen för en DOM-manipulation i jQuery. DOM-manipulation är inte det enda du kan göra med jQuery naturligtvis, men det är den enklaste platsen att börja från och det vanligaste, så det är därför vi valde det.

För att snabbt sammanfatta, väljare del av detta uttalande låter dig använda CSS-liknande elementnamn, klasser eller ID för att hitta delar av DOM. Till exempel, ta tag i alla med ett klassnamn på

.dold, vi skulle använda:

$ (Div.hidden)

Den andra delen av denna ekvation är metod att uppträda på dessa DIV när vi hittat dem (om de finns alls; eller de kan bara vara ett "matchande" objekt). Kom ihåg att jQuery bara någonsin kommer att returnera ett element för ID-val, eftersom ID: er bör referera till unika objekt. Om du kommer att ha mer än ett av något måste det definieras som en klass i CSS.

Vidare till metoder då; vad kan du göra med delar av DOM ändå?

Först och främst presenterade jag dig för .css förra gången så att du kan använda den för testning. Formatet är enkelt:

.css ( 'egendom', 'värde');

Allt som kan definieras av CSS kan därför justeras med jQuery - färger, transparens, plats, storlek - för att bara nämna några. Förändringen är omedelbar.

Om du hellre vill animera CSS-förändringarna har jag goda nyheter för dig. det finns också en metod som heter .animera(). Det är dock lite mer komplex:

.animate ({ 'egendom': 'värde'}, hastighet);

Som ett exempel:

.animate ({ 'opacitet': '0,25', 'höjd': '100px'}, 'snabb');

Just nu undrar du vad de lockiga hängslen är för; de kallas ett "objekt bokstavligt" och används vanligtvis för att skapa en lista med fastighetsvärde par, typ av en indexerad matris om du kommer från andra språk. Du kommer att använda dem mycket i jQuery, så jag säger det igen - vänja dig på att kontrollera ordentligt för stängda parenteser och hängslen!

Kolla upp denna sida för många fungerande exempel på den animerade metoden.

Förutom att manipulera CSS-egenskaperna för något kan du justera innehållet i det med .text (), .html () och .val () metoder också (val är för innehållet i formelement). Dessa metoder fungerar som båda uppsättningters och skaffa sigters; om du inte anger ett värde får de det aktuella värdet. Om du anger ett värde kommer de att ersätta det aktuella värdet.

Här är några snabba exempel:

Hämta det aktuella värdet på namnfältet i kommentarformuläret och tilldela det till en variabel comment_name:

var commenter_name = $ (# comment-form #name) .val ();

Ställ in värdet för till det värde som tagits från COMMENTER_NAME:

$ ('span.name'). text (commenter_name);

Sedan har vi ett stort urval av metoder för kloning, rörelse, infogning eller radering av delar av DOM. Din fantasi är gränsen, verkligen.

Låt oss säga att du vill infoga ett annonsbildsblock dynamiskt efter varje tredje avsnitt i innehållskolumnen, men du gör det i Javascript så att den första sidbelastningen kan vara hålls ren. Låter ganska komplicerat, eller hur? Knappast…

$('div # innehållp: nth-barn (3n)').efter('');

När vi bryter ner det har vi frågat jQuery att:

1. Hitta div med ett ID för "innehåll"
2. Hitta p: erna som ingår i denna div
3. Filtrera till var tredje sid använder nth-child pseudo selector (mer om det här)
4. Sätt in en godtycklig bild efter varje matchande element

Jag kan omöjligt lista alla metoder här och du vill inte heller läsa det. Poängen är att det finns en metod för att göra ganska mycket vad du kan tänka på när det gäller manipulation, så kolla API för en du kan använda.

Tänk också på att det kan finnas mer än ett sätt att göra något. Om du till exempel inte kan begränsa rätt objekt till Insert (), kanske tänka på att hitta Nästa barn ner och använder insert () istället.

Metodkedja

Slutligen idag, låt oss ha ett snabbt ord om metodkedjning, i princip bara för att det är fantastiskt. Låt oss först tänka på följande kodrader:

$ ( "Nav # meny) FadeIn ( 'fast'). $ ( "Nav # meny) addClass (beingShown. '); $ ( "Nav # meny) css (marginal höger", '10px').

Det låter rimligt nog, eller hur? Men du kan göra samma sak på bara en rad:

$ ( "Nav # meny) FadeIn ( 'fast') addClass (beingShown) css (marginal höger", '10px')...

Det gör exakt samma sak och kallas metodkedja. Eftersom nästan alla jQuery-metoder returnerar ett jQuery-objekt själva, kan var och en matas till nästa. Det betyder mindre kod - vilket alltid är bra - men det går faktiskt också snabbare.

Varför? Tja, varje gång du åberopar det grundläggande jQuery $ kommando och väljare, du ber den att söka igenom DOM-trädet och leta efter ett matchande element. När du kedjer metoder behöver du inte fortsätta att hänvisa tillbaka till DOM, eftersom den vet var de befinner sig nu och kan utföra metoden direkt.

Det är det för idag, och jag tror att vi förmodligen har täckt ganska mycket. Du borde nu vara beväpnad med förmågan att utföra några ganska tunga DOM-manipulationer, så ta en kedja, kedja dina metoder ihop och göra en riktig röra på sidan. För tillfället vill du placera dina skript i sidfoten för att ge resten av sidan tid att ladda. Nästa vecka kommer vi att ta itu med frågan om att få jQuery att göra saker bara när allt har laddats korrekt med händelser och det nyfikna fallet med anonyma funktioner.

Om du bara har snubblat över det här inlägget är du förmodligen en webbutvecklare av något slag och kanske vill kolla in alla våra WordPress och blogga artiklar eller till och med våra Bästa WordPress-plugins De bästa WordPress-plugins Läs mer sida.