Ievads jQuery (2. daļa): Metodes un funkcijas

Reklāma

Šī ir daļa no iesācējiem, kas iesāk iesākumu jQuery tīmekļa programmēšanas sērijās. 1. daļa aptvēra jQuery pamatus jQuery apmācība - darba sākšana: pamati un atlasītājiPagājušajā nedēļā es runāju par to, cik jQuery ir nozīmīgs jebkuram mūsdienu tīmekļa izstrādātājam un kāpēc tas ir satriecošs. Šonedēļ es domāju, ka ir pienācis laiks mums netīrīt rokas ar kādu kodu un uzzināt, kā ... Lasīt vairāk kā to iekļaut savā projektā, un atlasītājus. 2. daļā mēs turpināsim lietot pamatus, apskatot dažas metodes, kuras varat veikt ar šiem DOM elementiem, un dažas citas valodas pamatus.

$(selektors).metode();

Ja jūs atceraties no 1. nodarbības, šī ir DOM manipulācijas pamata struktūra jQuery. DOM manipulācijas, protams, nav vienīgā lieta, ko varat darīt ar jQuery, taču tā ir visvieglākā vieta, no kuras sākt, un tā ir visizplatītākā, tāpēc mēs to izvēlējāmies.

Lai ātri atkārtotu, selektors šī paziņojuma daļa ļauj jums izmantot CSS līdzīgus elementu nosaukumus, klases vai ID, lai atrastu DOM daļas. Piemēram, lai greifers visu ar klases nosaukumu .slēpts, mēs izmantotu:

USD ('div.hidden')

Šī vienādojuma otrā daļa ir metode darboties šajās DIV, kad esam tos atraduši (ja tādi vispār pastāv; vai arī tie var būt tikai viens “atbilstošais” elements). Atcerieties, ka jQuery kādreiz atgriezīs tikai vienu ID atlases elementu, jo ID ir jāatsaucas uz unikāliem priekšmetiem. Ja jums ir kaut kas vairāk par vienu, tas jādefinē kā klase CSS.

Tad metodēm; ko jūs jebkurā gadījumā varat darīt ar DOM elementiem?

Vispirms es jūs iepazīstināju ar .css metodi pēdējo reizi, lai jūs varētu to izmantot testēšanai. Formāts ir vienkāršs:

.css ('īpašums', 'vērtība');

Tāpēc jQuery var pielāgot jebko, ko var noteikt CSS, piemēram, krāsas, caurspīdīgumu, atrašanās vietu un izmēru. Izmaiņas ir tūlītējas.

Ja jūs labprātāk animētu CSS izmaiņas, es jums esmu saņēmis lieliskas ziņas; ir arī metode, ko sauc .animate (). Tomēr tas ir nedaudz sarežģītāk:

.animate ({'īpašums': 'vērtība'}, ātrums);

Kā piemērs:

.animāls ({'necaurredzamība': '0,25', 'augstums': '100 pikseļi'}, 'ātri');

Šajā brīdī jums varētu rasties jautājums, kam ir paredzētas cirtaini lences; tos sauc par “objekta burtiem” un parasti tos izmanto, lai izveidotu īpašums: vērtība pāri, tāda veida kā indeksētais masīvs ja esat ieradies no citām valodām. Jūs tos daudz izmantosit jQuery, tāpēc es teikšu vēlreiz - pierodiet pareizi pārbaudīt, vai nav slēgtu iekavu un lencēm!

Pārbaudiet šī lapa daudziem animācijas metodes darba piemēriem.

Papildus manipulācijām ar kaut ko CSS īpašībām varat pielāgot tās saturu ar .Arī teksta (), .html () un .val () metodes (val. ir formas elementu saturam). Šīs metodes darbojas abas komplektsters un gūtters; ja nenorādīsit vērtību, viņi iegūs pašreizējo vērtību. Ja jūs norādāt vērtību, tie aizstās pašreizējo vērtību.

Šeit ir daži ātri piemēri:

Komentāra formā iegūstiet nosaukuma lauka pašreizējo vērtību un piešķiriet to mainīgajam komentāra_vārds:

