Uvod u jQuery (2. dio): Metode i funkcije

Oglas

Ovo je dio stalnog uvoda za početnike u jQuery seriju web programiranja. Prvi dio pokrivao je osnove jQueryja jQuery Tutorial - Prvi koraci: Osnove i izborniciProšli tjedan sam govorio o tome koliko je jQuery važan bilo kojem modernom web programeru i zašto je to fenomenalno. Ovaj tjedan mislim da je došlo vrijeme da se ruke umažemo nekim šifrom i naučimo kako ... Čitaj više kako to uključiti u svoj projekt i odabire. U drugom dijelu nastavit ćemo s osnovnom uporabom dok razmotrimo neke metode koje možete izvesti na tim DOM elementima i neke druge jezične osnove.

$(selektor).način();

Ako se sjećate iz lekcije 1, ovo je osnovna struktura DOM manipulacije u jQueryju. DOM manipulacija nije jedino što možete učiniti s jQuery-om, ali to je najlakše mjesto za početak i najčešće, pa smo ga zato i izabrali.

Za brzo prekrivanje, the selektor dio ove izjave omogućuje vam upotrebu CSS-ovih naziva elemenata, klasa ili ID-ova kako biste pronašli dijelove DOM-a. Na primjer, da zgrabite sve s nazivom klase od .skriven, upotrijebili bismo:

$ ( 'Div.hidden')

Drugi dio ove jednadžbe je način nastupiti na tim DIV-ovima nakon što ih pronađemo (ako uopšte postoje; ili može biti samo jedna stavka koja se podudara). Zapamtite, jQuery će vratiti samo jedan element za odabir ID-a, budući da se ID-ovi trebaju odnositi na jedinstvene stavke. Ako će vas imati više od nečega, to se mora definirati kao klasa u CSS-u.

Zatim na metode; što sve možete učiniti s elementima DOM-a?

Prvo sam vas upoznao sa .css zadnji put da biste ga mogli koristiti za testiranje. Format je jednostavan:

.css ( 'svojstvo', "vrijednost);

Sve što CSS može definirati stoga se jQueryjem može prilagoditi - boje, transparentnost, lokacija, veličina - tako da označite samo nekoliko. Promjena je trenutna.

Ako biste radije animirali CSS promjene, imam sjajne vijesti za vas; postoji i metoda nazvana .animirati(). Malo je složenije:

.animate ({ 'objekt': 'value'}, i);

Kao primjer:

.animate ({ 'opacity': '0.25' 'visina': '100piks'}, 'brze');

U ovom se trenutku možda pitate što su to kovrčave narukvice; nazivaju se "literalnim objektima" i obično se koriste za izradu popisa svojstvo: vrijednost parovi, nekako poput an indeksirani niz ako dolazite iz drugih jezika Puno ćete ih koristiti u jQuery-u, pa ću vam ovo još jednom reći - naviknite se na ispravnu provjeru zatvorenih zagrada i zagrada!

Provjeri ova stranica za puno radnih primjera animirane metode.

Kao i za manipulaciju CSS svojstvima nečega, možete sadržaj prilagoditi pomoću .tekst (), .html () i .val () metode (val je za sadržaj elemenata oblika). Ove metode djeluju kao obje setters i dobititers; ako ne navedete vrijednost, oni će dobiti trenutnu vrijednost. Ako odredite vrijednost, zamijenit će trenutnu vrijednost.

Evo nekoliko kratkih primjera:

Dobijte trenutnu vrijednost polja imena u obliku komentara i dodijelite ga varijabli comment_name:

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

Postavite vrijednost do vrijednosti zgrabljene iz COMMENTER_NAME:

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

Zatim imamo veliki izbor metoda kloniranja, kretanja, umetanja ili brisanja dijelova DOM-a. Mašta, zaista.

Recimo da ste htjeli dinamički umetnuti blok reklamnih slika nakon svakog trećeg odlomak u stupcu sa sadržajem, ali to radite u Javascriptu kako bi moglo biti početno učitavanje stranice održavali čistim. Zvuči prilično složeno, zar ne? Jedva…

$('div # sadržajp: n-dijete (3n)').nakon('');

Razbijajući to dolje, zamolili smo jQuery da:

1. Pronađite div s ID-om "sadržaja"
2. Pronađite p one sadržane u tom divu
3. Filtrirajte na svaku 3. str pomoću pseudo selektora nth-dijete (više o tome ovdje)
4. Umetnite proizvoljni img nakon svaki odgovarajući element

Ne mogu ovdje nabrojati sve metode, niti biste to htjeli pročitati. Poanta je u tome što postoji metoda kojom možete učiniti gotovo sve što mislite o manipulaciji, tako provjerite API za jednu koju možete koristiti.

Također, imajte na umu da možda postoji više načina da nešto učinite. Na primjer, ne možete suziti ispravan objekt na insertAfter (), možda razmislite o pronalaženju Sljedeći dijete dolje i pomoću insertBefore () umjesto toga.

Metoda vezivanja

Konačno, danas, kratku riječ o vezivanju metoda, u osnovi samo zato što je sjajna. Prvo razmotrimo sljedeće retke koda:

$ ( 'Nav # izbornik') fadeIn ( 'brzo'). $ ( 'Nav # izbornik') addClass ( 'beingShown'). $ ( 'Nav # izbornik') css ( 'margin-right', '10px').

Zvuči dovoljno razumno, zar ne? Ali to možete učiniti u samo jednom retku:

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

To čini potpuno isto, i tako se zove metoda vezivanje. Budući da gotovo sve metode jQuery vraćaju sam jQuery objekt, svaka se može prebaciti na sljedeći. To znači manje koda - što je uvijek dobra stvar - ali zapravo i brže radi.

Zašto? Pa, svaki put kada prizovete osnovni jQuery $ naredbe i selektora, tražite da pretražuje DOM stablo u potrazi za odgovarajućim elementom. Kad lančate metode, ne trebate se previše pozivati ​​na DOM, jer on zna gdje su sada i može izvršiti metodu odmah.

To je to za danas i mislim da smo se vjerojatno prilično pokrili. Sada biste trebali biti naoružani sposobnošću izvođenja nekih prilično teških DOM manipulacija, pa krenite, povežite svoje metode zajedno i napravite pravu zbrku u stranici. Za sada ćete htjeti svoje skripte staviti u podnožje da biste ostatku stranice dali vrijeme za učitavanje. Sljedećeg ćemo se tjedna riješiti problema na koji jQuery radi samo kad je sve ispravno napunjeno događajima i znatiželjnim slučajem anonimnih funkcija.

Ako ste se samo natakli na ovaj post, vjerojatno ste neki web programer i možda želite provjeriti sve naše WordPress i bloganje članke, ili čak naše Najbolji WordPress dodaci Najbolji WordPress dodaci Čitaj više stranica.