Académique Documents
Professionnel Documents
Culture Documents
JQuery
Franois BONNEVILLE
aricia - francois@aricia.fr
Laboratoire d'Informatique
de lUniversit de Franche-Comt
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.
Mootools - mootools.net
DoJo Toolkit - www.dojotoolkit.org
Yahoo UI - developer.yahoo.com/yui/
ExtJS - www.extjs.com
UIZE - www.uize.com
Intefaces Hommes-Machines - Franois Bonnev
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
Intefaces Hommes-Machines - Franois Bonnev
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
Intefaces Hommes-Machines - Franois Bonnev
$('anything')
$ accepte un slecteur CSS en argument
$ accepte des ID :
$('#nomID') retourne un lment <->
document.getElementById
$(anything)
$ accepte des slecteurs spcifiques :
$(':radio'), $(':header'), $(':first-child')
des attributs
$('a[href]'), $('a[href^=http://'), $('img[src$=.png]'
10
Exemple
<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="jQuery('#monDiv').hide();">
disparition</a>
</body>
</html>
Intefaces Hommes-Machines - Franois Bonnev
11
jQuery: un objet
les mthodes s'appliquent gnralement tous les lments
slectionns
$('.classe').hide();
$('.classe').show();
12
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}
});
13
14
15
} }
16
17
18
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.g
ne?tags=besancon&format=json",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src",
item.media.m).appendTo("#images");
});
});
</script>
</body></html>
19
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/
20
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
21
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
22
Conclusion
23