var komentētāja_vārds = $ (# komentārs-forma #vārds) .val ();

Iestatiet vērtību līdz vērtībai, kuru sagrāba no komentētāja_vārds:

$ ('span.name'). teksts (komentētāja_vārds);

Tad mums ir plašs metožu klāsts DOM daļu klonēšanai, pārvietošanai, ievietošanai vai izdzēšanai. Jūsu iztēle patiešām ir robeža.

Pieņemsim, ka jūs vēlējāties dinamiski ievietot reklāmas attēla bloku ik pēc katra trešā satura kolonnā, bet jūs to darāt Javascript, lai varētu sākotnēji ielādēt lapu tur tīru. Izklausās diezgan sarežģīti, vai ne? Diez vai…

$('div # saturslpp: n-tais bērns (3n)').pēc ('');

To pārkāpjot, mēs esam lūguši jQuery:

1. Atrodiet sadaļu ar “satura” ID
2. Atrodiet šajā dalījumā ietvertos p
3. Filtrējiet katru 3. lpp izmantojot n-tā bērna pseido selektoru (vairāk par to šeit)
4. Ievietojiet patvaļīgu attēlu pēc katrs atbilstošais elements

Es šeit, iespējams, nevaru uzskaitīt visas metodes, un arī jūs nevēlētos to izlasīt. Lieta ir tāda, ka pastāv metode, kas ļauj izdarīt gandrīz visu, ko jūs varat iedomāties, kad runa ir par manipulācijām, tātad pārbaudiet API par vienu jūs varat izmantot.

Turklāt paturiet prātā, ka var būt vairāk nekā viens veids, kā kaut ko darīt. Piemēram, ja nevarat sašaurināt pareizo objektu līdz insertAfter (), varbūt padomājiet par Nākamais bērns uz leju un lieto insertBefore () tā vietā.

Metodes ķēde

Visbeidzot, šodien pieņemsim īsu vārdu par metožu ķēdi, galvenokārt tāpēc, ka tā ir satriecoša. Vispirms ņemsim vērā šādas koda rindiņas:

$ ('nav # izvēlne'). fadeIn ('ātri'); $ ('nav # izvēlne'). addClass ('beingShown'); $ ('nav # menu'). css ('margin-right', '10px');

Tas izklausās pietiekami saprātīgi, vai ne? Bet jūs varat darīt to pašu tikai vienā rindā:

$ ('nav # menu'). fadeIn ('fast'). addClass ('beingShown'). css ('margin-right', '10px');

Tas dara tieši to pašu, un tiek saukts metodes ķēdēšana. Tā kā gandrīz visas jQuery metodes pašas atdod jQuery objektu, katru no tām var izmantot nākamajā. Tas nozīmē mazāk koda - kas vienmēr ir laba lieta -, bet tas faktiski darbojas arī ātrāk.

Kāpēc? Katru reizi, kad jūs izsaucat pamata jQuery $ komandu un atlasītāju, jūs tam prasāt meklēt DOM kokā, meklējot atbilstošo elementu. Veicot ķēžu apvienošanu, jums arī nav nepieciešams atsaukties uz DOM, jo tas zina, kur viņi atrodas, un var šo metodi veikt uzreiz.

Tā tas ir šodien, un es domāju, ka mēs, iespējams, esam diezgan daudz ieskatījušies. Tagad jums jābūt bruņotai ar iespēju veikt dažas diezgan smagas DOM manipulācijas, tāpēc dodieties prom, ķēdē savas metodes kopā un reāli satriciniet lapu. Pagaidām vēlaties ievietot skriptus kājenē, lai atlikušajai lapas daļai būtu laiks ielādēt. Nākamnedēļ mēs risināsim jautājumu par to, kā jQuery darīt lietas tikai tad, kad viss ir pareizi ielādēts notikumos un anonīmo funkciju ziņkārīgajā gadījumā.

Ja jūs tikko paklupāt uz šo ziņu, jūs, iespējams, esat sava veida tīmekļa izstrādātājs un, iespējams, vēlēsities izpētīt visus mūsu WordPress un emuāru veidošana raksti vai pat mūsu Labākie WordPress spraudņi Labākie WordPress spraudņi Lasīt vairāk lappuse.