jQuery - Yoann Pigné

La bibliothèque
jQuery
Master 2 - IDOD
Yoann Pigné

jQuery par John Resig
• Depuis janvier 2006
• Applications coté client
• Multi-navigateurs multi-OS
• Fonctionnalités : le parcours du DOM, les
évènements, AJAX et les animations
• Code concis, fichier très petit
• version 1.8.2 (minifiée/zipée) : 32 ko
• Extensions de la bibliothèque par plugins

La fonction jQuery()
• Tout commence par cette fonction
• «factory» pour tous les objets jQuery
• Code en 2 parties : requête & action
jQuery(".even").hide()
• «$» alias de «jQuery»
jQuery("div.even") ➔ $("div.even")

Sélecteurs CSS 2 et 3
a[rel]
div[class~="even"]
a[href^="http://"]
ul#nav > li
li#current ~ li
li:first-child, li:last-child, li:nth-
child(3)

D’autres sélecteurs
div:first, h3:last
:header
:hidden,:visible
:animated
:input,:text,:password,:radio,:submit...
div:contains(Hello)
http://api.jquery.com/category/selectors/

jQuery() retourne un tableau
• Collections (objet) jQuery
$('.odd')
[!that's d1!,
!that's d3! ,
!that's d5!!,
!that's d7!!]
• Peut se traiter comme un tableau
$(".odd").length;
$(".odd")[0];
• On peut leur appliquer des méthodes
$(".odd").size();
$(".odd").each(function() {
console.log(this);
});

Action sur la sélection
• Méthodes qui manipule l’objet appelant
(les objets du tableau sélectionné)
• Elle retournent généralement l’objet (la
collection) appelant
• Actions ou commandes enchainables
$(".odd").add(".even").addClass("darcker").show("fast");

Consistance du code
Nom des fonctions
.click() vs. .onclick()
Position des arguments
.methode(options, arg1, arg2, ... ,
callback)
Contexte des callbacks
.methode(function(){
});
// this == DOMElement

Manipulations HTML
$(".even:first").text("First \"even\"
div on the page.")
$(".odd:last").html("The lastodd div")

Manipulations d’attributs
$('a.nav').attr('href', 'http://flickr.com/');
$('a.nav').attr({
'href': 'http://flickr.com/',
'id': 'flickr'
});
$('#intro').removeAttr('id');

Manipulations CSS
$('#intro').addClass('highlighted');
$('#intro').removeClass('highlighted');
$('#intro').toggleClass('highlighted');
$('.div').css("background-color", "#eee");
jQuery(".div").css({
"background-color": "#eee",
"border": "1px solid #555"
})

Retour de valeurs
Certaines méthodes retournent une valeur
pour le première élément de la collection
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();

Parcours du 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({ "background-color": "#a0a8b8"});
return false; // ou ev.preventDefault();
}
• blur, change, click, dblclick, error, focus,
hover, ready, resize, scroll, select, submit,
toggle
http://api.jquery.com/category/events/

Chainage des actions
• Actions classiques renvoient la collection
appelante
• Certains renvoient une collection
différente
• end() revient à la collection précédente
$('.intro').css('color','#ccc')
.find('a').addClass('highlight').end()
.find('em').css('color','red').end()

Autres méthodes ≠ actions
Ne s’appliquent pas obligatoirement sur
des objets jQuery
«jQuery.» ou «$.»
• Utilitaires («$.isArray()»,
«$.trim()», «$.type()»,
«$.paseJSON()»)
• AJAX ( «$.ajax()», «$.get()»,
«$.post()», «$.getJSON()»)

AJAX
S’appliquant sur un objet jQuery
$("#data").load("/some/file.html")
Méthode bas niveau
$.ajax({
url: "test.html",
context: document.body,
success: function(){
$(this).addClass("done");
}
});
Méthodes haut niveau
$.get() $.post() $.getJSON() $.getScript()
http://api.jquery.com/category/ajax/

Animation
jQuery a quelques effets pré-installés
$('h1').hide('slow');
$('h1').slideDown('fast');
$('h1').fadeOut(2000);
On peut les enchainer
$('h1').fadeOut(2000).slideDown();
http://api.jquery.com/category/effects/

AJAX
Plugins
• «TYPEWATCH», «updateWithJSON»
DOM
• «imageZoom», «textLimit», «Blast Slider», «CHILI»,
«SerialScroll»
Drag-Drop
• «jQuery Dynamic»
Menu
Navigation
Tableaux
...