JQuery

879 views
809 views

Published on

JQuery Essentials

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
879
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JQuery

  1. 1. UX-DAYJQueryWrite less, Do moreSMAHI Zakaria <z_smahi@esi.dz>
  2. 2. Cest quoi JQuery ?● Javascript framework● Interaction entre JavaScript (AJAX inclus) et HTML.● John Resig Janvier 2006. 120Ko (19ko compressé en formatgzip).● Populaire, Open Source ( MIT & Gnu GPL), bien documenté etextensible.● 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. 3. Que Faire/Ne pas faire ?● Faire :● Gérer les interactions aveclutilisateur.● Prétraiter les formulaires.● Créer des animations et effets.● Manipuler le DOM.● Utiliser AJAX simplement.● Créer des RIA (rich InternetApplications).● Ne pas Faire :● Remplacer par un langagecoté serveur ( php, asp,jsp).● Remplacer totalement flashet HTML.● Remplacer un rôlesécuritaire.
  4. 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. 5. $( )● Fonction de base de JQuery.● Alias de la fonction JQuery.● Permet dassocier le démarrage du script surlevent ready du document + sélectionner leséléments de la page à manipuler par la suite.
  6. 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. 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. 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 etdescendant$(« 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 ») ;
  9. 9. 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 lesattributs...● Formulaires :$(« #formulaire :checkbox ») ;$(« #formulaire:checkbox:checked») ;
  10. 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);});
  11. 11. HTML futzing● $(span#msg).text(The thing was updated!);● $(div#intro).html(<em>Look, HTML</em>);
  12. 12. Attribute futzing$(a.nav).attr(href, http://flickr.com/);● $(a.nav).attr({href: http://flickr.com/,id: flickr});● $(#intro).removeAttr(id);
  13. 13. CSS futzing● $(#intro).addClass(highlighted);● $(#intro).removeClass(highlighted);● $(#intro).toggleClass(highlighted);● $(p).css(font-size, 20px);● $(p).css({font-size: 20px, color: red});
  14. 14. Méthodes et Valeurs● Certaines méthodes font retourner un(des)résultat(s) depuis le 1er élémentcorrespondant.● 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. 15. Manipulation du DOM● JQuery fournit plusieurs méthodes pour manipulerle DOM( Document Object Model)● Manipulation du contenu: selector.html( )● Remplacement dun élément DOM:selector.replaceWith( content )● Supprimer un élément : selector.remove( [ expr ]) |selector.empty( )● Insertion dun élément : selector.after( content ) |selector.before( content ).
  16. 16. Traverser le DOM● $(div.section).parent()● $(div.section).next()● $(div.section).prev()● $(div.section).nextAll(div)● $(h1:first).parents()
  17. 17. Gestion des événements● $(a:first).click(function(ev) {$(this).css({backgroundColor: orange});return false; // Or ev.preventDefault();});● $(a:first).click();
  18. 18. Astuce cool ;)● $(document).ready(function() {alert(DOM est prêt!);});● $(function() {alert(DOM est prêt!);});
  19. 19. Chainage● La plupart des méthodes JQuery retournent unautre objet JQuery → Possibilté de chainer lesméthodes entre eux :● $(div.section).hide().addClass(gone);● $(#intro).css(color,#cccccc).find(a).addClass(highlighted).end().find(em).css(color, red).end()
  20. 20. 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)
  21. 21. Animations● JQuery a quelques effets danimations :$(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. 22. Plugins● JQuery est extensible via des plugins ; permettant de lui ajouterdautres méthodes :● Form : meilleure manipulation des forms.● UI : Drag&Drop et les widgets.● $(img[@src$=.png]).ifixpng()● Une dizaine dautres plugins .● jQuery.fn.hideLinks = function() {return this.find(a[href]).hide().end();}● $(p).hideLinks();
  23. 23. Aller plus loin● http://jquery.com/● http://docs.jquery.com/● http://visualjquery.com/ - API reference● http://simonwillison.net/tags/jquery/

×