Dans cette partie, nous allons étudier plus en détails les fonctions de base du framework JavaScript jQuery
La fonction jQuery()(ou son équivalent simplifié la fonction $()) est la fonction de base du framework, c'est elle que vous serez amené à utiliser le plus souvent. Il est donc important de connaître en détail son fonctionnement. Il existe 4 utilisations différentes pour la fonction jQuery qui vont vous permettre notamment de récupérer un élément HTML de votre page ou encore créer un nouvel élément HTML dans votre page.
La fonction each(function) permet d'exécuter un traitement pour chaque élément d'une liste récupérée par la fonction jQuery. Le traitement à effectuer doit être défini dans une fonction passée en paramètre. (en savoir plus)
Le but de cet exemple est de parcourir une liste d'éléments span pour leur appliquer un traitement spécifique. Le traitement à appliquer est défini dans une fonction et consiste à numéroter chaque span. Le premier attribut de la fonction (appelé ici index) contient le numéro de l'élément courant dans la liste. A noter que la numérotation commence à zéro (comme souvent en informatique). L'utilisation du mot clé this permet de récupérer l'élément courant.
$("#demo1 span").each(function(index){
$(this).html(index+1);
});
$("#demo2 span").each(function(i){
var index = i+1;
$(this).html(index);
if(index==2){return true;}
$(this).css("background","#C1D4EA");
if(index==3){return false;}
});
$("ul.alt-style li").each(function(i){
var color = i%2? '#999' : '#FFF';
$(this).css("background", color);
});
La propriété length retourne le nombre d'éléments de l'objet jQuery. Elle retourne le même résultat que la fonction size() mais son exécution est légèrement plus rapide (à utiliser donc de préférence)
$("a.add").click(function(){
if( $("#demo-length div").length<6){
$("#demo-length").append($("<div>"));
}
return false;
});
$("a.count").click(function(){
var n = $("#demo-length div").length;
alert("il y a "+n+" divs");
return false;
});
$("a.reset").click(function(){
$("#demo-length").empty();
return false;
});
ajouter | compter | reset (6 divs maxi)
$("#demo-size").click(function () {
$("#demo-size").append($("<div>"));
var n = $("#demo-size div").size();
$("span#counter").text("Il y a " + n + " divs." + "Cliquer pour en ajouter.");
}).click();
La fonction eq(position) permet de récupérer un élément spécifique dans une liste de résultats jQuery. Cette fonction prend en argument la position de l'élément dans la liste.
$("ul.demo-eq li").eq(2).css("background", "#999");
La fonction get() permet de récupérer les éléments de type DOM (objets javascript standards) qui sont "encapsulés" dans l'objet jQuery. La liste des éléments est retournée sous forme de tableau. Cette fonction est très utile si vous souhaitez utiliser directement les propriétés des élément DOM au lieu des propriétés jQuery.
$("#demo-get a").click(function(){
var tableau = $("#demo-get ul li").get().reverse();
var tmp= [];
for (var i = 0; i < tableau.length; i++) {
tmp.push(tableau[i].innerHTML);
}
for (var i = 0; i < tmp.length; i++) {
$("#demo-get ul li").get(i).innerHTML=tmp[i];
}
return false;
});
$(function(){
$("#demo2-get *").click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0); //équivalent à $(this)[0]
$("#demo2-get span").html("Elément de type - " + domEl.tagName);
});
});
Texte dans un paragraphe avec un mot important
La fonction index(element) parcourt la liste des éléments récupérés par une fonction jQuery pour y rechercher l'élément passé en paramètre. Si l'élément est trouvé la fonction retourne sa position (index) dans la liste, si l'élément est introuvable la fonction retourne -1
Dans nottre exemple, nous associons à chaque clic sur un item de type <li> une fonction qui va afficher la position (index) de l'élément dans la liste (rappel : la numération commence à zéro)
$("#demo-index li").click(function () {
var index = $("#demo-index li").index(this);
$("#demo-index span").html("Index du li : " + index);
});