Your SlideShare is downloading. ×
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

JQuery

644

Published on

JQuery Essentials

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
644
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
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/

×