UX-DAY

JQueryWrite less, Do more

SMAHI Zakaria <z_smahi@esi.dz>

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.

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.

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. )

$( )

● 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.

$(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>

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

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 ») ;

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») ;

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);});

HTML futzing

● $('span#msg').text('The thing was updated!');

● $('div#intro').html('<em>Look, HTML</em>');

Attribute futzing

$('a.nav').attr('href', 'http://flickr.com/');● $('a.nav').attr({

'href': 'http://flickr.com/','id': 'flickr'

});● $('#intro').removeAttr('id');

CSS futzing

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

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();

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 ).

Traverser le DOM

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

Gestion des événements

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

});● $('a:first').click();

Astuce cool ;)

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

● $(function() {alert('DOM est prêt!');});

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()

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)

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);

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();

Aller plus loin

● http://jquery.com/● http://docs.jquery.com/● http://visualjquery.com/ - API reference● http://simonwillison.net/tags/jquery/