15 snippets pour une meilleure utilisation de jQuery

15 snippets pour une meilleure utilisation de jQuery

La librairie jQuery est une des meilleures, voire la meilleure librairie Javascript actuellement. Elle est assez facile à utiliser et à prendre en main, mais bien souvent, quand on débute,  on profite des plugins sans trop savoir comment ils marchent. Car des plugins jQuery, il en existe en veux tu en voila sur la toile. On les télécharge, les utilise et si on rencontre un souci, on change de plugins. La flemme ou pas les connaissances pour mettre les mains dans le cambouis peut souvent entrainer un délaissement d’intérêt.

Je viens donc vous proposer quelques trucs et astuces qui pourront grandement vous servir durant vos dev, afin d’améliorer un peu vos connaissances. Malheureusement, pour la flemme, je n’ai aucune proposition à vous faire …

 

CheatSheets

Pour débuter, voici deux fichiers très utiles qui regroupent les principales propriétés de jQuery et jQuery CSS :

Télécharger jQuery 1.4 CheatSheet

 

Télécharger jQuery CSS CheatSheet

 

Document.ready

Pour charger vos méthodes au chargement de la page, vous avez surement l’habitude d’utiliser :

$(document).ready(function() {

// Votre code ici

}

Sachez que vous pouvez raccourcir cette déclaration en écrivant simplement :

$(function(){

// Votre code ici

});

Cela revient au même et vous permet de gagner un peu de temps.

 

Distinguer le clic droit du clic gauche

Si vous avez, comme expliqué précédemment, désactivé le clic droit sur votre page, et que vous désirez donner 2 actons différentes suivant le clic, comme par exemple pour un jeu, voici comment différencier le clic droit du clic gauche.

 

$("#element").live('click', function(e) {

if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {

alert("Left Button");

}

else if(e.button == 2)

alert("Right Button");

});

 

Rechercher une chaine de caractère

Avec jQuery, vous pouvez effectuer une recherche de chaîne de caractères dans votre page. Cela peut s’avérer très pratique.

var foundin = $('*:contains("some string bla bla")');

 

Rendre une balise <li> entièrement cliquable

Cela peut s’avérer très pratique lorsque l’on développe un menu avec des balises <ul> et <li>. Le lien ne se positionne que sur le texte et non sur tout l’onglet. Ca gêne énormément l’expérience utilisateur et surtout ça force à bien se positionner pour sélectionner son menu.

Il suffit de récupérer le lien lié à la balise <li> pour contourner ce petit problème :

HTML

<ul>

<li><a href="accueil">Accueil</a></li>

<li><a href="infos">A propos</a></li>

<li><a href="contact">Contact</a></li>

</ul>

 

jQuery

$("ul li").click(function(){

//Récupérer l'attribut href de l'élément a

window.location=$(this).find("a").attr("href");

return false;

});

 

 

Récupérer l’url courante

Si vous développez des méthodes générales, vous pouvez avoir besoin de récupérer l’url courante de la page, afin de gérer vos redirections en fonction d’où vous vous trouvez.

$(document).ready(function() {

var pathname = window.location.pathname;

});

Désactiver le clic droit

Si vous voulez créer vos propres menus contextuels, vous pouvez avoir besoin de désactiver le clic droit, afin de proposer votre méthode personnelle. Voici comment procéder avec jQuery :

$(document).bind("contextmenu",function(e){

//Mettez ici le code de votre propre menu

//Désactiver le menu par défaut

return false;

});

Vérifier si une checkbox est cochée

Il existe plusieurs méthodes pour vérifier si une ou plusieurs checkbox est/sont cochée/cochées, avec jQuery. Je vais vous les exposer ici :

1ere méthode :

$('#checkBox').attr('checked');

 

2e méthode :

$('#edit-checkbox-id').is(':checked');

 

3e méthode :

$("[:checkbox]:checked").each(

function() {

// Votre code ici

}

);

Valider une adresse mail :

Pour ne pas se retrouver avec des données erronées dans votre base et surtout avoir les bonnes informations sur vos users, voici comment valider une adresse mail dans un formulaire :

var email = 'user@test.com’

if(!(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(email)))

alert('Adresse Mail non valide');

Valider une date de naissance

Deuxième point de validation pour les formulaires, les dates de naissance. Vous pouvez avoir besoin de vérifier si la personne est majeure ou à l’âge requis avant de valider une inscription par exemple. Bien que la personne puisse modifier l’année afin de se faire passer pour majeure, cela vous décharge de tout soucis éventuels.

$("#lda-form").submit(function(){

var day = $("#day").val();

var month = $("#month").val();

var year = $("#year").val();

var age = 18;

var mydate = new Date();

mydate.setFullYear(year, month-1, day);

var currdate = new Date();

currdate.setFullYear(currdate.getFullYear() - age);

if ((currdate - mydate) < 0){

alert("Sorry, only persons over the age of " + age + " may enter this site");

return false;

}

return true;

});

 

 

Switcher entre vos fichiers css

Vous proposez différents design ou versions de votre design sur votre site. Pour permettre facilement un switch entre les différentes feuilles de styles avec jQuery, voici la procédure à effectuer.

HTML

<link rel="stylesheet" href="default.css" type="text/css">

......

<a href="#" rel="defaut.css">Défaut</a>

<a href="#" rel="design1.css">Design 1</a>

<a href="#" rel="design2.css">Design 2</a>

 

jQuery

$("a.cssSwitcher").click(function() {

$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));

})

