JQuery Selectors | Forklart

JavaScript brukes ofte til å manipulere HTML -elementene på en webside ved å få tilgang til dem ved hjelp av DOM (Document Object Model), den kan til og med brukes til å vise animasjoner og andre effekter som et resultat av en viss handling utført av brukeren. For å gjøre alt dette, trenger JavaScript først en henvisning til HTML -elementet som vi ønsker å manipulere.

Å velge elementene på HTML -nettsiden kan ta noen få kodelinjer i JavaScript, men med jQuery blir koden kortfattet og ser veldig lesbar. jQuery støtter valgene av nesten alle velgere definert i CS3, samt gir noen innebygde tilpassede velgere også.

Legge til jQuery på HTML -siden vår

For å kunne jQuery i prosjektet vårt, må vi først importere jQuery ved å legge en lenke til en jQuery -fil i skriptetoden. Den mest effektive metoden for å importere jQuery er å bruke en Google CDN -hostet jQuery, i HTML -filen Bruk følgende linjer i skriptetoden:

Fabrikkfunksjonen

JQuery Selector -funksjonene blir ofte referert til som fabrikkfunksjonen, den starter med et dollarskilt “$” etterfulgt av runde parentes eller parentes “()”. Denne fabrikkfunksjonen brukes til å referere til et element på websiden, og du kan legge til en hendelse ved å bruke en prikkoperatør. For eksempel:

$ (dokument).klar (funksjon ()
// inne i funksjonen til funksjonen

);

JQuery Selectors

JQuery -velgere eller fabrikkfunksjoner fungerer på tre store velgere, nemlig: Tag -ID, tagnavn, tag -klasse.

• Tagnavn: Dette brukes til å velge navnet på elementet fra kuppelen, for eksempel hvis du vil velge alle H1 -tagger.
• Tag -klasse: Dette brukes til å velge et element med en viss klasse; For eksempel, hvis du vil velge et element med klassen "klassen min" du kan bruke $ ('.klassen min')
• Tag -ID: Dette brukes til å velge et element med en spesifikk ID; For eksempel å velge et element med en ID av "myid" du kan bruke $ ('#myid')

Velge elementer ved navn

For å vise frem bruken av jQuery -velgere kommer vi til å først gå over utvalget av elementer ved hjelp av tagnavnet. Anta at du vil velge alle

En P -tag

Nok en P -tag

Enda en p -tag

Du bør se følgende utdata på nettsiden:

Å manipulere

Tagger Bruk følgende skriptkode:

$ (dokument).klar (funksjon ()
$ ("P").CSS ("bakgrunn", "gul");
);

Med de ovennevnte linjene vil utgangen se slik ut

Vi har til og med filtervelgere; Anta at vi bare vil velge den siste $ (dokument).klar (funksjon ()
$ ("P: Last").CSS ("bakgrunn", "gul");
);

Dette vil gi oss følgende utdata:

Som du ser, kunne vi velge på en spesifikk

stikkord Bruke den filtrerte navnelektoren.

Velge elementer etter ID

For å demonstrere ID -velgerne, har vi følgende linjer i HTML -filen:

En P -tag med ID Hallo

Nok en P -tag

Enda en p -tag

Som du ser, den første

Tag har ID "Hallo", For å manipulere dette elementet ved hjelp av ID -en, kan vi bruke følgende skriptkode:

Som du kan se på bildet over, kunne vi velge et element ved å bruke IDen og manipulere stylingegenskapen ved hjelp av jQuery ID -velger.

Velge et element etter klasse

For å velge et element ved hjelp av klassen, bruker vi punktum Før navnet på klassen i fabrikkfunksjonen, for å kunne demonstrere bruken JQuery Class -velgeren, la oss gi en av P -taggene noen klasse. HTML -koden vår vil se slik ut:

En P -tag med ID Hallo

Nok en P -tag

Enda en p -tag, men med noen klasse

For å velge klassen "MyClass" og gi den en bakgrunn av rødt, bruker vi følgende skriptkode:

$ (dokument).klar (funksjon ()
$ (".klassen min").CSS ("bakgrunn", "rød");
);

Med ovennevnte kode vil du se følgende utdata:

Som du ser, kunne vi manipulere elementet med klassen "MyClass" ved å bruke jQuery Class Selectors.

Konklusjon

JavaScripts mest berømte biblioteksjQuery er svært nyttig og tidsbesparende når det gjelder å manipulere elementer på en webside, den eneste pre-reqen av å bruke jQuery i et prosjekt er å legge til en lenke til jQuery-biblioteket ved å bruke en Google CDN-hostet jQuery. JQuery består av en funksjon som kalles fabrikkfunksjonen som lar brukere velge elementer på websiden og manipulere egenskapene. Fabrikkfunksjonen '$ (")' fungerer på 3 grunnleggende velgere som er nemlig, ID -velger, Navnvelger og klassevelger.