Introduction à jQuery

Logo

Dans ce post je vais vous présenter les différentes fonctionnalités proposées par la librairie JavaScript jQuery.

Tout au long de cet article pour je vous renverrai vers des documentations en ligne que j’ai pu consulter lorsque j’ai utilisé jQuery sur différents projets. De cette manière vous pourrez vous imprégner avec une granularité plus fine de l’ensemble des fonctions mises à disposition par jQuery.

Introduction

jQuery est une framework Javascript, au même titre que Mootools ou  encore Script.acculo.us.
Il s'agit en fait d’une librairie de fonctions JavaScripts qu'il suffit de combiner pour obtenir le résultat voulu.
Par bibliothèque on entend donc un ensemble cohérent de fonctions permettant de s’affranchir des tâches rébarbatives et répétitives de façon uniforme sur les navigateurs les plus courants.
Elle est sous licence GPL et MIT, et donc complètement réutilisable sur des travaux professionnels. Son poids compressé est de 92 Ko, ce qui est tout à fait raisonnable sur la plupart de nos projets.

Les navigateurs supportés sont :
  • Firefox 1.5+
  • Internet Explorer 6+
  • Safari 2.0.2+
  • Opera 9+

Appel de la librairie

<head>
<title>Exemple</title>
<script type="text/javascript" src="./js/lib/jquery.js"></script>
</head>

jQuery est diponible sous deux formats sur le site http://jquery.com/ :

  • Sans compression (242 Ko)
  • Avec compression min (92 Ko)

La fonction jQuery

jQuery
repose sur une seule fonction : jQuery() ou $(). Comme toutes les fonctions
JavaScript elle accepte des paramètres, et retourne un objet.

$(function(){
// ... Code JavaScript … //
});

Dans
ce cas, jQuery va exécuter cette fonction lorsque la page sera chargée par le
navigateur. Plus précisément, lorsque le DOM sera chargé. C’est pourquoi on
encapsule souvent l’ensemble du code écrit en jQuery dans cette fonction. 

On
s’assure ainsi que le code sera exécuté une fois la page chargée, et on est sûr
de pouvoir manipuler le DOM sans erreur. Contrairement à l’évènement window.onload, le chargement complet des
images de la page n’est pas nécessaire.


Les sélecteurs

Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Il est alors facile de cibler facilement les nœuds DOM qui nous intéressent.

Un sélecteur permet de pointer et d'interagir avec n'importe quel élément de votre code source pour peu qu'il soit existant.

On va pouvoir ainsi modifier autant le contenu d'un <div>, que sa propriété CSS ou encore le masquer ou l'afficher en le combinant avec d'autres fonctions.


Utilisation des sélecteurs

<input type=‘text’ name=‘inputName’ id=‘myLink’ class=‘myCLassInput’ value=‘inputValue’>

<p name=‘paragraphName’ id=‘myParagraph’ class=‘myClassParagraph’>
Paragraph
</p>


Exemples de sélecteurs:

var input = $(‘input’);
Retourne l’objet « input » (sélection par le nom de la balise <input …)

var input = $(‘#myLink’);
Retourne l’objet « input » (sélection par l’id de la balise <input id=’myLink’ …)

var p = $(‘.myClassParagraph’);
Retourne l’objet « p » (sélection par le nom de class de la balise <input class=’myClassParagraph’…)

Exemples de filtres :

var input = $('input[name!=myName]');
Retourne un objet « input » dont la valeur de l’attribut name est différente de la chaine « myName »

$('div[id^=monObj]');
Retourne un objet « div » dont l'identifiant commence par « monObj »

Documentation sur les sélecteurs: http://codylindley.com/jqueryselectors/


Les fonctions

Maintenant
que nous avons un objet jQuery, il va falloir l’utiliser. Et pour cela toute
une palette de méthodes sont disponibles dans la bibliothèque jQuery:
manipulation du DOM, des CSS, des évènements et autres effets visuels.

Exemples :

$(“#toto").html(“<p>un texte</p>"); Ajoute du texte au format html à l’intérieur de l’élément toto 
(à l’intérieur d’une balise div par exemple)

$(“#toto").css("border","1px solid red");
Ajoute dans l’attribut style de l’élément toto une bordure

$(“#toto").val(); 
Récupère le contenu de l’attribut value de l’élément toto 
(sur un input text par exemple)


Utilisation des fonctions

<input type=‘text’ name=‘inputName’ id=‘myLink’ class=‘myCLassInput’ value=‘inputValue’>

<p name=‘paragraphName’ id=‘myParagraph’ class=‘myClassParagraph’>
<strong>Paragraph</<strong>
</p>


Exemples:

var p = $(‘.myClassParagraph’); 
var texte = p.html(); 

Valeur de texte : <strong>Paragraph</<strong>


var texte = $(‘. myClassParagraph’).html();
Valeur de texte : <strong>Paragraph</<strong>

p.html(‘<h1>Nouveau paragraphe</h1>’);
var texte = p.html();

Valeur de texte : <h1>Nouveau paragraphe</h1>


Panel des sélecteurs et fonctions proposés par la bibliothèque jQuery


Panel des fonctions

Les évènements

JavaScript comme nous le connaissons possède un réel intérêt de par sa possibilité à gérer des événements. Le framework jQuery assure la gestion des événements JS et permet de mettre en place des écouteurs de manière très simple.

Exemple:

$(document).ready( function(){
    $(‘a [name=myLink]').click(
        function(){
            alert(“Bonjour”);
        }
    );
});

Ce code “se traduit” par l'ajout de l’attribut: onClick=‘alert(“Bonjour”)’ sur le lien avec l’attribut name=‘myLink’.

Voici la liste des écouteurs proposés par jQuery :
$('#id').load(); // quand l'élément est chargé
$('#id').resize(); // quand on redimensionne l'élément
$('#id').click(); // quand on clique sur l'élément
$('#id').blur(); // quand on on sort de l'élément
$('#id').change(); // quand on charge l'élément
$('#id').dbclick(); // quand on double clique sur l'élément
$('#id').focus(); // quand on prend le focus sur l'élément
$('#id').select(); // quand on séléctionne l'élément
$('#id').submit(); // quand on valide un formulaire
$('#id').unload(); // quand on décharge l'élément (changement de page)
$('#id').keydown(); // quand on enfonce une touche du clavier
$('#id').keyup(); // quand on remonte d'avoir enfoncé une touche du clavier
$('#id').keypress(); // quand on appuie sur une touche du clavier
$('#id').mousedown(); // quand on enfonce le bouton de gauche de la souris
$('#id').mouseup(); // quand on remonte le bouton enfoncé de gauche de la souris

Documentation :

JQuery API:
jQuery documentation, manuel en français :



    

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.