Share
Selektörer är av avgörande betydelse. De flesta jQuery-metoder kräver att någon typ av elementval inte är till nytta. Till exempel anbringa en klick händelse till en knapp kräver att du väljer knappen först.
Eftersom vanliga jQuery-väljare är baserade på befintliga CSS-väljare, kanske du är väl känd i dem. Det finns dock också några selektorer som inte används lika mycket. I denna handledning kommer jag att fokusera på dessa mindre kända men viktiga väljare.
Denna väljare kallas med rätta universell väljare eftersom den väljer alla element i dokumentet, inklusive , , >
Accentsconagua
// Välj alla efterkommande $ ("Section> *") // Välj alla direkta efterkommande $ ("Section> *> *") // Väljer alla andra nivåns efterkommande $ ("Section> *> * a ") // Väljer 3: e nivå länkarDenna väljare är extremt långsam om den används i kombination med andra element. Men allt beror på hur väljaren används och vilken webbläsare den körs i. I Firefox, $ ("# selector> *"). hitta ("li") är långsammare än $ ("# selector> ul"). hitta ("li"). Intressant utför Chrome $ ("# selector> *"). hitta ("li") något snabbare. Alla webbläsare körs $ ("# selector *"). hitta ("li") långsammare än $ ("# selector ul"). hitta ("li"). Jag föreslår att du jämför prestanda innan du använder den här väljaren.
Här är en demo som jämför utmatningshastigheten för hela väljaren.
Du kan använda :animerad väljaren för att välja alla element vars animering fortfarande är igång när den här väljaren körs. Det enda problemet är att det bara kommer att välja element som animerades med jQuery. Den här väljaren är en jQuery-förlängning och drar inte nytta av prestandahöjningen som följer med den inbyggda querySelectorAll () metod.
Du kan också inte upptäcka CSS-animeringar med jQuery. Du kan dock upptäcka när animationen slutar använda animationend händelse.
Ta en titt på följande demo.
I demo ovan är bara det udda div elementen är animerade innan de körs . $ ( "Animerade") css ( "bakgrund", "# 6F9");. Som ett resultat, bara de div element växlar till grönt Strax därefter kallar vi animationsfunktionen på resten av div element. Om du klickar på knapp nu alla div element ska bli grön.
Vanliga attribut väljare upptäcker vanligtvis om ett attribut med ett visst namn eller värde existerar. Å andra sidan, [Attr! = "Värde"] väljaren väljer alla element som inte har det angivna attributet eller där attributet existerar men är inte lika med ett visst värde. Det motsvarar : Inte ([attr = "värde"]). Till skillnad från [ "Värde" attr =] , [Attr! = "Värde"] ingår inte i CSS-specifikationen. Som ett resultat, använder $ ( "Css väljaren"). Inte ( "[attr = 'värde']") kan förbättra prestanda i moderna webbläsare.
I utsnittet nedan läggs ett missanpassning klass till alla li element vars datakategori attributet är inte lika med css. Detta kan vara till hjälp vid felsökning eller inställning av rätt attributvärde med hjälp av JavaScript.
$ ("li [data-category! = 'css']"). Varje (funktion () $ (detta) .addClass ("mismatch"); // lägger till en mismatch klass för att filtreras ut väljare. mismatch "). attr (" data-category ", attributeValue); // Ange rätt attributvärde);I demo går jag igenom två listor och korrigerar värdet av kategorin attribut av element.
Den här väljaren används för att välja alla element som innehåller den angivna strängen. Den matchande strängen kan vara direkt inuti det berörda elementet eller inom någon av dess efterkommande.
Exemplet nedan ska hjälpa dig att få en bättre förståelse för den här väljaren. Vi kommer att lägga en gul bakgrund till alla händelser av frasen Lorem Ipsum.
Låt oss börja med markeringen:
Lorem Ipsum är helt enkelt dummy text av tryckeriet och typesetting industrin. Lorem Ipsum har varit branschens standard dummy text från 1500-talet, när en okänd skrivare tog en typ av typ och förvrängde den för att göra en typprovsbok. Det har överlevt inte bara fem århundraden, men också språnget i elektroniskt uppsättning, som förblir väsentligen oförändrad.
Det blev populariserat på 1960-talet med utgivandet av Letraset-lakan innehållande Lorem Ipsum-passager, och mer nyligen med skrivbordspubliceringsprogram som Aldus PageMaker inklusive versioner av Lorem Ipsum.
Lorem Ipsum Wikipedia LinkDetta lorem ipsum bör inte markeras.
Observera att frasen Lorem Ipsum sker på sju olika platser. Jag har medvetet använt små kepsar i en av dessa fall för att visa att matchningen är skiftlägeskänslig.
Här är JavaScript-koden för att markera alla matchningar:
$ (detta) .html (). ersätt (/ Lorem Ipsum / g, "(Lorem Ipsum").Lorem Ipsum")););Citat runt strängen är valfritt. Detta innebär att båda $ ("avsnitt: innehåller ('Lorem Ipsum')") och $ ("avsnitt: innehåller (Lorem Ipsum)") kommer att vara giltigt i biten ovan. Jag riktar bara in på avsnittet, så Lorem Ipsum-texten i listelementen bör förbli oförändrad. Dessutom, på grund av icke-matchande fall, texten i den andra sektion elementet bör inte heller markeras. Som du kan se i den här demo är det precis vad som händer.
Den här väljaren väljer alla element som innehåller minst ett element som matchar en viss väljare. Den väljare som behöver matchas behöver inte vara ett direkt barn. : Har () ingår inte i CSS-specifikationen. I moderna webbläsare ska du använda $ ( "Pure-css-väljare"). Har (väljare) istället för $ ( "Pure-css-väljare: har (väljare)") för förbättrad prestanda.
En möjlig tillämpning av denna väljare är manipulering av element som innehåller ett specifikt element inuti dem. I vårt exempel kommer jag att ändra färgen på alla listelement som innehåller en länk inuti dem.
Det här är markeringen för demo:
Här är JavaScript-koden för att ändra färgen på listelementen:
$ ("li: har (a)"). Varje (funktion (index) $ (this) .css ("color", "crimson"););Logiken bakom denna kod är ganska enkel. Jag slår igenom alla listelement som innehåller en länk och ställer in sin färg till crimson. Du kan också manipulera texten inuti listelementen eller ta bort dem från DOM. Jag är säker på att den här väljaren kan användas i många andra situationer. Kolla in en levande version av den här koden på CodePen.
Förutom CSS väljare gillar : N: te-barn (), jQuery har också sin egen uppsättning indexbaserade väljare. Dessa väljare är : Ekv (index), : Lt (index), och : Gt (index). Till skillnad från CSS-baserade väljare använder dessa väljare nollbaserad indexering. Detta innebär att medan : N: te-barn (1) kommer att välja det första barnet, : Ekv (1) kommer att välja det andra barnet. För att välja det första barnet måste du använda : Ekv (0).
Dessa väljare kan också acceptera negativa värden. När negativa värden är angivna görs räkning bakåt från det sista elementet.
: Lt (index) väljer alla element som ligger i ett index mindre än det angivna värdet. För att välja de tre första elementen, kommer du att använda : Lt (3). Detta beror på att de tre första elementen har indexvärdena 0, 1 respektive 2. Med ett negativt index väljer du alla värden före det element som vi nått efter att ha räknats bakåt. Liknande, : Gt (index) väljer alla element med index som är större än det angivna värdet.
: lt (4) // Väljer de fyra första elementen: lt (-4) // Väljer alla element förutom sista 4: gt (4) // Väljer alla element förutom första 5: gt (-4) // Väljer de senaste tre elementen : gt (-1) // Välj ingenting: eq (4) // Väljer femte element: eq (-4) // Väljer fjärde elementet från sista
Försök att klicka på olika knappar i demo för att få en bättre förståelse för indexväljare.
jQuery definierar många selektorer för enkelt val av formulärelement. Till exempel, :knapp väljaren väljer alla knappelement samt element med typknapp. Liknande, : checkbox kommer att markera alla inmatningselement med typ av kryssrutan. Det finns selektorer definierade för nästan alla inmatningselement. Tänk på formuläret nedan:
Jag har skapat två textelement här och fyra kryssrutor. Formuläret är ganska grundläggande, men det borde ge dig en uppfattning om hur formulärväljare fungerar. Vi räknar antalet textelement med hjälp av :text väljaren och uppdatera också texten i den första textinmatningen.
var textCount = $ (": text"). längd; $ ("text-elements"). text ('Text Inputs:' + textCount); $ (": text"). eq (0) .val ('Tillagt programmatiskt!');jag använder :text för att välja alla textingångar och sedan längdmetoden för att beräkna deras nummer. I det tredje uttalandet använder jag den tidigare diskuterade : Ekv () väljaren för att komma åt det första elementet och senare ställa in sitt värde.
Tänk på att från jQuery 1.5.2, :text avkastning Sann för element som inte har någon typ attribut anges.
Ta en titt på demo.
Om du någonsin vill välja alla rubrikelement på en webbsida kan du använda den korta $ ( "Header") version istället för den verbose $ ("h1 h2 h3 h4 h5 h6") väljare. Denna väljare är inte en del av CSS-specifikationen. Som ett resultat kan bättre prestanda uppnås med en ren CSS-väljare först och sedan använda .filtrera ( ": header").
Antag exempelvis att det finns en artikel element på en webbsida och den har tre olika rubriker. Nu kan du använda $ ("artikel: header") istället för $ ("artikel h1, artikel h2, artikel h3") för korthet. För att göra det ännu snabbare, kan du använda $ ( "Artikel") filter. ( "Header"). På så sätt har du det bästa av båda världarna.
För att numrera alla rubrikelement kan du använda följande kod.
$ ("index: 1) +": "+ $ (detta) .text ()); // lägger till nummer i rubrikerna );Prova den medföljande demo.
I denna handledning diskuterade jag ovanliga selektörer som du kan stöta på när du använder jQuery. Medan de flesta av dessa väljare har alternativ som du kan använda är det fortfarande bra att veta att dessa väljare finns.
Jag hoppas att du lärde dig något nytt i den här handledningen. Om du har några frågor eller förslag, vänligen kommentera.
