JQuery cours complet avec exemples de A a Z

Participez au vote ☆☆☆☆☆★★★★★

JQuery cours complet avec exemples de A à Z

…

JavaScript est un langage devenu incontournable en l'espace de quelques années, principalement dans le paysage du web. Et pour cause ! C'est une technologie complète, qui regroupe un nombre impressionnant d'outils permettant de dynamiser vos pages web et de leur donner une toute autre dimension. Comme toutes les grandes technologies, JavaScript a une grande communauté. Et comme toutes les grandes communautés, celle de JavaScript a vite ressenti le besoin d'améliorer les possibilités du langage, notamment par des frameworks. jQuery est l'un d'eux.

jQuery, écrivez moins, faites plus.

La devise de jQuery résume à elle seule l'impact que cet outil, que vous apprendrez aujourd'hui, aura sur votre manière de coder de demain. Vous écrirez moins de code JavaScript, mais pour en faire toujours plus. C'est à ce besoin que jQuery cherche à répondre depuis 2006, et vous constaterez au cours de ce tutoriel que force est d'admettre qu'il y parvient formidablement bien.

Image utilisateur

jQuery est le framework JavaScript le plus utilisé de tous : même le Site du Zéro en fait usage ! Complet, puissant, élégant... beaucoup sont ses points forts, et rares sont ses points faibles. L'attrait pour cet outil est immense. Seulement voilà : comment se former à cette technologie, en France, où la documentation de qualité se fait rare ? Comment aborder jQuery lorsque l'on est débutant ? C'est à ces problématiques que nous allons chercher à répondre ensemble par le biais de ce tutoriel.

jQuery est une bibliothèque JavaScript gratuite et très pratique, ayant une syntaxe courte et logique, compatible avec tous les navigateurs courants.

jQuery est devenue une référence importante à savoir utiliser : pour preuve, elle est largement répandue sur la toile. Microsoft, Twitter, Mozilla, Google Code, Amazon et Wordpress France, pour ne citer qu'eux, l'utilisent.

Les navigateurs supportés sont :

Firefox 1.5+

Internet Explorer 6+

Safari 2.0.2+

Opera 9+

La bibliothèque est utilisée par exemple sur des sites comme :

Dell

Google Code

Digg

NBC

Amazon

Mozilla

WordPress

Drupal

SPIP

The Zend Framework

Etc

…

La naissance de JavaScript

 1995 : Brendan Eich développe pour Netscape

Communications Corporation, un langage de script, appelé

Mocha, puis LiveScript et finalement JavaScript

 Javascript est intégré dans le navigateur Netscape 2.

Succès immédiat.

La guerre des navigateurs

 Netscape et Microsoft (avec JScript dans Internet

Explorer) ont développé leur propre variante de JavaScript avec des fonctionnalités supplémentaires et incompatibles, notamment dans la manipulation du DOM (modèle objet du navigateur WEB)

 1997 : Adoption du standard ECMAScript.

Les spécifications sont rédigées dans le document

Intefaces Hommes-Machines - François Bonneville 3

La naissance de la fondation Mozilla

Netscape perd des parts de marché face à Microsoft
Malgré un procès pour concurrence déloyale, Netscape, racheté par AOL est dissoute en 2004
Netscape, dans ses dernières forces, fonde la fondation principauté Mozilla, et lui livre le code source de Netscape

Navigator 5, qui contient les premières briques du moteur de rendu Gecko (aujourd’hui au coeur de Firefox).

Actuellement, les navigateurs web modernes supportent tous les spécifications ECMAScript
Mais chacun a étendu les spécifications pour utiliser au mieux son propre navigateur, ce qui a amené à des différences d’implémentation suivant le navigateur…

Intefaces Hommes-Machines - François Bonneville 4

JavaScript devenu incontournable

Les spécifications ECMAScript ont permis de pérenniser JavaScript
JavaScript permet de contrôler quasiment tous les paramètres d’une page WEB
C’est le seul langage, coté client, capable de changer dynamiquement l’aspect d’une page WEB
Avec l’arrivée de l’objet XMLHttpRequest permettant le développement d’applications AJAX,

JavaScript est devenu incontournable dans le développement d’interfaces WEB évoluées (WEB2.0)

Intefaces Hommes-Machines - François Bonneville 5

Les premiers « Frameworks »

Comme il était devenu difficile de coder du javascript pour tous les navigateurs, sont apparus des

