• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Modifier la structure

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

La création d'éléments, la manipulation de leurs attributs, les formulaires ainsi que quelques méthodes bien utiles qui permettent de boucler sur des éléments seront expliqués ici. Vous comprendrez ainsi en quoi la manipulation du DOM est d'une simplicité remarquable avec jQuery.

La lecture de la première sous-partie est fortement recommandée : elle introduit quelques notions afin de comprendre ce qui se passe dans jQuery ainsi que la structure du document. La seconde sous-partie expliquera comment passer une fonction en argument d'une méthode.

C'est dans les sous-chapitres suivants que nous rentrerons au cœur du sujet.

jQuery et le document

DOM

La page web contient des éléments (des balises), qui elles-mêmes sont susceptibles de contenir d'autres éléments.
Cette organisation de la page web forme un « arbre » où un élément parent contient des fils, qui eux-mêmes sont susceptibles d'être parents.

Le DOM est un ensemble d'interfaces standardisées, décrivant cet « arbre ». Concrètement, on les utilise en JavaScript grâce à l'objet document, qui grâce à ses nombreuses méthodes (getElementById(), createElement(), que vous connaissez par exemple) nous permettent de récupérer des éléments, et ainsi les modifier grâce à leurs propriétés et à leurs méthodes (setAttribute(), innerHTML, addEventListener, etc...).

Objet jQuery

La fonction principale renvoie un objet jQuery. Un objet jQuery contient tout un tas d'éléments de la page web, sur lesquels on peut appliquer des méthodes pratiques, qu'on va apprendre au fur et à mesure du tutoriel.
Ainsi $('body') retourne un objet jQuery contenant un seul élément, $('a') retourne un objet jQuery pouvant contenir 0, 1 ou plusieurs éléments.

On peut accéder au n-ième élément contenu dans un objet jQuery en écrivant [n] à la suite de cet objet. [0], [1] et [28] désignent alors respectivement le premier, le second et le vingt-neuvième élément.

html() et after() s'utilisent bien sûr avec un objet jQuery ; html() ne renvoie le contenu que du premier élément ([0]) de tous les éléments contenus dans l'objet jQuery.

Élément du DOM

$('body')[0]désigne le premier élément de l'objet jQuery résultant de l'appel à la fonction principale, c'est un élément du DOM.
Cette fois, les méthodes ne sont pas applicables ! Ce code ne fonctionne donc pas : $('p')[0].html('salut !').

Nom de la balise

Les méthodes peuvent être appelées pour un objet jQuery. À l'inverse, des variables comme tagName ne peuvent être récupérées qu'avec un élément du DOM (nous ne sommes alors plus dans le domaine de jQuery, mais du JavaScript en général), donc $('body').tagName ne marche pas !

// Renvoie 'body'.
$('body')[0].tagName.toLowerCase();

Mais que contient réellement cet objet jQuery ?

On a l'impression qu'un objet jQuery est un tableau d'éléments. Or, cela n'est pas vrai : comme vous pouvez le constater, un objet jQuery contient la variable selector.

Mais alors comment se fait-il que je puisse accéder au premier élément en faisant [0] ?

C'est simple, voyez par vous-même dans ce code :

// Déclaration d'un objet.
var objet = {};

// Déclaration d'attributs.
objet.variable1 = 'Hello';
objet['variable2'] = 'World';
// Affiche 'Hello World'.
alert(objet.variable1+' '+objet.variable2);

// On ne peut pas utiliser le point
// car une variable ne commence
// jamais par un chiffre.
objet[0] = 'premier élément';
// [0] ou ['0'] reviennent au même.
objet['1'] = document.getElementById('titre');
// Affiche 'premier élément'.
alert(objet[0]);
// Affiche 'titre' si la balise existe.
alert(objet[1].id);

// Ce sont des variables comme les autres
// donc je mets ce que je veux !
objet.length = 'Moi aimer frites !';
objet.selector = 89;

Les éléments ([0], [1] etc.) contenus dans un objet jQuery sont donc des attributs de cet objet.
On ne peut pas utiliser le point pour les désigner car, comme dit plus haut, une variable ne commence jamais par un chiffre.

Image utilisateur

Ce que contient un objet jQuery, par exemple $('.super')

Transformer un objet jQuery en tableau

Une méthode pratique, get() (ou toArray()), permet de transformer un objet jQuery en tableau.
Cette méthode, appelée sans rien, renvoie un tableau contenant ce que contient l'objet jQuery, mais sans selector. Un vrai tableau.

