Ce este necesar și cum este scris selectorul jQuery?

Un web designer modern nu ar trebui să dețină numai elementele de bază ale codului HTML, CSS și jаvascript, dar și să poată lucra în biblioteca jQuery, care se concentrează pe interacțiunea jаvascript cu documentele HTML. Acesta vă permite să accesați rapid și să manipulați orice elemente DOM (interfața programului care deschide accesul la conținutul fișierelor html). Principalele unități structurale ale acestei biblioteci sunt echipele. Pentru a aplica această comandă sau comandă, aveți nevoie de un selector jQuery.

Formula selectorilor din biblioteca jQuery

Selectorii JQuery se bazează pe cei utilizați în CSS. Acestea sunt necesare pentru a selecta elemente HTML fișier, pentru a le folosi pentru a provoca aceste sau alte metode de a le manipula (echipa). Căutarea prin selector se face prin intermediul funcției $ (). De exemplu, $ (`div`).

Selectorii pot fi clasificați în funcție de modul în care sunt selectate elementele:

• de bază;
• prin atribut;
• prin ierarhie;
• prin conținut;
• pe poziție;
• selectarea câmpurilor de formular;
• altele.

Selectori de bază

În 90% din cazuri, când lucrăm cu această bibliotecă, se folosește un selector jQuery aparținând grupului principal. Toate acestea sunt destul de simple și de înțeles. Să luăm în considerare fiecare dintre ele:

• * - selectează toate elementele paginii, inclusiv capul, corpul etc.
• p / div / perciuni / ... - selecteaza toate elementele referitoare la tag-ul predeterminat (de exemplu, la p.div, bara laterală, etc ...);
• .myClass / p.myClass - selectează elementele cu numele de clasă specificat;
• # myID / p. # myID - selectează un element cu ID-ul dat.

Să dăm un exemplu. Să presupunem că trebuie să selectăm toate elementele unei pagini cu clasa par, intrarea va arăta astfel: $ (.par). Dacă sunt necesare doar elementele lui p din această clasă, atunci vom scrie: $ (p.par).

Selector de atribute

Selectorul JQuery principal poate fi folosit dacă trebuie să selectăm un element care aparține unei clase care are un ID sau să selecteze toate elementele paginii. Cu toate acestea, există momente când elementul dorit nu are o clasă sau un ID. De aceea există selectori după atribut. Vă permit să încercați pe unii atributul elementului HTML, de exemplu, prin href sau src. Acest atribut este scris în paranteze pătrate [].

Cel mai simplu exemplu: $ ([src]) - selectează toate elementele care au atributul src. Puteți restrânge zona de probă prin setarea atributului la o valoare specifică: $ ([src = `value`]).

Puteți utiliza selectori multiple în JQuery, dacă doriți să restrângeți selecția. De exemplu, $ (p [color = blue] [size = 12]) - vor fi selectate doar elementele p care sunt albastre și dimensiunea 12.

Selectori de conținut

În cazul în care nu este posibilă selectarea elementelor prin atribute sau prin selectori principali, merită să se facă referire la conținutul lor. Există 4 selectori de acest tip:

• : conține - selectează elemente care conțin textul specificat;
• : - selectează elemente care conțin alte elemente specifice liniei respective;
• : părinte - selectează elementele care conțin orice altele;
• : goală - selectează elementele care nu conțin altele.

Să dăm un exemplu. Pentru a selecta toate elementele div care conțin textul Hello, trebuie să scrieți $ (div: contains (`Hello`)).

Selectori de ierarhie

Există un alt mod de a selecta elemente în JQuery, și anume - în funcție de ierarhia lor (adică, raportul dintre reciproc pe pagina HTML). O mulțime de ei, așa că vom prezenta două dintre cele mai populare, „copil“ și „descendent“.

În primul caz sunt selectați elementele, care sunt descendenții direcți (copii) ale unui element dat (strămoș). De exemplu, pentru a selecta elementele listei din clasa de lumină care este o listă nav copil, atunci trebuie să scrie: $ (ul # nav> li.light).

Cel de-al doilea caz este mai general. Aici pot fi selectați și descendenții indirecți ai unui element. De exemplu, pentru a selecta linkuri din lista nav, vom scrie: $ (ul # nav a).

Astfel, în JQuery, elementele pot fi selectate în diverse moduri utilizând parametri precum clasa, ID-ul, atributele, conținutul sau ierarhia elementelor din documentul HTML.