Ongewoon jQuery Selectors

Selectoren zijn van vitaal belang. De meeste jQuery-methoden vereisen enige vorm van selectie van elementen om van enig nut te zijn. Bijvoorbeeld een Klik gebeurtenis voor een knop vereist dat u eerst de knop selecteert. 

Omdat veelgebruikte jQuery-selectors zijn gebaseerd op bestaande CSS-selectors, bent u misschien goed thuis in deze CSS-selectors. Er zijn echter ook enkele selectors die niet zo vaak worden gebruikt. In deze tutorial zal ik me richten op deze minder bekende maar belangrijke selectors.

Alle kiezers (*)

Deze selector wordt met recht de universele selector genoemd omdat het alle elementen in het document selecteert, inclusief de , , > of  -tags. Deze demo moet mijn punt illustreren.

$ ("sectie *") // Selecteert alle afstammelingen $ ("sectie> *") // Selecteert alle directe afstammelingen $ ("sectie> *> *") // Selecteert alle afstammelingen van het tweede niveau $ ("sectie> *> * a ") // Selecteert links op het derde niveau

Deze selector is extreem traag bij gebruik in combinatie met andere elementen. Het hangt echter allemaal af van hoe de selector wordt gebruikt en in welke browser het wordt uitgevoerd. In Firefox, $ ("# selector> *"). find ("li") is langzamer dan $ ("# selector> ul"). find ("li"). Interessant is dat Chrome wordt uitgevoerd  $ ("# selector> *"). find ("li") iets sneller. Alle browsers worden uitgevoerd $ ("# selector *"). find ("li") langzamer dan $ ("# selector ul"). find ("li"). Ik zou willen voorstellen dat je de prestaties vergelijkt voordat je deze selector gebruikt. 


Hier is een demo die de uitvoeringssnelheid van de selector met elkaar vergelijkt.

Geanimeerde selector (: geanimeerd)

U kunt de : geanimeerde selector om alle elementen te selecteren waarvan de animatie nog steeds bezig is wanneer deze selector wordt uitgevoerd. Het enige probleem is dat het alleen elementen selecteert die geanimeerd zijn met jQuery. Deze selector is een jQuery-extensie en profiteert niet van de prestatieverbetering die bij de native hoort querySelectorAll () methode. 

U kunt ook geen CSS-animaties detecteren met jQuery. U kunt echter detecteren wanneer de animatie eindigt met de animationend evenement.

Bekijk de volgende demo.

In de demo hierboven, alleen het oneven div elementen worden geanimeerd voordat ze worden uitgevoerd . $ ( ": Animated") css ( "achtergrond", "# 6F9");. Als gevolg daarvan alleen die div elementen veranderen in groen. Vlak daarna noemen we de bezielingsfunctie op de rest van de div elementen. Als u op klikt knop nu allen div elementen moeten groen worden.

Attribuut niet gelijk aan selectie ([attr! = "Value"])

Algemene attribuutselectoren detecteren meestal of een kenmerk met een bepaalde naam of waarde bestaat. Aan de andere kant, de [Attr! = "Waarde"]  selector selecteert alle elementen die niet het opgegeven attribuut hebben of waar het attribuut bestaat maar niet gelijk is aan een bepaalde waarde. Het is equivalent aan : Geen ([attr = "value"]). anders [Attr = "value"] , [Attr! = "Waarde"] maakt geen deel uit van de CSS-specificatie. Als gevolg hiervan $ ( "Css-selector"). Niet ( "[attr = 'value']") kan de prestaties in moderne browsers verbeteren. 

Het onderstaande fragment voegt een toe wanverhouding klasse voor iedereen li elementen waarvan data-categorie attribuut is niet gelijk aan css. Dit kan handig zijn bij het opsporen van fouten of bij het instellen van de juiste kenmerkwaarde met behulp van JavaScript.

