JQuery

Document original de Franois BONNEVILLE

francois@aricia.fr, Laboratoire d'Informatique
de lUniversit de Franche-Comt,

ajouts par Michel Buffa, buffa@unice.fr, Universit de Nice

De JavaScript jQuery
La naissance de JavaScript
1995 : Brendan Eich dveloppe pour Netscape
Communications Corporation, un langage de script, appel
Mocha, puis LiveScript et finalement JavaScript
Javascript est intgr dans le navigateur Netscape 2.
Succs immdiat.

La guerre des navigateurs

Netscape et Microsoft (avec JScript dans Internet
Explorer) ont dvelopp leur propre variante de JavaScript
avec des fonctionnalits supplmentaires et incompatibles,
notamment dans la manipulation du DOM (modle objet
du navigateur WEB)
1997 : Adoption du standard ECMAScript.
Les spcifications sont rdiges dans le document
Standard ECMA-262.
Cours applications web M1 Miage 2011

La naissance de la fondation Mozilla

Netscape perd des parts de march face Microsoft
Malgr un procs pour concurrence dloyale, Netscape,
rachet par AOL est dissoute en 2004
Netscape, dans ses dernires forces, fonde la fondation
principaut Mozilla, et lui livre le code source de Netscape
Navigator 5, qui contient les premires briques du moteur de
rendu Gecko (aujourdhui au coeur de Firefox).
Actuellement, les navigateurs web modernes supportent tous
les spcifications ECMAScript
Mais chacun a tendu les spcifications pour utiliser au mieux
son propre navigateur, ce qui a amen des diffrences
dimplmentation suivant le navigateur
Cours applications web M1 Miage 2011

JavaScript devenu incontournable

Les spcifications ECMAScript ont permis de
prenniser JavaScript
JavaScript permet de contrler quasiment tous les
paramtres dune page WEB
Cest le seul langage, cot client, capable de changer
dynamiquement laspect dune page WEB
Avec larrive de lobjet XMLHttpRequest
permettant le dveloppement dapplications AJAX,
JavaScript est devenu incontournable dans le
dveloppement dinterfaces WEB volues (WEB2.0)
Cours applications web M1 Miage 2011

Les premiers Frameworks

Comme il tait devenu difficile de coder du javascript
pour tous les navigateurs, sont apparus des
Frameworks permettant une spcification unique,
indpendante du navigateur
PrototypeJS - www.prototypejs.org
script.aculo.us

Mootools - mootools.net
DoJo Toolkit - www.dojotoolkit.org
Yahoo UI - developer.yahoo.com/yui/
ExtJS - www.extjs.com
UIZE - www.uize.com
Cours applications web M1 Miage 2011

JQuery
Une bibliothque javascript open-source et crossbrowser
Elle permet de traverser et manipuler trs 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, crer des animations, modifier des
attributs, etc.
Grer les vnements javascript
Faire des requtes AJAX simplement
Cours applications web M1 Miage 2011

