jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant Ajax) et HTML, et a pour but de simplifier des commandes communes de JavaScript. Atelier présenté par SMAHI Zakaria. UX Day, Semaine du Web.

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/

http://www.unheap.com/