You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
La bibliothèque<br />
<strong>jQuery</strong><br />
Master 2 - IDOD<br />
<strong>Yoann</strong> <strong>Pigné</strong>
<strong>jQuery</strong> par John Resig<br />
• Depuis janvier 2006<br />
• Applications coté client<br />
• Multi-navigateurs multi-OS<br />
• Fonctionnalités : le parcours du DOM, les<br />
évènements, AJAX et les animations<br />
• Code concis, fichier très petit<br />
• version 1.8.2 (minifiée/zipée) : 32 ko<br />
• Extensions de la bibliothèque par plugins
La fonction <strong>jQuery</strong>()<br />
• Tout commence par cette fonction<br />
• «factory» pour tous les objets <strong>jQuery</strong><br />
• Code en 2 parties : requête & action<br />
<strong>jQuery</strong>(".even").hide()<br />
• «$» alias de «<strong>jQuery</strong>»<br />
<strong>jQuery</strong>("div.even") ➔ $("div.even")
Sélecteurs CSS 2 et 3<br />
a[rel]<br />
div[class~="even"]<br />
a[href^="http://"]<br />
ul#nav > li<br />
li#current ~ li<br />
li:first-child, li:last-child, li:nth-<br />
child(3)
D’autres sélecteurs<br />
div:first, h3:last<br />
:header<br />
:hidden,:visible<br />
:animated<br />
:input,:text,:password,:radio,:submit...<br />
div:contains(Hello)<br />
http://api.jquery.com/category/selectors/
<strong>jQuery</strong>() retourne un tableau<br />
• Collections (objet) <strong>jQuery</strong><br />
$('.odd')<br />
[!that's d1!,<br />
!that's d3! ,<br />
!that's d5!!,<br />
!that's d7!!]<br />
• Peut se traiter comme un tableau<br />
$(".odd").length;<br />
$(".odd")[0];<br />
• On peut leur appliquer des méthodes<br />
$(".odd").size();<br />
$(".odd").each(function() {<br />
console.log(this);<br />
});
Action sur la sélection<br />
• Méthodes qui manipule l’objet appelant<br />
(les objets du tableau sélectionné)<br />
• Elle retournent généralement l’objet (la<br />
collection) appelant<br />
• Actions ou commandes enchainables<br />
$(".odd").add(".even").addClass("darcker").show("fast");
Consistance du code<br />
Nom des fonctions<br />
.click() vs. .onclick()<br />
Position des arguments<br />
.methode(options, arg1, arg2, ... ,<br />
callback)<br />
Contexte des callbacks<br />
.methode(function(){<br />
});<br />
// this == DOMElement
Manipulations HTML<br />
$(".even:first").text("First \"even\"<br />
div on the page.")<br />
$(".odd:last").html("The lastodd div")
Manipulations d’attributs<br />
$('a.nav').attr('href', 'http://flickr.com/');<br />
$('a.nav').attr({<br />
'href': 'http://flickr.com/',<br />
'id': 'flickr'<br />
});<br />
$('#intro').removeAttr('id');
Manipulations CSS<br />
$('#intro').addClass('highlighted');<br />
$('#intro').removeClass('highlighted');<br />
$('#intro').toggleClass('highlighted');<br />
$('.div').css("background-color", "#eee");<br />
<strong>jQuery</strong>(".div").css({<br />
"background-color": "#eee",<br />
"border": "1px solid #555"<br />
})
Retour de valeurs<br />
Certaines méthodes retournent une valeur<br />
pour le première élément de la collection<br />
var height = $('div#intro').height();<br />
var src = $('img.photo').attr('src');<br />
var lastP = $('p:last').html();<br />
var hasFoo = $('p').hasClass('foo');<br />
var email = $('input#email').val();
Parcours du DOM<br />
$('div.section').parent();<br />
$('div.section').next();<br />
$('div.section').prev();<br />
$('div.section').nextAll('div');<br />
$('h1:first').parents();
Gestion des évènements<br />
$('a:first').click(function(ev){<br />
$(this).css({ "background-color": "#a0a8b8"});<br />
return false; // ou ev.preventDefault();<br />
}<br />
• blur, change, click, dblclick, error, focus,<br />
hover, ready, resize, scroll, select, submit,<br />
toggle<br />
http://api.jquery.com/category/events/
Chainage des actions<br />
• Actions classiques renvoient la collection<br />
appelante<br />
• Certains renvoient une collection<br />
différente<br />
• end() revient à la collection précédente<br />
$('.intro').css('color','#ccc')<br />
.find('a').addClass('highlight').end()<br />
.find('em').css('color','red').end()
Autres méthodes ≠ actions<br />
Ne s’appliquent pas obligatoirement sur<br />
des objets <strong>jQuery</strong><br />
«<strong>jQuery</strong>.» ou «$.»<br />
• Utilitaires («$.isArray()»,<br />
«$.trim()», «$.type()»,<br />
«$.paseJSON()»)<br />
• AJAX ( «$.ajax()», «$.get()»,<br />
«$.post()», «$.getJSON()»)
AJAX<br />
S’appliquant sur un objet <strong>jQuery</strong><br />
$("#data").load("/some/file.html")<br />
Méthode bas niveau<br />
$.ajax({<br />
url: "test.html",<br />
context: document.body,<br />
success: function(){<br />
$(this).addClass("done");<br />
}<br />
});<br />
Méthodes haut niveau<br />
$.get() $.post() $.getJSON() $.getScript()<br />
http://api.jquery.com/category/ajax/
Animation<br />
<strong>jQuery</strong> a quelques effets pré-installés<br />
$('h1').hide('slow');<br />
$('h1').slideDown('fast');<br />
$('h1').fadeOut(2000);<br />
On peut les enchainer<br />
$('h1').fadeOut(2000).slideDown();<br />
http://api.jquery.com/category/effects/
AJAX<br />
Plugins<br />
• «TYPEWATCH», «updateWithJSON»<br />
DOM<br />
• «imageZoom», «textLimit», «Blast Slider», «CHILI»,<br />
«SerialScroll»<br />
Drag-Drop<br />
• «<strong>jQuery</strong> Dynamic»<br />
Menu<br />
Navigation<br />
Tableaux<br />
...