Share
Selektorer er av vital betydning. De fleste jQuery-metodene krever at en hvilken som helst elementseleksjon ikke skal brukes. For eksempel vedlegger en klikk Hendelse til en knapp krever at du velger knappen først.
Siden vanlige jQuery selectors er basert på eksisterende CSS selectors, kan du være godt kjent med dem. Det er imidlertid også noen få selektorer som ikke brukes så mye. I denne opplæringen vil jeg fokusere på disse mindre kjente, men viktige velgere.
Denne velgeren kalles med rette universellvelgeren fordi den velger alle elementene i dokumentet, inkludert , , >
Accentsconagua
$ ("section *") // Velger alle etterkommere $ ("section> *") // Velger alle direkte etterkommere $ ("section> *> *" * a ") // Velger 3. nivå linkerDenne velgeren er ekstremt langsom hvis den brukes i kombinasjon med andre elementer. Men alt avhenger av hvordan väljeren brukes og hvilken nettleser den utføres i. I Firefox, $ ("# selector> *"). finn ("li") er tregere enn $ ("# selector> ul"). finn ("li"). Interessant utfører Chrome $ ("# selector> *"). finn ("li") litt raskere. Alle nettlesere utfører $ ("# selector *"). finn ("li") langsommere enn $ ("# selector ul"). finn ("li"). Jeg foreslår at du sammenligner ytelsen før du bruker denne velgeren.
Her er en demo som sammenligner utførelseshastigheten til alle velgerne.
Du kan bruke : animert velgeren for å velge alle elementer som animasjonen fortsatt er i gang når denne velgeren kjører. Det eneste problemet er at det bare vil velge elementer som ble animert ved hjelp av jQuery. Denne väljeren er en jQuery-utvidelse, og drar ikke nytte av ytelsesforsterkningen som følger med den innfødte querySelectorAll () metode.
Du kan heller ikke oppdage CSS-animasjoner ved hjelp av jQuery. Du kan imidlertid oppdage når animasjonen slutter å bruke animationend begivenhet.
Ta en titt på følgende demonstrasjon.
I demonstrasjonen ovenfor, bare de merkelige div elementene er animert før de utføres . $ ( ": Animert") css ( "bakgrunn", "# 6F9");. Som et resultat, bare de div elementene endres til grønt. Like etter det kalder vi animasjonsfunksjonen på resten av div elementer. Hvis du klikker på knapp nå, alt div elementene skal bli grønne.
Vanlige attributtvelgere oppdager vanligvis om et attributt med et gitt navn eller en verdi eksisterer. På den annen side, [Attr! = "Verdi"] velger velger alle elementer som ikke har det angitte attributtet eller hvor attributtet eksisterer, men er ikke lik en bestemt verdi. Det tilsvarer : Ikke ([attr = "verdi"]). I motsetning til [Attr = "verdi"] , [Attr! = "Verdi"] er ikke en del av CSS-spesifikasjonen. Som et resultat, bruker $ ( "Css-velgeren"). Ikke ( "[attr = 'verdi']") kan forbedre ytelsen i moderne nettlesere.
Utsnittet nedenfor legger til en mismatch klasse for alle li elementer hvis data-kategorien Attributtet er ikke lik css. Dette kan være nyttig under feilsøking eller angi riktig attributtverdi ved hjelp av JavaScript.
$ ("li [data-category! = 'css']"). hver (funksjon () $ (dette) .addClass ("mismatch"); // legger til en feilklasse for å filtrere ut selektorer. mismatch "). attr (" data-category ", attributeValue); // Angi riktig attributt verdi);I demonstrasjonen går jeg gjennom to lister og korrigerer verdien av kategoriattributtene til elementene.
Denne velgeren brukes til å velge alle elementer som inneholder den angitte strengen. Den matchende strengen kan være direkte inne i det berørte elementet eller i noen av sine etterkommere.
Eksempelet nedenfor skal hjelpe deg med å få en bedre forståelse av denne väljeren. Vi vil legge til en gul bakgrunn for alle forekomster av uttrykket Lorem Ipsum.
La oss begynne med oppslaget:
Lorem Ipsum er rett og slett dummy tekst av utskrift og typesetting industrien. Lorem Ipsum har vært bransjens standard dummy-tekst helt siden 1500-tallet, da en ukjent skriver tok et typegalleri og scrambled det for å lage en type prøvebok. Det har overlevd ikke bare fem århundrer, men også spranget i elektronisk typegodkjenning, gjenværende i det vesentlige uendret.
Det ble popularisert på 1960-tallet med utgivelsen av Letraset-ark som inneholdt Lorem Ipsum-passasjer, og nyere med desktop publishing-programvare som Aldus PageMaker, inkludert versjoner av Lorem Ipsum.
Lorem Ipsum Wikipedia LinkDette lorem ipsum bør ikke utheves.
Vær oppmerksom på at uttrykket Lorem Ipsum skjer i syv forskjellige steder. Jeg har bevisst brukt små caps i en av disse tilfellene for å vise at matchingen er saksfølsom.
Her er JavaScript-koden for å markere alle kampene:
$ (dette). html (). erstatt (/ Lorem Ipsum / g, "(Lorem Ipsum)Lorem Ipsum"));;Sitatene rundt strengen er valgfrie. Dette innebærer at begge deler $ ("seksjon: inneholder ('Lorem Ipsum')") og $ ("seksjon: inneholder (Lorem Ipsum)") vil være gyldig i koden ovenfor. Jeg målretter bare seksjonselementet, så Lorem Ipsum-teksten inne i listelementene skal forbli uendret. Videre, på grunn av ikke-matchende tilfelle, teksten inne i den andre seksjon elementet bør ikke utheves heller. Som du kan se i denne demoen, er dette akkurat hva som skjer.
Denne väljeren velger alle elementer som inneholder minst ett element som samsvarer med en gitt väljare. Selektoren som må tilpasses, trenger ikke å være et direkte barn. : Er () er ikke en del av CSS-spesifikasjonen. I moderne nettlesere bør du bruke $ ( "Pure-css-velgeren"). Har (velger) i stedet for $ ( "Pure-css-velgeren: har (velger)") for bedre ytelse.
En mulig anvendelse av denne selektoren er manipulering av elementer som inneholder et spesifikt element inne i dem. I vårt eksempel vil jeg endre fargen på alle listelementer som inneholder en link inne i dem.
Dette er oppslaget for demonstrasjonen:
Her er JavaScript-koden for å endre fargen på listelementene:
$ ("li: har (a)"). hver (funksjon (indeks) $ (dette) .css ("farge", "crimson"););Logikken bak denne koden er ganske enkel. Jeg sløyfe gjennom alle listelementene som inneholder en lenke og setter fargen til crimson. Du kan også manipulere teksten inne i listelementene eller fjerne dem fra DOM. Jeg er sikker på at denne velgeren kan brukes i mange andre situasjoner. Sjekk ut en live versjon av denne koden på CodePen.
Foruten CSS velgerne liker : N-te-child (), jQuery har også sitt eget sett med indeksbaserte velgere. Disse valgene er : Eq (indeks), : Lt (indeks), og : Gt (indeks). I motsetning til CSS-baserte selektorer bruker disse velgerne nullbasert indeksering. Dette innebærer at mens : N-te-barn (1) vil velge det første barnet, : Likning (1) vil velge det andre barnet. For å velge det første barnet må du bruke : Eq (0).
Disse valgene kan også akseptere negative verdier. Når negative verdier er angitt, blir tellingen gjort bakover med start fra det siste elementet.
: Lt (indeks) Velger alle elementene som er på en indeks mindre enn den angitte verdien. For å velge de tre første elementene, vil du bruke : Lt (3). Dette skyldes at de tre første elementene har henholdsvis indeksverdier 0, 1 og 2. Ved å bruke en negativ indeks velges alle verdier før elementet vi nådde etter å ha talt bakover. på samme måte, : Gt (indeks) Velger alle elementer med indeks som er større enn den angitte verdien.
: lt (4) // Velger de fire første elementene: lt (-4) // Velger alle elementer i tillegg til siste 4: gt (4) // Velger alle elementer i tillegg til første 5: gt (-4) // Velger de tre siste elementene : gt (-1) // Velger ingenting: eq (4) // Velger femte element: eq (-4) // Velger fjerde element fra sist
Prøv å klikke på ulike knapper i demoen for å få bedre forståelse av indeksvelgerne.
jQuery definerer mange selektorer for enkelt valg av formelementer. For eksempel, :knapp velgeren vil velge alle knappelementer samt elementer med typeknapp. på samme måte, : boksen vil markere alle innspillingselementer med type avkrysningsboks. Det er selektorer definert for nesten alle inngangselementer. Vurder skjemaet nedenfor:
Jeg har laget to tekstelementer her og fire boksene. Skjemaet er ganske grunnleggende, men det bør gi deg en ide om hvordan skjemavalgere jobber. Vi teller antall tekstelementer ved hjelp av :tekst velg og oppdater også teksten i den første tekstinngangen.
var textCount = $ (": text"). lengde; $ ("tekstelementer"). tekst ('Tekstinnganger:' + textCount); $ (": text"). eq (0) .val ('Lagt til programmatisk!');jeg bruker :tekst for å velge alle tekstinnganger og deretter lengdenmetoden for å beregne tallet. I den tredje setningen bruker jeg tidligere diskutert : EQ () velgeren for å få tilgang til det første elementet og senere sette verdien sin.
Husk at fra jQuery 1.5.2, :tekst avkastning ekte for elementer som ikke har noen type attributt angitt.
Ta en titt på demoen.
Hvis du ønsker å velge alle overskriftselementene på en nettside, kan du bruke den korte $ ( ": Header") versjon i stedet for det verbose $ ("h1 h2 h3 h4 h5 h6") velgeren. Denne velgeren er ikke en del av CSS-spesifikasjonen. Som et resultat kan bedre ytelse oppnås ved å bruke en ren CSSvelger først og deretter bruke .filter ( ": header").
Anta for eksempel at det er en artikkel element på en nettside og den har tre forskjellige overskrifter. Nå kan du bruke $ ("artikkel: header") i stedet for $ ("artikkel h1, artikkel h2, artikkel h3") for korthet. For å gjøre det enda raskere, kan du bruke $ ( "Artikkel") filter. ( ": Header"). På denne måten har du det beste fra begge verdener.
For å nummerere alle overskriftselementene, kan du bruke følgende kode.
$ ("artikkel: header"). hver (funksjon (indeks) $ (dette) .text ((indeks + 1) + ":" + $ (dette) .text ()); // legger til tall til overskrifter );Prøv denne tilhørende demoen.
I denne opplæringen diskuterte jeg uvanlige selektorer som du kanskje støter på når du bruker jQuery. Mens de fleste av disse velgerne har alternativer som du kan bruke, er det fortsatt godt å vite at disse seleksjonene eksisterer.
Jeg håper du har lært noe nytt i denne opplæringen. Hvis du har noen spørsmål eller forslag, vennligst gjør kommentarer.
