Cours: JQuery

Un peu d’historique: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)
– 1997 : Adoption du standard ECMAScript.
Les spécifications sont rédigées dans le document Standard
ECMA-262.
 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…
 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)
 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
– UIZE - www.uize.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.
• Gérer les événements javascript
• Faire des requêtes AJAX simplement
John Resig
 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 des plugins jQuery magiques.
– De nombreuses UI sont pures html+CSS
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">
</script>
 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 »
 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
– $('.article, .nouvelles, .edito')

Cours applications web

11
M1 Miage 2011
 $(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]'

Cours applications web

12
M1 Miage 2011
 jQuery example d’utilisation 1

$(“li:odd”).prepend(‘<span>Changed</span>’).css({background:“red”});

<ul> <ul> <ul>

<li> <li> <li style=“background:red;”>
First item <span>Changed</span> <span>Changed</span>
</li> First item First item
<li> </li> </li>
Second item <li> <li>
</li> Second item Second item
<li> </li> </li>
Third item <li> <li style=“background:red;”>
</li> <span>Changed</span> <span>Changed</span>
</ul> Third item Third item
</li> </li>
</ul> </ul>
 jQuery example d’utilisation 2
$(“div:hidden”).find(“.foo”).empty().text(“Changed”).end().show();

<div> <div> <div>

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

<div> <div> <div>

<span class=“foo”> <span class=“foo”> <span class=“foo”>
Some text Some text Some text
</span> </span> </span>
</div> </div> </div>
<div style=“display:none”> <div style=“display:none”> <div style=“display:block”>
<span> <span> <span>
More text More text More text
</span> </span> </span>
<span class=“foo”> <span class=“foo”> <span class=“foo”>
Changed Changed Changed
</span> </span> </span>
</div> </div> </div>
 jQuery example d’utilisation 3

Determiner si une checkbox est cochée

If ($(‘#total’).attr(‘checked’)) {
//Traitement si cochée
}
else {
//Traitement si non cochée
}
 jQuery example d’utilisation 4

Intercepter le bouton submit d’un formulaire :

$(document).ready(function() {
$(‘#ok’).submit(function() {
if ($(‘#login’).val() ==‘’) {
alert (‘Entrer un login’);
return false;
}
})
});
 jQuery example d’utilisation 5
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(‘’);
});
 jQuery example d’utilisation 6
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
$(“span.none”).click( <div>
function(){
<span class=“all”>Select All</span>
$(this).siblings(“:checkbox”).removeAttr(“checked”);
} <span class=“none”>Select None</span>
);
<input name=“chk1” type=“checkbox”/>
<input name=“chk2” type=“checkbox”/>
$(“span.all”).click(
function(){ <input name=“chk3” type=“checkbox”/>
$(this).siblings(“:checkbox”).attr(“checked”,“checked”);
</div>
}
); <div>
<span class=“all”>Select All</span>
<span class=“none”>Select None</span>
or <input name=“chk4” type=“checkbox”/>
<input name=“chk5” type=“checkbox”/>
$(“span”).click(
<input name=“chk6” type=“checkbox”/>
function(){
if($(this).text()==“Select All”)) </div>
$(this).siblings(“:checkbox”).attr(“checked”,“checked”);
else if ($(this).attr(“class”)==“none”)
$(this).siblings(“:checkbox”).removeAttr(“checked”);
}
);
 Conclusion
• jQuery est un framework complet et facile à utiliser
• Bibliothèque légère à charger
• Simplifier et unifie la syntaxe d’accès au DOM
• Permet de faire des requètes AJAX simplement
• UI et nombreux plugins complémentaires

• D’autres frameworks sont disponibles et ne sont pas à

oublier : il est possible de combiner les frameworks
– Dojo recommandé pour application riche en widgets et
nécessitant une forte cohérence (widgets MVC
notamment)

20