jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Débuter > Danse avec jQuery : deuxième pas

Danse avec jQuery : deuxième pas

lundi 2 octobre 2006, par toggg

Article original : http://jquery.bassistance.de/jquery...
merci à © 2006, Jörn Zaefferer - mise à jour : 2006-09-12.

La suite de Danse avec jQuery : premier pas


Trouvez-moi : utilisation des sélecteurs et des événements

JQuery propose deux approches pour sélectionner des éléments. La première utilise une combinaison de sélecteurs CSS et XPath passés comme chaîne de caractères au constructeur jQuery (comme par exemple $("div > ul a")). La seconde se sert de différentes méthodes de l’objet jQuery. Les deux approches peuvent être combinées.

Pour essayer certains de ces sélecteurs, sélectionnons et modifions la première liste ordonnée dans notre kit de démarrage.

Au départ, sélectionnons la liste elle-même. Cette liste a un id « orderedlist ». En javascript classique vous pourriez la sélectionner avec document.getElementById("orderedlist"). Avec jQuery, cela devient :

$(document).ready(function() {
        $("#orderedlist").addClass("red");
});

Le kit de démarrage fournit une feuille de style avec une classe « red » qui ajoute simplement un fond rouge. Donc, si vous rechargez la page dans votre navigateur, vous devriez voir que la première liste ordonnée obtient un fond rouge. La deuxième liste n’est pas modifiée.

Maintenant, ajoutons des classes aux enfants de cette liste.

$(document).ready(function() {
        $("#orderedlist > li").addClass("blue");
});

Cela sélectionnne tous les enfants <li> de l’élément avec l’id orderedlist et leur ajoute la classe « blue ».

Quelque chose d’un peu plus sophistiqué : nous voulons ajouter et enlever la classe quand l’utilisateur survole l’élément <li>, mais seulement pour le dernier élément de la liste.

$(document).ready(function() {
        $("#orderedlist li:last").hover(function() {
                $(this).addClass("green");
        }, function() {
                $(this).removeClass("green");
        });
});

De nombreux autres sélecteurs à la syntaxe similaire à CSS ou XPath existent. Des exemples supplémentaires et une liste de toutes les expressions disponibles se trouvent ici

Pour chaque événement onxxx existant — comme onclick, onchange, onsubmit, etc. — il existe un équivalent jQuery. D’autres événements comme ready et hover sont fournis par commodité pour certaines tâches.

Vous pouvez trouver une liste complète des événements sur Visual jQuery dans la section Events.

Grace à ces sélecteurs et ces événements vous pouvez déjà faire plein de choses, mais il y a mieux.

$(document).ready(function() {
        $("#orderedlist").find("li").each(function(i) {
                $(this).html( $(this).html() + " BAM! " + i );
        });
});

