selectori și jQuery filtre
În lecțiile anterioare am discutat problema conceptelor generale ale jQuery și moduri de a conecta.
În acest articol, vom discuta despre utilizarea selectori în jQuery (CSS și XPath), care permite să selectați cu ușurință și cu precizie unul sau mai multe elemente DOM. Fiecare dintre ele va selector arată codul pentru aplicația exemplu. Utilizarea jQuery Selectori nu cauzează probleme cu locul de muncă în browsere mai vechi, cum ar fi IE 6, astfel încât acestea să conțină mecanisme pentru CSS 1-3 lucrări.
Structura codului jQuery
$ Semnul dolar - indică utilizarea jQuery. selector - element DOM cu care să lucreze și o funcție specială jQuery cu parametrii săi (de exemplu, animație, implementare, transfer, etc.).
Cod EXEMPLU jQuery
Selectoare în jQuery
În această lecție, ne vom concentra în detaliu cu privire la problema de selectori. Ce este?
Dacă doriți să lucrați cu un anumit element, și doar o singură dată (în teorie, pentru că, în practică, unele browsere nu disprețuiesc identificator de reutilizare), apoi atribuiți un ID unic.
#ID - selectează un singur element cu identificatorul transmis (id). În acest caz, speciale
.clasa - selectați toate elementele cu clasa specificată. Asta-i drept, pot exista mai multe. Principalul lucru pe care a fost același nume al clasei.
Dupa cum se poate vedea, elementul (div) și două clase au aceleași.
Toate elementele, în cazul în care valoarea de clasa spec_class și sunt aceleași limite ca și în exemplul anterior, dar roșu.
Selectați toate dintr-un anumit tip de element. Acesta este fie organism. sau toate div. sau toată masa, și așa mai departe.
Toate div apare cadru verde.
* (Toate articolele) - selectați absolut toate elementele. Chiar și capul și corpul.
Toate elementele documentului vor apărea chenar albastru.
Selectați toate elementele din organism și de a face un chenar negru de 2 pixeli.
De Tip: selector1, selector2. selectorN - lista toate elementele. Mai jos este un exemplu interesant de selectoare de partajare.
Selectează toate elementele div, durata și p, în care sunt specificate spec_class de clasă. Toate selectoare pur și simplu state, separate prin virgula.
selectoare ierarhizate în jQuery
element selectat principal (element de bază) și elementele incluse în acesta (descendenți). Luați în considerare exemplul de mai jos descendenții sub forma părinte și selectați.
Toate elementele selectați, descendenții formă va seta punctate cu negru de frontieră.
Acum, selectați toți descendenții unui membru părinte.
La începutul tuturor moștenitorilor alege un element cu ID-ul ID. și apoi creează un chenar dublu negru.
prev și următoare (anterioară și următoare)
Se specifică următoarele elemente care ating (următoare) a elementului indicat ca anterior (prev).
Alegerea elementelor de intrare, întinzându-se după etichetă. Setați-le la proprietățile CSS - culoare sub formă de negru, iar valoarea (.val) set Done!
Acum lucrăm cu frații. Vyyuiraem toate surorile, ca urmare a unui element anterior (anterioare).
Cautam toate elementele div, care sunt sora în raport unul cu celălalt și să urmeze imediat cu #prev elementul de identificare. Rețineți că, în exemplul nu va fi selectat elementele de deschidere, deoarece selecția este doar pentru elementele div.
filtre de bază
primul element este selectat cu selectorul menționat.
În primul rând (tr) în tabel este evidențiată cu caractere aldine (bold).
Acum vom alege ultimul element cu selectorul specificat.
Găsiți ultimul rând (tr) în tabel și vopsea fundal în galben și, de asemenea, set caractere aldine (mai îndrăznețe).
Utilizarea filtrelor elemente de negare. Selectați toate de intrare, care nu este în valoare de caseta (caseta de selectare), precum și durata, ca urmare a acestora
Valoarea Casetele de selectare nu este schimbat.
Atenție! Un exemplu interesant. care utilizează în fiecare secundă în practica lor. Cum de a alege un produs par sau impar? Este necesar, apoi la o linie de text sau chiar face codul ușor de citit. Valoarea de start 0.
Selectăm chiar rândurile din tabel. Accentuarea va fi primul, al treilea, și așa on-line. Atenție! Citirea se duce la indicii, și în care prima linie este setat la 0. Următorul rând selectat indecșilor 0, 2, 4, etc.).
Acum selectați elementele impare. Se crede că valoarea indicelui pornind de la 0. Valorile 1,3,5,7 Prin urmare, vor fi selectate și așa mai departe. Aceasta corespunde 2,4,6 și astfel liniile în care acestea conta vine după faptul, la primul.
Fundaluri de linii impare sunt vopsite în gri.
Alegerea unui indice particular al elementului. Exemplul va picta doar un singur rând al tabelului.
Alegerea elementului de index 2. Amintiți-vă, acest lucru va fi a treia linie, ca studiul de fezabilitate va fi al treilea a indicelui scor (0,1,2).
Acum selectați valorile indicelui care sunt specificate în selectorul.
Selectați rândurile unui tabel, indicele este mai mare de 4, adică indicele lor este de 5,6, și așa mai departe. Aceasta corespunde la un 6, 7, elemente etc. care apar, în acest caz, rândurile din tabel.
Acum, selectați valoarea indicelui, care este mai mică decât cea specificată în selectorul.
Selectați toate elementele td cu indicele mNaprimer în căutarea pentru toate elementele TD, cu un indice mai mic de 3. Având în vedere că numărul de, din nou amintesc se face de la sol, acest rând al tabelului (TD) 1,2,3.
toate elementele care sunt pozițiile vor fi selectate (h1, h2, h3 etc.)
Pentru toate antetele (elemente h) am stabilit de imprimare albastru și lumină de fundal Servais.
Ei vor selecta toate elementele care sunt în acest moment animat.
Iată un exemplu un pic mai complicat. După ce faceți clic pe butonul schimba culoarea elementului animat (div). Cu nici un element animate este nici o schimbare.