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åkgrunnleggende.
$ (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 det 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 å gripe alle med et klassenavn av .hidden, ville vi bruke:
$('div.hidden') Den andre delen av denne ligningen er metoden som skal utføres på disse DIV-ene når vi har funnet dem (hvis de eksisterer i det hele tatt, eller de kan bare være et "matchende" element). 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 har jeg introdusert deg til .css- metoden sist, slik at du kunne bruke den til testing. Formatet er enkelt:
.css('property', 'value'); 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 heter .animate () . Det er litt mer komplekst skjønt:
.animate({'property':'value'}, speed); Som et eksempel:
.animate({'opacity':'0.25', 'height':'100px'}, 'fast'); På dette punktet kan du lure på hva de krøllete armbåndene er for; de kalles en "objekt-bokstavelig", og brukes vanligvis til å lage en liste over egenskaper: verdipar, som en indeksert matrise 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!
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 virker som begge sett og får tak i ; 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 kommentarnavn:
var commenter_name = $(#comment-form #name).val(); Angi verdien til verdien som ble fanget fra commenter_name :
$('span.name').text(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…
$('div#content p:nth-child(3n)').after(' 
'); 
');Bryter det ned, vi har bedt jQuery til:
- Finn div med en ID for "innhold"
- Finn de p som finnes i den div
- Filter til hver tredje p med nth-barn pseudovelger (mer om det her)
- Sett inn et vilkårlig img etter hvert matchende element
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 å finne det neste barnet ned og bruk insertBefore () i stedet.
Metodekjetting
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:
$('nav#menu').fadeIn('fast'); $('nav#menu').addClass('beingShown'); $('nav#menu').css('margin-right', '10px'); Det høres rimelig nok, ikke sant? Men du kan gjøre det samme på bare en linje:
$('nav#menu').fadeIn('fast').addClass('beingShown').css('margin-right', '10px'); 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åbereder den grunnleggende jQuery $ -kommandoen og velgeren, ber du om å søke gjennom DOM-treet og lete 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 nettutvikler av noe slag, og vil kanskje sjekke ut alle våre WordPress- og bloggingartikler, eller til og med vår Best WordPress-plugin-side.