• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JQuery
 

JQuery

on

  • 669 views

JQuery Essentials

JQuery Essentials

Statistics

Views

Total Views
669
Views on SlideShare
669
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JQuery JQuery Presentation Transcript

    • 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 (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.
    • 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.
    • 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. )
    • $( )● 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.
    • $(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>
    • 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
    • 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 ») ;
    • 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») ;
    • 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);});
    • 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).removeAttr(id);
    • CSS futzing● $(#intro).addClass(highlighted);● $(#intro).removeClass(highlighted);● $(#intro).toggleClass(highlighted);● $(p).css(font-size, 20px);● $(p).css({font-size: 20px, color: red});
    • 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();
    • 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 ).
    • Traverser le DOM● $(div.section).parent()● $(div.section).next()● $(div.section).prev()● $(div.section).nextAll(div)● $(h1:first).parents()
    • Gestion des événements● $(a:first).click(function(ev) {$(this).css({backgroundColor: orange});return false; // Or ev.preventDefault();});● $(a:first).click();
    • 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 :● $(div.section).hide().addClass(gone);● $(#intro).css(color,#cccccc).find(a).addClass(highlighted).end().find(em).css(color, red).end()
    • 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)
    • 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);
    • 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();
    • Aller plus loin● http://jquery.com/● http://docs.jquery.com/● http://visualjquery.com/ - API reference● http://simonwillison.net/tags/jquery/