Récupérer l’IP d’un visiteur

Vous souhaitez espionner vos visiteurs ? ou tout simplement effectuer des validations par IP ? Il y a de nombreuses raisons pour vouloir connaitre l’IP d’un visiteur, pour vérifier s’il a déjà répondu à sondage par exemple. Pour la récupérer par jQuery, voici comment faire :

$.getJSON("http://jsonip.appspot.com?callback=?",function(data){

alert( "Your ip: " + data.ip);

});

Récupérer les coordonnées de la souris

Cela peut être très utile dans des petits jeux, ou bien pour faire des statistiques. Enfin, voici comment récupérer les coordonnées de la souris sur votre page :

HTML

<span>Bouge la souris sur la div.</span>
   <span>   ; </span>
<div></div>

jQuery

$("div").mousemove(function(e){
      var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
      var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
      $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
      $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
    });

Parser du XML avec jQuery

Bien souvent, on se sert d’un langage côté serveur pour parser ses fichiers XML, mais sachez que jQuery s’en charge très bien.

Fichier xml

<?xml version="1.0" ?>

<result>

<item>

<id>1</id>

<title>title1</title>

<description>desc1</description>

</item>

<item>

<id>2</id>

<title>title2</title>

<description>desc2</description>

</item>

<!-- ... -->

</result>

 

jQuery

$.get('file.xml',{},function(data){

$('item',data).each(function(){

var $this       = $(this);

var id             = $this.find('id').text();

var title         = $this.find('title').text();

var description = $this.find('description').text();

//do something ...

});

});

Ouvrir un lien dans un nouvel onglet / nouvelle fenêtre

L’attribut target n’étant pas valide en (X)HTML strict, il convient d’utiliser l’attribut rel enlieu et place, et de créer un attribut dynamiquement en jQuery.

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

<a href="http://www.jfpalmier.fr" rel="external">Ouvrir JFPalmier.fr dans un nouvel onglet</a>

Ajouter une ligne dans un élément <table>

Voici une petite astuce afin de rajouter dynamiquement, avec jQuery, une ligne dans un tableau :

$('#myTable tr:last').after('<tr>...</tr>');

 

Voila, la liste des snippets atteins malheureusement sa fin, mais rassurez vous, je compte vous en préparer d’autres pour un prochain article. J’espère en tout cas que cela pourra vous servir pour tous vos développements.

Be Sociable, Share!

4








Jeff

About the Author

Jeff est Consultant Maitrise et Développement .NET, avec de solides connaissances en Javascript (jQuery, Angular) et HTML5.

Discussion

  1. Ludovic  février 21, 2012

    Article sympa. Pour ce qui est de la désactivation du clic droit ne serait-ce pas plutôt un bind sur l’événement « contextmenu » ?

    (reply)
  2. Jeff
    Jeff  février 21, 2012

    Merci ludovic, modification effectuée :)

    (reply)

Add a Comment