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 ») ;
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);
});
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()
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/