Introduktion till JQuery Selectors och deras t
När du arbetar med JavaScript kommer du ofta att befinna dig i en situation där du behöver hitta och ändra något innehåll på sidan. I dessa fall måste du använda väljarsupporten i JQuery. JQuery gör det ganska enkelt att hitta delar av sidan baserat på deras typer, värden, attribut osv. Dessa element är baserade på CSS-väljare och när du väl har haft lite övning kommer du att se att hitta element på sidorna är en cakewalk. Beroende på deras användning kan vi klassificera olika typer av JQuery-väljare i olika typer. Låt oss ta en titt på några av de mest använda väljarna.
Använd en väljare
Följande är en syntax för en JQuery Selector:
- $ (Selector) .methodname ():
Om du behöver kan du kedja flera väljare genom att lägga till en “.” Mellan metoderna.
- $ (väljare) .method1 () Metod2 () method3 ()..
Typer av väljare i JQuery
Här är de olika typerna av väljare i JQuery
1) Grundläggande JQuery-väljare
Vi kan välja sidelement med deras ID, klass eller deras tagnamn. Vid behov kan en kombination av dessa också användas. Följande är några grundläggande väljare:
- : header Selector - Detta är en grundläggande väljartyp som låter oss hitta element med deras HTML-rubriker. För att göra detta använder vi ordlistan $ ("sektion h1, sektion h2, sektion h3") väljare eller vi kan också använda den mycket kortare $ ("sektion: rubrik") väljaren.
- : target Selector - Den här väljaren hittar mål på sidan eller hash för dokumentets URI. Om till exempel URI på sidan är "https://example.com/#test". Därefter väljer valet $ (“h2: target”) elementet
.
- : animated Selector - Den här väljaren används för att hitta alla element som har animering. Tänk på att för animeringen som ska väljas måste den köras när väljaren körs.
2) Väljare baserade på index
JQuery har sin egen uppsättning indexbaserade väljare som använder nollbaserad indexering. Följande är några exempel:
- : eq (k) Selector - Denna väljare returnerar elementet vid index k. Det stöder också negativa indexvärden.
- : lt (k) Selector - Denna väljare returnerar alla element som har index mindre än k. Precis som ovan accepteras också negativa värden
- : gt (n) Selector - Denna väljare är similor: lt (k) Selector förutom att den fungerar för indexvärde större än eller lika med k.
3) Barnväljare
Du kan använda JQuery för att välja barn av alla element baserat på deras typ eller index.
- : första barn - Denna väljare returnerar alla element som är deras förälders första barn.
- : first-of-type - Denna JQuery-väljare används för att välja alla element som är det första syskon
- : last-child - Som namnet antyder kommer denna väljare att välja förälders sista barn.
- : last-of-type - Detta kommer att välja alla barn som är sist av sin typ hos en förälder. Om det finns fler än en förälder väljer den flera element.
- : endast-av-typ - Vi kan använda väljaren endast av typen för att hitta alla element som har syskon av samma typ på sidan.
- : enda barn - I situationer där du behöver hitta och välja element som är det enda barnet till deras förälder kan du använda den här väljaren. Om en förälder på sidan har mer än ett barn kommer den att ignoreras.
4) Attributväljare
Element kan väljas baserat på deras attribut, följande är några vanliga attributväljare:
- $ ("(Attribut | = 'valuehere')") - "Attributet innehåller prefixväljare" väljer alla element med attribut där värdet är lika med eller börjar med den givna strängen följt av ett bindestreck.
- $ ("(Attribut ~ = 'valuehere')") - Detta returnerar alla element med attribut där värdet innehåller ett givet ord avgränsat av mellanslag.
- $ ("(Attribut * = 'valuehere')") - Det kommer att välja element där värdet innehåller den givna substrängen. Så länge värdet stämmer med spelar ingen roll
5) Innehållsväljare
Som namnet antyder används dessa JQuery-väljare för att hitta och välja innehåll inuti element.
- : innehåller (text) - Detta används för att välja element som har ett specifikt textinnehåll inuti. En sak att tänka på när du använder den här väljaren är att testet här är skiftlägeskänsligt.
- : has (selector) - Det kommer att returneras med element som har minst ett element inuti som matchar den angivna väljaren. För ett exempel kommer $ ("sektion: har (h1)") tillbaka med alla sektioner som har ett h1-element.
- : tom - Denna väljare returnerar elementen på sidan som inte har några barn inklusive textnoder.
- : förälder - Denna väljare används för att välja alla element på webbsidan som har minst en underordnad nod. Du kan betrakta det som en invers till: tom JQuery Selector.
6) Hierarkiväljar
- $ ("Förfädernas ättling") - Det används för att välja alla ättlingar till en förälder. Efterkommaren i vårt fall kan vara ett barn, barnbarn och så vidare.
- $ ("Förälder> barn") - Detta används i de fall där vi bara behöver välja en viss förälders direkta barn.
- $ ("Föregående + nästa") - Om vi måste välja alla element som matchar "nästa" väljaren och som har överordnade "föregående". De valda elementen fortsätter också omedelbart av "föregående" som är syskon.
7) Synlighetsväljare
Två väljare: synliga och: dolda finns också tillgängliga i JQuery. Dessa kan användas för att hitta synliga eller dolda element på webbsidan respektive. Alla element på webbsidan betraktas som dolda om:
- Displayen är korrekt inställd på ingen.
- Dess bredd och höjd definieras noll.
- Den har typ = dold som nämns i formelementet.
- Alla förfäder till elementet är redan dolda.
Tänk på att även om ett element har opacitet inställt som Noll, kommer det fortfarande att betraktas som synligt eftersom det fortfarande tar plats.
8) Formväljare
För att spara tid och besvär har JQuery sorteringsversioner av väljare för inmatningselement i webbformer.
För ett exempel, medan $ ("knapp, input (typ = 'knapp')") kommer att arbeta för att välja knappen på sidan, kan vi använda $ (": knappen") för att göra det snabbt.
På liknande sätt kan vi använda $ (“: radio”) för att välja alternativknappen.
Slutsats - Typer av väljare i JQuery
Väljare är en av de viktiga funktionerna i JQuery, valet på JavaScript är inte lika intuitivt och robust med tillägg av väljare via JQuery, programmering för webben har blivit enklare.
Rekommenderade artiklar
Detta är en guide till typer av väljare i JQuery. Här diskuterar vi de olika typerna av JQuery Selectors med Syntax. Du kan också titta på följande artiklar för att lära dig mer-
- jQuery Methods
- jQuery-alternativ
- Användningar av JQuery
- Vad Javascript kan göra?
- jQuery querySelector
- Guide till exempel på JQuery Progress Bar