jQuery est un framework JavaScript qui facilite l'interaction entre JavaScript et HTML, créé par John Resig en janvier 2006. Il est populaire, open-source et extensible, offrant de nombreux plugins et une normalisation des différences entre navigateurs. Il permet de gérer les interactions utilisateur, les animations, et l'utilisation d'Ajax, tout en évitant de remplacer des langages côté serveur ou HTML.

1. UX-DAY
JQuery
Write less, Do more
SMAHI Zakaria <z_smahi@esi.dz>

2. C'est quoi JQuery ?
● Javascript framework
● Interaction entre JavaScript (AJAX inclus) et HTML.
● John Resig Janvier 2006. 120Ko (19ko compressé en format
gzip).
● Populaire, Open Source ( MIT & Gnu GPL), bien documenté et
extensible.
● Nombreux plugins.
● Mis à jour réguliérement. (version 1.9 et 2.0).
● Normalise les différences entre les navigateurs web.
● Sites: Google, Amazon, Mozilla.org, Facebook, Wordpress,
Drupal...etc.

3. Que Faire/Ne pas faire ?
● Faire :
● Gérer les interactions avec
l'utilisateur.
● Prétraiter les formulaires.
● Créer des animations et effets.
● Manipuler le DOM.
● Utiliser AJAX simplement.
● Créer des RIA (rich Internet
Applications).
● Ne pas Faire :
● Remplacer par un langage
coté serveur ( php, asp,
jsp).
● Remplacer totalement flash
et HTML.
● Remplacer un rôle
sécuritaire.

4. Outils de développement
● Editeur de texte (Notepad++, Gedit, Notepad ...etc. ).
● Navigateur web (Mozilla Firefox, Google Chrome ).
● Extension de développement (Firebug sous firefox,
Outils de développement sous Chrome ...etc. )

5. $( )
● Fonction de base de JQuery.
● Alias de la fonction JQuery.
● Permet d'associer le démarrage du script sur
l'event ready du document + sélectionner les
éléments de la page à manipuler par la suite.

6. $(doument).ready()
● Démarre la fonction anonyme lorsque les
éléments de la page sont prêts.
● <script type= « text/javascript » >
$(document).ready(function(){
// ici du code ;
}) ;
</script>

7. Sélécteurs
● Viser les éléments de la page à manipuler.
● La fonction $().
● Syntaxe des sélécteurs CSS( 1, 2 et 3) et XPath.
● Renvoie un ou plusieurs objets JQuery.
var objet = $(« sélécteur ») ;
● var objet = $(« #monId ») ; // Id
● var objet = $(« .maClasse ») ; // Classe
● var objet = $(« div ») ; // Tag

8. Sélécteurs
● <div>
<ul>
<li>
</li>
</ul>
</div>
<p> paragraphe 1 </p>
<p> paragraphe 2 </p>
<p> paragraphe 3 </p>
● Hiérarchie : ancêtre et
descendant
$(« div ul ») ; $(« div ul li ») ;
● Hiérarchie : parent et enfant
$(« div > ul ») ;
● Hiérarchie : précédent et suivant
$(« div + p ») ;
● Hiérarchie : frère et frères
$(« div ~ p ») ;

9. Sélécteurs Magiques
(Filtres)
● :first, :last, :even, :odd, :eq, :lt,
:gt
● :nth-child(), :first-child(), :last-
child(), :only-child()
● :hidden,:visible
● :header
● :parent
● :has(élément)
● :contains(« texte »)
● :empty, :not(négation)
● Sur attribut :
$(« input [type=submit] ») ;
$(« input [type !=submit] ») ;
● Expression réguliéres :
^= ( débute par …).
$= ( finit par …).
*= (contient la valeur …).
● [attr1][attr2] : contient les
attributs...
● Formulaires :
$(« #formulaire :checkbox ») ;
$(« #formulaire
:checkbox:checked») ;

10. Collections JQuery
● $('div.section') retourne une collection JQuery.
● La collection peut être manipulée comme un tableau :
$('div.section').length (ou .size) = n° des éléments.
$('div.section')[0] : le 1er élément DOM sous div
$('div.section')[2]
$('div.section').each(function() {
console.log(this);
});
$('div.section').each(function(i) {
console.log("Item " + i + " is ", this);
});

11. HTML futzing
● $('span#msg').text('The thing was updated!');
● $('div#intro').html('<em>Look, HTML</em>');

12. Attribute futzing
$('a.nav').attr('href', 'http://flickr.com/');
● $('a.nav').attr({
'href': 'http://flickr.com/',
'id': 'flickr'
});
● $('#intro').removeAttr('id');

13. CSS futzing
● $('#intro').addClass('highlighted');
● $('#intro').removeClass('highlighted');
● $('#intro').toggleClass('highlighted');
● $('p').css('font-size', '20px');
● $('p').css({'font-size': '20px', color: 'red'});

14. Méthodes et Valeurs
● Certaines méthodes font retourner un(des)
résultat(s) depuis le 1er élément
correspondant.
● var height = $('div#intro').height();
● var src = $('img.photo').attr('src');
● var lastP = $('p:last').html()
● var hasFoo = $('p').hasClass('foo');
● var email = $('input#email').val();

15. Manipulation du DOM
● JQuery fournit plusieurs méthodes pour manipuler
le DOM( Document Object Model)
● Manipulation du contenu: selector.html( )
● Remplacement d'un élément DOM:
selector.replaceWith( content )
● Supprimer un élément : selector.remove( [ expr ]) |
selector.empty( )
● Insertion d'un élément : selector.after( content ) |
selector.before( content ).

16. Traverser le DOM
● $('div.section').parent()
● $('div.section').next()
● $('div.section').prev()
● $('div.section').nextAll('div')
● $('h1:first').parents()

17. Gestion des événements
● $('a:first').click(function(ev) {
$(this).css({backgroundColor: 'orange'});
return false; // Or ev.preventDefault();
});
● $('a:first').click();

18. Astuce cool ;)
● $(document).ready(function() {
alert('DOM est prêt!');
});
● $(function() {
alert('DOM est prêt!');
});

19. Chainage
● La plupart des méthodes JQuery retournent un
autre objet JQuery → Possibilté de chainer les
méthodes entre eux :
● $('div.section').hide().addClass('gone');
● $('#intro').css('color',
'#cccccc').find('a').addClass('highlighted').end().
find('em').css('color', 'red').end()

20. AJAX
● JQuery supporte très bien AJAX.
● $('div#intro').load('/some/file.html');
● $.get(url, params, callback)
● $.post(url, params, callback)
● $.getJSON(url, params, callback)
● $.getScript(url, callback)

21. Animations
● JQuery a quelques effets d'animations :
$('h1').hide('slow');
$('h1').slideDown('fast');
$('h1').fadeOut(2000);
● Un chainage : $('h1').fadeOut(1000).slideDown()
● Créer vos propres animation ;)
$("#block").animate({
width: "+=60px",
opacity: 0.4,
fontSize: "3em",
borderWidth: "10px"
}, 1500);

22. Plugins
● JQuery est extensible via des plugins ; permettant de lui ajouter
d'autres méthodes :
● Form : meilleure manipulation des forms.
● UI : Drag&Drop et les widgets.
● $('img[@src$=.png]').ifixpng()
● Une dizaine d'autres plugins .
● jQuery.fn.hideLinks = function() {
return this.find('a[href]').hide().end();
}
● $('p').hideLinks();

23. Aller plus loin
● http://jquery.com/
● http://docs.jquery.com/
● http://visualjquery.com/ - API reference
● http://simonwillison.net/tags/jquery/