Typer af vælger i JQuery - Lær de forskellige typer af JQuery-vælgere

Indholdsfortegnelse:

Anonim

Introduktion til JQuery Selectors og deres t

Når du arbejder med JavaScript, vil du ofte befinde dig i en situation, hvor du har brug for at finde og ændre noget indhold på siden. I disse tilfælde skal du bruge valgstøtten i JQuery. JQuery gør det ganske let at finde elementer på siden baseret på deres typer, værdier, attributter osv. Disse elementer er baseret på CSS-vælgere, og når du først har haft noget praksis, vil du se, at det at finde elementer på siderne er en cakewalk. Afhængig af deres anvendelse kan vi klassificere forskellige typer JQuery-vælgere i forskellige typer. Lad os se på nogle af de mest brugte vælgere.

Brug af en vælger

Følgende er en syntaks for en JQuery-vælger:

  • $ (Selector) .methodname ():

Hvis du har brug for det, kan du kæde flere vælgere ved at tilføje en "." Mellem metoderne.

  • $ (selector) .method1 () metode2 () method3 ()..;

Typer af vælger i JQuery

Her er de forskellige typer vælger i JQuery

1) Grundlæggende JQuery-vælgere

Vi kan vælge sideelementer ved hjælp af deres ID, klasse eller deres tagnavn. Om nødvendigt kan en kombination af disse også bruges. Følgende er nogle grundlæggende vælgere:

  • : header Selector - Dette er en grundlæggende valgtype, der lader os finde elementer med deres HTML-overskrifter. For at gøre dette bruger vi ordret $ (“sektion h1, sektion h2, sektion h3”) -vælger, eller vi kan også bruge den meget kortere $ (“sektion: header”) -vælger.
  • : target Selector - Denne vælger finder mål på siden eller hash for dokumentets URI. For eksempel, hvis URI på siden er "https://example.com/#test". Derefter vælger vælgeren $ (“h2: target”) elementet

    .

  • : animeret selector - Denne vælger bruges til at finde alle elementer, der har animation. Husk, at den animation, der skal vælges, skal køre, når vælgeren køres.

2) Valgmaskiner baseret på indeks

JQuery har sit eget sæt indeksbaserede vælgere, der bruger nulbaseret indeksering. Følgende er nogle eksempler:

  • : eq (k) Selector - Denne vælger returnerer elementet ved indeks k. Det understøtter også negative indeksværdier.
  • : lt (k) Selector - Denne vælger returnerer alle elementer, der har indeks mindre end k. Ligesom ovenfor accepteres også negative værdier
  • : gt (n) Selector - Denne valg er similor: lt (k) Selector, bortset fra at den fungerer for indeksværdi større end eller lig med k.

3) Valg af børn

Du kan bruge JQuery til at vælge børn af ethvert element baseret på deres type eller indeks.

  • : førstebarn - Denne vælger returnerer alle elementer, der er deres forældres første barn.
  • : first-of-type - Denne JQuery-vælger bruges til at vælge alle elementer, der er det første søskende
  • : sidste barn - Som navnet antyder, vælger denne vælger det sidste barn af forælderen.
  • : last-of-type - Dette vælger alle børn, der er sidst af deres type i en forælder. Hvis der er mere end én forælder, vælger den flere elementer.
  • : only-of-type - Vi kan bruge den eneste type-vælger til at finde alle elementer, der har søskende af samme type på siden.
  • : eneste barn - I situationer, hvor du har brug for at finde og vælge elementer, der er det eneste barn fra deres forælder, kan du bruge denne vælger. Hvis en forælder på siden har mere end et barn, ignoreres det.

4) Attributvælger

Elementer kan vælges baseret på deres attributter, og følgende er nogle almindelige attributvælgere:

  • $ ("(Attribut | = 'valuehere')") - "Attributten indeholder præfiksvælger " vælger alle elementer med attributter, hvor værdien er lig med eller starter med den givne streng efterfulgt af en bindestreg.
  • $ ("(Attribut ~ = 'valuehere')") - Dette returnerer alle elementer med attributter, hvor værdien indeholder et givet ord afgrænset af mellemrum.
  • $ ("(Attribut * = 'valuehere')") - Det vil vælge elementer, hvor værdien indeholder den givne substring. Så længe værdien matcher, betyder placering ikke noget

5) Indholdsvælgere

Som navnet antyder, bruges disse JQuery Selectors til at finde og vælge indhold inde i elementer.

  • : indeholder (tekst) - Dette bruges til at vælge elementer, der har et specificeret tekstindhold inde. Én ting at huske på, når du bruger denne vælger, er, at testen her er store og små bogstaver.
  • : har (vælger) - Det vender tilbage med elementer, der har mindst et element indeni, der matcher den specificerede vælger. For et eksempel vil $ (“sektion: har (h1)” vende tilbage med alle sektioner, der har et h1-element.
  • : tom - Denne vælger returnerer elementerne på siden, der ikke har nogen børn inklusive tekstnoder.
  • : forælder - Denne vælger bruges til at vælge alle elementer på websiden, der har mindst en underordnet knude. Du kan betragte det som en invers til: tom JQuery Selector.

6) Hierarki-vælgere

  • $ ("Stamfar efterkommer") - Det bruges til at vælge alle efterkommerelementer fra en forælder. Efterkommeren i vores tilfælde kunne være et barn, barnebarn osv.
  • $ ("Forælder> barn") - Dette bruges i tilfælde, hvor vi kun behøver at vælge det direkte barn fra en bestemt forælder.
  • $ (“Forrige + næste”) - I tilfælde af at vi er nødt til at vælge alle elementer, der matcher “næste” -vælgeren, og som har overordnet “forrige”. De valgte elementer fortsættes også med det samme af "forrige", som er søskende.

7) Synlighedsvælgere

To vælgere: synlige og: skjulte er også tilgængelige i JQuery. Disse kan bruges til at finde synlige eller skjulte elementer på henholdsvis webside. Ethvert element på websiden betragtes som skjult, hvis:

  • Dens display er korrekt indstillet til ingen.
  • Dets bredde og højde er defineret nul.
  • Det har type = skjult nævnt i formelementet.
  • Alle forfædre til elementet er allerede skjult.

Husk, at selvom et element har opacitet indstillet som Nul, vil det stadig blive betragtet som synligt, fordi det stadig vil optage plads.

8) Form-vælgere

For at spare tid og besvær har JQuery sorteringsversioner af vælgere til inputelementer i webformer.

For eksempel, mens $ (“knap, input (type = 'knap')”) fungerer for at vælge knappen på siden, kan vi bruge $ (“: knap”) til at gøre det hurtigt.

Tilsvarende kan vi bruge $ (“: radio”) til at vælge alternativknappen.

Konklusion - Typer af valg i JQuery

Vælgere er en af ​​de vigtige funktioner i JQuery, valget på JavaScript er ikke så intuitivt og robust med tilføjelsen af ​​vælgere via JQuery, programmering til internettet er blevet lettere.

Anbefalede artikler

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

  1. jQuery-metoder
  2. jQuery-alternativer
  3. Brug af JQuery
  4. Hvad Javascript kan gøre?
  5. jQuery querySelector
  6. Vejledning til eksempler på JQuery Progress Bar