John Resig
John Resig est un dveloppeur doutils
JavaScript pour Mozilla Corporation et auteur
du livre Pro JavaScript Techniques. Il est
galement le crateur et dveloppeur principal
de la jQuery JavaScript library.
Il vit Boston, MA. Il a publi son second livre
: Secrets of the JavaScript Ninja, en 2009.
Il a port le langage processing en javascript
lanne dernire (http://processingjs.org/),
Il a cr galement jQuery Mobile
(http://jquerymobile.com/)
Microsoft et Nokia incluent jQuery sur leurs
plateformes,[1] Microsoft dansVisual Studio[2]
pour lutiliser avec les frameworks ASP.NET
AJAX et ASP.NET MVC Framework alors que
Nokia la intgr dans sa plateformeWeb RunTime.

Ce que jQuery nest pas

Un substitut pour apprendre JavaScript
jQuery est trs puissant et trs pratique, mais vous devez
nanmoins connaitre les bases de Javascript, notamment la
partie objet du langage.
Voir des vlivres comme :
Object Oriented Javascript de Stoyan Stefanov ou
jQuery, novice to ninja (google est votre ami)

Une rponse tout

Utilisez jQuery uniquement lorsque cest ncessaire. On
commence toujours par HTML+CSS avant de chercher
des plugins jQuery magiques.
De nombreuses UI sont pures html+CSS

une simple bibliothque importer

Disponible sur le site de Jquery
http://jquery.com/
<script type="text/javascript"
src="jquery.js"></script>

Ou directement sur Google code

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.
js">
</script>

Cours applications web M1 Miage 2011

La fonction jQuery()
jQuery repose sur une seule fonction :

jQuery() ou $().
Cest une fonction JavaScript
Elle accepte des paramtres
Elle retourne un objet

$ : Syntaxe issue de Prototype

Cours applications web M1 Miage 2011

10

Selecteur magique : $('anything') !

$ accepte un slecteur CSS en argument
$ accepte des ID :
$('#nomID') retourne un lment <->
document.getElementById

$ accepte des classes :

$('.nomClasse') retourne tous les lments qui
correspondent cette classe

$ accepte plusieurs slecteurs

$('.article, .nouvelles, .edito')
Cours applications web M1 Miage 2011

11

$(anything)
$ accepte des slecteurs spcifiques :
$(':radio'), $(':header'), $(':first-child')

des slecteurs en forme de filtres :

$(':checked'), $(':odd'), $(':visible')
plus fort: $(':contains(du texte)')

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

Cours applications web M1 Miage 2011

12

Rappel sur le DOM

Le Document Object Model (DOM) est une
convention cross-platform et independente du langage
pour representier and interagir avec des objets dans
des documents en HTML, XHTML ou XML.

Exemple de manipulation du DOM

<html>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/1/jquery.min.js">
</script>
<body>
<div id="monDiv">Bonjour</div>
<a href="#" onClick="$('#monDiv').hide();">
disparition</a>
</body>
</html>

Cours applications web M1 Miage 2011

14

jQuery: un objet
les mthodes s'appliquent gnralement tous les lments
slectionns
$('.classe').hide();
$('.classe').show();

de nombreuses mthodes utilitaires

parcourir le DOM: .parent(), .next(), .children(), .parents()
ajouter ou retirer des classes CSS: addClass, removeClass
manipuler: append, wrap, prepend

Intrt fondamental: la plupart des mthodes de l'objet

retournent l'objet lui-mme
on peut chaner les appels !
$('anything').parent().find('still anything').show();
Cette proprit est extrmement puissante !
Cours applications web M1 Miage 2011

15

Nombreux exemples interactifs

Les selecteurs jQuery sont illustrs par de nombreux
tutoriaux interactifs, par exemple :
Ici :
http://www.w3schools.com/jquery/jquery_examples.asp
Et l :
http://docs.jquery.com/Tutorials:Live_Examples_of_jQuer
y

Cours applications web M1 Miage 2011

16

jQuery example dutilisation 1

$(li:odd).prepend(<span>Changed</span>).css({background:red});
<ul>
<li>
First item
</li>
<li>
Second item
</li>
<li>
Third item
</li>
</ul>

<ul>
<li>
<span>Changed</span>
First item
</li>
<li>
Second item
</li>
<li>
<span>Changed</span>
Third item
</li>
</ul>

<ul>
<li style=background:red;>
<span>Changed</span>
First item
</li>
<li>
Second item
</li>
<li style=background:red;>
<span>Changed</span>
Third item
</li>
</ul>

jQuery example dutilisation 2

$(div:hidden).find(.foo).empty().text(Changed).end().show();
<div>
<span class=foo>
Some text
</span>
</div>
<div style=display:none>
<span>
More text
</span>
<span class=foo>
Goodbye cruel world.
</span>
</div>

<div>
<span class=foo>
Some text
</span>
</div>
<div style=display:none>
<span>
More text
</span>
<span class=foo>
Goodbye cruel world.
</span>
</div>

<div>
<span class=foo>
Some text
</span>
</div>
<div style=display:none>
<span>
More text
</span>
<span class=foo>
</span>
</div>

<div>
<span class=foo>
Some text
</span>
</div>
<div style=display:none>
<span>
More text
</span>
<span class=foo>
Changed
</span>
</div>

<div>
<span class=foo>
Some text
</span>
</div>
<div style=display:none>
<span>
More text
</span>
<span class=foo>
Changed
</span>
</div>

<div>
<span class=foo>
Some text
</span>
</div>
<div style=display:block>
<span>
More text
</span>
<span class=foo>
Changed
</span>
</div>

jQuery example dutilisation 3

Determiner si une checkbox est coche
If ($(#total).attr(checked)) {
//Traitement si coche
}
else {
//Traitement si non coche
}

jQuery example dutilisation 4

Intercepter le bouton submit dun formulaire :
$(document).ready(function() {
$(#ok).submit(function() {
if ($(#login).val() ==) {
alert (Entrer un login);
return false;
}
})
});

jQuery example dutilisation 5

Effacer le contenu dun champs de texte lorsquil
a le focus
<input name=nom type=text id=nom
value=Entrez votre nom>
$(#nom).focus(function() {
var field = $(this);
field.val();
});

jQuery example dutilisation 6

Tester le clic sur nimporte quel bouton
radio :
$(:radio).click(function() {
//do stuff
});

Donner le focus au premier lment dun

formulaire:
$(nom).focus;

jQuery example dutilisation 7

$(span.none).click(
function(){
$(this).siblings(:checkbox).removeAttr(checked);
}
);
$(span.all).click(
function(){
$(this).siblings(:checkbox).attr(checked,checked);
}
);

<div>
<span class=all>Select All</span>

<span class=none>Select None</span>

<input name=chk1 type=checkbox/>
<input name=chk2 type=checkbox/>
<input name=chk3 type=checkbox/>
</div>
<div>
<span class=all>Select All</span>

or

<span class=none>Select None</span>

<input name=chk4 type=checkbox/>
<input name=chk5 type=checkbox/>

$(span).click(
function(){
if($(this).text()==Select All))
$(this).siblings(:checkbox).attr(checked,checked);
else if ($(this).attr(class)==none)
$(this).siblings(:checkbox).removeAttr(checked);
}
);

<input name=chk6 type=checkbox/>

</div>

Ajax
JQuery possde toute une panoplie de fonctions
permettant de simplifier les requtes Ajax
La plus simple :
$('#maDiv').load('page.html');

Plus complexe :
$.get('test.html',
function(data) {faire quelque chose);

Gnrale :

$.ajax({
url: 'document.xml',
type: 'GET',
dataType: 'xml',
timeout: 1000,
error: function(){alert('Erreur chargement'); },
success: function(xml){faire quelque chose}
});

Cours applications web M1 Miage 2011

24

Tutorial ajax/jQuery trs complet !

Ici : http://viralpatel.net/blogs/2009/04/jquery-ajaxtutorial-example-ajax-jquery-development.html

Cours applications web M1 Miage 2011

25

jQuery AJAX Exemple

<html>
<head>
<title>AJAX Demo</title>
<script type=text/javascript src=jquery.js>
</script>
<script type=text/javascript>
var cnt = 0;
$(function(){
$.ajaxSettings({
error:function(){alert(Communication error!);}
});
$(:button).click(function(){
var input = {in:$(:textbox).val(),count:cnt};
$.getJSON(ajax.php,input,function(json){
cnt = json.cnt;
$(.cnt).text(cnt)
$(.msg).text(json.out);
});
});
});
</script>
</head>
<body>
<p>
Input:
<input type=textbox/>
<input type=button value=Send/>
Output #
<span class=cnt></span>:
<span class=msg></span>
</p>
</body>
</html>

<?php
$output = ;

switch($_REQUEST[in]) {
case hello:
$output = Hello back.;
break;
case foo:
$output = Foo you, too.;
break;
case bar:
$output = Where Andy Capp can be found.;
break;
case foobar:
$output = This is German, right?;
break;
default:
$output = Unrecognized string.;
}
$count = $_REQUEST[count]+1;
echo json_encode(
array(
out => $output,
cnt => $count
)
);
exit;
?>

jQuery AJAX Fonctions

$.ajax, $.ajaxSetup
$.func(url[,params][,callback])

$.get
$.getJSON
$.getIfModified
$.getScript
$.post

$(selector), inject HTML

load
loadIfModified

$(selector), ajaxSetup alts

ajaxComplete
ajaxError
ajaxSend
ajaxStart
ajaxStop
ajaxSuccess

async
beforeSend
complete
contentType
data
dataType
error
global
ifModified
processData
success
timeout
type
url

Inconvnients dAJAX / XML

XML est dlicat 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 += "<li>#"+id
+" - <strong>"+name+"</strong> : "
+price+"</li>"; });
$("#cousesList").html(html); }});
Cours applications web M1 Miage 2011

