Trucs et astuces pour jQuery

Cet article est la traduction de :Useful and Handy jQuery Tips and Tricks.

Pour mes projets de développement jQuery, je dispose de toute une série de trucs et astuces que je souhaite vous faire partager. Dans cet article, vous trouverez donc en une seule page les meilleures techniques trouvées en ligne.

4 commentaires ♪

Article lu fois.

Les deux auteurs

Kevin Liew

Didier Mouronval

L'article

Publié le 6 octobre 2009

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

1. Les aides-mémoire▲

Tout d'abord, il est bon d'avoir des aides-mémoire (cheatsheets) comme référence.
En voici quelques-uns trouvés en ligne :
Sur JavaScript Toolbox

Image non disponible — Sur JavaScript Toolbox

Sur GMTAZ

Cheatsheet jQuery sur oscarotero.

2. Raccourci pour $(document).ready▲

Un truc particulièrement utile !
Au lieu de faire ça :

Sélectionnez

$(document).ready(function() {  
	// Votre code ici
}

Vous pouvez faire ceci, qui revient au même :

Sélectionnez

$(function(){
	// Votre code ici
});

3. Ouvrir un lien dans une nouvelle fenêtre▲

L'attribut target n'est pas valide en (X)HTML strict. Du coup, nous utiliserons l'attribut rel et un peu de jQuery pour créer un attribut dynamiquement et éviter les erreurs de validation. Cette astuce est l'une de mes favorites, elle est si simple et fonctionne parfaitement !

Sélectionnez

$('a[rel=external]').attr('target','_blank');

Sélectionnez

<a href="http://www.queness.com" rel="external">Queness dans une nouvelle fenêtre</a>

4. Rendre une balise li entièrement cliquable▲

Cette astuce est très pratique lorsque vous faites des menus avec des balises <ul>. Lorsque l'on clique sur un <li>, nous récupérons le lien correspondant pour y accéder.

Sélectionnez

$("ul li").click(function(){  
	//Récupérer l'attribut href du lien
	window.location=$(this).find("a").attr("href");
	return false;
});

Sélectionnez

<ul>  
	<li><a href="accueil">Accueil</a></li>  
	<li><a href="infos">A propos</a></li>  
	<li><a href="contact">Contact</a></li>  
</ul>

5. Changer de feuille de style▲

Vous voulez donner la possibilité de modifier le design de votre site ? Utilisez ce code pour alterner les feuilles de style CSS.

Sélectionnez

$("a.cssSwitcher").click(function() {
	//remplacer l'attribut href de la feuille de style par l'attribut rel d'un lien
	$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
})

Sélectionnez

<link rel="stylesheet" href="default.css" type="text/css">  
......  
<a href="#" class="cssSwitcher" rel="defaut.css">Thème par défaut</a>   
<a href="#" class="cssSwitcher" rel="rouge.css">Thème rouge</a>   
<a href="#" class="cssSwitcher" rel="bleu.css">Thème bleu</a>

6. Désactiver le clic droit▲

Certains veulent désactiver le clic droit ou créer leur propre menu contextuel. Voici comment faire.

Sélectionnez

$(document).bind("contextmenu",function(e){  
	//Votre code ici (par exemple votre menu contextuel
	//Puis désactivation du menu par défaut
	return false;  
});

7. Récupérer les coordonnées de la souris▲

Ce script affichera les coordonnées x et y de la souris.

Sélectionnez

$().mousemove(function(e){  
	//affiche les coordonnées x et y dans la balise p
	$('p').html("Axe X : " + e.pageX + " | Axe Y : " + e.pageY);  
});

Sélectionnez

<p></p>

8. Empêcher le comportement par défaut▲

Imaginons que vous ayez une page assez longue avec une balise <a> comme ci-dessous servant à autre chose qu'un lien. En cliquant sur la balise, vous vous retrouverez en haut de la page à cause du symbole '#'. Pour éviter cela, nous devons annuler le comportement du lien comme ceci :

Sélectionnez

$('#close').click(function(e){    
	e.preventDefault();  
});   
/*   
	ou 
*/   
$('#close').click(function(){    
	return false;  
});

Sélectionnez

<a href="#" id="close"></a>

9. Lien vers le haut de page▲

Un bouton ou un lien pratique pour le haut de la page avec le plugin scrollTo. J'aime beaucoup l'effet de scroll "back to top". Obtenir le plugin scrollTo.

Sélectionnez

$('#top').click(function() {  
	$(document).scrollTo(0,500);  
}

Sélectionnez

<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
......
<a id="top" style="cursor:hand;cursor:pointer">Haut de la page</a>

10. Colonnes de taille égale▲

Je trouve ce script particulièrement utile, même si je n'ai pas encore eu l'occasion de l'utiliser. Si vous voulez avoir des colonnes de taille égale, cette fonction répond à vos besoins. Inspirée par CSSNewbie.

Sélectionnez

$(document).ready(function() {
    setHeight('.col');
});
 
// Variable globale pour récupérer la hauteur maximale
var maxHeight = 0;
 
function setHeight(col) {
	// Récupère tous les éléments dont la classe est "col"
	col = $(col);
 
	// Boucle sur ces éléments
	col.each(function() {        
 
		// Récupère la plus grande valeur
		if($(this).height() > maxHeight) {
			maxHeight = $(this).height();
		}
	});
 
	// Ajuste la hauteur
	col.height(maxHeight);
}

Sélectionnez

<div class="col" style="border:1px solid">Colonne 1<br/>  
Avec deux lignes<br/>  
Et la hauteur est différente<br/><br/>  
</div>  
<div class="col" style="border:1px solid black;">Colonne 2<br/><br/></div>

11. Ecrire son propre sélecteur▲

Voici une astuce un peu plus élaborée. Je ne connaissais pas cette possibilité avant de la voir sur le site illuminatikarate.com.

Sélectionnez

// Ajoute une fonctionnalité jQuery
$.extend($.expr[':'], {  
 
	// Nom du sélecteur personnalisé
	plusQueMille : function (a){
		// Eléments correspondant
		return parseInt($(a).html()) > 1000;
	}
});  
 
 
$(document).ready(function() {
	$('td:plusQueMille').css('background-color', '#ff0000');
});

Sélectionnez

<table>
<tbody>
	<tr><td>1400</td><td>700</td><td>400</td></tr>
	<tr><td>2500</td><td>600</td><td>100</td></tr>
	<tr><td>100</td><td>1100</td><td>900</td></tr>
	<tr><td>2600</td><td>1100</td><td>1200</td></tr>
</tbody>
</table>

12. Ajuster la taille de la police▲

Une fonctionnalité courante des pages Web est de permettre de modifier la taille de la police. J'ai modifié le script de shopdev.co.uk. Vous pouvez maintenant choisir un id, une classe ou des éléments HTML dont vous voulez modifier la taille de police.

Sélectionnez

$(document).ready(function(){
 
	// id, classe ou balise HTML dont la fonte est modifiable dans ce tableau
	// indiquez html ou body si vous voulez modifier toute la page
	var section = new Array('span','.section2');
	section = section.join(',');
 
	// Restaurer la taille
	var originalFontSize = $(section).css('font-size');  
	$(".resetFont").click(function(){
		$(section).css('font-size', originalFontSize);
	});
	// Augmenter la taille
	$(".increaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*1.2;
		$(section).css('font-size', newFontSize);
		return false;
	});
 
	// Diminuer la taille
	$(".decreaseFont").click(function(){
		var currentFontSize = $(section).css('font-size');
		var currentFontSizeNum = parseFloat(currentFontSize, 10);
		var newFontSize = currentFontSizeNum*0.8;
		$(section).css('font-size', newFontSize);
		return false;
	});
});

Sélectionnez

<a class="increaseFont">+</a> |   
<a class="decreaseFont">-</a> |   
<a class="resetFont">=</a>
 
<span>La taille de police est modifiable dans cette partie</span>  
<div class="section1">Celle-ci ne l'est pas</div>  
<div class="section2">Celle-ci est aussi modifiable !</div>

13. Le mode noConflict▲

Si vous utilisez plusieurs librairies JavaScript, vous pouvez utiliser ce code pour remplacer la variable $ par n'importe quelle autre. Utiliser jQuery avec d'autres librairies.

Sélectionnez

var $j = jQuery.noConflict();  
$j('#myDiv').hide();

14. Nombre d'éléments sélectionnés▲

Cette astuce vous permet de connaitre le nombre d'éléments sélectionnés par un sélecteur jQuery. En utilisant la méthode length, vous obtenez la taille du tableau qui correspond au nombre d'éléments.

Sélectionnez

$('.someClass').length;

15. Laissez Google héberger jQuery pour vous▲

Il y a beaucoup d'avantages à récupérer jQuery sur Google. Vous ne le savez peut-être pas, mais cela améliore le cache, permet le téléchargement simultané de ressources et diminue le temps de téléchargement.

Sélectionnez

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
	// Code à insérer dans cette zone
});
</script>
 
