JQuery
Document original de François BONNEVILLE
francois@aricia.fr
, Laboratoire d'Informatique
de l’Université de Franche-Comté,
De JavaScript… à jQuery
• 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)
Cours applications web M1 Miage 2011
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
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
Cours applications web M1 Miage 2011
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 - mootools.net
DoJo Toolkit - www.dojotoolkit.org
Yahoo UI - developer.yahoo.com/yui/
ExtJS - www.extjs.com
JQuery
• Une bibliothèque javascript open-source et
cross-browser
• 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.
John Resig
• John Resig est un développeur d’outils JavaScript
pour
Mozilla Corporation
et auteur du livre
Pro JavaScript Techniques
. Il est également le
créateur et développeur 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
l’année dernière (
http://processingjs.org/
),
• Il a créé également jQuery Mobile
(http://jquerymobile.com/)
•
Microsoft
et
Nokia
incluent jQuery sur leurs
plateformes,
[1]
Microsoft dans
Visual Studio[2]
pour l’utiliser avec les frameworks
ASP.NET AJAX
et
ASP.NET MVC Framework
alors que Nokia l’a intégré dans sa plateformeWeb
Run-Time.
Ce que jQuery n’est pas
• Un substitut pour apprendre JavaScript
jQuery est très puissant et très pratique, mais vous devez
néanmoins 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 réponse à tout
Utilisez jQuery uniquement lorsque c’est nécessaire. On
commence toujours par HTML+CSS avant de chercher
Cours applications web M1 Miage 2011
9
une simple bibliothèque à 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.j
s">
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 »
Cours applications web M1 Miage 2011
11
Selecteur magique : $('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
$(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
Rappel sur le DOM
• “Le Document Object Model (DOM) est une convention
cross-platform
et independente du langage pour representier and interagir avec des
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>
Cours applications web M1 Miage 2011
15
jQuery: un objet
• les méthodes s'appliquent généralement à tous les éléments
sélectionnés
$('.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 !
Nombreux exemples interactifs
• Les selecteurs jQuery sont illustrés 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
jQuery example d’utilisation 1
<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> <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>$(“li:odd”).prepend(‘<span>Changed</span>’).css({background:“red”});
jQuery example d’utilisation 2
<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”> 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:hidden”).find(“.foo”).empty().text(“Changed”).end().show();
<div> <span class=“foo”> Some text </span> </div> <div> <span class=“foo”> Some text </span> </div> <div> <span class=“foo”> Some text </span> </div>Determiner si une checkbox est cochée
If ($(‘#total’).attr(‘checked’)) {
//Traitement si cochée
}
else {
//Traitement si non cochée
}
Intercepter le bouton submit d’un formulaire :
$(document).ready(function() {
$(‘#ok’).submit(function() {
if ($(‘#login’).val() ==‘’) {
alert (‘Entrer un login’);
return false;
}
})
Effacer le contenu d’un champs de texte lorsqu’il
a le focus
<input name=“nom” type=“text” id=“nom”
value=“Entrez votre nom”>
$(‘#nom’).focus(function() {
var field = $(this);
field.val(‘’);
});
Tester le clic sur n’importe quel bouton
radio :
$(‘:radio’).click(function() {
//do stuff
});
Donner le focus au premier élément d’un
formulaire:
$(‘nom’).focus;
jQuery example d’utilisation 7
<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> <span class=“none”>Select None</span> <input name=“chk4” type=“checkbox”/> <input name=“chk5” type=“checkbox”/> <input name=“chk6” type=“checkbox”/> </div> $(“span.none”).click( function(){ $(this).siblings(“:checkbox”).removeAttr(“checked”); } ); $(“span.all”).click( function(){ $(this).siblings(“:checkbox”).attr(“checked”,“checked”); } ); $(“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”); } );
or
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,
Tutorial ajax/jQuery très complet !
• Ici :
http://viralpatel.net/blogs/2009/04/jquery-ajax-tutor
ial-example-ajax-jquery-development.html
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> <?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(
