Trucs et astuces pour jQuery
Date de publication : 6 octobre 2009
Par
Kevin Liew (Auteur)
Didier Mouronval (Traducteur)
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.
1. Les aides-mémoire
2. Raccourci pour $(document).ready
3. Ouvrir un lien dans une nouvelle fenêtre
4. Rendre une balise li entièrement cliquable
5. Changer de feuille de style
6. Désactiver le clic droit
7. Récupérer les coordonnées de la souris
8. Empêcher le comportement par défaut
9. Lien vers le haut de page
10. Colonnes de taille égale
11. Ecrire son propre sélecteur
12. Ajuster la taille de la police
13. Le mode noConflict
14. Nombre d'éléments sélectionnés
15. Laissez Google héberger jQuery pour vous
16. Vérifier si une checkbox est cochée
17. Activer ou désactiver un élément de formulaire
18. Trouver les erreurs JavaScript
19. Désactiver les animations jQuery
20. Le problème de rendu de l'effet fadeIn avec IE
21. Vérifier que jQuery est chargé
22. Ajouter une icône pour les liens externes
Participez à cet article !
Références
Remerciements
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

Sur JavaScript Toolbox

Sur GMTAZ
2. Raccourci pour $(document).ready
Un truc particulièrement utile !
Au lieu de faire ça :
$(document).ready(function() {
}
|
Vous pouvez faire ceci, qui revient au même :
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 !
$('a[rel=external]').attr('target','_blank');
|
<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.
$("ul li").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
|
<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.
$("a.cssSwitcher").click(function() {
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
})
|
<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.
$(document).bind("contextmenu",function(e){
return false;
});
|
7. Récupérer les coordonnées de la souris
Ce script affichera les coordonnées x et y de la souris.
$().mousemove(function(e){
$('p').html("Axe X : " + e.pageX + " | Axe Y : " + e.pageY);
});
|
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 :
$('#close').click(function(e){
e.preventDefault();
});
$('#close').click(function(){
return false;
});
|
<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.
$('#top').click(function() {
$(document).scrollTo(0,500);
}
|
<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.
$(document).ready(function() {
setHeight('.col');
});
var maxHeight = 0;
function setHeight(col) {
col = $(col);
col.each(function() {
if($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
col.height(maxHeight);
}
|
<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.
$.extend($.expr[':'], {
plusQueMille : function (a){
return parseInt($(a).html()) > 1000;
}
});
$(document).ready(function() {
$('td:plusQueMille').css('background-color', '#ff0000');
});
|
<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.
$(document).ready(function(){
var section = new Array('span','.section2');
section = section.join(',');
var originalFontSize = $(section).css('font-size');
$(".resetFont").click(function(){
$(section).css('font-size', originalFontSize);
});
$(".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;
});
$(".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;
});
});
|
<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
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.
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.
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
});
</script>
<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() {
});
</script>
|
16. Vérifier si une checkbox est cochée
$('#checkBox').attr('checked');
$('#edit-checkbox-id').is(':checked');
$("[:checkbox]:checked").each(
function() {
}
);
|
17. Activer ou désactiver un élément de formulaire
$('.unElement').attr('disabled', 'disabled');
$('.unElement').removeAttr('disabled');
$('.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 ce outil en ligne :
JSLint.
19. Désactiver les animations jQuery
Le code suivant désactivera les animations jQuery.
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.
$("#message").fadeIn();
$("#message").removeAttr("filter");
|
21. Vérifier que jQuery est chargé
if (jQuery) {
} else {
}
if (typeof jQuery == 'undefined') {
} else {
}
|
22. Ajouter une icône pour les liens externes
$(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 !

