Selectori Jquery - cum să obțineți tot ce doriți

Selectori JQuery - cum să obțineți tot ce doriți. Partea 2

În articolul de astăzi, vom încheia studiul selectorilor jQuery, ca în ultimul articol, luând în considerare câteva exemple interesante de utilizare a acestora. După ce ați citit articolul, veți învăța cum să utilizați selectorii pentru a stiliza celule, rânduri sau anteturi de tabel și pentru a căuta și a găsi elemente după o anumită valoare.

Selectori speciali

Pentru o mare varietate de selectori CSS și XPath, JQuery adaugă și propriile selectori. Majoritatea acestor selectori vă permit să selectați elemente, după cum se spune, din locație. Sintaxa acestor selectori este similară cu sintaxa CSS-pseudo-clasă, atunci când selectorul începe cu un colon (:)

De exemplu, dacă trebuie să selectăm elemente ale celui de-al doilea nivel. din setul corespunzător de divuri cu stilul orizontal aplicat acestora, trebuie să scriem următoarele:

Rețineți că eq (1) este un element al unui set de al doilea nivel, deoarece Java-Script matrice pornește de la zero, adică primul element 0, al doilea 1, etc. În contrast, CSS sunt numerotate de la unul, așa că CSS-selector ca aceasta $ ( 'div: nth-copil (1)'), va primi primul element de div, este o filială a societății-mamă.

Modelarea liniilor alternative

Cele două cele mai utile dintre selectorii speciali ai bibliotecii JQuery sunt: ciudat și: echilibru. Să vedem cum puteți folosi aceste selectori pentru a colora tabelul într-o bandă, să luăm următorul tabel:

Acum, adăugați două clase în fișierul css, unul pentru rândurile ciudate și unul pentru cele par:

În cele din urmă, scrieți un cod jQuery care adaugă clase la celulele tabelului (eticheta ):

Iată un mic fragment de cod care poate reprezenta tabelul după cum urmează:

Selectori Jquery - cum să obțineți tot ce doriți

Merită menționat că putem vedea rezultate neașteptate dacă există mai multe tabele pe pagină. De exemplu, dacă culoarea de fundal a ultimei linii a tabelului nostru este albastră, atunci primul rând al tabelului următor va fi vopsit în galben. Cum de a rezolva această problemă va fi spus mai târziu, dar deocamdată trebuie doar să vă amintiți.

Pentru a afla cum funcționează ultimul selector special, să ne imaginăm că trebuie să evidențiem în tabel o linie care conține numai piesele lui Henry. Pentru început, ca de obicei, adăugăm clasa în fișierul CSS care conține boldface și culoarea roșie a fontului:

Și adăugați o linie la codul deja scris JQuery, folosind selectorul: contains ():

Deci, vedem masa noastră frumoasă cu dungi, cu piesele alese de Henry.

Ar trebui să recunoaștem că colorarea elementelor de pe pagină se poate face fără jQuery sau orice altă programare a clientului. În ciuda acestui fapt, jQuery, împreună cu CSS, reprezintă o alternativă excelentă pentru stilul conținutului dinamic al paginii.

Metode de accesare a DOM

Selectorii jQuery pe care i-am studiat ne-au permis să obținem seturi de elemente, pe măsură ce am mutat în jos copacul DOM și am filtrat rezultatele. Dacă aceasta ar fi singura metodă de acces la date, capacitățile noastre ar fi foarte limitate.

Există multe cazuri în care obținerea unui părinte sau a unui strămoș al unui element este importantă. Și în acest caz, metodele de accesare a DOM pot juca. Cu aceste metode, putem să ne mișcăm cu ușurință în sus, în jos și chiar în jurul nostru, pe pomul elementelor.

Unele dintre aceste metode sunt foarte asemănătoare cu expresiile selectorului, astfel încât, de exemplu, un rând în care am pictat liniile impare din tabelul de $ ( „tr: ciudat“). AddClass ( „ciudat“), poate fi ușor rescrise folosind .filter metoda (), după cum urmează mod:

Deși, în cea mai mare parte, aceste două metode de obținere a elementelor se completează reciproc. Să aruncăm o privire din nou la masa noastră dungată și să vedem ce este posibil să obțineți cu aceste metode.

Ei bine, în primul rând, masa poate fi bine bara de titlu, deci să-l completeze un alt tr rând, ceea ce va face cele două elemente lea, tag-ul TD în loc:

Modelarea antetului tabelului

Sarcina de a modela antetul tabelului poate fi efectuată în modul următor. Putem găsi toate elementele lui th, obținem containerul părintelui lor tr, și îl colorăm. Apoi, folosind o combinație de CSS, XPath, și selectorii speciale JQuery, elementele rămase, puteți selecta acțiunea invers, adică, vom selecta toate elementele tr, nu conțin un element copil-lea, și să le atribuie stilul dorit.

Rezultatul este următorul:

Aici, pentru a obține părintele tagului th, vom folosi metoda parent (), deoarece știm cu certitudine că avem doar un șir tr care conține elementele lui th.

Restul liniilor sunt încă mai simple, mai întâi am selectat toate elementele lui tr care nu conțin elementele lui th și apoi le-am aplicat filtrul: ciudat () și: even (). Rețineți că ordinea selectoare de locație este foarte importantă, masa noastră s-ar fi uitat foarte diferit dacă am scrie $ ( „tr: ciudat: nu ([th])“), în loc de un $ ( „tr: nu ([th]) : ciudat ").

Prin stilizarea numelui pieselor, este chiar mai simplu, principalul lucru este să setați sarcina corect. De fapt, trebuie să găsim celula care conține cuvântul "Henry" și să aplicăm stilul dorit celulei din vecinătate, adică în coloana "Categoria". Pentru aceasta, vom scrie selectorul corespunzător și vom aplica metoda următoare ():

Acum, cu stilurile de mai sus, masa noastră va arăta astfel:

Metoda următoare () aplică stilul de care avem nevoie în același container doar pentru elementul următor. Și acum imaginați-vă că în tabelul nostru va exista oa treia coloană, care va conține anul publicării piesei. Colorați textul tuturor celulelor, linia care conține cuvântul "Henry", se poate face în mai multe moduri:

1. Obțineți o celulă care conține cuvântul "Henry" și aplicați stilul la toate elementele "conexe" utilizând metoda siblings (). Această metodă selectează elementele care sunt conținute în același container parental

2. Ia celula care conține cuvântul «Henry», pentru a primi mama ei (tr), apoi găsi toate celulele din mamă, un număr de serie, care este mai mare decât zero (în cazul în care zero este prima celula), și adăugați-le la clasa dorită:

3. Ia celula care conține cuvântul «Henry», pentru a primi mama ei (tr), apoi găsi toate celulele din mamă, care nu conțin în linii «Henry», și adăugați-le la clasa dorită:

4. Ia celula care conține cuvântul «Henry», pentru a primi mama ei (tr), apoi găsiți a doua celulă fiică, i se aplică clasei corespunzătoare, resetați la început, găsi o celulă fiică a treia, și se aplică-l clasa dorită:

Toate aceste metode vor conduce la același rezultat:

Pentru a fi sincer, nu toate modalitățile prezentate de combinarea expresiilor selective și a metodelor sunt recomandate. De fapt, a patra metodă este complet ridicolă. Acesta este doar un exemplu, ilustrând cât de flexibile pot fi metodele de acces la DOM.

Selectori Jquery - cum să obțineți tot ce doriți