View
541
Download
3
Embed Size (px)
DESCRIPTION
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.
Citation preview
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/ http://www.unheap.com/