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: classattributten. Du kan vælge efter klasse ved hjælp af en prik ( .), så i eksemplet ovenfor kan du vælge alleelementer med klasse sectionI bruger .sectionsom vælger.

Den tredje måde er ofte overbrugt, men stadig nyttig, og det er idattributten. 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 otherjeg 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

  1. Hvordan ville du vælge alle afsnitstags på siden? (tip: afsnitskoder er p)
  2. Hvordan vælger du alle emner med klasse af button-text?
  3. 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 constvariabler 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 divs 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.getElementsByTagNameog document.getElementsByClassNamereturnerer en samling af alle matchende HTML-elementer. document.getElementByIdreturnerer kun det første HTML-element, den kan finde med det matchende id. Du kan bekræfte dette ved at fjerne kommentar til getVanillaSelectorsfunktionen og kontrollere konsollen.

For yderligere at komplicere tingene, hvis du bruger JavaScript- querySelectorAllmetoden (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:

  1. Brug aldrig id'er. Brug classattributter i stedet.
  2. Hvis jeg har brug for et ID, skal du navngive mellemrum, så det bliver unikt, selvom der findes et lignende element på siden; for eksempelmenu-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-signupog 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, divder har klassens navn section. Andre gange har du brug for hvert element med et klassenavn, sectionder er et underordnet element til et divmed 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 divs 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 divtags, som OGSÅ har klassens navn item. Det er vigtigt at bemærke, at der ikke er plads mellem divog .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 sectionmed klassenavnet itemikke blev rødt. Det er fordi det ikke er et divmæ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 divmed klasse itemog 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, itemog som sectiondu vil bruge .item.section. Ordren betyder ikke noget, når du gør det på denne måde, så .section.itemdet 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 itemaf #otherelementet, 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 .item elementer i t he #othendes element, men en af t he .item elementer er pakket ind i a .wrapper element, så man er ikke en øjeblikkelig barn.

For at give dig et visuelt, hvis du kollapser alt under #otherelementet, vil du se dette:

De to er de eneste direkte børn af #otherelementet. For at vælge kun de direkte barn .itemaf #other, ville du bruge #other > .item, der ville vælge den direkte barn, b ut ikke den ene undernea th .wrappr. Nifty, ikke?

Quiz 2

  1. Hvordan vælger du alle afsnitsmærker, der hører til sectionelementer? (tip: afsnitskoder er p)
  2. Hvordan ville du vælge alle varer med klasse af button-text, der er efterkommere til varer med klasse af button?
  3. Hvordan ville du vælge det element med klasse, form-inputder er et direkteform element af elementer?
  4. Bonusspørgsmål : Forklar, hvad denne vælger vælger: header.title > form.user-signup button.button-danger

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 .items, der er børn af divs med klasse af parent-itemved hjælp af div.parent-item .item. Whoa!

Du kan også vælge direkte efterkommere. For eksempel at vælge alle divs med klasse af itemder er direkte efterkommere til divs med klasse af parent-item: div.parent-item > div.item.

Og endelig, bare for at rode med dig, kan du gå ned hele DOM-træet: div.parent-item .coolest-item .item. itemklasse, der er barn til coolest-itemklasse, der er barn til divmed 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:

  1. Å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.querySelector 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!