Sådan bruges jQuery Selectors og CSS Selectors, og det grundlæggende i, hvordan de fungerer

Forleden dag interviewede jeg nogen, der havde afsluttet front-end-certificeringen af freeCodeCamp. Han havde også dimitteret fra et ret prestigefyldt bootcamp, hvor deltagere kodede fra 8 til 20 i seks uger i træk. Yikes!
Hans programmeringsevne var stor, men jeg var overrasket over at se, at hans viden om CSS manglede. Og ved at mangle, mener jeg, at han ikke vidste, hvordan han valgte en klasse til at anvende en stil. Dette reflekterer ikke nødvendigvis negativt på ham. Hvis det er noget, fremhæver det, hvordan mange programmører ser CSS.
Mange mennesker synes at lære CSS er uvigtig, da designere normalt vil være i stand til at implementere CSS for dig. Selvom dette er sandt, er der mange gange, at du (som programmør) har brug for at kende nogle grundlæggende CSS for at vælge et element og fortælle det at gøre noget, når der sker noget andet.
For eksempel er Green Sock Animation Platform (GSAP) sandsynligvis for program-y til at være designer-centreret. Det kræver en udvikler med kendskab til CSS såvel som programmering.
Jeg siger ikke, at enhver udvikler skal være en CSS-master. Men jeg tror, at hvis du vil kalde dig selv en full-stack-udvikler, skal du kende det grundlæggende i CSS. Og det grundlæggende starter med vælgeren .
Ansvarsfraskrivelse: jQuery-vælgere er faktisk ikke unikke for jQuery - de er faktisk CSS-vælgere. Men hvis du er noget som mig, lærte du jQuery, før du korrekt lærte CSS, og derfor automatisk tilknyttede vælgere med jQuery. Selvom denne artikel handler om CSS-vælgere, vil det hjælpe dig, hvis du også har brug for nogle præciseringer om jQuery-vælgere.
CSS-vælgeren
Jeg finder det altid nyttigt at lege med kode, så her er en simpel CodePen til at spille med grundlæggende vælgere.
I HTML er der tre måder at mærke eller kategorisere elementer på. Den første måde er den bredeste: efter tagnavn. For eksempel kan du vælge allediv
s på din side ved hjælp af den enkle vælger div
. Hej, det var let!
Den anden måde er sandsynligvis den, du bruger mest: class
attributten. Du kan vælge efter klasse ved hjælp af en prik ( .
), så i eksemplet ovenfor kan du vælge alleelementer med klasse section
I bruger .section
som vælger.
Den tredje måde er ofte overbrugt, men stadig nyttig, og det er id
attributten. ID'er skal identificere dine elementer, ligesom dit SSN (i USA) muligvis identificerer dig som person. Det betyder, at id'er skal være unikke på tværs af hele siden. For at vælge et element med et specifikt ID bruger du hashtagget ( #
) eller octothorpe, som jeg gerne vil kalde det. At vælge elementet med id'et for other
jeg bruger #other
.
Disse er de mest basale vælgere. For at opsummere:
- vælg efter tagnavn (intet præfiks)
- vælg efter klassens navn (præfiks for
.
) - vælg efter ID (præfiks
#
)
Disse tre vælgere alene giver dig mulighed for at vælge næsten alt på din webside.
Quiz 1
- Hvordan ville du vælge alle afsnitstags på siden? (tip: afsnitskoder er
p
) - Hvordan vælger du alle emner med klasse af
button-text
? - Hvordan vælger du elementet med ID på
form-userinput
?
Del gerne dine svar i kommentarerne!
Skal alle id'er være unikke?
Dette er en lille afvigelse, som jeg føler er meget vigtig. Men hvis du kun er her for at lære at bruge vælgere, er du velkommen til at springe til næste afsnit
Med et navn som ID antager du, at hvert HTML-ID skal være unikt, ellers fungerer dit HTML-dokument ikke. Når alt kommer til alt, vil forsøg på at have to const
variabler få mange redaktører til at råbe på dig, så ville HTML ikke råbe også?
Problemet er, at HTML ikke råber på dig. Faktisk vil ingen engang fortælle dig, at der er noget galt. Du kan muligvis finde en fejl, der stammer fra et ikke-unikt ID. Men du vil gøre dig selv vild med at prøve at finde ud af årsagen til fejlen, fordi det er en meget subtil fejl.
Eksemplet ovenfor viser, hvorfor det at have duplikat-id'er kan forårsage et problem på din webside. For det første er der faktisk to div
s med ID'et other
. Hvis du kommenterer typografierne for #other
, vil du se, at begge ting faktisk bliver stylet. Dette kan få dig til at tænke, "godt hej, jeg kan bruge ID'er og klassenavne om hinanden!"
Ikke så hurtigt. Hvis du kigger i JavaScript-panelet, vil du se, at jeg valgte bestemte emner baseret på deres elementetiket: tagnavn, klassenavn eller ID. Du bemærker det document.getElementsByTagName
og document.getElementsByClassName
returnerer en samling af alle matchende HTML-elementer. document.getElementById
returnerer kun det første HTML-element, den kan finde med det matchende id. Du kan bekræfte dette ved at fjerne kommentar til getVanillaSelectors
funktionen og kontrollere konsollen.