28

Inconvnients dAJAX / Scurit

pour des raisons de scurit, les navigateurs
interdisent de faire du cross-domain avec
XMLHttpRequest dont le rsultat serait du
XML (et donc du HTML)
.mais pas pour des scripts Javascript !
Do lide de dfinir un modle de donnes
sous la forme dobjet Javascript
JSON

Voir : http://www.jsonpexamples.com/
Cours applications web M1 Miage 2011

29

JSON (JavaScript Object Notation)

format de donnes textuel, gnrique, driv de la notation des
objets de JavaScript
permet de reprsenter de l'information structure.
dcrit par la RFC 4627 de lIETF.
Exemple :
{ "Image": {
"Width": 800,
"Height": 600,
"Title": "Vue du 15me tage",
"Thumbnail": {
"Url": "http://www.example.com/481989943",
"Height": 125,
"Width": "100" },
"IDs": [116, 943, 234, 38793]

} }
Cours applications web M1 Miage 2011

30

Les avantages de JSON

Type de donnes gnrique et abstrait pouvant
tre reprsent dans n'importe quel langage de programmation
reprsenter n'importe quelle donne concrte.

simple mettre uvre tout en tant complet.

peu verbeux, lisible aussi bien par un humain que par une
machine
facile apprendre, syntaxe rduite
types de donnes sont connus et simples dcrire
indpendant 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)
Standard dans les web services .Net, Java EE, etc.
Cours applications web M1 Miage 2011

