Your SlideShare is downloading. ×
0
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Apprenez le jQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Apprenez le jQuery

591

Published on

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. …

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.

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
591
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UX-DAYJQueryWrite less, Do moreSMAHI Zakaria <z_smahi@esi.dz>
  • 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. 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. 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 dassocier le démarrage du script surlevent 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 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. 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. 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. HTML futzing$(span#msg).text(The thing was updated!);$(div#intro).html(<em>Look, HTML</em>);
  • 12. Attribute futzing$(a.nav).attr(href, http://flickr.com/);$(a.nav).attr({href: http://flickr.com/,id: flickr});$(#intro).removeAttr(id);
  • 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. 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. 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. 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 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. 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. 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. 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. Aller plus loinhttp://jquery.com/http://docs.jquery.com/http://visualjquery.com/ - API referencehttp://simonwillison.net/tags/jquery/http://www.unheap.com/

×