Une fois que l'objet jQuery est transformé en tableau :

  • length ne sera plus une variable décidée par jQuery mais une vraie variable relative aux tableaux ;

  • on peut alors appliquer les méthodes pratiques des objets Array (join(), slice() etc. cf. cours JavaScript) ;

  • on peut alors manipuler les éléments normalement (cf. cours JavaScript).

Références à des éléments du DOM

Un objet jQuery contient donc plusieurs références à des éléments du DOM (il peut aussi il n'y en avoir qu'une seule, voire aucunes).
Un objet jQuery ne contient donc pas de copies d'éléments du DOM. C'est-à-dire que quand vous appliquez des méthodes jQuery sur un objet jQuery, il y a modification des éléments du DOM qu'il contient.
Cette modification se répercute alors directement sur la page web que vous voyez !

Image utilisateur

Un objet jQuery contient des références à des éléments du DOM

Par contre quand vous utilisez la méthode clone(), apprise au chapitre précédant, toute modification des éléments modifie... ces éléments, et pas la page web !
Ceci s'explique par le fait que ces éléments sont des copies et non pas des références (l'équivalent des pointeurs dans d'autres langages ;) ).
Vous pouvez ensuite placer ces éléments dans la page web avec les méthodes du chapitre précédant (comme appendTo par exemple).

Parents et enfants

  • parents() est une méthode qui renvoie l'ensemble des éléments parents des éléments en question. Cette méthode peut renvoyer plusieurs éléments par élément concerné par l'appel à cette dernière.

  • parent() est une méthode qui renvoie l'élément parent direct des éléments en question. Cette méthode ne peut renvoyer qu'un seul élément par élément concerné par l'appel à cette dernière.

  • children() est une méthode qui renvoie les éléments enfants directs des éléments en question, c'est-à-dire qu'elle ne renverra pas les enfants des enfants. Cette méthode peut renvoyer plusieurs éléments par élément concerné par l'appel à cette dernière.

Ces trois méthodes peuvent prendre en argument une expression qui filtrera les éléments : ceux qui ne conviennent pas au sélecteur seront supprimés des éléments retournés (les méthodes peuvent ne rien retourner !).

// Affiche 'HTML'.
alert($('body').parent()[0].tagName);
// Affiche 'HEAD'.
alert($('title').parents()[0].tagName);

Passer une fonction aux méthodes

Fonctions anonymes

Désormais, la plupart des méthodes jQuery peuvent prendre des fonctions anonymes en argument.

Une fonction anonyme est une fonction qu'on crée « sur le tas ». Elle sera appelée par la méthode qui en aura besoin une ou plusieurs fois, les arguments qu'elle prend dépendront donc de l'utilisation que la méthode en fait (tout cela sera précisé).

$(expression).methode(function(){
  // Action
});

Bien sûr, au lieu de donner en paramètre une fonction anonyme, on peut aussi donner en paramètre une référence à une fonction :

function maFonction(){
  // Action
};
$(expression).methode(maFonction);

La première utilisation est tout de même beaucoup plus répandue.

Le mot-clé this est disponible dans ces fonctions, représentant un élément du DOM.

this et les fonctions des méthodes

Une autre façon d'appeler la fonction principale est de donner un élément du DOM. La fonction principale le transforme alors en objet jQuery, les méthodes sont maintenant applicables.
Par exemple $(document) ou encore $(document.body) !

La variable length (et donc ce que renvoie la méthode size()) est alors égale à 1. La variable selector est une chaîne de caractères vide.

Donc, dans une fonction passée à une méthode, il faut utiliser $(this) afin d'utiliser les méthodes jQuery sur les éléments qu'on modifie grâce à la méthode.

Les deux types d'utilisation des méthodes

Nous avons à peine commencé à apprendre quelques méthodes jQuery qu'on s'aperçoit déjà que certaines méthodes s'utilisent de deux façons différentes.
Par exemple, pour html(), on peut récupérer le contenu, ou le définir.

  1. Une méthode qui définit un paramètre est appelée « setter »

  2. Une méthode qui récupère un paramètre est appelée « getter »

La plupart des méthodes ont des utilisations qui la rendent getter et d'autres utilisations qui la rendent setter.

Pour html() : l'utilisation $('#titre').html('Ceci est le titre de la page !'); est setter alors que l'utilisation alert( $('#titre').html() ); est getter !
Rien de bien compliqué, ce vocabulaire vous sera utile lorsque vous lirez la documentation en anglais ;) .

Les fonctions en argument dans les méthodes déjà apprises

Une des nouveautés de la version 1.4 de jQuery est de pouvoir passer des fonctions en argument à toutes les méthodes setter.
Avant la 1.4, seules quelques méthodes (attr(), css()...), que nous allons apprendre plus tard, avaient cette fonctionnalité.
Le premier argument de ces fonctions est le numéro de l'élément en question dans l'objet jQuery. Le second argument est parfois (ce sera mentionné) la valeur de ce qu'on définit (revient au même que le résultat de la méthode utilisée en getter).

