Wat is jQuery querySelector?
jQuery querySelector selecteert of vindt een DOM-element (documentobjectmodel) in een HTML-document. Met JQuery kunnen we de HTML-elementen manipuleren. Het wordt gebruikt om een of meer HTML-elementen te selecteren op basis van id, naam, types, attributen, klasse, attribuutwaarden, enz. Het is gebaseerd op bestaande CSS-selectors.
Inleiding tot querySelector
De methode querySelector () retourneert alleen het eerste element dat overeenkomt met een opgegeven CSS-selector (s) in het document. Als een ID in het document meerdere keren wordt gebruikt, retourneert dit het eerste overeenkomende element.
Syntaxis van querySelector
Hieronder staat de syntaxis van querySelector:
- querySelector (CSS-selectors)
- Het retourneert het eerste element dat overeenkomt met de opgegeven selectors.
- Om alle elementen te retourneren die overeenkomen, gebruiken we de methode querySelectorAll ().
- De CSS-selectors die we doorgeven, moeten van het stringtype zijn.
- Het is verplicht om de CSS-selectors te passeren.
- De reeks die we doorgeven, moet een geldige CSS-selector zijn.
- Als de doorgegeven string ongeldig is, wordt een SYNTAX_ERRexception gegenereerd.
- Als er geen overeenkomst wordt gevonden, keert deze terug naar nul.
- Het matchen van het eerste element gebeurt met behulp van een diepte-eerste pre-order doorgang van het document.
- Geeft een of meer CSS-selector aan die overeenkomt met het element.
- Voor meerdere selectors, scheidt u met een komma.
- Tekens die geen deel uitmaken van de standaard CSS-syntaxis moeten worden overgeslagen met een backslash-teken.
Voorbeelden voor de methode querySelector ()
Hieronder staan de voorbeelden voor de methoden querySelector ():
In jQuery kunt u elementen op een pagina selecteren met behulp van veel verschillende eigenschappen van het element: Type, Klasse, ID, Attribute of Attribute, Attribute Values, etc. Hieronder ziet u het voorbeeld van Jquery met behulp van type.
Voorbeeld # 1 - Selecteren op type
1. De volgende query-selector bevat twee <a>
Verklaring van de bovenstaande code: in dit voorbeeld kunnen we vaststellen dat we twee ankertags hebben gebruikt en dat we in de ankertag de hyperlink van twee afbeeldingen hebben gepasseerd. Met behulp van de querySelector ("a"). Style.backgroundColor = "rood"; we hebben de ankertag ("a") doorgegeven aan de querySelector. Als we in de methode querySelector () de meerdere selectors passeren, retourneert dit het eerste element dat overeenkomt met de opgegeven selectors. Hoewel het twee ankertags bevat, heeft de eerste gevonden ankertag zijn style.backgroundColor = "red" toegepast; alleen voor eerste ankertag.
Uitgang 1: Voordat u op de knop klikt ("Click me").
Uitgang 2: Na klikken op de knop ("Click me") verandert de achtergrondkleur van de bloem in "rood".
Uitgang 3: Door op de hyperlinks te klikken, worden de respectieve afbeeldingen geopend.
2. Deze querySelector bevat ook twee, maar in het onderstaande voorbeeld heb ik de volgorde van de afbeelding gewijzigd. Ik heb eerst de woestijnhyperlink gehouden en daarna de hyperlink van de bloem.
Verklaring van de bovenstaande code: in dit voorbeeld kunnen we ook vaststellen dat we twee ankertags hebben gebruikt en dat we in de ankertag de hyperlink van twee afbeeldingen hebben gepasseerd. Met behulp van de querySelector ("a"). Style.backgroundColor = "rood"; we hebben de ankertag ("a") doorgegeven aan de querykiezer. Deze keer zal het in de querySelector () eerst de hyperlink "Woestijn" vinden als we de volgorde hebben gewijzigd. Hoewel het twee ankertags bevat, heeft de eerste gevonden ankertag zijn style.backgroundColor = "red" toegepast; alleen voor eerste ankertag.
Uitgang 1: In de uitvoer kunnen we zien dat de eerste afbeelding Desert is. Dus vanwege de methode querySelector () is de achtergrondkleur van de woestijn gewijzigd in rood.
Uitgang 2: Door op de hyperlink te klikken, wordt de woestijnafbeelding geopend.
Uitgang 3: Door op de hyperlink van de bloem te klikken, wordt de bloemafbeelding geopend.
Voorbeeld # 2 - Selecteren op klasse
In dit onderstaande voorbeeld selecteren we met behulp van de klassenaam.
Verklaring van de bovenstaande code: in het bovenstaande voorbeeld gebruiken we de klassenaam en hier is de klassennaam Selector. Dezelfde klassenaam wordt doorgegeven voor zowel h2 (koptag) als de alineatag. Voor de methode querySelector () geven we de klassenaam door, deze controleert op de specifieke klassenaam in het programma. Nu heeft het die tags gevonden die dezelfde klassenaam hebben als genoemd. Door gebruik te maken van de diepte-eerste pre-order doorgang van het document wordt het matchen van het eerste element gedaan. Het eerste element in het voorbeeld dat de klassenaam als selector bevat, is h2 (koptag). De methode querySelector () haalt de h2-tag op en past met style.backgroundColor de specifieke achtergrondkleur toe op de h2-tag.
Uitgang 1: Voordat u op de knop klikt ("klik op mij"), verandert de inhoud van de h2-tag de achtergrondkleur niet in blauw.
Uitgang 2: Na klikken op de knop ("klik op mij") verandert de inhoud van de h2-tag van achtergrondkleur naar blauw.
Voorbeeld # 3 - Selecteren op ID
In dit onderstaande voorbeeld selecteren we met behulp van id.
Verklaring van de bovenstaande code: In het voorbeeld selecteren we met behulp van id. De id hier is Selector. Voor de methode querySelector () geven we de id door, deze controleert op de specifieke id-naam in het programma. Nu is de tag gevonden die dezelfde id-naam heeft als vermeld. Door gebruik te maken van de diepte-eerste pre-order doorgang van het document wordt het matchen van het eerste element gedaan. Het element in het voorbeeld dat de id-naam als selector bevat, is de alineatag. De methode querySelector () haalt de alineatag op en past de specifieke wijzigingen op de inhoud toe volgens de genoemde code.
Uitgang 1: Voordat u op de knop "klik op mij" klikt, is de inhoud van de alineatag "Dit is een ap-element met id =" selector ".
Uitgang 2: Na klikken op de knop "klik op mij" wordt de inhoud van de alineatag gewijzigd in "Wijzigen in de tekst".
Gebruik van jQuery querySelector
Hieronder staan de twee punten die het gebruik van querySelector toelichten:
- De codes van jQuery zijn preciezer, korter en eenvoudiger dan de standaard JavaScript-codes. Het kan verschillende functies uitvoeren.
- De aanroep van querySelector () retourneert het eerste element terwijl het er een kiest, dus het is sneller en ook korter om te schrijven.
Aanbevolen artikelen
Dit is een handleiding voor jQuery querySelector. Hier bespreken we wat jQuery querySelector is, inleiding tot querySelector, syntaxis en het voorbeeld van Jquery met behulp van type. U kunt ook onze andere gerelateerde artikelen doornemen voor meer informatie -
- jQuery-evenementen
- Gebruik van JQuery
- jQuery-methoden
- Hoe Jquery te installeren?
- HTML-evenementen
- Top 5 HTML-gebeurtenisattributen met voorbeelden
- Gooien versus Gooien | Top 5 verschillen die u moet weten
- Handleiding voor voorbeelden van JQuery-voortgangsbalk