Jquery selectoare filtre tutorial jquery

Filtrele care pot fi folosite pentru a clarifica alte selectoare rezultat.
Scopul și sintaxa sunt foarte asemănătoare cu CSS pseudo-clase

Corespunzător cu cea a elementelor selectate prin intermediul selectorului
care este în centrul atenției. Nu utilizați: nu se concentreze precedată de selectorul său
și anume un $ ( ": focus")
acest lucru este echivalent cu $ ( "*: focus"). și selectorul „*“ este cel mai „lent“ al selectorii.

Deschideți exemplul în noua fereastră și uita-te la codul sursă

Aceasta corespunde primului element al tuturor tipurilor selectate de către selectorul.
Echivalent cu selectorul: eq (0).

Aceasta corespunde ultimului element al tuturor selectat de către selectorul. Am găsit primul tip în sat (primul element cu omul de clasă, în interiorul elementului sat):

Deschideți exemplul în noua fereastră și uita-te la codul sursă

Găsiți ultimul tip din sat (ultimul element cu omul de clasă, în interiorul elementului sat):

Deschideți exemplul în noua fereastră și uita-te la codul sursă

: Eq (index)

Conform unui membru care ocupă număr de index de poziție, printre deja selectate de către elementele selectorului.
Numerotarea elementelor începe cu 0. Localizați și apoi faceți clic pe al doilea și al cincilea element de interval pe pagina:

Deschideți exemplul în noua fereastră și uita-te la codul sursă

: Nu (Selector)

Elimină elementele care satisfac selectorul elementelor de selectorului găsit. .not () metoda efectuează la fel ca selectorul în cauză, și mai ales, atunci când este utilizat, codul este mai ușor de citit decât folosind selectorul: nu () selecteaza toate elementele cu clasa chiftea (citlete), altele decât cele conțin elemente din clasa muscă (musca):

Deschideți exemplul în noua fereastră și uita-te la codul sursă

Aceasta corespunde elementelor cu numere chiar de poziții.
Deoarece elementele de cheltuieli începe cu 0
: Chiar și va corespunde 1. 3, etc elemente ...

Ea corespunde elementelor cu aceleași numere de referință impare.
Deoarece elementele de cheltuieli începe cu 0
: Odd corespunde 2. 4, etc ... elemente Elementele listei sunt calculate pe un „primul-al doilea“, precum și să ia alternativ culori:

Deschideți exemplul în noua fereastră și uita-te la codul sursă

Filtre set de elemente selectate, numai cele care prevyshaetn indicele de plecare.

Filtre set de elemente selectate, numai cele care indicele menshen plecarea. Distingem planeta, după ce a ajuns la sol (care rulează sub simbolul 2):
Stabilirea unui fond de culoare verde la toate elementele cu un indice mai mare de 2

Deschideți exemplul în noua fereastră și uita-te la codul sursă

Meciuri din elemente care sunt implicate în prezent în animație. Când apăsați butonul, găsiți și selectați div-element care este în prezent implicat în animație:

Deschideți exemplul în noua fereastră și uita-te la codul sursă

Acesta întrunește toate elementele de pagină ascunse. Un element este considerat ascuns în următoarele cazuri:

- Lui proprietate css-display la nici unul
- Este un element de formular cu tipul = „ascuns“
- înălțimea sau lățimea sa este egală cu 0
- Acesta este în interiorul invizibil un element și la fel este invizibil pe pagina.

Acesta îndeplinește toate elementele vizibile pe pagină.

: Conține (text)

Meciuri elemente care conțin un șir de text.
Sensibile. Cu selectorul: conține (text).
Postul este selectat în cazul în care există șir de text direct în interiorul acestuia,
Și dacă acesta este într-unul dintre descendenții săi.

Deschideți exemplul în noua fereastră și uita-te la codul sursă

Meciuri din elemente care nu conțin text și alte elemente.
Prezența unui singur spațiu este considerat un selector de text: gol este invers: părinte.

Găsiți toate goale casetele de valori (celule goale în tabel):

Deschideți exemplul în noua fereastră și uita-te la codul sursă

: Are (Selector)

Meciuri din elemente care au descendenții selectorului selectorului satisfăcătoare. Pentru cele mai bune performanțe, se potrivesc următoarele: Vom găsi div în interiorul cărora există elemente cu clasa lited și le vopsea de culoare de aur:

Deschideți exemplul în noua fereastră și uita-te la codul sursă

Acesta este în conformitate cu toate elementele non-goale.
Prezența un singur spațiu trebuie să fie luate în considerare prezența conținutului. Pentru cele mai bune performanțe, se potrivesc următoarele opțiuni: A nu se confunda selectorul: părinte cu jQuery-metode .parent () și .parents () (care sunt în căutarea pentru elementele părinte, și toți copiii, respectiv). În ciuda numelui comun, de destinație din selectorul și metodele sunt diferite.

Selector: gol este invers: părinte.

Gaseste toate celulele non-gol într-un tabel:

Deschideți exemplul în noua fereastră și uita-te la codul sursă

: Nth-copil (indicele / chiar / impar / ecuație)

B primește un număr sau șir de caractere ca argument.

Numărul poate fi index.
Rețineți că aici, de numărare cu 1

Selectează toate elementele care sunt descendenți n-nnym ale societății-mamă sau chiar descendenții / impare. În exemplul suntem în căutarea pentru fiecare secundă li element din toate elementele selectate ul. Ei bine, noi le marca.

Deschideți exemplul în noua fereastră și uita-te la codul sursă

: Primul copil

Selectează toate elementele care sunt primul copil al părinților săi.

: Ultimul copil

Selectează toate elementele care sunt ultimii descendenți ai părinților lor.

În exemplul vom alege primul element din fiecare interval găsit un element de div și subliniază textul lor.
Oh, și atunci când mouse-ul pentru a adăuga o clasă care va face textul cu caractere aldine și verde.

Deschideți exemplul în noua fereastră și uita-te la codul sursă

În exemplul selectăm ultimul element din fiecare rezultat cuprind un element div și să le facă text roșu. Reduceți dimensiunea fontului cu 80%. Atunci când mouse-ul pentru a adăuga o clasă care zacherknet text.

Deschideți exemplul în noua fereastră și uita-te la codul sursă

: Numai copil

Selectează toate elementele care sunt singurul copil al părintelui său.

Dacă un părinte are alți descendenți - nu este nimic selectat.

În acest exemplu, fiecare element selectat div care cauta buton nu are elemente care alăptează.

Ei bine, un pic mai modifica, prin fixarea la textul „Alone“ și lățimea cadrului albastru de 2 pixeli.

Deschideți exemplul în noua fereastră și uita-te la codul sursă