Ainsi la plupart des méthodes apprises lors du chapitre précédent acceptent des fonctions en argument ! Ainsi, sont concernées : html(), text(), replaceWith(), prepend(), append(), after(), before(), wrap(), wrapInner().

Les méthodes du second chapitre dont le second argument de la fonction est la valeur qu'on définit sont : html(), text(), append() et prepend().

$('p').prepend(function(i){
  return i + 'ème : ';
});

Ce code ajoute à chaque début de paragraphe le combien-ème il est dans la page.

Créer des éléments

Créer des éléments en utilisant le DOM...

Au lieu de donner un sélecteur à la fonction principale, on peut aussi créer des éléments : la chaîne de caractères est alors le nom de la balise comme si elle était simple (c'est-à-dire le nom de la balise entourée de chevrons ainsi que le slash utilisé afin de fermer les balises avant le chevron droit).

Afin de créer un élément, on utilisait document.createElement('balise') ; c'est donc $('<balise/>') avec jQuery. Par exemple $('<h1 />') crée un titre de niveau 1.

... ou en utilisant innerHTML !

On peut aussi passer du html à la fonction principale avec des balises, des attributs et leurs valeurs ainsi que du contenu (qui peut être d'autres balises).
Par exemple ce code produit une zone de texte avec ses attributs, son contenu et son style :

$('<textarea id="zonedetexte" cols="28" style="border: 2px solid #ff8;">Ceci est une\nzone de texte !</textarea>');

Cette utilisation de jQuery, bien qu'utile et fonctionnelle, montre ses limites en ne respectant pas les standards du W3C et en ne faisant pas partie du DOM.

Vérifier qu'on utilise bien le DOM

Je vous parle de tout ça, mais vous n'avez aucune preuve qu'on appelle bien document.createElement() quand on fait $('<balise/>'). En voici une :

document._createElement = document.createElement;
document.createElement = function(balise){
  alert(balise+' créée !');
  document._createElement(balise);
};

Le principe est de faire une copie de createElement() et ainsi le redéfinir en prévenant avec une alert() de la balise créée.
Si quand on appuie un bouton (par exemple $('<span></span>')), surgit "div créée", c'est que jQuery fait appel à document.createElement() afin de créer une div remplie du code html en utilisant innerHTML (cf. plus haut).

Placer ces éléments

Dans ce code :

$('p.message_forum')
  .before(
    $('<div class="alerte">'
       +'Le webmaster ne saurait être tenu responsable des propos des internautes.'
     +'</div>'));

Il ne sert à rien d'utiliser la fonction $() dans before(). Quitte à injecter du code html, autant se passer de l'appel à $().

Les réelles utilités de cette utilisation de la fonction principale sont pour les méthodes prependTo(), appendTo(), insertBefore(), insertAfter() ainsi que replaceAll() (en effet on ne peut pas utiliser les méthodes jQuery avec des chaînes de caractères) :

$('<a href="lienmort.php" class="liemort">'
   +'Avertir le webmaster que ce lien est mort.'
 +'</a>')
    .insertAfter('a');

$('<legend>'
   +'Formulaire'
 +'</legend>')
    .prependTo('fieldset');

$('<h1>'
   +$('#titre').html()
 +'</h1>')
  .replaceAll('#titre');

L'indentation est là pour vous aider à la lecture.

Attributs

attr() est une méthode qui peut s'utiliser de quatre façons différentes.

Récupérer les attributs

attr('attribut') renvoie la valeur de l'attribut attribut. Le premier paramètre est donc une chaîne de caractères représentant l'attribut en question.

// Renvoie l'attribut 'title'
// de l'élément ayant comme id 'titre'.
$('#titre').attr('title');
// Écrit après #titre son attribut 'title'.
$('#titre').after($('#titre').attr('title'));

Définir les attributs

attr(attribut, valeur)

attr('attribut','valeur') définit la valeur de l'attribut attribut à valeur. Les paramètres sont donc des chaînes de caractères représentant, pour le premier, l'attribut en question, et le second, sa valeur.

$('div.header_gauche img').attr('title','le Site du Zér0');

Cette méthode se révèle pratique pour précharger des images en JavaScript : quand on a, par exemple, des éléments qui changent d'image arrière-plan lors du survol de la souris (element:hover{background-url: url(nouvelleImage.png)} ), cette image n'est téléchargée que lorsque la souris survole l'élément (ce qui prend donc du temps).
Pour y remédier, cette fonction précharge une image en la créant puis en lui attribuant sa source, tout ça sans la placer dans le document :

function prechargerImage(url){
  $('<img />').attr('src',url);
}

// Utilisation :
prechargerImage('logoDeMonSite.png');

On peut facilement imaginer une fonction qui prend autant d'arguments qu'on veut et qui précharge toutes les images (voir fin du chapitre pour each()) :

function prechargerImages(){
  $.each(arguments,function(){
    $('<img />').attr('src',this);
  });
}

// Utilisation :
prechargerImages(
  'logoDeMonSite.png',
  'imageSurvol.png',
  'imageClique.png');

Pour rappel arguments est le tableau contenant tous les arguments passés à la fonction.

attr(liste de couples attribut / valeur ou fonction)

Cette utilisation est la même que la précédente, sauf qu'on peut définir plusieurs couples attributs / valeurs à la fois. On utilise donc un objet.

Donc pour résumer : on met une accolade ouvrante avant et une accolade fermante après, on ne met pas de guillemet à l'attribut, on sépare l'attribut de la valeur par deux points et on sépare chaque couple attributs / valeurs par une virgule.

$('img').attr({
  title : 'Mes photos de vacances',
  alt : 'Ceci est une image',
  src : 'vacances.jpg'
});

Ce code change tous les attributs title, alt et src de toutes les images.

On peut aussi procéder de cette façon :

var attributsImages = {
  title : 'Mes photos de vacances',
  alt : 'Ceci est une image',
  src : 'vacances.jpg'
};

$('img').attr(attributsImages);

Si on veut les enlever et tout de même mettre des tirets, il suffit de supprimer ces derniers et de mettre une majuscule au caractère qui les suit (par exemple, position-horizontale deviendra positionHorizontale)
C'est la même différence qu'entre objet.attribut et objet['attribut'] !

attr(attribut, fonction)

On va créer une fonction anonyme. Cette fonction peut avoir un argument qui représente l'indice de l'élément en question ou non (il est facultatif). La variable commence à zéro et peut être nommée comme on le veut.
La fonction doit retourner la valeur de l'attribut.

$('img').attr('title',function(i){
  return 'Photo n°'+(i+1)+' : '+$(this).attr('src');
});

Notez le $(this) qui n'aurait pas été possible sans la fonction anonyme !

$('img').attr({
  title : function(i){
    return 'Photo n°'+(i+1)+' : '+$(this).attr('src');
  }
});

Autre exemple qui permet d' « anonymiser » votre site des liens que vous publiez :

$('a').attr('href',function(i){
  return 'http://anonym.to/?'+$(this).attr('href');
});

Ainsi le site cible ne saura pas que son visiteur provient de votre site !

On peut donc écrire le code ci-dessus plus simplement :

$('a').attr('href',function(i,href){
  return 'http://anonym.to/?'+href;
});

Supprimer un attribut

removeAttr(attribut) est une méthode permettant de supprimer l'attribut en paramètre. Cette méthode ne peut supprimer qu'un seul attribut à la fois.

// Tous les éléments de votre page perdront leurs classes.
$('*').removeAttr('class');
// Tous les liens de votre page ne s'ouvriront pas dans une nouvelle fenêtre .
$('a').removeAttr('target');
// Décoche toutes les checkbox et tous les boutons radio de la page.
$(':checkbox').removeAttr('checked');

Sélecteurs

Il existe des sélecteurs qui permettent de filtrer les éléments selon leurs attributs (j'en avais déjà donné deux comme exemples dans le premier chapitre sans les expliquer) :

Expression

Retour

[attr]

Éléments qui ont l'attribut attr.

[attr="val"]

Éléments dont la valeur de l'attribut attrest égale à par val.

[attr*="val"]

Éléments dont la valeur de l'attribut attrcontientval.

[attr!="val"]

Éléments dont la valeur de l'attribut attrne contient pasval.

[attr^="val"]

Éléments dont la valeur de l'attribut attrcommence par val.

[attr$="val"]

Éléments dont la valeur de l'attribut attrfinit par val.

// Change l'attribut target en _top
// de tous les liens qui ont l'attribut target à _blank.
$('a[target="_blank"]').attr('target','_top');
$('img[src$=".png"]').attr('title','cette image est un png');
$('*[id]').attr('title','cet élément a un id');

Ces sélecteurs peuvent s'ajouter entre eux :

$('.citation[typeQuestion="exclamation"][langueQuestion="espagnol"]')
  .prepend('¡ ')
  .append(' !');
$('.citation[typeQuestion="question"][langueQuestion="francais"]').append(' ?');

Attribut défini ou non

Si l'attribut n'existe pas ou n'est pas défini, attr() (en getter bien sûr) renvoie undefined .

Formulaires

Sélecteurs

Il existe des sélecteurs spécifiques aux formulaires :

  • :checked qui permet de sélectionner les checkbox cochées ou boutons radio sélectionnés.
    => <input type="checkbox" checked="checked" />, <input type="radio" checked="checked" />

  • :selected qui permet de sélectionner les option (provenant de select) sélectionnés.
    => <select><option selected="selected"></option></select>

  • :disabled qui permet de sélectionner les éléments de formulaires désactivés.

  • :enabled qui permet de sélectionner les éléments de formulaires actifs.

  • :input désigne tous les éléments d'un formulaire.
    => <input />, <textarea></textarea>, <select></select>, <button></button>

  • :button désigne tous les boutons.
    => <input type="button" /> et <button></button>

  • :reset désigne tous les boutons qui remettent à zéro le formulaire.
    => <input type="reset" /> et <button type="reset"></button>

  • :submit désigne tous les boutons qui envoient le formulaire.
    => <input type="submit" /> et <button type="submit"></button>

  • :checkbox désigne toutes les cases à cocher.
    => <input type="checkbox" />

  • :radio désigne tous les boutons radio.
    => <input type="radio" />

  • :text désigne tous les champs de texte.
    => <input type="text" />

  • :password désigne tous les champs de mots de passes.
    => <input type="password" />

  • :file désigne tous les champs d'envoi de fichier.
    => <input type="file" />

  • :image désigne tous les champs image.
    => <input type="image" />

  • :hidden désigne aussi les éléments du formulaire cachés.
    => <input type="hidden" />

Récupérer les valeurs

val() renvoie la valeur d'une balise de formulaire. La fonction peut renvoyer différents types d'information.

  • <input type="text" />, <textarea></textarea>, <input type="radio" /> et <select></select> : renvoie une chaîne de caractères représentant l'attribut value, pour les text et radio (celle sélectionnée), le contenu de la balise textarea pour cette balise, et le contenu de la balise option sélectionnée pour les select.

  • <input type="checkbox" />, <select multiple="multiple"></select> : renvoie un tableau de chaînes de caractères représentant les attributs value des checkbox cochées, et les contenus des balises option sélectionnées.

J'appellerai les formulaires de la première puce des formulaires "simples" et les formulaires de la seconde puce des formulaires "compliqués".

Formulaires simples

Dans ce bout de code :

<input type="text" id="texte" value="Salut!" />
<textarea id="zonetexte">Ceci est une
zone de texte !</textarea>
<input type="radio" name="choixradio" value="Radio 1" />Radio 1
<input type="radio" name="choixradio" value="Radio 2" />Radio 2
<input type="radio" name="choixradio" value="Radio 3" />Radio 3
<select id="choixselect">
  <option>Select 1</option>
  <option>Select 2</option>
  <option>Select 3</option>
</select>

On peut utiliser pour récupérer les valeurs de ces éléments :

// Renvoie 'Salut!'.
$("#texte").val();

// Renvoie 'Ceci est une\nzone de texte !'.
$("#zonetexte").val();

// Renvoie l'attribut value de la balise sélectionnée.
// Par exemple 'Radio 1'.
$('input[name="choixradio"]:checked').val();

// Renvoie le contenu de la balise option sélectionnée.
// Par exemple 'Select 1'.
$('#choixselect').val();
Formulaires compliqués

Dans ce bout de code :

<input type="checkbox" name="choixcheck" value="Choix CheckBox 1" /> Choix Checkbox 1
<input type="checkbox" name="choixcheck" value="Choix CheckBox 2" /> Choix Checkbox 2
<input type="checkbox" name="choixcheck" value="Choix CheckBox 3" /> Choix Checkbox 3
<select id="choixmultiple" multiple="multiple">
  <option>Select Multiple 1</option>
  <option>Select Multiple 2</option>
  <option>Select Multiple 3</option>
</select>

On peut utiliser pour récupérer les valeurs de ces éléments :

// checkbox sera différent selon que les checkbox sont cochées ou non.
// Par exemple :
//    '<br />Choix CheckBox 1 : Non Cochée' ;
//    '<br />Choix CheckBox 2 : Cochée' ;
//    '<br />Choix CheckBox 3 : Non Cochée'.

var checkbox = "";
$('input[name="choixcheck"]').each(function(){
  checkbox +=
    '<br />'+$(this).attr('value')+' : '+
    ($(this).attr('checked') == true ? '' : 'Non ')+'Cochée';
});

// ALTERNATIVE :
// checkbox contiendra une liste de toutes les checkbox cochées.
// Par exemple "Choix CheckBox 1,Choix CheckBox 2".

var checkbox = "";
$('input[name="choixcheck"]:checked').each(function(i){
  checkbox += (i>0 ? ',' : '')+$(this).attr('value');
});

// Renvoie les contenus des balises option sélectionnées.
// Par exemple "Select Multiple 1,Select Multiple 2,Select Multiple 3".
// Si elles sont toutes les trois sélectionnés.
$('#choixmultiple').val();

Voir à la fin de ce chapitre pour comprendre each().

Définir les valeurs

val(valeur) permet de définir la ou les valeur(s) des éléments d'un formulaire.

  • valeur doit être une chaîne de caractères pour les <input type="text" />, <textarea></textarea> et <select></select>.

  • valeur doit être un tableau de chaînes de caractères pour les <input type="checkbox" />, <select multiple="multiple"></select>.

Exemples :

  • <input type="text" /> => $('#texte').val('Bonjour!');

  • <textarea></textarea> => $('#zonetexte').val('Ceci est une grande\nzone de texte !');

  • <select></select> => $('#choixselect').val('Select 2');

  • <input type="checkbox" /> => $('input[name="choixcheck"]').val(['Choix CheckBox 1','Choix CheckBox 2']);

  • <select multiple="multiple"></select> => $('#choixmultiple').val(['Select Multiple 1','Select Multiple 3']);

Pour changer les valeurs des <input type="radio" />, on utilise attr('checked','checked') sur un élément :

// Sélectionne le second.
$('input[name="choixradio"]:eq(1)').attr('checked','checked');

Vous pouvez tester ces codes définissant les valeurs des formulaires sur cette page.

Boucler sur des éléments

each() sur un objet jQuery

each() est une méthode qui permet d'itérer (de boucler) sur les éléments d'un objet jQuery. C'est un peu l'équivalent en plus simple d'une boucle for.

On lui passe en argument une fonction anonyme qui va être appelée autant de fois qu'il y a d'éléments dans l'objet jQuery. La fonction sera donc un bout de code qui s'exécutera pour chaque élément. Si cette fonction retourne false, each()s'arrête d'itérer.

Cette fonction peut avoir un argument qui représente l'indice de l'élément en question (c'est le combien-ème ?) ou non. La variable commence à zéro et peut être nommée comme on le veut.
this représentera l'élément en question donc $(this)l'objet jQuery en question.

$('a').each(function(i) { 
  $(this) 
    .prepend('<small>Lien n°'+(i+1)+' »</small> ') 
    .append(' <small>« '+$(this).attr('href')+'</small>'); 
});
$('#checkboxs :checkbox').each(function(i){
  if(!$(this).attr('checked')){
    alert(i+" checkboxs cochées d'affilée depuis le début");
    return false;
  }
});

Voir aussi les codes plus haut dans le chapitre beaucoup plus intéressants qui nécessitent each() afin de les comprendre (ici et ).

Donc le premier exemple pourrait s'écrire :

$('a') 
  .prepend(function(i){
    return '<small>Lien n°'+(i+1)+' »</small> ';
  })
  .append(function(i){
    return ' <small>« '+$(this).attr('href')+'</small>';
  });

A vous de choisir ce que vous préférez. :)

each() avec des données

$.each() est une fonction (contenue dans l'objet jQuery) dérivée de la méthode each(), la différence étant qu'elle permet d'itérer sur un tableau ou un objet, passé en premier argument.
Son utilisation est assez simple :

  • si la variable passée en paramètre est un tableau, le premier argument de la fonction est l'index de l'élément courant dans le tableau et le second argument (ainsi que le mot-clé this) est la valeur de l'élément ;

  • si la variable passée en paramètre est un objet, le premier argument de la fonction est un attribut et le second argument (ainsi que le mot-clé this) est la valeur de cet attribut.

Dans le second cas, faites attention à ne pas mettre un attribut length à l'objet passé en paramètre à $.each(), sinon cette fonction va agir comme si l'objet était un tableau (et ainsi n'agir que sur les éléments 0, 1 ... jusqu'à length-1).

Exemples avec des tableaux
$.each([
  0,1,1,2,3,5,8,13,21
],function(n){
  $('body').append(n+'ème nombre de Fibonacci : '+this+'<br />');
});
var tableau = [
  'Bonjour, comment vas-tu ?',
  "Aujourd'hui, il fait beau !",
  $('q:first').text()
]
,chaine = '';

$.each(tableau,function(n,texte){
  chaine += 'Texte n°'+(n+1)+' : '+texte+'\n';
});

$('<pre></pre>')
  .html(chaine)
  .appendTo('#contenu');
Exemples avec des objets
var objet = {
  span: $('#contenu span'),
  listes: $('#contenu ul,#contenu ol'),
  tableaux: $('#contenu table'),
  'expression compliquée': $('#contenu h5 > div:has(blockquote):contains("Bonjour") + strong')
}
,chaine = ''
,fonction = function(balise,requete){
  chaine += 'Nombre de '+balise+' (<code>'+requete.selector+'</code>) : '+requete.size()+'\n';
};

$.each(objet,fonction);

$('<pre></pre>')
  .html(chaine)
  .appendTo('#contenu');

each() : passer des arguments à la fonction de retour

Il peut arriver qu'on passe à $.each() une fonction déclarée avant l'appel à la méthode en question.
Ce dernier ne peut donc pas accéder aux variables déclarées dans le bloc qui contient l'appel à cette méthode.

Pour palier ce problème, un troisième argument, facultatif, existe pour $.each() (second pour each() ) : un tableau.
Les valeurs de ce tableau passé en paramètre seront les arguments de la fonction de retour passée.
Cette fonction n'a donc plus les deux premiers arguments cités plus haut. On ne peut donc plus connaître l'index ou encore le nom de l'attribut.

function faireSurTexte(fonction){
  var elems1   = $('p');
  var elems2   = $('span');
  var longueur = elems1.length + elems2.length;
  var couleur  = 'rgb(255,192,0)';
  elems1.each(fonction,[longueur,couleur]);
  elems2.each(fonction,[longueur,couleur]);
}

$(function(){

faireSurTexte(function(longueur,couleur){
  $(this).attr('style','color:'+couleur);
  $(this).append(" nombre d'éléments : "+longueur);
});

});

Cet exemple est vraiment mauvais, mais peut-être un jour aurez-vous besoin de cette petite astuce. ;)

map() récupère les informations des éléments d'un objet jQuery

map() et $.map() sont des dérivés de each() et $.each(). La méthode boucle sur l'objet jQuery et la fonction boucle sur les données (passés en paramètres).
map() renvoie l'objet jQuery où chaque élément est remplacé par ce qu'a retourné la fonction (return ).

La réponse est bien évidemment la méthode get() apprise au début du chapitre. ;)

// Liste tous les liens de la page.
alert(
  $('a').map(function(){
    return $(this).attr('href');
  }).get().join('\n'));

alert(
  $('#contenu *').map(function(){
    return this.tagName;
  }).get().join(', '));

$.map() renvoie un tableau où chaque élément est remplacé par ce qu'a retourné la fonction. On peut passer un objet, à condition de spécifier un attribut length, et la fonction va parcourir les éléments 0, 1 ... jusqu'à length-1.

A l'inverse de $.each(), $(expression).map(fonction)n'est pas équivalent à $.map($(expression),fonction) ; les différences sont les arguments de la fonction de retour ainsi que le mot-clé this :

  • Pour map(), le premier argument est l'index et le second ainsi que this l'élément courant.

  • Pour $.map(), le premier argument est la valeur du tableau et le second l'index. this n'est pas précisé, donc est égale à la variable window.

TP : Sommaire automatique

Code de base

On part du principe que votre page web, qui est votre explication de quelque chose (par exemple un tutoriel !), ne contient que des titres de niveau 1 et 2 afin de diviser et structurer le texte.
Tout le texte suivant un titre de niveau 1 est contenu dans une div de classe chapitre (par exemple), si il y a des titres de niveau 2.
Tout le contenu est dans une div qu'on peut repérer grâce à son id qui est, pour faire original, contenu .

Par exemple :

<div id="contenu">

  <p>
    Introduction
  </p>
  
  <h1>Chapitre Un</h1>
  <div class="chapitre">
    <h2>a)</h2>
    <p>Paragraphes.</p>
    
    <h2>b)</h2>
    <p>Paragraphes.</p>
  </div>
  
  <h1>Chapitre Deux</h1>
  <p>Paragraphes.</p>
  
  <h1>Conclusion</h1>
  <div class="chapitre">
    <h2>Que retenir ?</h2>
    <p>Paragraphe.</p>
  
    <h2>Remerciements</h2>
    <p>Paragraphe.</p>
  </div>

