Custom jQuery Selectors aborde la création de sélecteurs personnalisés au cas où ceux proposés par jQuery ne suffiraient pas. Dans l’exemple donné, il s’agit de parcourir le DOM à la recherche des balises HTML possédant un attribut rel renseigné :

$.expr[':'].withRel = function(obj){
    var $this = $(obj);
    return ($this.attr('rel') != '');
};
// Usage:
$('a:withRel').css('background-color', 'yellow');

Menu déroulant Suckerfish — réécriture du très populaire Suckerfish Dropdown pour implémenter des menus déroulants sur plusieurs niveaux. Ce script de 12 lignes crée une classe sfHover sur un élément li pour émuler la pseudo-classe :hover pour Internet Explorer qui ne l’applique que sur les ancres a, notamment. Ce script est léger, accessible, basé sur les feuilles de styles et non-intrusif (à part dans la feuille de style puisqu’il faut doubler le sélecteur li:hover avec la classeli.sfHover).

Suckerfish Shoal — Si le script précédent vous a plu, vous êtes mûrs pour passer la vitesse supérieure avec ce jeu de fonctions dérivées de Suckerfish pour émuler les pseudo-classes :hover, :focus, :active et :target sur l’élément HTML que vous voulez :

• `suckerfish(sfHover, « LI », « nav »);` pour appliquer `:hover` sur un élément `li` placé dans `#nav`.
• `suckerfish(sfFocus, « INPUT »);` pour donner le `focus` aux éléments `input`.

Superfish — Menu déroulant avec des morceaux d’accessibilité (délais avant l’ouverture, navigation avec la touche tab). Vous pouvez voir ce menu déroulant en action sur css 4 design.

Vous le savez sans doute, mais si le DOM propose une fonction pour sélectionner un élément par son id ou son nom, ce n’est pas (encore) le cas pour sélectionner les éléments qui partagent une ou plusieurs classes. C’est là qu’intervient The Ultimate GetElementsByClassName déjà évoqué dans Utillisez le DOM et Javascript comme un chef pour redéfinir le comportement des balises HTML.

Quelques exemples d’utilisation :

• getElementsByClassName("info-links"); — tous les éléments avec la classe info-links,
• getElementsByClassName("col", "div", document.getElementById("container")); — tous les éléments div contenus dans #container et possédant la classe col,
• getElementsByClassName("pince-me pince-moi"); — tous les éléments avec les classes pince-me et pince-moi.

cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3. Alternative à jQuery et autres frameworks Javascript pour accéder aux éléments constitutifs du DOM quelque soit le navigateur pour environ 7 KB !

Quelques exemples d’utilisation :

• var tags = cssQuery("body > div"); sélectionne toutes les balises div descendants directement de body,
• var images = cssQuery("img", tags); donne la liste des balises img présentes dans la variable tags vue plus haut,
• Devinez-donc ce que donne var argh = "p>a:first-child+input[type=text]~span";

DOMAssistant — Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse pour lancer des fonctions sur un ensemble d’éléments, par exemple. Supporte les sélecteurs CSS 1, CSS 2 et CSS 3.

Quelques exemples :

• $("#container input[type=text]");
• $("#navigation a").addEvent("click", myFunc);
• $("#news-list").load("updated-news.php");

Cerise sur le gâteau, cette bibliothèque est modulaire et la documentation existe en français. Le poid ? Moins de 10 ko en version compressée.