UX-DAYJQueryWrite less, Do moreSMAHI Zakaria <z_smahi@esi.dz>
Cest quoi JQuery ?Javascript frameworkInteraction entre JavaScript (AJAX inclus) et HTML.John Resig Janvier 2006. 120Ko...
Que Faire/Ne pas faire ?Faire :Gérer les interactions aveclutilisateur.Prétraiter les formulaires.Créer des animations...
Outils de développementEditeur de texte (Notepad++, Gedit, Notepad ...etc. ).Navigateur web (Mozilla Firefox, Google Chr...
$( )Fonction de base de JQuery.Alias de la fonction JQuery.Permet dassocier le démarrage du script surlevent ready du d...
$(doument).ready()Démarre la fonction anonyme lorsque leséléments de la page sont prêts.<script type= « text/javascript ...
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.Re...
Sélécteurs<div><ul><li></li></ul></div><p> paragraphe 1 </p><p> paragraphe 2 </p><p> paragraphe 3 </p>Hiérarchie : ancêt...
Sélécteurs Magiques(Filtres):first, :last, :even, :odd, :eq, :lt,:gt:nth-child(), :first-child(), :last-child(), :only-c...
Collections JQuery$(div.section) retourne une collection JQuery.La collection peut être manipulée comme un tableau :$(d...
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)...
CSS futzing$(#intro).addClass(highlighted);$(#intro).removeClass(highlighted);$(#intro).toggleClass(highlighted);$(p)....
Méthodes et ValeursCertaines méthodes font retourner un(des)résultat(s) depuis le 1er élémentcorrespondant.var height = ...
Manipulation du DOMJQuery fournit plusieurs méthodes pour manipulerle DOM( Document Object Model)Manipulation du contenu...
Traverser le DOM$(div.section).parent()$(div.section).next()$(div.section).prev()$(div.section).nextAll(div)$(h1:firs...
Gestion des événements$(a:first).click(function(ev) {$(this).css({backgroundColor: orange});return false; // Or ev.preven...
Astuce cool ;)$(document).ready(function() {alert(DOM est prêt!);});$(function() {alert(DOM est prêt!);});
ChainageLa plupart des méthodes JQuery retournent unautre objet JQuery → Possibilté de chainer lesméthodes entre eux :$(...
AJAXJQuery supporte très bien AJAX.$(div#intro).load(/some/file.html);$.get(url, params, callback)$.post(url, params, ...
AnimationsJQuery a quelques effets danimations :$(h1).hide(slow);$(h1).slideDown(fast);$(h1).fadeOut(2000);Un chainage :...
PluginsJQuery est extensible via des plugins ; permettant de lui ajouterdautres méthodes :Form : meilleure manipulation ...
Aller plus loinhttp://jquery.com/http://docs.jquery.com/http://visualjquery.com/ - API referencehttp://simonwillison.n...
Prochain SlideShare
Chargement dans…5
×

Apprenez le jQuery

1 153 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 153
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
85
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Apprenez le 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/http://www.unheap.com/

×