Introduksjon til jQuery (del 2): ​​Metoder og funksjoner

Annonse

Dette er del av en pågående introduksjon av nybegynnere til jQuery web-programmeringsserier. Del 1 dekket grunnleggende om jQuery jQuery Tutorial - Komme i gang: Grunnleggende og velgereForrige uke snakket jeg om hvor viktig jQuery er for enhver moderne nettutvikler, og hvorfor det er kjempebra. Denne uken tror jeg det er på tide at vi skitne hendene med litt kode og lærte hvordan ... Les mer om hvordan du kan inkludere det i prosjektet ditt, og velgerne. I del 2 fortsetter vi med grunnleggende bruk når vi ser på noen metoder du kan utføre på disse DOM-elementene, og noen flere språkfundament.

$(velger).metode();

Hvis du husker fra leksjon 1, er dette den grunnleggende strukturen for en DOM-manipulasjon i jQuery. DOM-manipulering er ikke det eneste du kan gjøre med jQuery selvfølgelig, men det er det enkleste stedet å starte fra og det vanligste, så det er derfor vi valgte det.

For raskt å gjenskape, velger del av denne uttalelsen lar deg bruke CSS-lignende elementnavn, klasser eller IDer for å finne deler av DOM. For eksempel å ta tak i alle med et klassens navn på

.hidden, ville vi bruke:

$ ( 'Div.hidden')

Den andre delen av denne ligningen er metode å opptre på disse DIV-ene når vi har funnet dem (hvis de overhodet eksisterer; eller de kan bare være ett “matchende” element). Husk at jQuery bare noen gang vil returnere ett element for ID-valg, siden ID-er bør referere til unike elementer. Hvis du skal ha mer enn ett av noe, må det defineres som en klasse i CSS.

Videre til metoder da; hva kan du gjøre med elementer av DOM likevel?

For det første introduserte jeg deg for Css forrige gang, slik at du kan bruke den til testing. Formatet er enkelt:

Css ( 'egenskap', 'verdi');

Alt som kan defineres av CSS kan derfor justeres av jQuery - farger, gjennomsiktighet, plassering, størrelse - for bare å nevne noen. Endringen er øyeblikkelig.

Hvis du heller vil animere CSS-endringene, så har jeg gode nyheter for deg; det er også en metode som heter .animate (). Det er imidlertid litt mer sammensatt:

.animate ({ 'egenskap': 'verdi'}, hastighet);

Som et eksempel:

.animate ({ 'opacity': '0.25', 'høyde': '100 piksler'}, 'fast');

På dette tidspunktet lurer du kanskje på hva de krøllete selene er til; de kalles en "objekt bokstavelig", og brukes vanligvis til å lage en liste over Eiendomsverdi par, slags som en indeksert matrise hvis du kommer fra andre språk. Du bruker dem mye i jQuery, så jeg sier det igjen - bli vant til å sjekke ordentlig for lukkede parenteser!

Sjekk ut denne siden for mange arbeidseksempler på den anime metoden.

I tillegg til å manipulere CSS-egenskapene til noe, kan du justere innholdet i det med .tekst (), .html () og .val () metoder også (val er for innholdet i skjemaelementer). Disse metodene fungerer som begge deler settters og fåregistre; hvis du ikke spesifiserer en verdi, vil de få den gjeldende verdien. Hvis du angir en verdi, erstatter de gjeldende verdi.

Her er noen raske eksempler:

Få den gjeldende verdien av navnefeltet i kommentarformen og tilordne den til en variabel comment_name:

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

Angi verdien av til verdien fanget fra COMMENTER_NAME:

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

Da har vi et stort utvalg av metoder for kloning, bevegelighet, innsetting eller sletting av deler av DOM. Fantasien din er grensen, egentlig.

La oss si at du ønsket å sette inn en annonse-bildeblokk dynamisk etter hvert tredje avsnitt i innholdskolonnen, men du gjør det i Javascript slik at innledende sidelastning kan være holdt rent. Høres ganske sammensatt ut, ikke sant? Neppe…

$('div # innholdp: nth-child (3n)').etter('');

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

1. Finn div med en ID for "innhold"
2. Finn bildene som er inneholdt i divisjonen
3. Filtrer til hver tredje side bruker pseudovelger til nth-child (mer om det her)
4. Sett inn en vilkårlig img etter hvert matchende element

Jeg kan umulig liste opp alle metodene her, og du vil heller ikke lese det. Poenget er at det er en metode for å gjøre stort sett hva du kan tenke på når det kommer til manipulering, altså sjekk API for en du kan bruke.

Husk også at det kan være mer enn en måte å gjøre noe på. Hvis du for eksempel ikke kan begrense riktig objekt til insertAfter (), kanskje tenke på å finne neste barnet ned og bruker insertBefore () i stedet.

Metodekjetting

Til slutt i dag, la oss si et raskt ord om metodekjetting, egentlig bare fordi det er kjempebra. La oss først vurdere følgende kodelinjer:

$ ( 'Nav # menyen') fadeIn ( 'fort.'); $ ( 'Nav # menyen') addClass ( 'beingShown.'); $ ( 'Nav # menyen') css ( 'margin-right', '10px.');

Det høres rimelig ut, ikke sant? Men du kan gjøre det samme på bare en linje:

$ ( 'Nav # menyen') fadeIn ( 'rask') addClass ( 'beingShown') css ( 'margin-right', '10px')...;

Det gjør nøyaktig det samme, og blir kalt metodekjetting. Siden nesten alle jQuery-metoder returnerer et jQuery-objekt selv, kan hver enkelt mate inn i det neste. Dette betyr mindre kode - som alltid er bra - men den kjører faktisk også raskere.

Hvorfor? Vel, hver gang du påberoper deg det grunnleggende jQuery $ kommando og velger, ber du den søke gjennom DOM-treet på jakt etter et matchende element. Når du lenker metoder, trenger du ikke å fortsette å henvise til DOM, fordi den vet hvor de er nå, og kan utføre metoden umiddelbart.

Det er det for i dag, og jeg tror vi sannsynligvis har dekket ganske mye. Du bør nå være bevæpnet med muligheten til å utføre noen ganske tunge DOM-manipulasjoner, så ta en gang, kjed metodene dine sammen og gjør et ordentlig rot av siden. Foreløpig vil du plassere skriptene i bunnteksten for å gi resten av siden tid til å laste. Neste uke vil vi ta tak i problemet med å få jQuery til å gjøre ting bare når alt har lastet riktig med hendelser, og den underlige saken om anonyme funksjoner.

Hvis du nettopp har snublet over dette innlegget, er du sannsynligvis en nettutvikler av noe slag og vil kanskje sjekke ut alle våre WordPress og blogging artikler, eller til og med våre Beste WordPress-plugins De beste WordPress-plugins Les mer side.