Introducere în selectoarele JQuery și t
Când lucrați cu JavaScript, vă veți găsi deseori într-o situație în care trebuie să găsiți și să modificați un anumit conținut pe pagină. În aceste cazuri, va trebui să utilizați suportul selector în JQuery. JQuery face destul de ușor să găsești elemente ale paginii în funcție de tipurile, valorile, atributele lor etc. Aceste elemente se bazează pe selectori CSS și, după ce ai avut o practică, vei vedea că găsirea elementelor în pagini este un tort. În funcție de utilizarea lor, putem clasifica diferite tipuri de selectori JQuery în diferite tipuri. Să aruncăm o privire la unele dintre cele mai utilizate selectoare.
Utilizarea unui selector
Urmează o sintaxă a unui JQuery Selector:
- $ (Selector) .methodname ():
Dacă aveți nevoie, puteți înlătura mai mulți selectori adăugând un „.” Între metode.
- $ (selector) .method1 () method2 () method3 ()..;
Tipuri de selector în JQuery
Iată diferitele tipuri de Selector din JQuery
1) Selectoare de bază JQuery
Putem selecta elemente de pagină utilizând ID-ul, clasa sau numele etichetei lor. Dacă este necesar, se poate utiliza și o combinație a acestora. Urmează câteva selectoare de bază:
- : antet Selector - Acesta este un tip de selector de bază care ne permite să găsim elemente cu titlurile lor HTML. Pentru a face acest lucru, folosim selectorul verbose $ („secțiunea h1, secțiunea h2, secțiunea h3”) sau putem folosi și selectorul mult mai scurt ((„secțiune: antet”)).
- : Selector țintă - Acest selector găsește ținte ale paginii sau hash-ului URI al documentului. De exemplu, dacă URI-ul din pagină este „https://example.com/#test”. Apoi, selectorul $ („h2: țintă”) va selecta elementul
.
- : animated Selector - Acest selector este folosit pentru a găsi toate elementele care au animație. Rețineți că pentru a fi selectată animația, aceasta trebuie să funcționeze atunci când este selectat.
2) Selectori pe bază de index
JQuery are propriul set de selectori pe bază de index care utilizează indexare bazată pe zero. Urmează câteva exemple:
- : eq (k) Selector - Acest selector returnează elementul la indexul k. El acceptă și valori negative ale indexului.
- : lt (k) Selector - Acest selector returnează toate elementele care au un indice mai mic de k. La fel ca mai sus, sunt acceptate și valori negative
- : gt (n) Selector - Acest selector este similor: lt (k) Selector, cu excepția faptului că funcționează pentru o valoare a indexului mai mare sau egală cu k.
3) Selectori pentru copii
Puteți utiliza JQuery pentru a selecta copiii din orice element, în funcție de tipul sau indexul lor.
- : primul copil - Acest selector va returna toate elementele care sunt primul copil al părinților lor.
- : first-of-type - Acest selecționer JQuery este utilizat pentru a selecta toate elementele care sunt primele frați
- : ultimul copil - După cum sugerează numele, acest selecționer va selecta ultimul copil al părintelui.
- : ultimul tip - Aceasta va selecta toți copiii care sunt ultimii de tipul lor într-un părinte. Dacă există mai mulți părinți, acesta va selecta mai multe elemente.
- : only-of-type - Putem folosi selectorul unic de tip pentru a găsi toate elementele care au frați de același tip în pagină.
- : only-child - În situațiile în care trebuie să găsiți și să selectați elemente care sunt singurul copil al părintelui lor, puteți utiliza acest selector. În cazul în care un părinte din pagină are mai mulți copii, acesta va fi ignorat.
4) Selectori de atribut
Elementele pot fi selectate în funcție de atributele lor, urmând câteva selectoare comune de atribute:
- $ („(Atribut | = 'valoarehere')”) - „Atributul conține selectorul de prefix” selectează toate elementele cu atribute în care valoarea este egală cu sau începe cu șirul dat, urmată de o cratime.
- $ ("(Atribut ~ = 'valoarehere')") - Aceasta returnează toate elementele cu atribute în care valoarea conține un cuvânt dat delimitat de spații.
- $ („(Atribut * = 'valoarehere')”) - Se vor selecta elemente cu unde valoarea conține substratul dat. Atâta timp cât valoarea se potrivește, locația nu va conta
5) Selectori de conținut
După cum sugerează și numele, acești selectori JQuery sunt folosiți pentru a găsi și selecta conținut în interiorul elementelor.
- : conține (text) - Acesta este utilizat pentru a selecta elemente care au un conținut de text specificat în interior. Un lucru de care trebuie să țineți cont atunci când folosiți acest selector este că testul de aici este sensibil la litere mari și mici.
- : are (selector) - Se va întoarce cu elemente care au cel puțin un element în interior care se potrivește cu selectorul specificat. De exemplu, $ („secțiunea: are (h1)”) va reveni cu toate secțiunile care au un element h1.
- : goal - Acest selector va returna elementele paginii care nu au copii, inclusiv noduri text.
- : parent - Acest selector este utilizat pentru a selecta toate elementele paginii web care au cel puțin un nod copil. Puteți considera că este inversă: selecției JQuery goală.
6) Selectori de ierarhie
- $ („Strămoș descendent”) - Este folosit pentru a selecta toate elementele descendente ale unui părinte. Descendentul în cazul nostru ar putea fi un copil, nepot și așa mai departe.
- $ („Părinte> copil”) - Acesta este utilizat în cazurile în care trebuie să selectăm doar copilul direct al unui anumit părinte.
- $ („Anterior + următorul”) - În cazul în care trebuie să selectăm toate elementele care se potrivesc cu „următorul” selector și care au părintele „anterior”. Elementele selectate vor fi de asemenea transmise imediat de „anterior”, care este fratele.
7) Selectori de vizibilitate
Două selectoare: vizibile și: ascunse sunt de asemenea disponibile în JQuery. Acestea pot fi utilizate pentru a găsi elemente vizibile sau, respectiv, ascunse în pagina web. Orice element din pagina web este considerat ascuns dacă:
- Afișarea sa corectă este setată la niciuna.
- Lățimea și Hight-ul sunt definite zero.
- Are tip = ascuns menționat în elementul formular.
- Orice strămoși ai elementului sunt deja ascunși.
Rețineți că, chiar dacă un element are opacitatea setată ca Zero, acesta va fi considerat în continuare vizibil, deoarece va mai ocupa spațiu.
8) Selectori de formulare
Pentru a economisi timp și dificultăți, JQuery are versiuni de sortare a selectoarelor pentru elemente de introducere a formularelor web.
De exemplu, în timp ce $ („buton, intrare (tip = 'buton')”) va funcționa pentru a selecta butonul din pagină, putem folosi $ („: buton”) pentru a face rapid.
În mod similar, putem folosi $ („: radio”) pentru a selecta butonul radio.
Concluzie - Tipuri de selector în JQuery
Selectoarele sunt una dintre caracteristicile importante ale JQuery, selecția pe JavaScript nu este la fel de intuitivă și robustă odată cu adăugarea selectoarelor prin JQuery, programarea pentru web a devenit mai ușoară.
Articole recomandate
Acesta este un ghid pentru Tipuri de selector în JQuery. Aici discutăm diferitele tipuri de selectori JQuery cu sintaxa. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe-
- Metode jQuery
- jQuery alternative
- Utilizări ale JQuery
- Ce Javascript poate face?
- jQuery querySelector
- Ghid pentru exemple de bare de progres JQuery