Accentsconagua

jQuery Succinctly jQuery Velger

Kode
Share

Egendefinerte jQuery-filtre kan velge elementer når de brukes alene

Det er ikke nødvendig å gi et faktisk element i forbindelse med et filter, for eksempel $ ( 'Div: skjult'). Det er mulig å bare passere filteret alene, hvor som helst et valg uttrykk forventes.

Noen eksempler:

 // Velger alle skjulte elementer $ (': hidden'); // Velger alle div-elementer, og velger deretter bare like elementer $ ('div'). Filter (': even');

Grokking: Skjult og: Synlig Filter

Den egendefinerte jQuery selector filtre : skjult og :synlig ikke ta hensyn til CSS-synlighetsegenskapen som man kan forvente. Måten jQuery bestemmer om et element er skjult eller synlig, er hvis elementet bruker noe mellomrom i dokumentet. For å være nøyaktig, er et element synlig hvis nettleseren er rapportert offsetWidth eller offsetHeight er større enn 0. På den måten, et element som kan ha et CSS vise verdien av blokkere inneholdt i et element med a vise verdien av ingen vil nøye rapportere at det ikke er synlig.

Undersøk koden forsiktig og sørg for at du forstår hvorfor verdien returnert er ekte selv om

blir valgt har en inline stil av display: block.

Bruk Is () Metoden til å returnere en boolsk verdi

Det er ofte nødvendig å avgjøre om det valgte settet av elementer faktisk inneholder et bestemt element. Bruker er() Metode, vi kan sjekke gjeldende sett mot et uttrykk / filter. Sjekkingen kommer tilbake ekte hvis settet inneholder minst ett element som er valgt av det gitte uttrykket / filteret. Hvis det ikke inneholder elementet, a falsk verdien returneres. Undersøk følgende kode:

    
jQuery
 
jQuery

Det skal være tydelig at den andre varsling() vil returnere en verdi av falsk fordi vår wrapper sett ikke inneholdt en

som hadde en id attributt verdi av i2. De er() Metoden er ganske nyttig for å avgjøre om wrapper-settet inneholder et bestemt element.

Merknader: Som av jQuery 1.3, the er() Metoden støtter alle uttrykk. Tidligere har komplekse uttrykk som de som inneholder hierarkivelektorer (for eksempel +, ~, og >) returneres alltid ekte.

Filter brukes av andre interne jQuery-funksjoner. Derfor gjelder alle regler som gjelder der, også her.

Noen utviklere bruker er ('. klasse) for å avgjøre om et element har en bestemt klasse. Ikke glem at jQuery allerede har en metode for å gjøre dette kalt hasClass ( 'klasse'), som kan brukes på elementer som inneholder mer enn én klasseverdi. Men sannheten blir fortalt, hasClass () er bare en praktisk wrapper for er() metode.

Du kan passere jQuery mer enn en Selector Expression

Du kan gi jQuery-funksjonens første parameter flere uttrykk adskilt av et komma: $ ('uttrykk, uttrykk, uttrykk'). Med andre ord, er du ikke begrenset til å velge elementer som bare bruker et enkelt uttrykk. For eksempel, i eksemplet nedenfor overfører jeg jQuery-funksjonen tre uttrykk adskilt av et komma.

    
jQuery 
 
er den 
 
     
  • beste!
    •

Hvert av disse uttrykkene velger DOM-elementer som alle legges til wrapper-settet. Vi kan da operere på disse elementene ved hjelp av jQuery-metoder. Husk at alle de valgte elementene vil bli plassert i samme innpakningssett. En ineffektiv måte å gjøre dette på er å ringe jQuery-funksjonen tre ganger, en gang for hvert uttrykk.

Kontrollerer Wrapper Set. Lengde for å bestemme valg

Det er mulig å avgjøre om uttrykket ditt har valgt noe ved å sjekke om innpakningssettet har en lengde. Du kan gjøre det ved å bruke arrayegenskapen lengde. Hvis lengde Egenskapen returnerer ikke 0, da vet du at minst ett element samsvarer med uttrykket du passerte til jQuery-funksjonen. For eksempel, i koden under sjekker vi siden for et element med en id av "ikke her". Gjett hva? Det er ikke der!

Merknader: Hvis det ikke er klart, kan egenskapen lengde også rapportere antall elementer i innpakningssettet - angitt på en annen måte, hvor mange elementer ble valgt av uttrykket som ble sendt til jQuery-funksjonen.

Opprette egendefinerte filtre for å velge elementer

Mulighetene til jQuery-seleksjonsmotoren kan utvides ved å lage dine egne tilpassede filtre. I teorien er alt du gjør her bygger på de tilpassede seleksjonene som allerede er en del av jQuery. For eksempel, si at vi ønsker å velge alle elementene på en nettside som er helt posisjonert. Siden jQuery ikke allerede har en egendefinert : positionAbsolute filter, kan vi lage vår egen.

    
absolutte
 absolutte 
statisk
 
absolutte
 
statisk
 absolutte

Det viktigste å forstå her er at du ikke er begrenset til standardvelgerene som tilbys av jQuery. Du kan lage din egen. Men før du bruker tiden til å lage din egen versjon av en velger, kan du bare bare prøve filter() metode med en spesifisert filtreringsfunksjon. For eksempel kunne jeg ha unngått å skrive : positionAbsolute velger ved å filtrere

elementer i mitt tidligere eksempel med en funksjon jeg sender til filter() metode.

 // Fjerne 
 elementer fra wrapper // sett som ikke er helt posisjonert $ ('div'). filter (funksjon () return $ (dette) .css ('posisjon') === 'absolutt';); // eller // Fjern alle elementene fra wrapper // sett som ikke er helt posisjonert $ ('*'). filter (funksjon () return $ (dette) .css ('posisjon') === 'absolutt' ;);

Merknader: For ytterligere informasjon om å lage dine egne selektorer foreslår jeg følgende les: http://www.bennadel.com/blog/1457-How-To-Build-A-Custom-jQuery-Selector.htm

Forskjeller mellom filtrering ved numerisk rekkefølge mot DOM-forhold

jQuery gir filtre for filtrering av en wrapper sett av et elements numeriske kontekst innenfor settet.

Disse filtrene er:

  • :først
  • :siste
  • :til og med
  • :merkelig
  • : Eq (indeks)
  • : Gt (indeks)
  • : Lt (indeks)

Merknader: Filtre som filtrerer wrapper-settet selv gjør det ved å filtrere elementer i settet ved et utgangspunkt på 0 eller en indeks på 0. For eksempel : Eq (0) og :først få tilgang til det første elementet i settet - $ ( 'Div: eq (0)') - som er på en 0-indeks. Dette er i kontrast til : N-te-barn filter som er indeksert. Betydning, for eksempel, : N-te-barn (1) vil returnere det første barnelementet, men prøver å bruke : N-te-barn (0) vil ikke fungere. Ved hjelp av : N-te-barn (0) vil alltid velge ingenting.

Ved hjelp av :først vil velge det første elementet i settet mens :siste vil velge det siste elementet i settet. Husk at de filtrerer settet basert på forholdet (numerisk hierarki som starter ved 0) i settet, men ikke elementernes relasjoner i sammenheng med DOM. Gitt denne kunnskapen, bør det være åpenbart hvorfor filtrene :først, :siste, og : Eq (indeks) vil alltid returnere et enkelt element.

Hvis det ikke er åpenbart, la meg forklare videre. Grunnen til at :først kan bare returnere et enkelt element, fordi det bare kan være ett element i et sett som anses som først når det bare er ett sett. Dette burde være ganske logisk. Undersøk koden under for å se dette konseptet i aksjon.

    
     
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •  
 
     
  • 6
    •  
  • 7
    •  
  • 8
    •  
  • 9
    •  
  • 10
    •

Med en klar forståelse av å manipulere settet selv, kan vi forstørre vår forståelse av valg av elementer ved å bruke filtre som velger elementer som har unike relasjoner med andre elementer i selve DOM. jQuery gir flere selgere til å gjøre dette. Noen av disse valgene er tilpassede, mens noen er velkjente CSS-uttrykk for å velge DOM-elementer.

  • forfedre etterkommer
  • foreldre> barn
  • prev + neste
  • forrige søsken
  • : N-te-barn (velger)
  • :første barn
  • :siste barn
  • :enebarn
  • :tømme
  • : Har (velgeren)
  • : foreldre

Bruk av disse selektorfiltre vil velge elementer basert på deres forhold innenfor DOM som gjelder andre elementer i DOM. For å demonstrere dette konseptet, la oss se på noen kode.

    
     
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •  
 
     
  • 1
    •  
  • 2
    •  
  • 3
    •  
  • 4
    •  
  • 5
    •

Hvis du er overrasket over det faktum at $ ( 'Li: n'te barn (ulike)'). Tekst () returnerer verdien 135135, du er ennå ikke grusende forholdsfiltre. Uttalelsen, $ ( 'Li: n'te barn (ulike)') sa muntlig ville være "finne alt

  • elementer på nettsiden som er barn, og deretter filtrere dem av odde barn. "Vel, det skjer bare slik at det er to strukturer på siden som har en gruppe søsken bestående av
  • s. Mitt poeng er dette: Innpakningssettet består av elementer basert på et filter som tar hensyn til elementets forhold til andre elementer i DOM. Disse relasjonene finnes på flere steder.

    Konseptet å ta bort er at ikke alle filtre er skapt like. Sørg for at du forstår hvilke som er filter basert på DOM-relasjoner-f.eks. :enebarn-og hvilke som filtrerer etter elementets posisjon-f.eks. : EQ ()-i det innpakket settet.

    Velge elementer etter ID Når verdien inneholder meta-tegn

    jQuery selectors bruker et sett med meta-tegn (f.eks. # ~ [] => ) at når den brukes som en bokstavelig del av et navn (f.eks. id = "# foo [bar]") burde bli rømt. Det er mulig å unnslippe tegn ved å plassere to tilbakeslag før tegnet. Undersøk koden under for å se hvordan bruk av to tilbakeslag i valguttrykket tillater oss å velge et element med en idattributtverdi av #foo [bar].

        
    jQuery

    Her er den komplette listen over tegn som må unngås når de brukes som en bokstavelig del av et navn.

    • #
    • ;
    • &
    • ,
    • .
    • +
    • *
    • ~
    • '
    • :
    • "
    • !
    • ^
    • $
    • [
    • ]
    • (
    • )
    • =
    • >
    • |
    • /

    Stacking Selector Filters

    Det er mulig å stable selektorfiltre-f.eks. et [title = "jQuery"] [href ^ = "http: //"]. Det åpenbare eksempelet på dette er å velge et element som har spesifikke attributter med spesifikke attributtverdier. For eksempel vil jQuery-koden nedenfor bare velge elementer på HTML-siden som:

    • Inneholder en href attributt med en startverdi av "http: //"
    • Ha en tittel attributt med en verdi av "jQuery"

    Bare en blir valgt.

        jQuery.com jQuery.com 1 jQuery.com

    Legg merke til i koden hvordan vi har stablet to filtre for å utføre dette valget.

    Andre valgfiltre kan stables utover bare attributtfiltre. For eksempel:

     // Velg sist 
     finnes i // wrapper sett som inneholder teksten "jQuery" $ ('div: last: contains ("jQuery")') // Få alle avmerkingsboksene som er synlige og valgte $ (': avkrysningsboks: synlig: merket ')

    Konseptet å ta bort er at valgfiltre kan stables og brukes i kombinasjon.

    Merknader: Du kan også hekke og stable filtre - f.eks. ( ': Ikke (: først): ikke (: siste)'). $ ( 'P') filter

    Nesting Selector Filters

    Selektorfilter kan nestes. Dette gjør det mulig å bruke filtre på en veldig kort og kraftig måte. Nedenfor gir jeg et eksempel på hvordan du kan neste filtre for å utføre komplisert filtrering.

        
    javascript
     
    jQuery
     
    javascript
     
    jQuery
     
    javascript
     
    jQuery

    Konseptet å ta bort er at selektorfilter kan nestes.

    Merknader: Du kan også hekke og stable filtre - f.eks. ( ': Ikke (: først): ikke (: siste)'). $ ( 'P') filter

    Grokking the: nth-child () Filter

    De : N-te-child () filteret har mange bruksområder. For eksempel, si at du bare vil velge hver tredje

  • element som finnes i a
    • ×