Slik bruker du filterfunksjoner i jQuery

Fortsetter jeg i vår jQuery-opplæring, vil jeg demonstrere filterfunksjoner med to eksempler, så viser jeg deg hvordan du endrer innholdets tekst til et objekt.

Hvis du har gått glipp av de to første delene av introduksjonen til jQuery-serien, må du huske å sjekke dem ut først, da de legger grunnlaget for fortsettelsen av trinn, tar vi i dette segmentet:

  • jQuery: Hvordan få objekter etter ID, klasse, tagg og attributt
  • Slik kommer du i gang med jQuery

En nedlasting av alle HTML-, CSS-stil-, bilde- og skriptfilene du må følge sammen med denne opplæringen, blir oppdatert for denne avbetalingen her.

Filterfunksjoner .filter (velger)

Når du vil redusere settet av matchede elementer til de som samsvarer med velgeren eller bestå funksjonens test, vil du bruke .filteret (velgeren), der velgeren er en streng som inneholder et uttrykk for å matche det gjeldende settet med elementer mot . Filterfunksjonen har også andre former, for eksempel:

  • .filter (funksjon (indeks)) - der en funksjon brukes som test for hvert element i settet
  • .filter (element) - der et element brukes til å matche gjeldende sett med elementer mot
  • .filter (jQuery-objekt) - der et eksisterende jQuery-objekt brukes til å matche gjeldende sett med elementer mot

Alle filtre begynner med en kolon, for eksempel: først, : sist, : jevn. Den korte listen over filterelementer nedenfor brukes til å avgrense treff med visse forhold som finnes i tabellen nedenfor:

Filter Beskrivelse
:først Velger det første matchede elementet i velgerens returnerte sett
:siste Velger den siste og eneste forekomsten av elementet som samsvarer med velgerens returnerte sett
:til og med Velger de jevnste elementene med en null-basert indeks i det matchede settet
:merkelig Velger de rare elementene med null-basert indeksering i det matchede settet
: Eq (indeks) Velg elementet som er lik den gitte indeksen n i det matchede settet
: Gt (indeks) Velg alle elementene som er større enn den gitte nullbaserte indeksen i det matchede settet
: Lt (indeks) Velg alle elementene som er mindre enn den gitte nullbaserte indeksen i det matchede settet
: animerte Velger alle elementer som for øyeblikket blir animert når velgeren kjøres
:Overskrift Velger alle toppelementer (H1 ... H6)
:ikke Velg alle elementene som ikke samsvarer med den valgte velgeren
: boksen Velg alle elementene som samsvarer med typen avkrysningsrute
: Inneholder (tekst) Velg en streng med tekst (store og små bokstaver)
:funksjonshemmet Velger alle elementer som er deaktivert
: aktivert Velger alle elementer som er aktivert
:fil Velger alle elementer av en bestemt filtype

I dette eksemplet vil jeg demonstrere filteret: jevnt og deretter: ulikt filter, der filteret: jevnt blir brukt til å legge til i en bakgrunnsstil til de jevnlig tilpassede listeelementene i en ikke ordnet liste, og: merkelig filter vil være brukes til å style bakgrunnen for hver rare rad i et bord, som også er kjent som "sebra" -bordeffekten.

Først vil vi demonstrere bruken av: jevn filtervelger med en bryter for å veksle bakgrunnsstilen for det matchede settet med elementer. Først vil vi legge til følgende HTML-kode til indeksen vår.html. Vi bygger fortsatt på den samme HTML-filen fra de to foregående installasjonene av jQuery-serien.

  • Vare 0
  • Punkt 1
  • Punkt 2
  • Punkt 3
  • Punkt 4
  • Punkt 5
  • Sak 6
  • Punkt 7
  • Og nå vil vi legge til følgende linjer med jQuery i dokumenthendelsesfunksjonen til index.html-filen:

     $ ('# list'). Klikk (funksjon () { 
     $ ('ul.itemlist li: even'). toggleClass ('even'); 
     }); 

    Deretter vil vi legge til følgende stiler i stilen.css-filen:

     #lister { 
     bredde: 400 piksler; 
     kant: 2px solid # C63; 
     padding: 5 px; 
     margin-top: 20 piksler; 
     } 
     .til og med { 
     bakgrunn: #CFC; 
     } 
    Sørg for å lagre filene, åpne deretter index.html-filen i nettleseren din, og klikk deretter på knappen Even Listed Items. Du vil se at de til og med listede varene nå er gjengitt med en lysegrønn bakgrunn; klikk igjen, og bakgrunnen går tilbake til ingen. Eksempellisten vises nedenfor i figur A og B som vist i Chrome 17.0.9 i:

    Figur A

    Figur B

    jQuery har mange andre velgere som kan brukes på forskjellige måter, for eksempel for automatisk å style tabeller med hver andre rad tildelt en annen styling, for eksempel bakgrunnsstil.

    Legg til denne jQuery-koden i dokumentets hendelsesbehandler innen området index.html:

     $ ('table.odd_row tr: odd'). addClass ('odd_row'); 

    Med denne stylingen lagt til stilene.css:

     tr.odd_row { 
     bakgrunn: #CDCDCD; 
     } 

    Legg til følgende utdrag i filen index.html, som vil produsere tabellen nedenfor med åtte rader:

     . 
     . 
    Rad 0KolonneKolonne
    Rad 1KolonneKolonne
     Hvis du følger kodingen av demonstrasjonene, må du huske å lagre index.html og styles.css-filene, og oppdater deretter nettleseren for å se dem. Resultatene fra denne tabellvisningen vises i Chrome 17.0.9 i figur C : 

    Figur C

    Endre innholdets tekst

    Kanskje har du en varselmelding som må oppdateres, og endringen blir brukt flere steder på nettstedet ditt. Med jQuery trenger du bare lage tekstoppføringen en gang, og den blir automatisk brukt på det matchede settet med elementer med .text (textString) -funksjonen. .Text-funksjonen kan brukes i både XML- og HTML-dokumenter.

    I filen index.html, legg til denne linjen med jQuery-koden rett under forrige linje vi la til og inne i dokumentklar funksjon:

     $ (". test"). text ("Varsel: Dette er det nye tekstinnholdet!"); 

    Lagre filen, og oppdater siden i nettleseren din, så ser du at innholdsteksten for artikkelen og seksjonen med class = "test" ble oppdatert med den nye teksten: "Alert: Dette er det nye tekstinnholdet !. " jQuery gjør alt arbeidet med å bruke tekstoppdateringen på tvers av alle elementer med den definerte klassen. Tenk om dette var en oppdatering for 100+ objekter - effekten er den samme og umiddelbare på hele siden.

    Det resulterende dokumentet som vist i Chrome 17.0.9 er vist i figur D :

    Figur D

    I de neste installasjonene av jQuery-serien vil vi gjennomgå å endre utseendet til objekter med show- og skjulfunksjonene, og til slutt vil vi lage en trekkspilleffekt for et FAQ-dokument som bruker kraften til jQuery.

    © Copyright 2021 | pepebotifarra.com