</div>

Votre but

Votre but est d'indexer ces titres afin de créer un sommaire. Ce sommaire contiendra des listes avec des liens vers les ancres des titres (leur attribut id) : les titres de niveau 1 sont la première liste et dans chaque élément de cette liste il y a une nouvelle liste qui sont les titres de niveau 2 (si ils existent).

Allez voir le sommaire de n'importe quelle page assez longue de Wikipédia : le résultat doit être à peu près celui que vous verrez :) .

Le code final produit avec le code d'exemple en haut peut ressembler à ceci (sans les explications bien sûr) :

<div id="sommaire">
  <ol class="niveau1">
    <!-- premier h1 trouvé -->
    <li><a href="#ancre0">Chapitre Un</a>
      <ol class="niveau2">
        <li>
          <!-- premier h2 trouvé dans la première div.chapitre -->
          <a href="#ancre0-1">a)</a>
        </li>
        <li>
          <a href="#ancre0-2">b)</a>
        </li>
      </ol>
    </li>
    <!-- second h1 trouvé -->
    <li><a href="#ancre1">Chapitre Deux</a></li>
    <!-- troisième h1 trouvé -->
    <li><a href="#ancre2">Conclusion</a>
      <ol class="niveau2">
        <li>
          <!-- premier h2 trouvé dans la troisième div.chapitre -->
          <a href="#ancre2-1">Que retenir ?</a>
        </li>
        <li>
          <a href="#ancre2-2">Remerciements</a>
        </li>
      </ol>
    </li>
  <ol>
