Uvod v jQuery (2. del): Metode in funkcije

Oglas

To je del stalne predstavitve začetnikov v seriji spletnih programov jQuery. Prvi del je zajemal osnove jQueryja Vadnica za jQuery - Uvod: Osnove in izbirnikiPrejšnji teden sem govoril o tem, kako pomemben je jQuery za vsakega sodobnega spletnega razvijalca in zakaj je super. Ta teden mislim, da je čas, da si umažemo roke z neko kodo in se naučimo, kako ... Preberi več kako ga vključiti v svoj projekt in izbirnike. V drugem delu bomo nadaljevali z osnovno uporabo, ko si bomo ogledali nekatere metode, ki jih lahko izvajate na teh elementih DOM, in nekatere druge jezikovne osnove.

$(izbirnik).metoda();

Če se spominjate iz lekcije 1, je to osnovna struktura manipulacije DOM v jQuery. DOM manipulacija ni edino, kar lahko počnete z jQueryjem, ampak je to najlažje mesto in začeti najpogosteje, zato smo ga izbrali.

Za hitro zajemanje nastavitev izbirnik Del te izjave vam omogoča uporabo imen elementov, razredov ali ID-jev, podobnih CSS, za iskanje delov DOM-a. Na primer, da zgrabite vse z imenom razreda .hidden, bi uporabili:

$ ('div.hidden')

Drugi del te enačbe je metoda na teh DIV-jih, ko jih najdemo (če sploh obstajajo; ali pa so lahko le ena „ujemajoča se postavka“). Ne pozabite, da jQuery vrne samo en element za izbire ID-ja, saj se ID-ji nanašajo na edinstvene elemente. Če vas bo nekaj imelo več, ga morate definirati kot razred v CSS.

Nato na metode; kaj vse lahko storite z elementi DOM-a?

Najprej sem vas predstavil .css zadnjič, da bi ga lahko uporabili za testiranje. Oblika je preprosta:

.css ('lastnost', 'vrednost');

Vse, kar lahko določi CSS, lahko zato jQuery prilagodimo - barve, preglednost, lokacijo, velikost - če jih naštejemo le nekaj. Sprememba je takojšnja.

Če bi raje animirali spremembe CSS, imam za vas super novico; obstaja tudi metoda imenovana .animate (). Je pa malo bolj zapleteno:

.animate ({'lastnosti': 'vrednost'}, hitrost);

Kot primer:

.animate ({'nepreglednost': '0,25', 'višina': '100px'}, 'hitro');

Na tej točki se morda sprašujete, za kaj so kodraste naramnice; imenujemo jih "predmetni dobesedni" in se običajno uporabljajo za ustvarjanje seznama lastnost: vrednost pari, nekako kot an indeksirani niz če prihajate iz drugih jezikov. Veliko jih boste uporabljali v jQueryju, zato bom to spet povedal - navadi se, da pravilno preverjate, ali so zaprti oklepaji in naramnice!

Preveri ta stran za veliko delovnih primerov animirane metode.

Poleg manipulacije lastnosti CSS nečesa lahko vsebino le-tega prilagodite s .text (), .html () in .val () tudi metode (val je za vsebino elementov obrazca). Te metode delujejo kot oboje naborters in dobititers; če ne navedete vrednosti, bodo dobili trenutno vrednost. Če določite vrednost, bo nadomestila trenutno vrednost.

Tu je nekaj hitrih primerov:

Pridobite trenutno vrednost polja z imenom v obrazcu za komentar in ga dodelite spremenljivki ime_ komentarja:

var commenter_name = $ (# komentar-oblika #ime) .val ();

Nastavite vrednost do vrednosti, zgrabljene iz ime komentarja:

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

Nato imamo veliko izbiro metod za kloniranje, premikanje, vstavljanje ali brisanje delov DOM-a. Vaša domišljija je res meja.

Recimo, da ste želeli dinamično vstaviti blok oglaševalskih slik po vsakem tretjem odstavek v stolpcu z vsebino, vendar to počnete v Javascriptu, da bo lahko začetno nalaganje strani vzdrževali čisto. Sliši se precej zapleteno, kajne? Komaj…

$('div # vsebinastr: nth-otrok (3n)').po ('');

Če to razbijemo, smo jQuery prosili, naj:

1. Poiščite div z ID-jem vsebine
2. Poiščite p, ki jih vsebuje ta div
3. Filtriraj na vsako 3. p uporaba psevdo izbirnika nth-otroka (več o tem tukaj)
4. Zatem vstavite poljuben img vsak ujemajoči se element

Tukaj ne morem našteti vseh metod in tega tudi ne bi želeli prebrati. Bistvo je, da obstaja način, kako narediti skoraj vse, kar si mislite o manipulaciji, torej preverite API za enega lahko uporabite.

Upoštevajte tudi, da obstaja nekaj načinov, kako nekaj storiti. Če na primer ne morete zožiti pravilnega predmeta na vstaviAfter (), morda razmisli o iskanju Naslednji otrok navzdol in z uporabo vstavi pred () namesto tega.

Metoda veriženja

Nazadnje, danes, naj na kratko povemo o povezovanju metod, v bistvu samo zato, ker je super. Najprej razmislimo o naslednjih vrsticah kode:

$ ('nav # meni'). fadeIn ('hitro'); $ ('navigacijski meni'). addClass ('se prikaže'); $ ('navigacijski meni'). css ('margin-right', '10px');

Zveni dovolj razumno, kajne? Vendar lahko to storite samo v eni vrstici:

$ ('navigacijski meni'). fadeIn ('hiter'). addClass ('beingShown'). css ('margin-right', '10px');

To počne povsem isto in se imenuje metoda veriženja. Ker skoraj vse metode jQuery sami vračajo objekt jQuery, se lahko vsak poda v naslednjega. To pomeni manj kode - kar je vedno dobra stvar - vendar dejansko teče tudi hitreje.

Zakaj? No, vsakič, ko prikličete osnovno jQuery $ ukaza in izbirnika, ga vprašate, da išče po drevesu DOM in išče ustrezen element. Ko verižite metode, se vam ni treba preveč sklicevati na DOM, ker ve, kje so zdaj, in lahko metodo izvaja takoj.

To je danes za to in mislim, da smo jih verjetno precej pokrili. Zdaj bi se morali oborožiti z zmožnostjo izvajanja nekaj zelo težkih DOM manipulacij, zato pojdite, povežite svoje metode skupaj in naredite resnično zmedo strani. Za zdaj boste želeli svoje skripte umestiti v nogo, da boste preostali čas strani lahko naložili. Naslednji teden se bomo lotili vprašanja, kako jQuery narediti stvari le, če je vse pravilno napolnjeno z dogodki in radovednim primerom anonimnih funkcij.

Če ste se pravkar spotaknili s to objavo, ste verjetno kakšen spletni razvijalec in boste morda želeli preveriti vse naše WordPress in bloganje člankov ali celo naših Najboljši vtičniki za WordPress Najboljši vtičniki za WordPress Preberi več stran.