de Rasheed Bustamam

Cum se utilizează jQuery Selectors și CSS Selectors și elementele de bază ale modului lor de funcționare

Cum se utilizeaza jQuery Selectors si CSS Selectors si elementele
Conjurați o armată de elemente HTML

Zilele trecute, am intervievat pe cineva care a terminat certificarea front-end a Routech. De asemenea, absolvise un bootcamp destul de prestigios, unde participanții au codat de la 8am la 8pm timp de șase săptămâni consecutive. Yikes!

Abilitatea sa de programare a fost grozavă, dar am fost surprins să văd că lipsesc cunoștințele sale în CSS. Și prin lipsă, vreau să spun că nu știa cum să selecteze o clasă pentru a aplica un stil. Acest lucru nu se reflectă neapărat negativ asupra lui. Dacă este ceva, evidențiază modul în care mulți programatori văd CSS.

Mulți oameni consideră că învățarea CSS nu este importantă, deoarece proiectanții vor putea de obicei să implementeze CSS pentru dvs. Deși acest lucru este adevărat, de multe ori este necesar ca dvs. (în calitate de programator) să cunoașteți CSS de bază pentru a selecta un element și a-i spune să facă ceva atunci când se întâmplă altceva.

De exemplu, Platforma de animație Green Sock (GSAP) este probabil prea program-y pentru a fi centrat pe proiectant. Necesită un dezvoltator cu cunoștințe de CSS, precum și de programare.

Nu spun că fiecare dezvoltator trebuie să fie un maestru CSS. Dar cred că, dacă vă veți numi dezvoltator full-stack, ar trebui să cunoașteți elementele de bază ale CSS. Iar elementele de bază încep cu selector.

Declinare de responsabilitate: selectoarele jQuery nu sunt de fapt unice pentru jQuery – sunt de fapt selectoare CSS. Cu toate acestea, dacă sunteți ca mine, ați învățat jQuery înainte de a învăța corect CSS și, prin urmare, ați asociat automat selectoarele cu jQuery. Deși acest articol este despre selectoare CSS, vă va ajuta dacă aveți nevoie de câteva clarificări și asupra selectorilor jQuery.

Selectorul CSS

Întotdeauna mi se pare util să mă joc cu cod, așa că iată un CodePen simplu pentru a juca cu selectoare de bază.

În HTML, există trei moduri de etichetare sau clasificare a elementelor. Prima modalitate este cea mai largă: după numele etichetei. De exemplu, puteți selecta toate divs pe pagina dvs. utilizând selectorul simplu div. Hei, a fost ușor!

A doua modalitate este probabil cea pe care o vei folosi cel mai mult: class atribut. Puteți selecta în funcție de clasă utilizând un punct (.), deci în exemplul de mai sus, pentru a selecta toate elemente cu clasă section eu folosesc .section ca selector.