</div>
<div id="contenu">
  <!-- le contenu de votre choix avec des balises
       <h1> et <h2> (contenues dans des div.chapitre)
       + les ancres créées par le JavaScript
  -->
</div>

Kappisch :D ?
Pour rappel, on accède à une ancre en faisant <a href="#ancre"></a> . Ce ancre peut être l'attribut name d'un autre lien, mais aussi l'attribut id de n'importe quelle élément de la page.
Il faudra donc attribuer un id à chaque titre.

Solution

Voici le code JavaScript avec toutes les explications nécessaires :

// On crée le sommaire tout en haut
$('#contenu').before('<div id="sommaire"><ol class="niveau1"></ol></div>');

// Pour chaque titre <h1>
$('#contenu h1').each(function(numTitre1,titre1){
  // numTitre1 est le numéro du h1 en question, partant de 0
  // titre1 est l'élément h1 en question, donc on peut le manipuler avec $(titre1)
  // $('h1:eq('+numTitre1+')') est donc la requête permettant d'acceder a cet h1
  
  // On ajoute l'id au titre, pour l'ancre
  $(titre1).attr('id', 'ancre-'+numTitre1);
 
  // On ajoute une ligne avec le texte du h1
  // + le lien de vers son ancre attache
  $('#sommaire .niveau1').append(
      '<li id="sommaire-'+numTitre1+'">'
        +'<a href="#ancre-'+numTitre1+'">'+$(titre1).text()+'</a>'
     +'</li>');
  // il ne faut pas oublier d'attribuer un id a cet li
  // pour pouvoir y rajouter des h2 plus tard
  
  
  // Si cet h1 a des h2
  if($('#contenu h1:eq('+numTitre1+') + div.chapitre').length == 1){
    // On crée une liste de sous-parties
    $('#sommaire-'+numTitre1).append('<ol class="niveau2"></ol>');
    
    // Pour chaque h2 dans le h1 en question
    $('#contenu h1:eq('+numTitre1+') + div.chapitre > h2').each(function(numTitre2,titre2){
      // On ajoute l'id au sous-titre, pour l'ancre
      $(titre2).attr('id', 'ancre-'+numTitre1+'-'+numTitre2);
      
      // On ajoute une ligne avec le nom de ce h2 avec un lien
      // + le lien de l'ancre vers le sous-titre
      $('#sommaire-'+numTitre1+' ol').append(
          '<li>'
           +'<a href="#ancre-'+numTitre1+'-'+numTitre2+'">'+$(titre2).text()+'</a>'
         +'</li>');
    });
  }
});

Améliorations

Pour vous entraîner, voici quelques améliorations que vous pourriez programmer :

  • Prévoir le script pour des h3, h4, h5 et h6 ;

  • Rendre visible les ancres pour accéder au sommaire (ou en haut de la page) en cliquant dessus ;

Ce chapitre étant le plus dur de cette partie, c'est sûrement celui où vous avez appris le plus de choses !
Les deux premiers chapitres sont essentiels à la compréhension de jQuery, et each() est une méthode indispensable.
N'hésitez pas à vous reporter à ce chapitre si vous avez un oubli (concernant les sélecteurs de formulaires par exemple ;) ).

Appris dans ce chapitre : variable tagName, ce que contient un objet jQuery, transformer un objet jQuery en tableau, méthodes getter et méthodes setter, passer une fonction en argument aux méthode du chapitre précédent, variable this dans ces fonctions, créer un élément, placer un élément créé, sélecteurs des attributs, sélecteurs des formulaires, choisir un bouton radio, méthodes : attr(), removeAttr(), val(), each(), $.each(), map(), $.map().

Exemple de certificat de réussite
Exemple de certificat de réussite