« Frameworks » permettant une spécification unique, indépendante du navigateur

 PrototypeJS - www.prototypejs.org

➢ script.aculo.us

 Mootools - ..

 DoJo Toolkit - ..

 Yahoo UI - ../yui/

 ExtJS - ..

 UIZE - ..

… … … … …

JQuery

Une bibliothèque javascript open-source et crossbrowser
Elle permet de traverser et manipuler très facilement l'arbre DOM des pages web à l'aide d'une syntaxe fortement similaire à celle d'XPath.
JQuery permet par exemple de changer/ajouter une

classe CSS, créer des animations, modifier des attributs, etc.

Gérer les événements javascript
Faire des requêtes AJAX simplement

Intefaces Hommes-Machines - François Bonneville 7 une simple bibliothèque à importer

Disponible sur le site de Jquery

http://.../

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, que nous appellerons par la suite “objet jQuery”.

Concernant les paramètres acceptés, nous pouvons passer :

Une fonction

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 en-capsule souvent l’ensemble du code écrit en jQuery dans :

$(function(){

// ...

});

On s’assure ainsi que le code sera exécute 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.

Une chaine de caractères (query)

Les sélecteurs CSS

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.

Par exemple :

var mon_objet_jQuery = $("#mon_image");

var mon_objet_jQuery = $("#menu a");

Ou directement sur Google code

Intefaces Hommes-Machines - François Bonneville 8

La fonction jQuery()

jQuery repose sur une seule fonction :

jQuery() ou $().

C’est une fonction JavaScript
Elle accepte des paramètres
Elle retourne un objet
$ : Syntaxe issue de « Prototype »

Intefaces Hommes-Machines - François Bonneville 9

$('anything')

$ accepte un sélecteur CSS en argument
$ accepte des ID :

$('#nomID') retourne un élément document.getElementById

$ accepte des classes :

$('.nomClasse') retourne tous les éléments qui correspondent à cette classe

$ accepte plusieurs sélecteurs

$('.article, .nouvelles, .edito')

Intefaces Hommes-Machines - François Bonneville 10

$(anything)

$ accepte des sélecteurs spécifiques :

 $(':radio'), $(':header'), $(':first-child')

des sélecteurs en forme de filtres :

 $(':checked'), $(':odd'), $(':visible')

 plus fort: $(':contains(du texte)')