find() vous permet des recherches supplémentaires parmi les descendants de l’élément déjà sélectionné, ainsi $("#orderedlist).find("li") est tout à fait similaire à $("#orderedlist li"). each() balaye chacun des éléments et permet des traitements supplémentaires. La plupart des méthodes, comme addClass(), utilisent each() elles-même. Dans cet exemple, html() est utilisée pour récupérer le texte de chaque élément <li>, lui ajouter du texte et le réaffecter comme texte de ces éléments.

Une autre tâche que vous avez fréquemment à remplir est d’appeler des méthodes sur des éléments DOM non couverts par jQuery. Imaginez un formulaire que vous voudriez réinitialiser lorsqu’il a été traité correctement par soumission AJAX.

$(document).ready(function() {
        // utilisez ceci pour reinitialiser un formulaire unique
        $("#reset").click(function() {
                $("#form")[0].reset();
        });
});

Ce code sélectionne l’élément ayant l’ID « form » et appelle reset() sur le premier élément sélectionné. Si vous aviez plusieurs formulaires, vous pourriez aussi faire ceci :

$(document).ready(function() {
        // utilisez ceci pour réinitialiser plusieurs formulaires d'un coup
        $("#reset").click(function() {
                $("form").each(function() {
                        this.reset();
                });
        });
});

Cela sélectionnerait tous les formulaires au sein de votre document, les parcourerait et appellerait reset() pour chacun d’entre eux.

Un autre besoin que vous pouvez rencontrer est de ne pas sélectionner certains éléments. jQuery fournit filter() et not() pour cela. Alors que filter() réduit la sélection aux éléments qui correspondent à l’expression du filtre, not() fait le contraire et enlève tous les éléments correspondant à l’expression. Imaginez une liste non ordonnée où vous voudriez sélectionner tous les éléments <li> qui n’ont pas eux-même d’enfant <ul>.

$(document).ready(function() {
        $("li").not("[ul]").css("border", "1px solid black");
});

Cela sélectionne tous les éléments <li> puis retire de cette sélection tous ceux qui ont un <ul> comme enfant. Ainsi, tous les éléments <li> récupèrent une bordure, hormis ceux qui ont un enfant <ul>. La syntaxe de [expression] est issue de XPath et peut être utilisée pour filtrer par éléments enfants et par attributs. Peut-être voulez-vous sélectionner toutes les ancres qui ont un attribut name :

$(document).ready(function() {
        $("a[name]").css("background", "#eee");
});

Cela rajoute une couleur de fond à toutes les ancres ayant un attribut name.

Plus fréquemment que sélectionner les ancres par name, vous aurez besoin de sélectionner les ancres par leur attribut href. Ca peut devenir problématique car les navigateurs ne considèrent pas tous les valeurs de href de la même façon. Pour correspondre à seulement une partie de la valeur, on peut utiliser le sélecteur « contient » *= en place d’une égalité stricte (=) :

$(document).ready(function() {
        $("a[href*=/content/gallery]").click(function() {
                // faire quelque chose avec tous les liens pointant
              // quelque part avec /content/gallery
        });
});

Jusqu’à maintenant, tous les sélecteurs ont été utilisés pour sélectionner des enfants ou filtrer la sélection. Il y a des situations où l’on a besoin de sélectionner les éléments précédents ou suivants, dénommés « siblings » (frères et sœurs : enfants du même parent). Imaginez une page de FAQ, où toutes les réponses sont cachées au départ, et affichées lorsque la question est cliquée [1]. Le code jQuery pour ça :

$(document).ready(function() {
        $('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});

Ici, nous utilisons des enchaînements pour réduire la taille du code et obtenir de meilleures performances, puisque #faq ne sera sélectionné qu’une seule fois. En utilisant end(), le premier find() est annulé, ainsi nous pouvons nous mettre à chercher avec le prochain find() pour notre élément #faq plutôt que les enfants <dd>.
NdT : si on ne mettait pas le end() , la recherche continuerait au sein de la sélection précédente (les <dd> de #faq) et pas sur tout #faq de là où on est

A l’intérieur du gestionnaire click, la fonction passée à la méthode click(), nous utilisons $(this).next() pour trouver le « sibling » suivant à partir du <dt> courant. Cela nous permet de sélectionner rapidement la réponse suivant la question cliquée.

Au delà des enfants de même parent (siblings), vous pouvez aussi sélectionner des éléments parents (connus comme « ancêtres » dans le vocabulaire de XPath). Peut-être voulez-vous mettre en évidence le paragraphe qui est le parent du lien que l’utilisateur survole. Essayez ceci :

$(document).ready(function() {
        $("a").hover(function() {
                $(this).parents("p").addClass("highlight");
        }, function() {
                $(this).parents("p").removeClass("highlight");
        });
});

Pour tous les éléments ancres survolés, le paragraphe parent est retrouvé et une classe « highlight » lui est ajoutée (et enlevée lorsque le pointeur sort de la zone survolée).

Revenons d’une étape en arrière avant de continuer : jQuery privilégie le code plus court et donc plus facile à lire et à maintenir. Ce qui suit est un raccourci pour la notation $(document).ready(callback)

$(function() {
        // code à exécuter quand le DOM est chargé
});

Appliqué à l’exemple « Hello world ! », nous finissons avec :

$(function() {
        $("a").click(function() {
                alert("Hello world!");
        });
});

Liens à retenir :
- Documentation de l’API jQuery
- Visual jQuery - documentation de l’API navigable par catégories
- Expressions jQuery : CSS
- Expressions jQuery : XPath
- Expressions jQuery : Extensions
- Evènements spécifiques jQuery
- Parcours du DOM jQuery

P.-S.

Maintenant que nous avons les bases en mains, nous explorerons d’autres aspects dans le prochain chapitre, en commençant par AJAX.

La suite : Danse avec jQuery : troisième pas

Notes

[1] NdT : par exemple sur http://www.spip.net/@

Répondre à cet article

11 Messages de forum


Derniers commentaires

Nouveautés sur le Web