Typer valg i JQuery - Lær de forskjellige typene JQuery-velgere

Innholdsfortegnelse:

Anonim

Introduksjon til JQuery Selectors og deres t

Når du jobber med JavaScript, vil du ofte befinne deg i en situasjon der du trenger å finne og endre noe innhold på siden. I disse tilfellene må du bruke velgerstøtten i JQuery. JQuery gjør det ganske enkelt å finne elementer på siden basert på deres typer, verdier, attributter osv. Disse elementene er basert på CSS-velgere, og når du først har hatt noe praksis, vil du se at det å finne elementer på sidene er en kakevalk. Avhengig av bruken av dem, kan vi klassifisere forskjellige typer JQuery Selectors i forskjellige typer. La oss ta en titt på noen av de mest brukte velgerne.

Ved hjelp av en velger

Følgende er en syntaks for en JQuery Selector:

  • $ (Selector) .methodname ():

Hvis du trenger, kan du kjede flere velgere ved å legge til en “.” Mellom metodene.

  • $ (velger) .method1 () method2 () method3 ()..;

Typer valg i JQuery

Her er de forskjellige typene Selector i JQuery

1) Grunnleggende JQuery-velgere

Vi kan velge sideelementer ved å bruke deres ID, klasse eller taggenavnet. Om nødvendig kan en kombinasjon av disse også brukes. Følgende er noen grunnleggende velgere:

  • : header Selector - Dette er en grunnleggende velgertype som lar oss finne elementer med HTML-overskriftene. For å gjøre dette bruker vi verbose $ (“seksjon h1, seksjon h2, seksjon h3”) -velger, eller vi kan også bruke den mye kortere $ (“seksjonen: header”) -velgeren.
  • : target Selector - Denne velgeren finner mål på siden eller hasjen for dokumentets URI. For eksempel hvis URI på siden er "https://example.com/#test". Deretter velger velgeren $ (“h2: target”) elementet

    .

  • : animated Selector - Denne velgeren brukes til å finne alle elementer som har animasjon. Husk at for animasjonen som skal velges, den må kjøres når velgeren kjøres.

2) Velgere basert på indeks

JQuery har sitt eget sett med indeksbaserte velgere som bruker nullbasert indeksering. Følgende er noen eksempler:

  • : eq (k) Selector - Denne velgeren returnerer elementet ved indeks k. Den støtter negative indeksverdier også.
  • : lt (k) Selector - Denne velgeren returnerer alle elementer som har indeks mindre enn k. Akkurat som ovenfor aksepteres også negative verdier
  • : gt (n) Selector - Denne velgeren er similor: lt (k) Selector bortsett fra at den fungerer for indeksverdi større enn eller lik k.

3) Barnevalg

Du kan bruke JQuery til å velge barn av alle elementer basert på deres type eller indeks.

  • : førstebarn - Denne velgeren returnerer alle elementene som er foreldrenes første barn.
  • : first-of-type - Denne JQuery-velgeren brukes til å velge alle elementene som er den første søsken
  • : last-child - Som navnet antyder, vil denne velgeren velge det siste barnet til forelderen.
  • : last-of-type - Dette vil velge alle barn som er sist av sin type hos en forelder. Hvis det er mer enn en forelder, vil den velge flere elementer.
  • : bare-av-typen - Vi kan bruke valg av bare-type for å finne alle elementer som har søsken av samme type på siden.
  • : eneste barn - I situasjoner der du trenger å finne og velge elementer som er det eneste barnet til forelderen, kan du bruke denne velgeren. Hvis en forelder på siden har mer enn ett barn, vil den bli ignorert.

4) Attributtvelgere

Elementer kan velges basert på attributtene deres. Følgende er noen vanlige attributtvelgere:

  • $ ("(Attributt | = 'valuehere')") - "Attributtet inneholder prefiksvelger " velger alle elementer med attributter der verdien er lik eller starter med den gitte strengen etterfulgt av bindestrek.
  • $ ("(Attributt ~ = 'valuehere')") - Dette returnerer alle elementer med attributter der verdien inneholder et gitt ord avgrenset av mellomrom.
  • $ ("(Attributt * = 'valuehere')") - Den vil velge elementer der verdien inneholder den gitte understrengen. Så lenge verdien samsvarer, vil ikke plasseringen gjøre noe

5) Innholdsvalgere

Som navnet antyder, brukes disse JQuery Selectors for å finne og velge innhold i elementer.

  • : inneholder (tekst) - Dette brukes til å velge elementer som har et spesifisert tekstinnhold inne. En ting du må huske på når du bruker denne velgeren, er at testen her er store og små bokstaver.
  • : has (selector) - Den kommer tilbake med elementer som har minst ett element inni som samsvarer med den spesifiserte velgeren. For et eksempel vil $ ("seksjon: har (h1)" returnere med alle seksjoner som har et h1-element.
  • : tom - Denne velgeren vil returnere elementene på siden som ikke har noen barn, inkludert tekstnoder.
  • : foreldre - Denne velgeren brukes til å velge alle elementene på nettsiden som har minst en underordnet node. Du kan betrakte det som en invers til: tom JQuery Selector.

6) Hierarkietselgere

  • $ ("Stamfar etterkommer") - Det brukes til å velge alle etterkommerelementene til en forelder. Etterkommeren i vårt tilfelle kan være et barn, barnebarn og så videre.
  • $ ("Foreldre> barn") - Dette brukes i tilfeller hvor vi bare trenger å velge det direkte barnet til en bestemt forelder.
  • $ (“Forrige + neste”) - I tilfelle vi må velge alle elementene som samsvarer med “neste” -velgeren og som har overordnet “forrige”. De valgte elementene blir også umiddelbart videreført av "forrige", som er søsken.

7) Synlighetsvelgere

To velgere: synlig og: skjult er også tilgjengelig i JQuery. Disse kan brukes til å finne synlige eller skjulte elementer på hjemmesiden. Ethvert element på nettsiden anses som skjult hvis:

  • Displayet er riktig satt til ingen.
  • Bredden og høyden er definert null.
  • Den har type = skjult nevnt i formelementet.
  • Eventuelle forfedre til elementet er allerede skjult.

Husk at selv om et element har uklarhet som Zero, vil det fortsatt anses som synlig fordi det fortsatt vil ta plass.

8) Formvelgere

For å spare tid og problemer, har JQuery sorteringsversjoner av velgere for inngangselementer i webformer.

For eksempel, mens $ ("knapp, input (type = 'knapp')") vil arbeide for å velge knappen på siden, kan vi bruke $ (": knappen") for å gjøre det raskt.

På samme måte kan vi bruke $ (“: radio”) for å velge alternativknappen.

Konklusjon - Typer valg i JQuery

Velgere er en av de viktige funksjonene i JQuery, utvalget på JavaScript er ikke så intuitivt og robust med tillegg av velgere via JQuery, programmering for nettet har blitt enklere.

Anbefalte artikler

Dette er en guide til typer valg i JQuery. Her diskuterer vi de forskjellige typene av JQuery Selectors med Syntax. Du kan også se på følgende artikler for å lære mer-

  1. jQuery Methods
  2. jQuery-alternativer
  3. Bruk av JQuery
  4. Hva Javascript kan gjøre?
  5. jQuery querySelector
  6. Eksempel på JQuery Progress Bar