des attributs

 $('a[href]'), $('a[href^=http://'), $('img[src$=.png]'

Intefaces Hommes-Machines - François Bonneville 11

Exemple

Bonjour

onClick="jQuery('#monDiv').hide();"> disparition

Intefaces Hommes-Machines - François Bonneville 12

jQuery: un objet

les méthodes s'appliquent généralement à tous les éléments sélectionnés

JQuery cours complet avec exemples de A à Z

 $('.classe').hide();

 $('.classe').show();

de nombreuses méthodes utilitaires

 parcourir le DOM: .parent(), .next(), .children(), .parents()

 ajouter ou retirer des classes CSS: addClass, removeClass

 manipuler: append, wrap, prepend

Intérêt fondamental: la plupart des méthodes de l'objet retournent l'objet lui-même

 on peut chaîner les appels !

 $('anything').parent().find('still anything').show();

 Cette propriété est extrêmement puissante !

Intefaces Hommes-Machines - François Bonneville 13

Ajax

JQuery possède toute une panoplie de fonctions permettant de simplifier les requêtes Ajax
La plus simple :

$('#maDiv').load('page.html');

Plus complexe :

$.get('test.html',

function(data) {faire quelque chose);

Générale : $.ajax({

url: 'document.xml',

type: 'GET',

dataType: 'xml',

timeout: 1000,

error: function(){alert('Erreur chargement'); },

success: function(xml){faire quelque chose}

});

Intefaces Hommes-Machines - François Bonneville 14

Inconvénients d’AJAX / XML

XML est délicat à parser en Javascript/jQuery

$.ajax({ type: "GET", url: "courses.xml",

dataType: "xml",

complete : function(data, status)

{ var products = data.responseXML;

var html = "";

$(products).find('product').each(function(){

var id = $(this).attr('id');

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

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

html += "

#"+id

+" - "+name+" : "

+price+""; });

$("#cousesList").html(html); }});

… … … … …

Méthodes

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 : manipulation du DOM, des CSS, des évènements et autres effets visuels.

Si on désire par exemple masquer progressivement les paragraphes d’une page, on utilise :

$("p").fadeOut();

Soit sans passer de paramètre comme cela, soit en précisant une durée en mili-secondes ou encore à l’aide des chaines slow, fast et normal.

Deux autres exemples :

$("li").html("lorem ipsum dolor");

$("#menu a").click(function(){

window.open($(this).attr("href"));

return false;

});

Dans le dernier, vous remarquerez qu’on combine des fonctions JavaScript “classiques” au code jQuery, mais aussi qu’on transforme l’objet courant this en objet jQuery avec $(this).

L’ensemble des méthodes et leurs documentations sont disponibles sur Visual jQuery.

Callback

Certaines fonctions (comme la fonction fadeOut()) acceptent une autre fonction en paramètre. Cette dernière sera exécutée à la fin de l’exécution de la première. C’est ce qu’on appelle un callback.

Cela permet par exemple de créer des animations :

$(".test").fadeOut("slow",function(){

$(this).fadeIn("slow");

hainabilité

On l’a vu les méthodes jQuery retournent un objet jQuery. Cela permet de “chainer” les fonctions.

Ainsi au lieu d’écrire :

$(".toto").append(" un texte");

$(".toto").css("border","1px solid red");

$(".toto").addClass("titi");

$(".toto").removeClass("toto");

Inconvénients d’AJAX / Sécurité

pour des raisons de sécurité, les navigateurs interdisent de faire du « cross-domain » avec XMLHttpRequest dont le résultat serait du XML (et donc du HTML)

….mais pas pour des scripts Javascript !

D’où l’idée de définir un modèle de données sous la forme d’objet Javascript

JSON Intefaces Hommes-Machines - François Bonneville 16

JSON (JavaScript Object Notation)

format de données textuel, générique, dérivé de la notation des objets de JavaScript
permet de représenter de l'information structurée.
décrit par la RFC 4627 de l’IETF.
Exemple :

{ "Image": {

"Width": 800,

"Height": 600,

"Title": "Vue du 15ème étage",

"Thumbnail": {

"Url": " http://www.example.com/481989943 ",

"Height": 125,

"Width": "100" },

"IDs": [116, 943, 234, 38793]

} }

Intefaces Hommes-Machines - François Bonneville 17

Les avantages de JSON

Type de données générique et abstrait pouvant

 être représenté dans n'importe quel langage de programmation

 représenter n'importe quelle donnée concrète.

simple à mettre œuvre tout en étant complet.
peu verbeux, lisible aussi bien par un humain que par une machine
facile à apprendre, syntaxe réduite
types de données sont connus et simples à décrire
indépendant du langage de programmation (bien qu'utilisant une notation JavaScript)
Le type MIME application/json est utilisé pour le transmettre par le protocole HTTP (notamment en Ajax)

Intefaces Hommes-Machines - François Bonneville 18

Les avantages de JSON

Vis-à-vis de JavaScript, un document JSON représente un objet, d'où son nom. Il est donc plus facile à interpréter qu'un XML.

var donnees = eval('('+donnees_json+')');

Le site json.org fournit une liste de parseurs pour d'autres langages
Il peut aussi être utilisé pour :

 la sérialisation et déserialisation d'objets ;

 l’encodage de documents ;

Intefaces Hommes-Machines - François Bonneville 19

jQuery et JSON

jQuery.getJSON( url, [ data ],

[ callback(data, textStatus) ] )

Exemple :

Intefaces Hommes-Machines - François Bonneville 20

jQuery UI

Un ensemble de composants graphiques téléchargeable à

 un noyau (Core)

 des « comportements » (interactions)

➢ draggable : pour glisser-déplacer un élément

➢ droppable : pour « déposer » un élément

➢ resizable : pour redimensionner un élément

➢ selectable : pour sélectionner des éléments à la souris

➢ sortable : pour trier des éléments

Intefaces Hommes-Machines - François Bonneville 21

jQuery UI

 des « widgets »

…

 des « effets »

➢ Clignotement, disparition, apparition, éclatement, transition…

Une collection de thèmes

JQuery cours complet avec exemples de A à Z

jQuery Plugins

On peut étendre facilement jQuery en utilisant des « plugins »
Les méthodes ajoutées sont au même niveau que les méthodes natives
Ils conservent les mêmes sémantiques que les méthodes natives: retourner l'objet jQuery, appliquer la méthode à tous les éléments représentés
Des centaines plugins existent d'ores et déjà, de qualité variable; certains mis en avant par l'équipe de développement