Inleiding tot JQuery Selectors en hun t
Wanneer u met JavaScript werkt, komt u vaak in een situatie terecht waarin u bepaalde inhoud op de pagina moet zoeken en wijzigen. In deze gevallen moet u de selectorondersteuning in JQuery gebruiken. JQuery maakt het vrij eenvoudig om elementen van de pagina te vinden op basis van hun type, waarden, attributen, etc. Deze elementen zijn gebaseerd op CSS-selectors en als je eenmaal hebt geoefend, zul je zien dat het vinden van elementen in de pagina's een cakewalk is. Afhankelijk van het gebruik kunnen we verschillende typen JQuery-selectors in verschillende typen classificeren. Laten we eens kijken naar enkele van de meest gebruikte selectors.
Gebruik een selector
Hierna volgt een syntaxis van een JQuery Selector:
- $ (Selector) .methodname ():
Als u nodig hebt, kunt u meerdere selectors koppelen door een "." Tussen de methoden toe te voegen.
- $ (selector) .method1 () method2 () method3 ()..;
Soorten selector in JQuery
Hier zijn de verschillende soorten selector in JQuery
1) Basis JQuery-selectors
We kunnen pagina-elementen selecteren met hun ID, Klasse of hun tagnaam. Indien nodig kan een combinatie hiervan ook worden gebruikt. Hier volgen enkele basisselectoren:
- : header Selector - Dit is een standaard selectortype waarmee we elementen kunnen vinden met hun HTML-koppen. Om dit te doen, gebruiken we de uitgebreide $ ("sectie h1, sectie h2, sectie h3") selector of we kunnen ook de veel kortere $ ("sectie: header") selector gebruiken.
- : target Selector - Deze selector vindt doelen van de pagina of hash van de URI van het document. Als de URI van de pagina bijvoorbeeld 'https://example.com/#test' is. Vervolgens selecteert de selector $ ("h2: target") het element
.
- : animated Selector - Deze selector wordt gebruikt om alle elementen met animatie te vinden. Houd er rekening mee dat om de animatie te selecteren, deze moet worden uitgevoerd wanneer de selector wordt uitgevoerd.
2) Selectors op basis van index
JQuery heeft zijn eigen set indexgebaseerde selectors die op nul gebaseerde indexering gebruiken. Hier volgen enkele voorbeelden:
- : eq (k) Selector - Deze selector retourneert het element bij index k. Het ondersteunt ook negatieve indexwaarden.
- : lt (k) Selector - Deze selector retourneert alle elementen met een index kleiner dan k. Net zoals hierboven worden ook negatieve waarden geaccepteerd
- : gt (n) Selector - Deze selector is vergelijkbaar: lt (k) Selector behalve dat deze werkt voor een Indexwaarde groter dan of gelijk aan k.
3) Kinderselecteurs
U kunt JQuery gebruiken om onderliggende elementen van elk element te selecteren op basis van hun type of index.
- : first-child - Deze selector retourneert alle elementen die het eerste kind van hun ouders zijn.
- : first-of-type - Deze JQuery-selector wordt gebruikt om alle elementen te selecteren die de eerste broer of zus zijn
- : last-child - Zoals de naam al doet vermoeden, selecteert deze selector het laatste kind van de ouder.
- : last-of-type - Hiermee worden alle kinderen geselecteerd die het laatst van hun type zijn in een ouder. Als er meer dan één ouder is, selecteert deze meerdere elementen.
- : alleen-van-type - We kunnen de alleen-van-type selector gebruiken om alle elementen met broers en zussen van hetzelfde type op de pagina te vinden.
- : alleen kind - In situaties waarin u elementen moet zoeken en selecteren die het enige kind van hun ouder zijn, kunt u deze selector gebruiken. Als een ouder op de pagina meer dan één kind heeft, wordt dit genegeerd.
4) Attribuutkiezers
Elementen kunnen worden geselecteerd op basis van hun attributen, hier volgen enkele veel voorkomende kenmerkkiezers:
- $ (“(Attribuut | = 'valuehere')”) - Het “attribuut bevat prefix selector” selecteert alle elementen met attributen waarvan de waarde gelijk is aan of begint met de gegeven string gevolgd door een koppelteken.
- $ (“(Attribuut ~ = 'valuehere')”) - Dit retourneert alle elementen met attributen waarvan de waarde een bepaald woord bevat, gescheiden door spaties.
- $ (“(Attribuut * = 'valuehere')”) - Het zal elementen selecteren waarbij de waarde de gegeven substring bevat. Zolang de waarde overeenkomt, maakt de locatie niet uit
5) Inhoudselectoren
Zoals de naam al doet vermoeden, worden deze JQuery-selectors gebruikt om inhoud in elementen te zoeken en te selecteren.
- : bevat (tekst) - Dit wordt gebruikt om elementen te selecteren die een gespecificeerde tekstinhoud bevatten. Een ding om in gedachten te houden bij het gebruik van deze selector is dat de test hier hoofdlettergevoelig is.
- : has (selector) - Het zal terugkeren met elementen die ten minste één element bevatten dat overeenkomt met de opgegeven selector. Bijvoorbeeld, $ (“sectie: heeft (h1)”) zal terugkeren met alle secties die een h1-element hebben.
- : leeg - Deze selector retourneert de elementen van de pagina die geen kinderen hebben, inclusief tekstknooppunten.
- : parent - Deze selector wordt gebruikt om alle elementen van de webpagina te selecteren die ten minste één onderliggende node hebben. Je kunt het beschouwen als een inverse voor de: lege JQuery-selector.
6) Hiërarchiekiezers
- $ ("Voorouder afstammeling") - Het wordt gebruikt om alle afstammingselementen van een ouder te selecteren. De afstammeling in ons geval zou een kind, kleinkind, enzovoort kunnen zijn.
- $ ("Ouder> kind") - Dit wordt gebruikt in gevallen waarin we alleen het directe kind van een specifieke ouder hoeven te selecteren.
- $ ("Vorige + volgende") - In het geval dat we alle elementen moeten selecteren die overeenkomen met de "volgende" selector en die de bovenliggende "vorige" hebben. De geselecteerde elementen worden ook onmiddellijk vervolgd door "vorige", dat is de broer of zus.
7) Zichtbaarheidselectoren
Twee selectors: zichtbaar en: verborgen zijn ook beschikbaar in JQuery. Deze kunnen worden gebruikt om respectievelijk zichtbare of verborgen elementen op de webpagina te vinden. Elk element op de webpagina wordt als verborgen beschouwd als:
- Het display is correct ingesteld op geen.
- De breedte en hoogte zijn nul.
- Het heeft type = verborgen vermeld in het formulierelement.
- Alle voorouders van het element zijn al verborgen.
Houd er rekening mee dat zelfs als een element een dekking heeft ingesteld op Nul, het nog steeds als zichtbaar wordt beschouwd omdat het nog steeds ruimte in beslag neemt.
8) Formulierkiezers
Om tijd en moeite te besparen, heeft JQuery sorteerversies van selectors voor invoerelementen van webformulieren.
Terwijl bijvoorbeeld $ ("knop, invoer (type = 'knop')") zal werken om de knop op de pagina te selecteren, kunnen we $ (": knop") gebruiken om dit snel te doen.
Op dezelfde manier kunnen we $ (": radio") gebruiken om het keuzerondje te selecteren.
Conclusie - Soorten selector in JQuery
Selectors zijn een van de belangrijke functies van JQuery, de selectie op JavaScript is niet zo intuïtief en robuust met de toevoeging van selectors via JQuery, programmeren voor het web is eenvoudiger geworden.
Aanbevolen artikelen
Dit is een gids voor soorten selector in JQuery. Hier bespreken we de verschillende soorten JQuery-selectors met de syntaxis. U kunt ook een kijkje nemen in de volgende artikelen voor meer informatie-
- jQuery-methoden
- jQuery-alternatieven
- Gebruik van JQuery
- Wat kan Javascript doen?
- jQuery querySelector
- Handleiding voor voorbeelden van JQuery-voortgangsbalk