$ ("li [data-categorie! = 'css']"). each (function () $ (this) .addClass ("mismatch"); // Voegt een niet-overeenkomende klasse toe aan uitgefilterde selectors. $ (". mismatch "). attr (" data-categorie ", attributeValue); // Stel juiste attribuutwaarde in);

In de demo doorloop ik twee lijsten en corrigeer ik de waarde van de categorie-attributen van elementen.

Bevat Selector (: bevat (tekst))

Deze selector wordt gebruikt om alle elementen te selecteren die de gespecificeerde reeks bevatten. De overeenkomende reeks kan zich direct in het betreffende element bevinden of in een van zijn afstammelingen. 

Het onderstaande voorbeeld zou u moeten helpen deze selector beter te begrijpen. We zullen een gele achtergrond toevoegen aan alle occurrences van de zin Lorem Ipsum.

Laten we beginnen met de markup:

 
Lorem Ipsum is gewoon dummy tekst van de drukkerij- en zetbranche. Lorem Ipsum is de standaard dummy-tekst van de industrie sinds de jaren 1500, toen een onbekende printer een keuken van het type in beslag nam en deze tot een soort exemplaar boek maakte. Het heeft niet alleen vijf eeuwen overleefd, maar ook de sprong naar elektronisch zetwerk, en bleef in wezen onveranderd.
 
Het werd gepopulariseerd in de jaren zestig met de uitgave van Letraset-bladen met Lorem Ipsum-passages en meer recent met desktop publishing-software zoals Aldus PageMaker, inclusief versies van Lorem Ipsum.
 Lorem Ipsum Wikipedia-link 
 
 
Deze lorem ipsum moet niet worden gemarkeerd.
 
 
 
Een Lorem Ipsum-lijst
 
Meer elementen hier
 

Merk op dat de zin Lorem Ipsum komt op zeven verschillende locaties voor. Ik heb bewust kleine kapjes gebruikt in een van deze gevallen om aan te tonen dat de aanpassing hoofdlettergevoelig is. 

Hier is de JavaScript-code om alle overeenkomsten te markeren: 

$ ("sectie: bevat ('Lorem Ipsum')"). each (function () $ (this) .html ($ (this) .html (). replace (/ Lorem Ipsum / g, "Lorem Ipsum")););

De aanhalingstekens rond de string zijn optioneel. Dit impliceert dat beide $ ("sectie: bevat ('Lorem Ipsum')") en $ ("sectie: bevat (Lorem Ipsum)") is geldig in het bovenstaande fragment. Ik target alleen het sectie-element, dus de Lorem Ipsum-tekst binnen de elementen van de lijst moet ongewijzigd blijven. Bovendien, als gevolg van niet-matching case, de tekst in de tweede sectie element moet ook niet worden gemarkeerd. Zoals je in deze demo kunt zien, is dit precies wat er gebeurt.

Heeft Selector (: heeft (selector)

Deze selector selecteert alle elementen die minstens één element bevatten dat overeenkomt met een gegeven selector. De selector die moet worden gekoppeld, hoeft geen direct kind te zijn. : Heeft () maakt geen deel uit van de CSS-specificatie. In moderne browsers zou u moeten gebruiken $ ( "Pure-css-selector"). Heeft (selector) in plaats van $ ( "Pure-css-selector: heeft (selector)") voor betere prestaties. 

Een mogelijke toepassing van deze selector is de manipulatie van elementen die een specifiek element erin bevatten. In ons voorbeeld zal ik de kleur van alle lijstelementen wijzigen die een link erin bevatten.

Dit is de opmaak voor de demo:

 
Pellenteske inwoner morbi tristique senectus.
 
Pellenteske inwoner morbi tristique senectus.
 (... meer lijstelementen hier ...) 
Pellenteske inwoner morbi tristique senectus.
 
Pellenteske inwoner morbi tristique senectus.
 

Hier is de JavaScript-code om de kleur van de lijstelementen te wijzigen:

$ ("li: heeft (a)"). each (functie (index) $ (this) .css ("color", "crimson"););

De logica achter deze code is vrij eenvoudig. Ik loop door alle elementen van de lijst die een link bevatten en stel hun kleur in op karmozijnrood. U kunt ook de tekst in de lijstelementen manipuleren of ze uit de DOM verwijderen. Ik weet zeker dat deze selector in veel andere situaties kan worden gebruikt. Bekijk een live versie van deze code op CodePen.

-Index gebaseerde Selectors

Naast CSS selectors zoals : N-kind (), jQuery heeft ook zijn eigen set index-gebaseerde selectors. Deze selectors zijn : Eq (index), : Lt (index), en : Gt (index). Anders dan op CSS gebaseerde selectors gebruiken deze selectors op nul gebaseerde indexering. Dit impliceert dat terwijl : N-kind (1) zal het eerste kind selecteren, : Eq (1) zal het tweede kind selecteren. Om het eerste kind te selecteren dat je moet gebruiken : Eq (0). 

Deze selectors kunnen ook negatieve waarden accepteren. Wanneer negatieve waarden worden opgegeven, wordt het tellen achteruit gedaan vanaf het laatste element. 

: Lt (index) selecteert alle elementen die zich op een index van minder dan de opgegeven waarde bevinden. Om de eerste drie elementen te selecteren, zult u gebruiken : Lt (3). Dit komt omdat de eerste drie elementen respectievelijk indexwaarden 0, 1 en 2 hebben. Als u een negatieve index gebruikt, worden alle waarden geselecteerd vóór het element dat we bereikten na het naar achteren tellen. evenzo, : Gt (index) selecteert alle elementen met een index groter dan de opgegeven waarde.

: lt (4) // Selecteert de eerste vier elementen: lt (-4) // Selecteert alle elementen naast de laatste 4: gt (4) // Selecteert alle elementen naast de eerste 5: gt (-4) // Selecteert de laatste drie elementen : gt (-1) // Selecteert niets: eq (4) // Selecteert vijfde element: eq (-4) // Selecteert vierde element van laatste

Klik op verschillende knoppen in de demo om meer inzicht te krijgen in indexselectoren.

Formulierkeuze

jQuery definieert een groot aantal selectors voor eenvoudige selectie van formulierelementen. Bijvoorbeeld de :knop selector selecteert alle knopelementen en elementen met de typeknop. evenzo, : checkbox zal alle invoerelementen met type selectievakje selecteren. Er zijn selectors gedefinieerd voor bijna alle invoerelementen. Overweeg het onderstaande formulier:

 
 Tekst invoer 
   
 
 
 checkbox:     
 

Ik heb hier twee tekstelementen en vier selectievakjes gemaakt. Het formulier is vrij eenvoudig, maar het zou u een idee moeten geven van hoe vormselectoren werken. We zullen het aantal tekstelementen tellen met behulp van de :tekst selector en update ook de tekst in de eerste tekstinvoer. 

var textCount = $ (": text"). length; $ (". tekst-elementen"). tekst ('Tekstinvoer:' + textCount); $ (": text"). eq (0) .val ('Programmatisch toegevoegd!');

ik gebruik :tekst om alle tekstinvoer te selecteren en vervolgens de lengtemethode om hun aantal te berekenen. In de derde verklaring gebruik ik de eerder besproken : Eq () selector om toegang te krijgen tot het eerste element en later de waarde ervan in te stellen. 

Houd er rekening mee dat vanaf jQuery 1.5.2, :tekst komt terug waar voor elementen die niet zijn opgegeven voor een bepaald type kenmerk.

Bekijk de demo.

Header Selector (: header)

Als u ooit alle headingelementen op een webpagina wilt selecteren, kunt u de short gebruiken $ ( ": Header") versie in plaats van de uitgebreide $ ("h1 h2 h3 h4 h5 h6") selector. Deze selector maakt geen deel uit van de CSS-specificatie. Dientengevolge konden betere prestaties worden bereikt door eerst een pure CSS-selector te gebruiken en vervolgens te gebruiken .filter ( ": header"). 

Neem bijvoorbeeld aan dat er een is artikel element op een webpagina en het heeft drie verschillende rubrieken. Nu zou je kunnen gebruiken $ ("artikel: kop") in plaats van $ ("artikel h1, artikel h2, artikel h3") voor beknoptheid. Om het nog sneller te maken, zou je kunnen gebruiken $ ( "Artikel") filter. ( ": Header"). Op deze manier heb je het beste van beide werelden.

Als u alle headingelementen wilt nummeren, kunt u de volgende code gebruiken.

$ ("artikel: header"). each (functie (index) $ (this) .text ((index + 1) + ":" + $ (this) .text ()); // Voegt nummers toe aan kopteksten );

Probeer deze bijbehorende demo.

Laatste gedachten

In deze zelfstudie heb ik ongewone selectors besproken die u mogelijk tegenkomt bij het gebruik van jQuery. Hoewel de meeste van deze selectors alternatieven hebben die u kunt gebruiken, is het nog steeds goed om te weten dat deze selectors bestaan. 

Ik hoop dat je in deze tutorial iets nieuws hebt geleerd. Als je vragen of suggesties hebt, reageer dan alsjeblieft.