jQuery kan alles selecteren dat CSS3 kan selecteren. Maar daar stopt het niet! Er zijn een aantal extra selectors die jQuery biedt (via de Sizzle selector-engine) die soms behoorlijk handig zijn. CSS heeft bijvoorbeeld attribuutkiezers waarmee u een element kunt selecteren op basis van een willekeurig attribuut dat het element zou kunnen hebben. Bijvoorbeeld:
Er is een CSS-selector die we in jQuery kunnen gebruiken om dat te selecteren:
$("(data-whatever='elephant-eyeballs')");Er zijn variaties op de attribuutselector, zoals u in plaats van =kunt doen ^=om aan te geven "begint met deze waarde". Maar om de een of andere reden heeft CSS! = Of "niet gelijk aan deze waarde". jQuery doet! Dat is een voorbeeld van een jQuery-selector-extensie.
Er zijn veel van deze selector-extensies. Een paar waar we het specifiek over hebben in deze screencast:
- : eq () - een 0-geïndexeerde versie van: nth-child ()
- : even - snelkoppeling voor: nth-child (even)
- : gt (n) - selecteer elementen met een grotere index dan n. Ook een snelkoppeling voor een meer complexe: nth-child () forumla.
Misschien wel de handigste selector-extensie van allemaal is: has () - die de selectie beperkt tot elementen die bevatten wat je doorgeeft aan deze pseudo-selector (of is het een pseudo-pseudo-selector :) Het is waarschijnlijk dat CSS ooit in de toekomst zoiets zal hebben als dit voor ons (ik denk dat het zo zal zijn pre ! code) maar dat is nog ver weg. Helaas maak ik er in deze screencast geen erg overtuigend argument voor, maar je weet wanneer je het nodig hebt! Bijvoorbeeld “Selecteer alle .module's die een h3.sports-balk bevatten” - dat soort dingen.
U kunt desgewenst ook uw eigen selectie-extensies maken. Hier is een artikel over. Het voorbeeld is om te maken :inviewdie een element alleen selecteert als het zichtbaar is op de pagina op de huidige schuifpositie. Het zou zo zijn:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));