Cea de-a treia cale este adesea suprautilizată, dar totuși utilă și asta este id atribut. ID-urile ar trebui să vă identifice elementele, la fel cum SSN (în SUA) v-ar putea identifica ca persoană. Aceasta înseamnă că ID-urile ar trebui să fie unice pe întreaga pagină. Pentru a selecta un element cu un ID specific, utilizați hashtagul (#) sau octotorpe după cum îmi place să-i spun. Pentru a selecta elementul cu ID-ul de other eu folosesc #other.

Acestea sunt cele mai elementare de selecție. A recapitula:

  • selectați după numele etichetei (fără prefix)
  • selectați după numele clasei (prefixul .)
  • selectați după ID (prefixul #)

Doar aceste trei selectoare vă vor permite să selectați aproape orice pe pagina dvs. web.

Testul 1

  1. Cum ați selecta toate etichetele de paragraf de pe pagină? (indiciu: etichetele de paragraf sunt p)
  2. Cum ați selecta toate articolele cu clasa de button-text?
  3. Cum ați selecta elementul cu ID de form-userinput?

Simțiți-vă liber să împărtășiți răspunsurile dvs. în comentarii!

Toate ID-urile trebuie să fie unice?

Aceasta este o mică divagare pe care o consider foarte importantă. Dar dacă sunteți aici doar pentru a afla cum să utilizați selectoarele, nu ezitați să treceți la secțiunea următoare

Cu un nume precum ID, ați presupune că fiecare ID HTML trebuie sa fi unic sau documentul dvs. HTML nu va funcționa. La urma urmei, încercând să am două const variabilele vor face ca mulți editori să țipe la tine, deci nu ar striga și HTML?

Problema este că HTML va fi nu țipă la tine. De fapt, nimeni nu îți va spune chiar că ceva nu este în regulă. Este posibil să găsiți o eroare care provine dintr-un ID non-unic. Dar te vei înnebuni încercând să-ți dai seama de cauza principală a bug-ului, deoarece este un eșec foarte subtil.

Exemplul de mai sus demonstrează de ce a avea ID-uri duplicate ar putea cauza o problemă pe pagina dvs. web. În primul rând, sunt de fapt două divs cu ID-ul other. Dacă comentați stilurile pentru #other, vei vedea asta ambii elementele devin de fapt stilizate. Acest lucru vă poate face să vă gândiți: „Ei bine, hei, pot folosi ID-uri și nume de clasă în mod interschimbabil!”

Nu asa de repede. Dacă vă uitați în panoul JavaScript, veți vedea că am selectat anumite elemente pe baza etichetei elementului lor: numele etichetei, numele clasei sau ID-ul. Veți observa asta document.getElementsByTagName și document.getElementsByClassName returnează o colecție cu toate elementele HTML potrivite. document.getElementById returnează numai primul element HTML pe care îl poate găsi cu ID-ul care se potrivește. Puteți verifica acest lucru necomentând getVanillaSelectors funcționarea și verificarea consolei.

Cum se utilizeaza jQuery Selectors si CSS Selectors si elementele
Folosind document.getElement (s) By[Type]

Pentru a complica și mai mult lucrurile, dacă utilizați JavaScript querySelectorAll metoda (care ia ca intrare un selector CSS), obțineți un rezultat total diferit.

1612050790 48 Cum se utilizeaza jQuery Selectors si CSS Selectors si elementele
Folosind document.querySelectorAll

Și doar pentru a vă deranja cu dvs., jQuery face ceva diferit în ciuda faptului că are o sintaxă similară cu querySelectorAll.

1612050791 535 Cum se utilizeaza jQuery Selectors si CSS Selectors si elementele
Folosind selectorul jQuery

Nu am nicio explicație pentru comportamentul diferit. Cu toate acestea, vă pot spune cum să o evitați. Iată regulile mele:

  1. Nu folosiți niciodată ID-uri. Utilizare class atribute în schimb.
  2. Dacă trebuie să folosesc un ID, denumiți-l astfel încât să fie unic, chiar dacă pe pagină există un element similar; de exemplu menu-item-01

Uneori, formularele și câmpurile de introducere a acestora trebuie să aibă ID-uri. În acest caz, puteți urma regula numărul 2. Iată cum aș numi un formular pentru înscrierea utilizatorului:

<form id="user-signup">  <input id="user-signup-userid" label="user id" />  <input id="user-signup-password" label="password" /></form>

În acest fel, dacă am două forme pe aceeași pagină (să spunem user-signup și user-signin), li se garantează că au ID-uri unice. Chiar dacă câmpurile ID utilizator sunt similare între formulare.

Combinarea selectoarelor

Uneori, un singur selector nu îl va tăia. Uneori, trebuie să obțineți fiecare div care are un nume de clasă de section . Alteori, aveți nevoie de fiecare element cu un nume de clasă de section acesta este un element copil al unui div cu ID user-signup . Există multe alte combinații posibile de selector.

În această secțiune, veți învăța trei moduri de combinând selectori și sunt încrezător că acestea se vor potrivi cu 90% din nevoile dumneavoastră. Dacă descoperiți că mai mult de 11% din nevoile dvs. sunt neîndeplinite, veniți să vă reclamați și voi edita asta pentru a spune 89% din nevoile dvs.

Ca și înainte, să începem cu un CodePen:

Combinarea selectorilor pentru un singur element

OK, mai întâi să acoperim combinarea selectorilor pentru un singur element. Aceasta înseamnă selectarea elementului care are numele etichetei x, ȘI numele clasei de y, ȘI ID-ul de z. Desigur, nu aveți nevoie de toate cele trei, dar puteți combina toate cele trei.

Să presupunem că vrem să selectăm toate divs cu clasa de item. Pentru a face acest lucru, combinăm cele două: div.item. Merge de la cel mai general la cel mai specific de la stânga la dreapta. Asta îi selectează pe toți div etichete care au, de asemenea, numele clasei item. Este important să rețineți că există Nu spațiu între div și .item. Adăugarea unui spațiu schimbă selectorul complet, așa cum voi trece în secțiunea următoare.

Dacă decomentați CSS corespunzător, veți vedea că section cu numele clasei de item nu s-a înroșit. Asta pentru că nu este un div etichetă.

Puteți face același model cu numele clasei și ID-urile. Dar dacă aveți ID-ul unui element, puteți utiliza la fel de bine ID-ul. Nu există niciun motiv pentru a selecta un ID cu un anumit nume de clasă, deoarece dacă ați respectat regulile de identificare de mai sus, oricum aveți doar un articol cu ​​acel ID.

Dar, doar pentru paritate, iată un exemplu de selectare a div cu clasa de item și ID-ul de other: div.item#other. Din nou, mergând de la stânga la dreapta, merge mai general la mai specific.

Cel mai probabil veți folosi această sintaxă pentru a selecta un element care are mai multe clase. Pentru a face acest lucru, trebuie doar să separați toate clasele de puncte. Pentru a selecta toate elementele care au AMBE clase item și section, ai folosi .item.section. Comanda nu contează când o faci în acest fel, deci .section.item va funcționa și el.

Acest singur truc vă va permite să fiți mai specific în selectorii dvs.

Selectorul „copil”

A doua modalitate prin care puteți combina selectoarele este folosind selectorul „copil”, așa cum îmi place să-l numesc. Există două moduri de a face acest lucru, așa că voi începe cu cel mai general.

Mai întâi, puteți selecta orice copil al unui anumit element prin adăugarea unui spațiu. De exemplu, pentru a selecta tot copilul items din #other element, ar fi #other .item. Observați spațiul dintre selectoare.

În al doilea rând, puteți selecta imediat copiii unui anumit element folosind &gt ;. Un „copil imediat” al unui element este unul care este adânc la un singur nivel. În exemplu, există two .ielementele tem conținute în the #otelementul ei, dar unul din the .ielementele tem sunt înfășurate în a .wrappe element, astfel încât unul este nu un copil imediat.

Pentru a vă oferi un vizual, dacă prăbușiți totul sub #other element, ai vedea acest lucru:

1612050791 42 Cum se utilizeaza jQuery Selectors si CSS Selectors si elementele
Copii prăbușiți

Cele două sunt singurele copii directi din #other element. Pentru a selecta doar copilul direct .item de #other, ai folosi #other > .item, care ar selecta copilul direct, but nu cea subneath .wrappe. Nifty, huh?

Testul 2

  1. Cum ați selecta toate etichetele de paragraf care aparțin section elemente? (indiciu: etichetele de paragraf sunt p)
  2. Cum ați selecta toate articolele cu clasa de button-text, care sunt descendenți ai elementelor cu clasa de button?
  3. Cum ați selecta elementul cu clasa de form-input acesta este un copil direct de form elemente?
  4. Întrebare bonus: explicați ce selectează acest selector: header.title > form.user-signup button.button-danger

La fel ca înainte, nu ezitați să împărtășiți răspunsurile dvs. în comentarii!

Punând totul împreună – la propriu

Puteți combina selectoare combinate. Într-adevăr. Întrebarea bonus de mai sus arată un exemplu, dar am adăugat câteva combinații la sfârșitul exemplului codepen.

De exemplu, puteți alege toate .itemcare sunt copii ai divs cu clasa de parent-item prin utilizarea div.parent-item .item. Vai!

Puteți alege și descendenți direcți. De exemplu, pentru a selecta toate divs cu clasa de item care sunt descendenți direcți către divs cu clasa de parent-item: div.parent-item > div.item.

Și, în cele din urmă, doar pentru a vă încurca cu dvs., puteți merge pe întregul arbore DOM: div.parent-item .coolest-item .item. item clasa la care este copil coolest-item clasa la care este copil div cu clasa de parent-item.

Rețineți că este în general nu o idee bună să depășești două sau trei niveluri de adâncime atunci când cuibărești selectoare. Apoi intri în tărâmuri ciudate de specificitate pe care le poți rezolva mai eficient numindu-ți mai bine clasele CSS. Dar acest lucru nu intră în sfera acestui articol. Dacă doriți să aflați mai multe, anunțați-mă și vă voi scrie despre asta.

Bonus: folosind Chrome DevTools pentru a obține un selector

Puteți utiliza Chrome DevTools pentru a obține selectorul oricărui element pe care îl puteți selecta pe DOM. Iată cum:

  1. Deschideți Chrome DevTools. Deoarece selectați un element, continuați și faceți clic dreapta pe elementul pe care doriți să-l selectați și faceți clic pe „Inspectați”:
1612050792 107 Cum se utilizeaza jQuery Selectors si CSS Selectors si elementele
Da, este o poză cu mine scriind acest articol

2. Faceți clic dreapta pe elementul DOM pe care doriți să îl selectați și treceți cu mouse-ul peste „Copiere”, apoi faceți clic pe „Copiere selector:”

1612050792 289 Cum se utilizeaza jQuery Selectors si CSS Selectors si elementele
Îmi place Tema Întunecată.

3. Gata! De altfel, selectorul pe care l-am copiat este #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailing.este selectat. Puteți copia secțiunealector into document.querySelector sau jQuery și obțineți elementul.

1612050793 94 Cum se utilizeaza jQuery Selectors si CSS Selectors si elementele
Acesta este selectorul pentru imaginea de mai sus.

Sperăm că această scriere a fost de ajutor! Dacă ți-a plăcut, te rog să-mi dai niște aplauze pentru ca mai mulți oameni să o vadă. Mulțumiri!