Dele:
Introduksjon til jQuery (del 2) Metoder og funksjoner
Dette er en del av en igangværende nybegynner introduksjon til jQuery webprogrammeringsserier. Del 1 dekket grunnleggende om jQuery-jQuery-veiledningen - Komme i gang: Grunnleggende & Selectors jQuery Opplæringsveiledning - Komme i gang: Grunnleggende og valgorer I forrige uke snakket jeg om hvor viktig jQuery er for enhver moderne webutvikler og hvorfor det er kjempebra. Denne uken, jeg tror det er på tide at vi fikk hendene våre skitne med noe kode og lærte hvordan ... Les mer om hvordan du skal inkludere det i prosjektet ditt, og selektorer. I del 2 fortsetter vi med grunnleggende bruk som vi ser på noen metoder du kan utføre på disse DOM-elementene, og noen flere språkfunn.
$ (Velger) .method ();
Hvis du husker fra leksjon 1, er dette grunnstrukturen til en DOM-manipulering 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 den vanligste, derfor valgte vi det.
For å omforme raskt, gir vendingsdelen av denne setningen deg mulighet til å bruke CSS-lignende elementnavn, klasser eller IDer for å finne deler av DOM. For eksempel å ta tak i alle Den andre delen av denne ligningen er metoden som skal utføres på disse DIVene når vi har funnet dem (hvis de eksisterer i det hele tatt, eller de kan bare være en “matchende” punkt). Husk at jQuery bare returnerer ett element for ID-valg, siden ID-er skal referere til unike elementer. Hvis du skal ha mer enn ett av noe, må det defineres som en klasse i CSS. Gå videre til metoder da; hva kan du gjøre med elementer i DOM uansett? Først av, introduserte jeg deg til .css metode sist gang slik at du kan bruke den til testing. Formatet er enkelt: Alt som kan defineres av CSS kan derfor justeres av jQuery - farger, gjennomsiktighet, plassering, størrelse - for å nevne noen få. Endringen er umiddelbar. Hvis du helst vil animere CSS endringene, så har jeg gode nyheter for deg; det er også en metode som kalles .animere (). Det er litt mer komplekst skjønt: Som et eksempel: På dette punktet kan du lure på hva de krøllete armbåndene er for; de kalles en “objektet bokstavelig”, og brukes vanligvis til å lage en liste over Eiendomsverdi par, slags som en indeksert array hvis du kommer fra andre språk. Du vil bruke dem mye i jQuery, så jeg sier dette igjen - bli vant til å sjekke riktig for lukkede parenteser og braces! Sjekk ut denne siden for mange arbeidseksempler på animasjonsmetoden. I tillegg til å manipulere CSS-egenskapene til noe, kan du justere innholdet av det med .tekst (), .html () og .val () metoder også (val er for innholdet i formelementene). Disse metodene fungerer som begge settters og fåregistre; Hvis du ikke angir en verdi, får de nåværende verdi. Hvis du angir en verdi, erstatter de gjeldende verdi. Her er noen raske eksempler: Få gjeldende verdi av navnefeltet i kommentarskjemaet og tilordne det til en variabel comment_name: Angi verdien av til verdien grep fra COMMENTER_NAME: Deretter har vi et stort utvalg av metoder for kloning, flytting, innsetting eller sletting av deler av DOM. Din fantasi er grensen, egentlig. La oss si at du ønsket å sette inn en annonseringsblokk dynamisk etter hvert tredje avsnitt i innholdskolonnen, men du gjør det i Javascript slik at den første sidelasten kan holdes ren. Høres ganske komplisert, ikke sant? Neppe… Bryter det ned, vi har bedt jQuery til: Jeg kan ikke muligens liste alle metodene her, og heller ikke vil du lese det. Poenget er at det er en metode for å gjøre stort sett alt du kan tenke på når det gjelder manipulasjon, så sjekk APIen 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 det riktige objektet til insertAfter (), kanskje tenk på å finne neste barn ned og bruk insertBefore () i stedet. Til slutt i dag, la oss få et raskt ord om metodekjetting, i utgangspunktet bare fordi det er kjempebra. Først, la oss vurdere følgende kodelinjer: Det høres rimelig nok, ikke sant? Men du kan gjøre det samme på bare en linje: Det gjør akkurat det samme, og kalles metodekjetting. Siden nesten alle jQuery-metoder returnerer et jQuery-objekt selv, kan hver enkelt mate inn i det neste. Dette betyr mindre kode - noe som alltid er bra - men det går også raskere. Hvorfor? Vel, hver gang du påberoper det grunnleggende jQuery $ kommando og velg, ber du om å søke gjennom DOM-treet på jakt etter et matchende element. Når du kjedemetoder, 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 har sikkert dekket ganske mye. Du bør nå være bevæpnet med evnen til å utføre noen ganske tunge DOM-manipulasjoner, så ta en tur, knytt metodene dine sammen og gjør et ekte rot på siden. For nå vil du legge inn skriptene dine i bunnteksten for å gi resten av siden tid å laste. Neste uke skal vi takle problemet med å gjøre jQuery bare ting når alt har lastet riktig med hendelser, og det nysgjerrige tilfellet av anonyme funksjoner. Hvis du nettopp har snublet over dette innlegget, er du sannsynligvis en webutvikler av noe slag og vil kanskje sjekke ut alle våre WordPress- og bloggingartikler, eller til og med vår Best WordPress-plugin-side.$ ( 'Div.hidden').css ( 'egenskap', 'verdi');.animere ( 'egenskap': 'verdi', hastighet);.animere ( 'opacity': '0.25', 'høyde': '100 piksler', 'fast');var commenter_name = $ (# comment-form #name) .val ();. $ ( 'Span.name') tekst (COMMENTER_NAME);$ ('div # innhold p: nth-child (3n)'). etter ('
');
Metodekjetting
$ ( 'Nav # menyen') fadeIn ( 'fort.'); $ ( 'Nav # menyen') addClass ( 'beingShown.'); $ ( 'Nav # menyen') css ( 'margin-right', '10px.');$ ( 'Nav # menyen') fadeIn ( 'rask') addClass ( 'beingShown') css ( 'margin-right', '10px')...;