<!-- La meilleure méthode (plus rapide et plus efficace) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// Code jQuery
	});
</script>

16. Vérifier si une checkbox est cochée▲

jQuery propose 3 méthodes pour vérifier si une checkbox est cochée. Comment vérifier si une checkbox est cochée.

Sélectionnez

// Première méthode
$('#checkBox').attr('checked'); 
 
// Deuxième méthode
$('#edit-checkbox-id').is(':checked'); 
 
// Troisième méthode
$("[:checkbox]:checked").each(
    function() { 
       // Votre code ici
    } 
);

17. Activer ou désactiver un élément de formulaire▲

Sélectionnez

// Désactiver
$('.unElement').attr('disabled', 'disabled');
 
// Activer
$('.unElement').removeAttr('disabled');
 
// Autre méthode
$('.someElement').attr('disabled', '');

18. Trouver les erreurs JavaScript▲

Debugger du JavaScript n'est pas toujours un exercice facile. Si vous n'arrivez pas à trouver la cause d'une erreur, essayez cet outil en ligne : JSLint.

19. Désactiver les animations jQuery▲

Le code suivant désactivera les animations jQuery.

Sélectionnez

jQuery.fx.off = true;

20. Le problème de rendu de l'effet fadeIn avec IE▲

Si vous avez été amenés à utiliser l'effet fadeIn avec IE6, vous avez surement remarqué à quel point c'est horrible. Pour corriger cela, il faut retirer l'attribut filter.

Sélectionnez

// Beurk...
$("#message").fadeIn();  
 
// Pour corriger cela
$("#message").removeAttr("filter");

21. Vérifier que jQuery est chargé▲

Sélectionnez

/* Méthode 1 */
if (jQuery) {  
	// jQuery est chargé
} else {
	// jQuery n'est pas chargé
}
 
/* Méthode 2 */
if (typeof jQuery == 'undefined') {  
    // jQuery n'est pas chargé
} else {
    // jQuery est chargé
}

22. Ajouter une icône pour les liens externes▲

Cette astuce est assez simple et pratique. Si un lien pointe vers un site externe, cela placera une icône avant le lien. Ajouter dynamiquement une icône sur les liens externes.

Sélectionnez

$(document).ready(function() {
	$('#extlinks a').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
	})
	.after(' <img src="/images/external.png" alt="external link">');
});

Participez à cet article !▲

J'espère que cet article vous a été utile.
Cependant, il a pour vocation de s'enrichir. Si vous connaissez des astuces susceptibles d'apparaitre ici, n'hésitez pas à nous en faire part dans le sujet du forum correspondant.

Références▲

Remerciements▲

Un grand merci à Kerod pour sa relecture avisée et ses conseils précieux !

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :