jQuery peut sélectionner tout ce que CSS3 peut sélectionner. Mais ça ne s'arrête pas là! Il existe un certain nombre de sélecteurs supplémentaires proposés par jQuery (via le moteur de sélection Sizzle) qui sont parfois très utiles. Par exemple, CSS a des sélecteurs d'attributs qui vous permettent de sélectionner un élément en fonction de tout attribut arbitraire que l'élément pourrait avoir. Par exemple:
Il existe un sélecteur CSS que nous pouvons utiliser dans jQuery pour sélectionner cela:
$("(data-whatever='elephant-eyeballs')");Il existe des variantes du sélecteur d'attribut, comme au lieu de =vous pouvez le faire ^=pour indiquer «commence par cette valeur». Mais pour une raison quelconque, CSS n'a pas! = Ou «pas égal à cette valeur». jQuery fait! C'est un exemple d'extension de sélecteur jQuery.
Il existe de nombreuses extensions de sélecteurs. Quelques-uns dont nous parlons spécifiquement dans ce screencast:
- : eq () - une version indexée 0 de: nth-child ()
- : pair - raccourci pour: nth-child (pair)
- : gt (n) - sélectionne les éléments avec un index supérieur à n. Aussi un raccourci pour un forumla plus complexe: nth-child ().
Peut-être l'extension de sélecteur la plus utile de toutes est: has () - qui limite la sélection aux éléments qui contiennent ce que vous passez à ce pseudo sélecteur (ou est-ce un pseudo pseudo sélecteur :) Il est probable qu'un jour dans le futur CSS aura quelque chose comme ça pour nous (je pense que ça va être comme pre ! code) mais c'est loin. Malheureusement, je ne fais pas un argument très convaincant pour cela dans ce screencast, mais vous saurez quand vous en aurez besoin! Par exemple «Sélectionnez tous les .modules qui contiennent une barre h3.sports» - ce genre de chose.
Vous pouvez également créer vos propres extensions de sélection si vous le souhaitez. Voici un article à ce sujet. L'exemple est de faire :inviewqui sélectionne un élément uniquement s'il est visible sur la page à la position de défilement actuelle. Ce serait comme ça:
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); ) ));