31

Les avantages de JSON

Vis--vis de JavaScript, un document JSON
reprsente un objet, d'o son nom. Il est donc plus
facile interprter 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 srialisation et dserialisation d'objets ;
lencodage de documents ;

Cours applications web M1 Miage 2011

32

jQuery et JSON
jQuery.getJSON( url, [ data ],
[ callback(data, textStatus) ] )
Exemple :
<html><head>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="images" style="height: 300px"></div>
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tag
s=besancon&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});
</script>
</body></html>

Cours applications web M1 Miage 2011

33

jQuery UI
http://jqueryui.com/
Un ensemble de composants graphiques tlchargeable
l'adresse http://jqueryui.com/download.
un noyau (Core)
des comportements (interactions)
draggable : pour glisser-dplacer un lment
http://jqueryui.com/demos/draggable/
droppable : pour dposer un lment
http://jqueryui.com/demos/droppable/
resizable : pour redimensionner un lment
http://jqueryui.com/demos/resizable/
selectable : pour slectionner des lments la souris
http://jqueryui.com/demos/selectable/
sortable : pour trier des lments
http://jqueryui.com/demos/selectable/
Cours applications web M1 Miage 2011

34

jQuery UI
des widgets
accordon http://jqueryui.com/demos/accordion/
calendrier http://jqueryui.com/demos/datepicker/
bote de dialogue http://jqueryui.com/demos/dialog/
barre de progression http://jqueryui.com/demos/progressbar/
curseur http://jqueryui.com/demos/slider/
onglets http://jqueryui.com/demos/tabs/

des effets
http://jqueryui.com/demos/effect/
Clignotement, disparition, apparition, clatement, transition

Une collection de thmes

http://jqueryui.com/themeroller/
Cours applications web M1 Miage 2011

35

jQuery Plugins
On peut tendre facilement jQuery en utilisant des plugins
Les mthodes ajoutes sont au mme niveau que les mthodes
natives
Ils conservent les mmes smantiques que les mthodes
natives: retourner l'objet jQuery, appliquer la mthode tous
les lments reprsents
Des centaines plugins existent d'ores et dj, de qualit
variable; certains mis en avant par l'quipe de dveloppement
http://plugins.jquery.com/
des menus
http://apycom.com/
http://www.wizzud.com/jqDock/
Galerie photo : VisualLightbox
http://visuallightbox.com

Cours applications web M1 Miage 2011

36

Conclusion

jQuery est un framework complet et facile utiliser

Bibliothque lgre charger
Simplifier et unifie la syntaxe daccs au DOM
Permet de faire des requtes AJAX simplement
UI et nombreux plugins complmentaires

Dautres frameworks sont disponibles et ne sont pas

oublier : il est possible de combiner les frameworks
Dojo recommand pour application riche en widgets et
ncessitant une forte cohrence (widgets MVC
notamment)
Cours applications web M1 Miage 2011

37

jQuery ressources intressantes

Site officiel

http://www.jquery.com

Learning Center

http://docs.jquery.com/Tutorials
http://www.learningjquery.com/
http://15daysofjquery.com/
http://www.roseindia.net/ajax/jquery/

Support

http://docs.jquery.com/Discussion
http://www.nabble.com/JQuery-f15494.html mailing list archive
irc.freenode.net irc room: #jquery

Documentation

http://docs.jquery.com/Main_Page
http://www.visualjquery.com
http://jquery.bassistance.de/api-browser/

jQuery Success Stories

http://docs.jquery.com/Sites_Using_jQuery