Ceux qui suivent l’actualité du monde du développement le savent déjà surement, mais jQuery 1.4 a été dévoilé il y a 2 jours et pour l’occasion ils ont lancé l’opération « 14 Jours de jQuery » afin de célébrer cette nouvelle version. Hier a été dévoilée la nouvelle version de l’API qui nous en dit plus sur les nouvelles fonctionnalités de la bête. Tout de suite je vous propose de passer en revue certaines nouvelles fonctions…

Envie d’une pause ? delay()

Avant quand on voulait marquer une pause dans une animation il fallait souvent appeler une animation « inutile » dans la file d’animation. Maintenant, marquer une pause est plus simple et plus logique avec la fonction delay()

$("#message")
              .hide()             // On masque le message
              .fadeIn()         // On affiche le message avec un effet d'opacité
              .delay(1000)    // On attend 1 seconde (le temps que l'utilisateur lise)
             .fadeOut()       // On recache le message

En savoir plus sur delay()

has() un remplaçant du filtre :has

Avec jQuery1.4 il est plus simple de vérifier si des éléments « ont » quelque chose… Vu que la phrase précédente brille par son manque de clarté voici un petit exemple qui éclairera surement plus l’utilité de cette fonction.

$("div").has("ul");  // Récupère toutes les div qui ont un élément ul
$("div:has(ul)");    // Equivalent en utilisant le filtre has déja présent

Cette méthode peut s’avérer relativement utile lorsqu’il s’agit d’enchainer les filtres (par rapport au filtre :has

En savoir plus sur has()

Tout Jusqu’à…

Trois nouvelles fonctions font leur apparition pour parcourir l’arbre DOM : nextUntil,prevUntil et parentsUntil. Ces 3 fonctions vont donc vous permettre de parcourir le DOM dans un certain sens jusqu’à qu’ils rencontrent le sélecteur passé en argument.

<dl>
  <dt id="geek">Geek</dt>
  <dd>Un geek (terme anglais) se prononçant ("guiik") est un stéréotype décrivant une personne passionnée, voire obsédée, par un domaine précis...</dd>
  <dd>Terme désignant la forme d'animation de foire la plus basse et la plus répugnante des " carnivals " américains.</dd>
  <dd>Un g33k est une personne adepte de l'ordinateur et jeux vidéo.</dd>

  <dt id="tutorial">Tutorial</dt>
  <dd>Est un mot qui n'a jamais existé en français. Tutorial est un mot anglais</dd>
</dl>
$("#geek").nextUntil("dt");  // Sélectionnera toutes les définitions du mot Geek

En savoir plus sur prevUntil, nextUntil, parentsUntil

Détacher n’est pas supprimer

La fonction detach() ressemble à la fonction remove() au détail près que la fonction detach() conserve les données jQuery associées à l’élément. Par exemple, vous voulez supprimer une div qui a sur elle des évènements click,rollover… mais vous souhaiter par la suite réinsérer cette élément (à la même place ou ailleurs) sans devoir ré attacher tous les évènements ? Avec la fonction detach c’est possible !

En savoir plus sur detach()

Focusin() et Focusout() sont sur un bateau

Alors concrètement expliquer l’utilité de ces fonctions est assez compliqué, car il diffère très peu de focus() et blur(). La principale différence est en fait la portée de l’évènement. Pour que ce soit plus clair il faut se mettre en situation avec un formulaire classique :

<form ...>
 <input type="text" /><span>Vous venez de sélectionner ce champ</span>
 <input type="text" /><span>Vous venez de sélectionner ce champ</span>
</form>
 // La problématique : faire apparaitre le span quand on sélectionne un champ
 // Jusqu'à maintenant voila la solution la plus rapide:
 $("input").focus(function(){
 $(this).parents("p").find("span").show(); // On est obligé de remonter au parent...
 }
// Maintenant voila comment c'est mieux
$("form p").focusin(function(){
     $(this).find("span").show(); // Plus court et plus clair
}

Unwrap()

Comme vous le devinez déja cette fonction a un rôle opposé à celui de wrap(). En résumé il permet de supprimer les éléments parent à l’élément courant.

<div>
    <p>Je me sens oppressé par des div...</p>
</div>
$("p").unwrap();      // Supprimera donc <div></div> entourant le p

En apprendre plus sur unwrap()

toArray()

Encore une fonction toute simple mais qui peux vous sortir de certaines situation. Son rôle est assez spécifique et vous permettra donc de retourner un tableau contenant les éléments DOM sélectionnés.

En apprendre plus sur toArray()

proxy()

Accrochez vos ceintures pour l’explication de cette fonction… En bref, elle permet de lancer une fonction sans la sortir de son contexte. Prenons l’exemple d’un objet

var bouton = {
         couleur : "rouge",
         unAutreParam : "une valeur",
         clicBouton : function(){
             alert(this.couleur);
         }
});

bouton.clicBouton(); // "rouge" sera affiché, tout a fait normal
// Maintenant utilisons cette fonction avec un évènement jQuery
$(a).click(bouton.clicBouton);  // Rien ne sera alerté

Ici le problème apparait. En effet lorsque l’on clic sur le lien et que clicBouton est appelé this ne fait plus référence au contexte de l’objet mais au contexte de l’évènement (en résumé this fait référence au lien a). Maintenant, jettons un oeil sur proxy

$(a).click(jQuery.proxy(bouton.clicBouton,bouton));  // "rouge" sera alerté

Maintenant la fonction est appelée avec son contexte bouton est donc this fera référence à couleur. Par contre si vous voulez dans la fonction aussi récupérer l’élément voici comment cela fonctionne :

var bouton = {
         couleur : "rouge",
         unAutreParam : "une valeur",
         clicBouton : function(event){
             this; // Fait référence à l'objet bouton
             event.currentTarget; // Fait référence à la cible de l'évènement
         }
});
$(a).click(Query.proxy(bouton.clicBouton,bouton));  // Rien ne sera alerté

En savoir plus sur proxy()

Je ne fais rien

Pour finir sur une fonction assez « originale » jQuery 1.4 a vu l’apparition d’une fonction « vide ». La fonction jQuery.noop est une fonction qui ne fera absolument rien, mais qui est un raccourci à function(){}…

En Savoir plus sur noop()