Ce este jQuery querySelector?

jQuery querySelector selectează sau găsește un element DOM (model obiect de document) într-un document HTML. JQuery ne permite să manipulăm elementele HTML. Se utilizează pentru a selecta unul sau mai multe elemente HTML bazate pe id, nume, tipuri, atribute, clasă, valori de atribut etc. Este bazat pe selectori CSS existenți.

Introducere în interogareSelector

Metoda querySelector () returnează doar primul element care se potrivește cu un selecționator CSS specificat în document. Dacă un ID din document este utilizat mai mult de o dată, acesta va returna primul element care se potrivește.

Sintaxa interogăriiSelector

Mai jos este sintaxa querySelector:

  • querySelector (selectoare CSS)
  • Returnează primul element care se potrivește cu selectoarele specificate.
  • Pentru a returna toate elementele care se potrivesc atunci folosim metoda querySelectorAll ().
  • Selectoarele CSS pe care le trecem trebuie să fie de tip șir.
  • Este obligatoriu trecerea selectoarelor CSS.
  • Șirul pe care îl trecem trebuie să fie un selector CSS valid.
  • Dacă șirul trecut nu este valabil, atunci se aruncă o excepție SYNTAX_ERRexceptie.
  • Dacă nu se găsește nicio potrivire, acesta va reveni nul.
  • Potrivirea primului element se face folosind o traversare în profunzime a pre-comandă a documentului.
  • Specifică unul sau mai multe selector CSS pentru a se potrivi cu elementul.
  • Pentru mai mulți selectori, separați cu virgulă.
  • Caracterele care nu fac parte din sintaxa CSS standard trebuie evitate folosind un caracter retras.

Exemple pentru metoda querySelector ()

Mai jos sunt exemplele pentru metodele querySelector ():

În jQuery, puteți selecta elemente dintr-o pagină folosind numeroase proprietăți ale elementului din care sunt tipul, clasa, ID-ul, posesia atributului, valorile atributului, etc.

Exemplul # 1 - Selectarea după tip

1. Următorul selector de interogare conține două <a>

Explicația codului de mai sus: În acest exemplu, putem observa că am folosit două etichete de ancoră și în interiorul etichetei de ancoră am trecut hyperlink-ul a două imagini. Prin utilizarea querySelector („a”). Style.backgroundColor = „roșu”; am trecut eticheta de ancoră („a”) la querySelector. În metoda querySelector () dacă trecem mai mulți selectori, acesta va returna primul element care se potrivește cu selectoarele specificate. Deși conține două etichete de ancoră, prima etichetă de ancoră găsită, a aplicat stilul său.backgroundColor = „roșu”; numai pentru prima etichetă de ancorare.

Ieșire 1: Înainte de a face clic pe buton („Faceți clic pe mine”).

Ieșire 2: După ce faceți clic pe buton („Faceți clic pe mine”), culoarea de fundal a florii se schimbă în „roșu”.

Ieșire 3: La apăsarea hyperlink-urilor, imaginile respective vor fi deschise.

2. Acest querySelector conține și două, dar în exemplul de mai jos am schimbat secvența imaginii. Am păstrat întâi hyperlink-ul deșertului, apoi hyperlink-ul florii.

Explicația codului de mai sus: În acest exemplu, de asemenea, putem observa că am folosit două etichete de ancoră și în interiorul etichetei de ancoră am trecut hyperlinkul a două imagini. Prin utilizarea querySelector („a”). Style.backgroundColor = „roșu”; am trecut eticheta de ancoră („a”) la selectorul de interogare. De această dată în querySelector () va afla mai întâi hyperlink-ul „Desert” în timp ce am schimbat secvența. Deși conține două etichete de ancoră, prima etichetă de ancoră găsită, a aplicat stilul său.backgroundColor = „roșu”; numai pentru prima etichetă de ancorare.

Ieșire 1: În ieșire, putem observa că prima imagine este Deșert. Deci, din cauza metodei querySelector (), culoarea de fundal a deșertului a devenit roșie.

Ieșire 2: Când faceți clic pe hyperlink, imaginea deșertului va fi deschisă.

Ieșire 3: când faceți clic pe hyperlinkul florii, imaginea florii va fi deschisă.

Exemplul # 2 - Selectarea după clasă

În acest exemplu de mai jos selectăm folosind numele clasei.

Explicația codului de mai sus: În exemplul de mai sus, folosim numele clasei și aici numele clasei este Selector. Același nume de clasă este transmis atât pentru h2 (etichetă pentru titlu) cât și pentru eticheta de paragraf. Pentru metoda querySelector () trecem numele clasei, acesta va verifica numele clasei particulare din program. Acum a găsit acele etichete care au același nume de clasă menționat. Utilizând traversarea în profunzime a primului ordin de comandă, se realizează potrivirea primului element. Primul element din exemplul care conține numele clasei ca Selector este h2 (etichetă antet). Metoda querySelector () preia eticheta h2 și după style.backgroundColor aplică culoarea de fundal specială pentru eticheta h2.

Ieșire 1: Înainte de a face clic pe buton („faceți clic pe mine”), conținutul etichetei h2 nu schimbă culoarea fundalului în albastru.

Ieșire 2: După ce faceți clic pe buton („faceți clic pe mine”), conținutul etichetei h2 își schimbă culoarea de fundal în albastru.

Exemplul # 3 - Selectarea după ID

În acest exemplu de mai jos selectăm folosind ID-ul.

Explicația codului de mai sus: În exemplu, selectăm folosind ID-ul aici este Selector. Pentru metoda querySelector () trecem id-ul, acesta va verifica numele de id particular din program. Acum a găsit eticheta care are același nume de identitate menționat. Utilizând traversarea în profunzime a primului ordin de comandă, se realizează potrivirea primului element. Elementul din exemplul care conține numele ID ca Selector este eticheta paragrafului. Metoda querySelector () preia eticheta de paragraf și aplică modificările particulare conținutului conform codului menționat.

Ieșire 1: Înainte de a face clic pe butonul „faceți clic pe mine”, conținutul etichetei de paragraf va fi „Acesta este elementul ap cu selecția id =”.

Ieșire 2: După ce faceți clic pe butonul „faceți clic pe mine”, conținutul etichetei de paragraf va fi schimbat în „Schimbare în text”.

Utilizări ale interogării jQuerySelector

Mai jos sunt cele două puncte care explică utilizarea interogăriiSelector:

  • Codurile jQuery sunt mai precise, mai scurte și mai simple decât codurile JavaScript standard. Poate îndeplini o varietate de funcții.
  • Apelul la querySelector () returnează primul element, deoarece alege unul, deci este mai rapid și, de asemenea, mai scurt pentru a scrie.

Articole recomandate

Acesta este un ghid pentru jQuery querySelector. Aici vom discuta despre ce este jQuery querySelector, introducerea în querySelector, sintaxa și exemplul Jquery folosind tip. Puteți parcurge și alte articole conexe pentru a afla mai multe -

  1. Evenimente jQuery
  2. Utilizări ale JQuery
  3. Metode jQuery
  4. Cum se instalează Jquery?
  5. Evenimente HTML
  6. Top 5 Atribute de eveniment HTML cu exemple
  7. Aruncă vs Aruncă | Top 5 diferențe pe care ar trebui să le știi
  8. Ghid pentru exemple de bare de progres JQuery

Categorie:

Dezvoltare de software