  Introduction à JQuery
[10 mn de lecture - paru le 11/8/2006 5:18:53 PM - Public : Débutant]
|
|
Auteur
Accès aux éléments du DOM
La programmation avec JQuery est basée sur le DOM.
L'accès aux éléments de ce derniers est facilité grâce à la fonction $() qui est en fait le cœur de JQuery. $() retourne un objet du ou des élément(s) demandé(s). C'est avec cette fonction que l'approche orientée objet est gérée et que vous pourrez directement agir sur les éléments du DOM. C'est à dire que vous ne pourrez pas accéder aux méthodes de JQuery sans passer par $().
Pour sélectionner les éléments voulu, $() propose diverses fonctionnalitées. Tout d'abord, vous pouvez oublier les fonctions telles que getElementById. Cela est remplacé par un appel tout bête à $().
Exemple :
document.GetElementByID("monDiv") devient $("#monDiv")
document.GetElementsByName("monNom") devient $("@name=monNom")
De la même manière vous pouvez acceder aux classes css : $(".maClasse").
Mais ce n'est pas tout ! $() gère la plupart des élèments CSS3 et XPATH.
Vous pouvez donc avoir accès facilement à tous les élèments du DOM.
Exemple1 :
- Avec CSS : $("div > p") va retourner tout les paragraphes qui ont pour parent un div.
- Avec XPath : De la même manière vous auriez pu écrire : $("//div/p").
Exemple2 :
<html>
<head>
<title>Un exemple</title>
</head>
<body>
<div>
<p>Mon 1er paragraphe ici.</p>
<p>Mon 2ème paragraphe ici.</p>
<p>Mon 3ème paragraphe ici.</p>
</div>
</body>
</html>
Pour récupérer les 3 paragraphes, on peut utiliser $("div > p"). Ainsi $("div > p").background("red") va coloriser les fonds des trois paragraphes en rouge.
Si on avait voulu coloriser seulement le 2° paragraphe, on aurait pu écrire : $("//div/p[2]").background("red").
Les utilisations de CSS et de XPath dépassant le cadre de cet article, je vous invite à vous documenter à l'aide des liens disponible dans la partie conclusion.
Sachez néanmoins que cela est très puissant et vous permet de sélectionner n'importe quel élément ou groupe d'éléments du DOM et d'agir directement dessus.
Un dernier exemple :
Si vous voulez cacher tous les éléments div qui ont pour classe "hideMe" en cliquant dessus le tout avec un effet d'effacement, il suffit d'écrire :
$(".hideMe").click(function() {
$(this).fadeOut("slow");
});
|
18 Visites
Mathieu SEGUIN
[10 mn de lecture - paru le 11/8/2006 5:07:59 PM - Public : Débutant]
[25 mn de lecture - paru le 11/8/2006 4:57:49 PM - Public : Débutant]