For yderligere at komplicere tingene, hvis du bruger JavaScript- querySelectorAll
metoden (som tager en CSS-vælger som input), får du et helt andet resultat.

Og bare for at rod med dig, jQuery gør noget andet på trods af at have en lignende syntaks til querySelectorAll
.

Jeg har ingen forklaring på den forskellige adfærd. Jeg kan dog fortælle dig, hvordan du undgår det. Her er mine regler:
- Brug aldrig id'er. Brug
class
attributter i stedet. - Hvis jeg har brug for et ID, skal du navngive mellemrum, så det bliver unikt, selvom der findes et lignende element på siden; for eksempel
menu-item-01
Nogle gange skal formularer og deres indtastningsfelter muligvis have ID'er. I så fald kan du følge regel nr. 2. Sådan navngiver jeg en formular til brugertilmelding:
På den måde, hvis jeg har to formularer på samme side (lad os sige user-signup
og user-signin
), er de garanteret at have unikke id'er. Selvom brugerID-felterne er ens mellem formularerne.
Kombination af vælgere
Nogle gange vil en enkelt vælger bare ikke klippe den. Nogle gange er du nødt til at hente alle, div
der har klassens navn section
. Andre gange har du brug for hvert element med et klassenavn, section
der er et underordnet element til et div
med ID user-signup
. Der er mange mulige andre vælgerkombinationer.
I dette afsnit lærer du tre måder at kombinere vælgere på, og jeg er overbevist om, at disse passer til 90% af dine behov. Hvis du finder ud af, at mere end 11% af dine behov ikke er opfyldt, så kom til at klage til mig, så redigerer jeg det for at sige 89% af dine behov :).
Lad os som før starte med en CodePen:
Kombination af vælgere til et enkelt element
OK, lad os først dække kombination af vælgere til et enkelt element. Dette betyder at vælge det element, der har tagnavn på x
, OG klasse navn på y
, OG ID på z
. Selvfølgelig behøver du ikke alle tre, men du kan kombinere alle tre.
Lad os sige, at vi vil vælge alle div
s med klasse af item
. At gøre det, vi kombinerer de to: div.item
. Det går fra mest generelle til mest specifikke fra venstre mod højre. Der vælges alle div
tags, som OGSÅ har klassens navn item
. Det er vigtigt at bemærke, at der ikke er plads mellem div
og .item
. Tilføjelse af et mellemrum ændrer vælgeren fuldstændigt , som jeg vil gå over i det næste afsnit.
Hvis du fjerner kommentar til den tilsvarende CSS, ser du, at section
med klassenavnet item
ikke blev rødt. Det er fordi det ikke er et div
mærke.
Du kan gøre det samme mønster med holdnavne og id'er. Men hvis du har et element's ID, kan du lige så godt bare bruge ID'et. Der er ingen grund til at vælge et ID med et specifikt klassenavn, for hvis du fulgte ID-reglerne ovenfor, har du alligevel kun et element med det ID.
Men, bare for paritet, her er et eksempel på, at vælge div
med klasse item
og ID other
: div.item#other
. Igen går det fra venstre til højre mest generelt til mere specifikt.
Mest sandsynligt bruger du denne syntaks til at vælge et element, der har flere klasser. For at gøre dette skal du bare adskille alle klasser med perioder. Hvis du vil vælge alle elementer, der har BEGGE klasser, item
og som section
du vil bruge .item.section
. Ordren betyder ikke noget, når du gør det på denne måde, så .section.item
det fungerer også.
Dette ene trick giver dig mulighed for at være mere specifik i dine vælgere.
"Barn" -vælgeren
Den anden måde, du kan kombinere vælgere på er ved at bruge “barn” -vælgeren, som jeg gerne kalder det. Der er to måder at gøre dette på, så jeg begynder med det mest generelle.
For det første kan du vælge ethvert barn af et bestemt element ved at tilføje et mellemrum. For eksempel for at vælge alle underordnede element item
af #other
elementet, ville det være #other .item
. Bemærk mellemrummet mellem vælgerne.
For det andet kan du vælge umiddelbare børn af et bestemt element ved hjælp af &
gt ;. Et ”øjeblikkeligt barn” af et element er et, der kun er et niveau dybt. I eksemplet er der t wo .i
tem elementer i t he #ot
hendes element, men en af t he .i
tem elementer er pakket ind i a .wrap
per element, så man er ikke en øjeblikkelig barn.
For at give dig et visuelt, hvis du kollapser alt under #other
elementet, vil du se dette:

De to er de eneste direkte børn af #other
elementet. For at vælge kun de direkte barn .item
af #other
, ville du bruge #other > .i
tem, der ville vælge den direkte barn, b ut ikke den ene undernea th .wrap
pr. Nifty, ikke?
Quiz 2
- Hvordan vælger du alle afsnitsmærker, der hører til
section
elementer? (tip: afsnitskoder erp
) - Hvordan ville du vælge alle varer med klasse af
button-text
, der er efterkommere til varer med klasse afbutton
? - Hvordan ville du vælge det element med klasse,
form-input
der er et direkteform
element af elementer? - Bonusspørgsmål : Forklar, hvad denne vælger vælger:
header.title > form.user-signup button.button-dan
ger
Som tidligere er du velkommen til at dele dine svar i kommentarerne!
At sætte det hele sammen - bogstaveligt talt
Du kan kombinere kombinerede vælgere. Virkelig. Ovenstående bonusspørgsmål viser et eksempel på det, men jeg har tilføjet nogle kombinationer i slutningen af eksemplet codepen.
For eksempel kan du vælge alle .item
s, der er børn af div
s med klasse af parent-item
ved hjælp af div.parent-item .item
. Whoa!
Du kan også vælge direkte efterkommere. For eksempel at vælge alle div
s med klasse af item
der er direkte efterkommere til div
s med klasse af parent-item
: div.parent-item > div.i
tem.
Og endelig, bare for at rode med dig, kan du gå ned hele DOM-træet: div.parent-item .coolest-item .item
. item
klasse, der er barn til coolest-item
klasse, der er barn til div
med klasse af parent-item
.
Bemærk, at det generelt ikke er en god ide at gå ud over to eller tre niveauer af dybde, når du indlejrer vælgerne. Derefter kommer du ind i underlige riger af specificitet, som du kan løse mere effektivt ved at navngive dine CSS-klasser bedre. Men det er uden for denne artikels anvendelsesområde. Hvis du vil vide mere, så lad mig det vide, så skriver jeg om det.
Bonus: Brug af Chrome DevTools til at få en vælger
Du kan bruge Chrome DevTools til at få vælgeren til ethvert element, du kan vælge i DOM. Sådan gør du:
- Åbn Chrome DevTools. Da du vælger et element, skal du gå videre og højreklikke på det element, du vil vælge, og klikke på "Inspicer":

2. Højreklik på det DOM-element, du vil vælge, og hold markøren over "Kopi", og klik derefter på "Kopier vælger:"

3. Det er det! Den vælger, jeg kopierede, er forresten #editor_93 > section > div.section-content > div:nth-child(3) > p.graf.graf — p.graf-after — figure.graf — trailing
.is-valgt. Du kan kopiere se lector into document.q
uerySelector eller jQuery og hente elementet.

Forhåbentlig var denne opskrivning hjælpsom! Hvis du nød det, så giv mig nogle klapper, så flere mennesker ser det. Tak!