Vad är jQuery querySelector?
jQuery querySelector väljer eller hitta ett DOM-element (dokumentobjektmodell) i ett HTML-dokument. JQuery tillåter oss att manipulera HTML-elementen. Det används för att välja ett eller flera HTML-element baserat på id, namn, typer, attribut, klass, attributvärden etc. Det är baserat på befintliga CSS-väljare.
Introduktion till frågaSelektor
Metoden querySelector () returnerar bara det första elementet som matchar en eller flera specifika CSS-väljare i dokumentet. Om ett ID i dokumentet används mer än en gång returnerar det det första matchande elementet.
Syntax av frågaSelektor
Nedan är syntaxen för frågaSelektor:
- querySelector (CSS-väljare)
- Det returnerar det första elementet som matchar de angivna väljarna.
- För att returnera alla element som matchar använder vi metoden querySelectorAll ().
- De CSS-väljare som vi passerar ska vara av strängtyp.
- Det är obligatoriskt att passera CSS-väljare.
- Strängen som vi passerar måste vara en giltig CSS-väljare.
- Om den godkända strängen är ogiltig kastas en SYNTAX_ERRexception.
- Om ingen matchning hittas kommer den tillbaka null.
- Matchningen av det första elementet görs med hjälp av en första djupgående förhandsbeställning av dokumentet.
- Anger en eller flera CSS-väljare för att matcha elementet.
- För flera väljare, separera med komma.
- Tecken som inte ingår i standard CSS-syntax måste rymmas med ett backslash-tecken.
Exempel för frågaSelector () Metod
Nedan är exemplen på querySelector () -metoder:
I jQuery kan du välja element på en sida med många olika egenskaper för elementet de är Typ, Klass, ID, Attributbesittning, Attributvärden etc. Nedan är exemplet på Jquery med hjälp av typ.
Exempel 1 - Välja efter typ
1. Följande sökväljare innehåller två <a>
Förklaring av koden ovan: I det här exemplet kan vi observera att vi har använt två ankaretiketter och inuti ankaretiketten har vi passerat hyperlänken till två bilder. Genom att använda querySelector (“a”). Style.backgroundColor = “red”; vi har skickat ankaretiketten ("a") till frågeställningen. I metoden querySelector () om vi passerar flera väljare kommer det att returnera det första elementet som matchar de angivna väljarna. Även om den innehåller två ankare taggar den första ankaren taggen som hittas, tillämpade sin stil.backgroundColor = "röd"; till endast för första ankaretiketten.
Output 1: Innan du klickar på knappen ("Click me").
Output 2: Efter att ha klickat på knappen ("Klicka på mig") ändras blommans bakgrundsfärg till "röd".
Output 3: När du klickar på hyperlänkarna öppnas respektive bilder.
2. Denna frågaSelektor innehåller också två Men i exemplet nedan har jag ändrat bildsekvensen. Jag har behållit öknen hyperlänken först sedan hyperlänken till blomman andra.
Förklaring av koden ovan: I det här exemplet kan vi också observera att vi har använt två ankaretiketter och inuti ankaretiketten har vi passerat hyperlänken till två bilder. Genom att använda querySelector (“a”). Style.backgroundColor = “red”; vi har överfört ankaretiketten (“a”) till frågefunktionen. Den här gången i fråganSelektor () kommer den att ta reda på hyperlänken ”Desert” först när vi ändrade sekvensen. Även om den innehåller två ankare taggar den första ankaren taggen som hittas, tillämpade sin stil.backgroundColor = "röd"; till endast för första ankaretiketten.
Output 1: I utgången kan vi observera att den första bilden är Desert. Så på grund av metoden querySelector () ändrades bakgrundsfärgen för öken till röd.
Utgång 2: När du klickar på hyperlänken öppnas ökenbilden.
Output 3: När du klickar på blommans hyperlänk öppnas blommabilden.
Exempel 2 - Välj efter klass
I det här exemplet nedan väljer vi med klassnamnet.
Förklaring av koden ovan: I exemplet ovan använder vi klassnamnet och här är klassnamnet Selector. Samma klassnamn ges för både h2 (rubriktagg) och stycketaggen. För metoden querySelector () överför vi klassnamnet det kommer att kontrollera för det specifika klassnamnet i programmet. Nu har de hittat de taggar som har samma klassnamn som nämnts. Genom att använda den första djupförhandsbeställningen av dokumentet matchas det första elementet. Det första elementet i exemplet som innehåller klassnamnet som Selector är h2 (rubriktagg). Metoden querySelector () hämtar h2-taggen och efter style.backgroundColor tillämpar den särskilda bakgrundsfärgen på h2-taggen.
Output 1: Innan du klickar på knappen ("klicka på mig") ändrar inte h2-taggens innehåll bakgrundsfärgen till blått.
Output 2: Efter att ha klickat på knappen ("klicka på mig") ändrar h2-taggens innehåll bakgrundsfärgen till blått.
Exempel 3 - Välja med ID
I det här exemplet nedan väljer vi med hjälp av id.
Förklaring av koden ovan: I exemplet väljer vi med id id idet här är Selector. För metoden querySelector () överför vi id: et kommer det att kontrollera för det specifika id-namnet i programmet. Nu har den hittat taggen som har samma id-namn som nämnts. Genom att använda den första djupförhandsbeställningen av dokumentet matchas det första elementet. Elementet i exemplet som innehåller ID-namnet som Selector är stycketaggen. Metoden querySelector () hämtar stycketaggen och tillämpar de specifika ändringarna på innehållet enligt koden som nämns.
Output 1: Innan du klickar på knappen "klicka på mig" kommer innehållet i stycketaggen att vara "This is ap element with id =" selector ".
Output 2: Efter att ha klickat på knappen "klicka på mig" kommer innehållet i stycketaggen att ändras till "Ändra i texten".
Användningar av jQuery querySelector
Nedan är de två punkterna som förklarar användningen av frågaSelektor:
- Koderna för jQuery är mer exakta, kortare och enklare än de vanliga JavaScript-koderna. Den kan utföra en mängd olika funktioner.
- Samtalet till querySelector () returnerar det första elementet när det väljer ett, så det är snabbare och också kortare att skriva.
Rekommenderade artiklar
Detta är en guide till jQuery querySelector. Här diskuterar vi vad som är jQuery querySelector, introduktion till querySelector, syntax och exemplet på Jquery med hjälp av typ. Du kan också gå igenom våra andra relaterade artiklar för att lära dig mer -
- jQuery-evenemang
- Användningar av JQuery
- jQuery Methods
- Hur installerar Jquery?
- HTML-händelser
- Topp 5 HTML-händelseattribut med exempel
- Kast vs kastar | Topp 5 skillnader du borde veta
- Guide till exempel på JQuery Progress Bar