jQuery Selectors

jQuery utilizează selectoare în stil CSS pentru a selecta părți sau elemente ale unei pagini HTML. Apoi vă permite să faceți ceva cu elementele folosind metode sau funcții jQuery.

Pentru a utiliza unul dintre acești selectori, tastați un semn de dolar și paranteze după acesta: $(). Aceasta este o prescurtare pentru jQuery() funcţie. În paranteze, adăugați elementul pe care doriți să îl selectați. Puteți utiliza ghilimele simple sau duble. După aceasta, adăugați un punct după paranteze și metoda pe care doriți să o utilizați.

În jQuery, selectoarele de clasă și ID sunt ca cele din CSS. Să analizăm rapid acest lucru înainte de a continua.

Selector ID în CSS

Selectorul ID CSS aplică stiluri unui anumit element html. Selectorul ID CSS trebuie să se potrivească cu atributul ID al unui element HTML. Spre deosebire de clase, care pot fi aplicate mai multor elemente de pe un site, un ID specific poate fi aplicat doar unui singur element de pe un site. CSS ID va înlocui proprietățile clasei CSS. Pentru a selecta un element cu un ID specific, scrieți un caracter hash (#), urmat de ID-ul elementului.

Sintaxă

#specified_id { /* styles */ }

Puteți combina selectorul ID cu alte tipuri de selectoare pentru a stiliza un element foarte specific.

section#about:hover { color: blue; }

div.classname#specified_id { color: green; }

Notă despre ID-uri

ID-ul ar trebui evitat atunci când se coafează, dacă este posibil. Deoarece are o specificitate ridicată și poate fi suprascris doar dacă introduceți stiluri sau adăugați stiluri în <style>. Greutatea ID-urilor selectează clasele și tipurile de selectoare.

Nu uitați, selectorul ID trebuie să corespundă atributului ID al unui element HTML.

<div id="specified_id"><!-- content --></div>

Specificitate

Selectorii ID au o specificitate ridicată, ceea ce le face dificil de suprascris. Clasele au o specificitate mult mai redusă și sunt, în general, modalitatea preferată de a stiliza elementele pentru a evita problemele de specificitate.

Iată un exemplu de metodă jQuery care selectează toate elementele de paragraf și le adaugă o clasă de „selectate”:

<p>This is a paragraph selected by a jQuery method.</p>
<p>This is also a paragraph selected by a jQuery method.</p>

$("p").addClass("selected");

Ok, înapoi la jQuery

În jQuery, selectoarele de clasă și ID sunt aceleași ca în CSS. Dacă doriți să selectați elemente cu o anumită clasă, utilizați un punct (.) și numele clasei. Dacă doriți să selectați elemente cu un anumit ID, utilizați simbolul hash (#) și numele ID-ului. Rețineți că HTML nu este sensibil la majuscule și minuscule, de aceea este recomandată să păstrați marcajul HTML și selectorele CSS cu litere mici.

Selectarea în funcție de clasă:

<p class="p-with-class">Paragraph with a class.</p>

$(".p-with-class").css("color", "blue"); // colors the text blue

Selectarea după ID:

<li id="li-with-id">List item with an ID.</li>

$("#li-with-id").replaceWith("<p>Socks</p>");

De asemenea, puteți selecta anumite elemente împreună cu clasele și ID-urile lor:

Selectarea după clasă

Dacă doriți să selectați elemente cu o anumită clasă, utilizați un punct (.) Și numele clasei.

<p class="pWithClass">Paragraph with a class.</p>
$(".pWithClass").css("color", "blue"); // colors the text blue

De asemenea, puteți utiliza selectorul de clasă în combinație cu un nume de etichetă pentru a fi mai specific.

<ul class="wishList">My Wish List</ul>`<br>
$("ul.wishList").append("<li>New blender</li>");

Selectarea după ID

Dacă doriți să selectați elemente cu o anumită valoare ID, utilizați simbolul hash (#) și numele ID-ului.

<li id="liWithID">List item with an ID.</li>
$("#liWithID").replaceWith("<p>Socks</p>");

Ca și în cazul selectorului de clasă, acesta poate fi utilizat și în combinație cu un nume de etichetă.

<h1 id="headline">News Headline</h1>
$("h1#headline").css("font-size", "2em");

Selectoare care acționează ca filtre

Există, de asemenea, selectoare care acționează ca filtre – de obicei vor începe cu două puncte. De exemplu, :first selectorul selectează elementul care este primul copil al părintelui său. Iată un exemplu de listă neordonată cu câteva elemente de listă. Selectorul jQuery de sub listă îl selectează pe primul <li> element din listă – elementul de listă „One” – și apoi folosește .css metoda de a transforma textul în verde.

   <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
   </ul>
$("li:first").css("color", "green");

Notă: Nu uitați că aplicarea CSS în JavaScript nu este o practică bună. Ar trebui să vă oferiți întotdeauna stilurile în fișiere CSS.

Un alt selector de filtrare, :contains(text), selectează elemente care au un anumit text. Plasați textul cu care doriți să se potrivească între paranteze. Iată un exemplu cu două paragrafe. Selectorul jQuery preia cuvântul „Moto” și își schimbă culoarea în galben.

    <p>Hello</p>
    <p>World</p>
$("p:contains('World')").css("color", "yellow");

În mod similar, :last selectorul selectează elementul care este ultimul copil al părintelui său. Selectorul JQuery de mai jos îl selectează pe ultimul <li> element din listă – elementul de listă „Trei” – și apoi folosește .css metoda de a transforma textul în galben.

$("li:last").css("color", "yellow");

Notă: În selectorul jQuery, World este între ghilimele simple, deoarece se află deja într-o pereche de ghilimele duble. Utilizați întotdeauna ghilimele simple în ghilimele duble pentru a evita încheierea neintenționată a unui șir.

Selectoare multiple În jQuery, puteți utiliza mai multe selectoare pentru a aplica aceleași modificări mai multor elemente, folosind o singură linie de cod. Faceți acest lucru separând diferitele ID-uri cu o virgulă. De exemplu, dacă doriți să setați culoarea de fundal a trei elemente cu ID-uri pisică, câine și respectiv șobolan la roșu, pur și simplu faceți:

$("#cat,#dog,#rat").css("background-color","red");

Acestea sunt doar câteva dintre selectoarele disponibile pentru utilizare în jQuery. Consultați secțiunea Mai multe informații pentru un link către lista completă de pe site-ul web jQuery.

Mai multe informatii: