Accentsconagua

jQuery Succinctly jQuery Väljer

Koda
Share

Anpassade jQuery-filter kan välja element när de används ensamma

Det är inte nödvändigt att tillhandahålla ett verkligt element i samband med ett filter, såsom $ (Div: dolda "). Det är möjligt att helt enkelt passera filtret ensam, var som helst ett väljarsuttryck förväntas.

Några exempel:

 // Väljer alla dolda element $ (': hidden'); // Väljer alla div-element och väljer sedan bara jämna element $ ('div'). Filter (': even');

Grokking the: Dold och: Synligt filter

Den anpassade jQuery-väljaren filtrerar :dold och :synlig ta inte hänsyn till egenskapen CSS synlighet som man kan förvänta sig. Det sätt som jQuery bestämmer om ett element är gömt eller synligt är om elementet förbrukar något utrymme i dokumentet. För att vara exakt är ett element synligt om webbläsaren rapporteras offsetWidth eller offsetHeight är större än 0. På så sätt, ett element som kan ha en CSS visa värdet av blockera Innehållet i ett element med a visa värdet av ingen skulle noggrant rapportera att det inte är synligt.

Undersök koden noggrant och se till att du förstår varför det returnerade värdet är Sann även om

väljas har en inline stil av display: block.

Använda metoden (Is) för att returnera ett booleskt värde

Det är ofta nödvändigt att bestämma om den valda uppsättningen av element faktiskt innehåller ett specifikt element. Använda är() metod kan vi kontrollera den aktuella uppsättningen mot ett uttryck / filter. Checken kommer tillbaka Sann om uppsättningen innehåller åtminstone ett element som väljs av det givna uttrycket / filtret. Om det inte innehåller elementet, a falsk värdet returneras. Undersök följande kod:

    
jQuery
 
jQuery

Det ska vara uppenbart att den andra varna() kommer att returnera ett värde av falskt eftersom vår omslagsset inte innehöll en

som hade en id attributvärde för i2. De är() Metoden är ganska praktisk för att bestämma om omslagssatsen innehåller ett specifikt element.

Anmärkningar: Som av jQuery 1.3, the är() Metoden stöder alla uttryck. Tidigare komplexa uttryck, såsom de som innehåller hierarkinselektorer (t.ex. +, ~, och >) returneras alltid Sann.

Filter används av andra interna jQuery-funktioner. Därför gäller alla regler som gäller där också här.

Vissa utvecklare använder är ('. klass) för att bestämma om ett element har en specifik klass. Glöm inte att jQuery redan har en metod för att göra detta kallat hasClass ( 'klass'), som kan användas på element som innehåller mer än ett klassvärde. Men sanningen ska höras, hasClass () är bara ett bekvämt inslag för är() metod.

Du kan passera jQuery mer än en väljaruttryck

Du kan ge jQuery-funktionens första parameter flera uttryck separerade av ett kommatecken: $ ('uttryck, uttryck, uttryck'). Med andra ord är du inte begränsad till att välja element som bara använder ett enda uttryck. Till exempel, i exemplet nedan passerar jag jQuery-funktionen tre uttryck separerade av ett komma.

    
jQuery 
 
är 
 
     
  • bäst!
    •

Vart och ett av dessa uttryck väljer DOM-element som alla läggs till i omslagssatsen. Vi kan sedan använda dessa element med jQuery-metoder. Tänk på att alla valda element kommer att placeras i samma omslagsuppsättning. Ett ineffektivt sätt att göra detta skulle vara att ringa jQuery-funktionen tre gånger, en gång för varje uttryck.

Kontrollera Wrapper Set. Length för att bestämma valet

Det är möjligt att bestämma om ditt uttryck har valt något genom att kontrollera om omslagssatsen har en längd. Du kan göra det genom att använda arrayegenskapen längd. Om längd Egenskapen returnerar inte 0, då vet du att minst ett element matchar det uttryck du skickade till jQuery-funktionen. Till exempel, i koden nedan kontrollerar vi sidan för ett element med en id av "inte här". Gissa vad? Det är inte där!

Anmärkningar: Om det inte är uppenbart kan egenskapen längd också rapportera antalet element i omslagssatsen - på ett annat sätt, hur många element som valdes av uttrycket som skickades till jQuery-funktionen.

Skapa anpassade filter för att välja element

Möjligheterna i jQuery-väljarmotorn kan förlängas genom att skapa egna anpassade filter. I teorin bygger allt du gör här bygger på de anpassade väljare som redan ingår i jQuery. Till exempel, säg att vi skulle vilja välja alla element på en webbsida som är helt placerade. Eftersom jQuery inte redan har en anpassning : positionAbsolute filter, vi kan skapa vår egen.

    
absolut
 absolut 
statisk
 
absolut
 
statisk
 absolut

Det viktigaste att förstå här är att du inte är begränsad till standardväljare som tillhandahålls av jQuery. Du kan skapa din egen. Men innan du spenderar tiden som skapar din egen version av en väljare kan du bara bara prova filtrera() metod med en specificerad filtreringsfunktion. Till exempel kunde jag ha undvikit att skriva : positionAbsolute väljaren genom att helt enkelt filtrera

element i mitt tidigare exempel med en funktion som jag skickar till filtrera() metod.

 // Ta bort 
 element från omslaget // set som inte är helt positionerat $ ('div'). filter (funktion () return $ (this) .css ('position') === 'absolut';); // eller // Ta bort alla element från wrapper // set som inte är helt positionerade $ ('*'). filter (funktion () return $ (this) .css ('position') === 'absolut' ;);

Anmärkningar: För ytterligare information om att skapa egna selektörer föreslår jag följande läsning: http://www.bennadel.com/blog/1457-How-To-Build-A-Custom-jQuery-Selector.htm

Skillnader mellan filtrering med numerisk ordning vs DOM-relationer

jQuery tillhandahåller filter för att filtrera en wrapper-uppsättning av ett elements numeriska sammanhang inom uppsättningen.

Dessa filter är:

  • :först
  • :sista
  • :även
  • :udda
  • : Ekv (index)
  • : Gt (index)
  • : Lt (index)

Anmärkningar: Filter som filtrerar inpakningsuppsättningen själv gör det genom att filtrera element i uppsättningen vid en startpunkt på 0 eller index på 0. Till exempel : Ekv (0) och :först få tillgång till det första elementet i uppsättningen - $ (Div: eq (0)) - vilket är på ett 0-index. Detta står i kontrast till : N: te-barn filter som är indexerat. Betydelse, till exempel, : N: te-barn (1) kommer att returnera det första barnelementet, men försöker använda : N: te-barn (0) kommer inte att fungera. Använder sig av : N: te-barn (0) kommer alltid att välja ingenting.

Använder sig av :först kommer att välja det första elementet i uppsättningen under :sista kommer att välja det sista elementet i uppsättningen. Kom ihåg att de filtrerar uppsättningen baserat på förhållandet (numerisk hierarki som börjar vid 0) inom uppsättningen, men inte elementenes relationer i DOMs sammanhang. Med tanke på denna kunskap, bör det vara uppenbart varför filtren :först, :sista, och : Ekv (index) kommer alltid att returnera ett enda element.

Om det inte är uppenbart, låt mig förklara mer. Anledningen till att :först kan bara returnera ett enda element eftersom det bara kan vara ett element i en uppsättning som anses vara först när det bara finns en uppsättning. Detta borde vara ganska logiskt. Undersök koden nedan för att se detta begrepp i aktion.

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

Med en tydlig förståelse för att manipulera själva uppsättningen kan vi förstärka vår förståelse för att välja element genom att använda filter som väljer element som har unika relationer med andra element inom själva DOM. jQuery ger flera selektörer att göra detta. Vissa av dessa väljare är anpassade, medan några är välkända CSS-uttryck för att välja DOM-element.

  • förfader ättling
  • förälder> barn
  • prev + nästa
  • före detta syskon
  • : N: te-barn (väljare)
  • :förstfödde
  • :sista barnet
  • :enda barnet
  • :tömma
  • : Har (väljare)
  • :förälder

Användning av dessa väljarkilter kommer att välja element baserat på deras förhållande inom DOM som gäller andra delar i DOM. För att visa detta koncept, låt oss titta på någon kod.

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

Om du är förvånad över det faktum att $ (Li: n: te-barn (udda)). Text () returnerar värdet 135135, du är ännu inte grusande relationfilter. Påståendet, $ (Li: n: te-barn (udda)) sade muntligt skulle vara "hitta allt

  • element på webbsidan som är barn, och sedan filtrera dem av udda barn. "Jo, det händer bara att det finns två strukturer på sidan som har en grupp syskon som består av
  • s. Min punkt är detta: Omslagssatsen består av element baserat på ett filter som tar hänsyn till ett elements förhållande till andra delar i DOM. Dessa relationer finns på flera platser.

    Konceptet att ta bort är att inte alla filter skapas lika. Se till att du förstår vilka som är filter baserat på DOM-relationer, t.ex.. :enda barnet-och vilka som filtrerar genom elementenes position-t.ex.. : Ekv ()-i den förpackade uppsättningen.

    Val av element efter id När värdet innehåller meta-tecken

    jQuery-selektorer använder en uppsättning metatyper (t.ex.. # ~ [] => ) som när den används som en bokstavlig del av ett namn (t.ex.. id = "# foo [bar]") ska undvikas. Det är möjligt att flytta tecken genom att placera två backslashes före tecknet. Undersök koden nedan för att se hur du använder två backslashes i urvalet uttryck gör att vi kan välja ett element med ett id attributvärde av #Foo bar].

        
    jQuery

    Här är den fullständiga listan med tecken som måste släppas när de används som en bokstavlig del av ett namn.

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

    Stacking Selector Filters

    Det är möjligt att stapla väljningsfilter-t ex. en [title = "jQuery"] [href ^ = "http: //"]. Det uppenbara exemplet på detta är att välja ett element som har specifika attribut med specifika attributvärden. Till exempel väljer jQuery-koden nedan bara element på HTML-sidan som:

    • Innehåll en href attribut med ett startvärde för "http: //"
    • Ha en titel attribut med ett värde av "jQuery"

    Bara en väljs.

        jQuery.com jQuery.com 1 jQuery.com

    Observera i koden hur vi har staplat två filter för att uppnå detta val.

    Andra väljarkilter kan staplas utöver bara attributfiltren. Till exempel:

     // Välj den sista 
     Innehållet i // wrapper-uppsättningen som innehåller texten "jQuery" $ ('div: last: contains ("jQuery")') // Hämta alla kryssrutor som är synliga och valda $ (': checkbox: visible: checked ')

    Konceptet att ta bort är att selektorfiltren kan staplas och användas i kombination.

    Anmärkningar: Du kan också boa och stapla filter - t.ex.. . $ ( 'P') filter ( ': inte (: först): inte (: förra))

    Nesting Selector Filters

    Selektorfiltren kan nästas. Detta gör att du kan använda filter på ett mycket kortfattat och kraftfullt sätt. Nedan ger jag ett exempel på hur du kan nästa filter för att utföra komplex filtrering.

        
    javaScript
     
    jQuery
     
    javaScript
     
    jQuery
     
    javaScript
     
    jQuery

    Konceptet att ta bort är att selektorfiltren kan nästas.

    Anmärkningar: Du kan också boa och stapla filter - t.ex.. . $ ( 'P') filter ( ': inte (: först): inte (: förra))

    Grokking the: nth-child () Filter

    De : N: te-barn () filtret har många användningsområden. Till exempel, säg att du bara vill välja var tredje

  • element som ingår i a
    • ×