Introducere în jQuery (Partea 2): Metode și funcții

Publicitate

Aceasta face parte dintr-o introducere pentru începători în seria de programare web jQuery. Prima parte a abordat elementele de bază ale jQuery jQuery Tutorial - Noțiuni introductive: Noțiuni de bază și selectoriSăptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. Săptămâna aceasta, cred că a venit timpul să ne murdărim cu niște coduri și am învățat cum ... Citeste mai mult despre modul de includere în proiectul dvs. și selectori. În partea a 2-a, vom continua cu utilizarea de bază pe măsură ce analizăm unele metode pe care le puteți efectua pe elementele DOM și alte elemente fundamentale ale limbajului.

$(selector).metodă();

Dacă vă amintiți din lecția 1, aceasta este structura de bază a unei manipulări DOM în jQuery. Manipularea DOM nu este singurul lucru pe care îl poți face cu jQuery, desigur, dar este cel mai ușor loc de unde să pornești și cel mai comun, de aceea am ales-o.

Pentru a recapătă rapid, selector

o parte din această declarație vă permite să utilizați nume de elemente, clase sau ID-uri asemănătoare CSS pentru a localiza părți din DOM. De exemplu, pentru a apuca toate cu un nume de clasă din .ascuns, am folosi:

$ ( 'Div.hidden')

A doua parte a acestei ecuații este metodă să efectueze aceste DIV-uri după ce le-am găsit (dacă există deloc; sau pot fi doar un singur element „potrivit”). Nu uitați, jQuery va întoarce vreodată un singur element pentru selecțiile de identificare, deoarece ID-urile ar trebui să se refere la elemente unice. Dacă veți avea mai mult de ceva, trebuie să fie definit ca o clasă în CSS.

Pe metode atunci; ce poți face cu elementele DOM?

În primul rând, v-am prezentat în .css metoda data ultima data, astfel incat sa o poti folosi pentru testare. Formatul este simplu:

.css ( 'proprietate', 'valoare');

Prin urmare, orice lucru definibil de CSS poate fi ajustat prin jQuery - culori, transparență, locație, dimensiune - pentru a numi doar câteva. Schimbarea este imediată.

Dacă mai degrabă animați modificările CSS, atunci am o veste excelentă pentru dvs.; există și o metodă numită .anima(). Cu toate acestea, este ceva mai complex:

.animate ({ 'proprietate': 'value'}, viteză);

Ca exemplu:

.animate ({ 'opacitate': '0,25', 'înălțimea': '100px'}, 'rapid');

În acest moment, s-ar putea să vă întrebați pentru ce sunt bretelele cretate; ei sunt numiți „obiect literal” și sunt de obicei folosiți pentru a crea o listă de Valoarea proprietății perechi, cam ca un an tablou indexat dacă vii din alte limbi. Îi veți folosi foarte mult în jQuery, așa că o să vă spun din nou - obișnuiți-vă să verificați în mod corespunzător parantezele și barele închise!

Verifică această pagină pentru o mulțime de exemple de lucru ale metodei animate.

Pe lângă manipularea proprietăților CSS de ceva, puteți ajusta conținutul acestuia cu funcția .metode text (), .html () și .val () (val este pentru conținutul elementelor de formular). Aceste metode acționează ca ambele a stabilitters și obțineTERS; dacă nu specificați o valoare, acestea vor obține valoarea curentă. Dacă specificați o valoare, acestea vor înlocui valoarea curentă.

Iată câteva exemple rapide:

Obțineți valoarea curentă a câmpului nume în formularul de comentarii și atribuiți-o unei variabile comment_name:

var commenter_name = $ (# formă-comentariu # nume) .val ();

Setați valoarea de la valoarea apucată din COMMENTER_NAME:

$ ('nume span)'. text (nume_ comentator);

Apoi, avem o selecție vastă de metode pentru clonare, mutare, inserare sau ștergere părți din DOM. Imaginația ta este limita, într-adevăr.

Să zicem că ați dorit să inserați în mod dinamic un bloc de imagini publicitare după fiecare a treia paragraful din coloana de conținut, dar îl efectuați în Javascript pentru a putea fi încărcarea inițială a paginii păstrat curat. Pare destul de complex, nu? Cu greu…

$('# Conținut divp: al nouălea copil (3n)').după('');

În caz de finalizare, am cerut jQuery să:

1. Găsiți div-ul cu un cod de „conținut”
2. Găsiți p-urile conținute în div
3. Filtrează la fiecare a 3-a pag folosind pseudo-selecționer al nth-child (mai multe despre asta aici)
4. Introduceți un img arbitrar după fiecare element de potrivire

Nu pot enumera toate metodele aici și nici nu aș dori să citiți asta. Ideea este că există o metodă de a face aproape orice puteți gândi atunci când vine vorba de manipulare verificați API-ul pentru unul pe care îl puteți folosi.

De asemenea, rețineți că ar putea exista mai multe modalități de a face ceva. Dacă, de exemplu, nu puteți restrânge obiectul corect la insertAfter (), poate gândiți-vă să găsiți Următor → copil jos și folosind insertBefore () in schimb.

Lanț metodă

În sfârșit astăzi, să avem un cuvânt rapid despre înlănțuirea metodei, practic doar pentru că este minunat. În primul rând, să luăm în considerare următoarele linii de cod:

$ ( '# Meniul nav') fadeIn ( 'rapid').; $ ( '# Meniul nav') addClass ( 'beingShown').; $ ( '# Meniul nav') css ( 'marja de-dreapta', '10px').;

Suna destul de rezonabil, nu? Dar puteți face același lucru într-o singură linie:

$ ( '# Meniul nav') fadeIn ( 'rapid') addClass ( 'beingShown') css ( 'marja de-dreapta', '10px')...;

Aceasta face exact același lucru și este numit înlănțuirea metodei. Întrucât aproape toate metodele jQuery returnează ele însele un obiect jQuery, fiecare poate alimenta în următorul. Aceasta înseamnă mai puțin cod - ceea ce este întotdeauna un lucru bun - dar, de asemenea, rulează mai repede.

De ce? Ei bine, de fiecare dată când invocați jQuery-ul de bază $ comanda și selectorul, îi ceri să caute în arborele DOM în căutarea unui element care se potrivește. Când înlănuiți metode, nu este nevoie să vă referiți la DOM, deoarece știe unde se află acum și poate efectua metoda instantaneu.

Asta este pentru ziua de azi și cred că probabil am acoperit destul de multe. Acum ar trebui să fiți înarmați cu abilitatea de a efectua unele manipulări DOM destul de grele, așa că aveți o idee, legați-vă metodele împreună și creați o adevărată mizerie a paginii. Deocamdată, veți dori să plasați scripturile în subsol pentru a oferi restul paginii să se încarce. Săptămâna viitoare vom aborda problema de a face ca jQuery să facă lucrurile doar atunci când totul s-a încărcat corect cu evenimente și cazul curios al funcțiilor anonime.

Dacă tocmai v-ați dat peste această postare, probabil că sunteți probabil un dezvoltator web de un fel și poate doriți să consultați toate WordPress și blogging articole sau chiar ale noastre Cele mai bune plugin-uri WordPress Cele mai bune plugin-uri WordPress Citeste mai mult pagină.