Introduktion til jQuery (del 2): ​​Metoder og funktioner

Reklame

Dette er del af en igangværende introduktion til jQuery-webprogrammeringsserier. Del 1 dækkede grundlæggende oplysninger om jQuery jQuery-tutorial - Kom godt i gang: Basics & SelectorsSidste uge talte jeg om, hvor vigtigt jQuery er for enhver moderne webudvikler, og hvorfor det er fantastisk. Denne uge tror jeg, det er på tide, at vi får vores hænder beskidte med noget kode og lærte hvordan ... Læs mere om, hvordan du inkluderer det i dit projekt og vælgere. I del 2 fortsætter vi med grundlæggende brug, da vi ser på nogle metoder, du kan udføre på disse DOM-elementer, og nogle flere sprogfundamental.

$(vælgeren).metode();

Hvis du husker fra lektion 1, er dette den grundlæggende struktur for en DOM-manipulation i jQuery. DOM-manipulation er ikke det eneste, du kan gøre med jQuery, selvfølgelig, men det er det nemmeste sted at starte fra og det mest almindelige, så derfor valgte vi det.

For hurtigt at opsummere, vælgeren del af denne erklæring giver dig mulighed for at bruge CSS-lignende elementnavne, klasser eller ID'er for at finde dele af DOM. For eksempel at gribe alle med et klassens navn på

.skjult, vi ville bruge:

$ ( 'Div.hidden')

Den anden del af denne ligning er metode at optræde på disse DIV'er, når vi først har fundet dem (hvis de overhovedet findes; eller de kan kun være et “matchende” element). Husk, at jQuery kun nogensinde returnerer et element til ID-valg, da ID'er skal henvise til unikke elementer. Hvis du vil have mere end et af noget, skal det defineres som en klasse i CSS.

Derefter videre til metoder; hvad kan du alligevel gøre med elementer i DOM?

Først og fremmest præsenterede jeg dig for .css sidste gang, så du kunne bruge den til test. Formatet er enkelt:

.css ( 'ejendom', 'værdi');

Alt, der kan defineres af CSS, kan derfor justeres ved jQuery - farver, gennemsigtighed, placering, størrelse - for kun at nævne nogle få. Ændringen er øjeblikkelig.

Hvis du hellere vil animere CSS-ændringerne, så har jeg gode nyheder til dig; der er også en metode kaldet .animate (). Det er dog lidt mere komplekst:

.animate ({ 'ejendom': 'value'}, hastighed);

Som et eksempel:

.animate ({ 'opacitet': '0,25', 'højde': '100px'}, 'hurtig');

På dette tidspunkt kan du undre dig over, hvad de krøllede seler er til; de kaldes en "objekt bogstavelig" og bruges typisk til at oprette en liste over egenskab: værdi par, slags som en indekseret matrix hvis du kommer fra andre sprog. Du bruger dem meget i jQuery, så jeg siger det igen - væn dig til at kontrollere korrekt for lukkede parenteser og seler!

Tjek ud denne side til mange arbejdseksempler på den animerede metode.

Ud over at manipulere CSS-egenskaber ved noget, kan du justere indholdet af det med .tekst (), .html () og .val () metoder (val er til indholdet af formelementer). Disse metoder fungerer som begge dele sætters og fåters; hvis du ikke angiver en værdi, får de den aktuelle værdi. Hvis du angiver en værdi, erstatter de den aktuelle værdi.

Her er nogle hurtige eksempler:

Hent den aktuelle værdi af navnefeltet i kommentarformularen og tildel det til en variabel comment_name:

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

Indstil værdien af til den værdi, der er taget fra COMMENTER_NAME:

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

Derefter har vi et stort udvalg af metoder til kloning, bevægelse, indsættelse eller sletning af dele af DOM. Din fantasi er egentlig grænsen.

Lad os sige, at du ønsket at indsætte en annoncerende billedblok dynamisk efter hver tredje afsnit i indholdskolonnen, men du gør det i Javascript, så den indledende sideindlæsning kan være holdes ren. Lyder ret kompliceret, ikke? Næsten…

$('div # indholdp: nth-barn (3n)').efter('');

Når vi bryder det ned, har vi bedt jQuery om:

1. Find div med et ID på "indhold"
2. Find p'erne indeholdt i denne div
3. Filtrer til hver 3. side ved hjælp af pseudo-valg til nth-child (mere om det her)
4. Indsæt en vilkårlig img efter hvert matchende element

Jeg kan umuligt angive alle metoderne her, og du vil heller ikke ønsker at læse det. Pointen er, at der er en metode til at gøre stort set alt, hvad du kan tænke på, når det kommer til manipulation, så Kontroller API til en du kan bruge.

Husk også, at der måske er mere end en måde at gøre noget på. Hvis du for eksempel ikke kan indsnævre det korrekte objekt til insertAfter (), måske overveje at finde Næste barn nede og bruge insertBefore () i stedet.

Metodekæde

Til sidst i dag, lad os få et hurtigt ord om metodekæde, dybest set bare fordi det er fantastisk. Lad os først overveje følgende kodelinjer:

$ ( 'Nav # menuen') fadeIn ( 'fast.'); $ ( 'Nav # menuen') addClass (beingShown. '); $ ( 'Nav # menuen') css ( 'margin-ret', '10px.');

Det lyder rimeligt nok, ikke? Men du kan gøre det samme på kun en linje:

$ ( 'Nav # menuen') fadeIn ( 'fast') addClass (beingShown «) css ( 'margin-ret', '10px')...;

Det gør nøjagtigt den samme ting og kaldes metodekæde. Da næsten alle jQuery-metoder returnerer et jQuery-objekt selv, kan hver enkelt mates ind i det næste. Det betyder mindre kode - hvilket altid er en god ting - men den kører faktisk også hurtigere.

Hvorfor? Nå, hver gang du påberåber det grundlæggende jQuery $ kommando og vælger, du beder den om at søge gennem DOM-træet på udkig efter et matchende element. Når du kæder metoder, behøver du ikke fortsat henvise til DOM, fordi den ved, hvor de er nu, og kan udføre metoden med det samme.

Det er det i dag, og jeg tror, ​​vi har sandsynligvis dækket en hel del. Du skal nu være bevæbnet med evnen til at udføre nogle temmelig tunge DOM-manipulationer, så tag et skridt, kæde dine metoder sammen og lav en rigtig rod på siden. For nu vil du placere dine scripts i sidefoden for at give resten af ​​siden tid til indlæsning. I næste uge skal vi tackle problemet med at få jQuery til at gøre ting kun, når alt er fyldt korrekt med begivenheder, og det underlige tilfælde af anonyme funktioner.

Hvis du lige har snublet over dette indlæg, er du sandsynligvis en webudvikler af en eller anden art og vil måske tjekke alle vores WordPress og blogging artikler eller endda vores Bedste WordPress-plugins De bedste WordPress-plugins Læs mere side.