Arts numériques

Le sélecteur $
Dans jQuery, on procède comme dans les déclarations css : on sélectionne un ou plusieurs éléments de la page et on associe des actions àcet élément. Pour ce faire, on utilise le sélecteur de jQuery, un signe "$" suivi d’une parenthèse dans laquelle on décrit les éléments que l’on veut atteindre.

$("h1").html("test"); // remplacer le contenu par un texte
$("li").css("background-color","red"); // associer un comportement css
$(".truc article").append("<div>Fin</div>"); // ajouter un élément en fin de l'élément
$(".machin").addClass("truc"); // ajouter une classe à l'élément
$("header a").click(function(){ 
    alert("Ok!"); 
}); // associer une action en clic

Une fois l’élément sélection, on peut associer des actions diverses. Les exemples ci-dessus constituent des exemples de base, mais la liste est beaucoup plus longue.

Changer la css d’un élément

Dans le code html :

 <div class="ceci">un element</div>

Dans une fonction :

 $(".ceci").css("background-color", "red");

On sélectionne l’élément àjoindre, ici la class "ceci". Attention, bien préciser qu’il s’agit d’une classe en mettant le point devant comme dans une déclaration css.
Ensuite, on attribue un comportement, ici une couleur de fond. Si on veut attribuer deux comportements :

 $(".ceci").css("background-color", "red").css("color","white");

Vous voulez changer plus de comportement d’un coup : attribuez une class àun élément !

Ajouter une classe àun élément

Dans le code html :

 <div class="ceci">un element</div>

Dans une fonction :

 $(".ceci").addClass("cela");

mettre du texte (ou du code) dans un élément

Dans le code html :

<div class="ceci">un element</div>

Dans une fonction :

 $(".ceci").html("vlooooom");

Cela va changer le contenu de l’élément "ceci" par vlooom.

Stocker le texte (ou le code) d’un élément dans une variable

Dans le code html :

 <div class="ceci">un element</div>

Dans une fonction :

 var lecontenu = $(".ceci").html();
alert(lecontenu);

Une fenêtre d’alert affichera sans surprise "un element".