Présentation jQuery pour débutant

11,453 views

Published on

Présentation de jQuery pour les débutants, fichier utilisé lors d'une conférence réalisé à SUPINFO Orléans le 24 Mai 2010

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,453
On SlideShare
0
From Embeds
0
Number of Embeds
376
Actions
Shares
0
Downloads
402
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Présentation jQuery pour débutant

  1. 1. jQuery (Débutant) <ul><li>24 Mars 2010 @ SUPINFO Orléans </li></ul>
  2. 2. Qu’est-ce que jQuery ? <ul><li>jQuery est un framework JavaScript parmis tant d’autres (Mootools, Prototype, YUI etc...) </li></ul><ul><li>Son objectif: Changer les méthodes avec lesquelles vous écrivez du javascript </li></ul><ul><li>Simplifie l’écriture de code complex écrit en js pur. </li></ul>
  3. 3. Ses avantages <ul><li>Cross browser (IE 6.0+, FF 2.0+, Safari 2.0+, Opera 9.0+) </li></ul><ul><li>Support des sélecteurs CSS 3 (Draft) </li></ul><ul><li>Léger ~24KB en version minified (jquery.com) </li></ul><ul><li>Documentation complète et communautés actives (plugins, exemples, etc ...) </li></ul>
  4. 4. Comment commencer ? <ul><li>Simplement en ajoutant dans le header de votre code HTML l’import du fichier js </li></ul><ul><li>Exécuter votre code dans la méthode Document.Ready </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;path/to/jquery.js&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><ul><li>$(document).ready(function() { </li></ul></ul><ul><ul><ul><li>alert(“Welcome to JQuery”); </li></ul></ul></ul><ul><ul><li>}); </li></ul></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><a href=&quot; http://jquery.com /&quot;>jQuery</a> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  5. 5. Utilisation du selecteur <ul><li>Sélectionner avec $ ou jQuery -> jQuery.noConflict(); </li></ul><ul><li>Sélectionner par ID -> $(“#monId”) </li></ul><ul><li>Sélectionner par type -> $(“div”) </li></ul><ul><li>Sélectionner par CSS -> $(“.maClass + div, p > span”) </li></ul><ul><li>$ ou jQuery retourne un tableau des éléments du DOM </li></ul>
  6. 6. Manipuler le DOM - Partie #1 <ul><li>$('div.section').addClass('highlighted') </li></ul><ul><li>$('img.photo').attr('src', '/default.png'); </li></ul><ul><li>$('a.foo').html('<em>Click me now!</em>'); </li></ul><ul><li>$('p:odd').css('background-color', '#ccc'); </li></ul>
  7. 7. Manipuler le DOM - Partie #2 <ul><li>$('div.section').next(); </li></ul><ul><li>$('div.section').prev(); </li></ul><ul><li>$('div.section').prev('a'); </li></ul><ul><li>$('div.section').parent(); </li></ul><ul><li>$('div.section').parents(); </li></ul>
  8. 8. Chaînage <ul><li>La plupart des méthodes jQuery retournent un objet jQuery qui représente souvent la même collection. Ce qui signifie que vous pouvez enchaîner les méthodes entre elles </li></ul><ul><li>Exemple: </li></ul>$('div.section').hide().addClass('gone');
  9. 9. Les événements <ul><li>Pas de javascript dans les balises HTML ! </li></ul><ul><li>Binder des actions à des événements simplement </li></ul><ul><li>Exemple: </li></ul>var message = 'Spoon!'; $('#foo').bind('click', function() { alert(message); });
  10. 10. Les performances <ul><li>Les performances dépendent de votre code et non du framework </li></ul><ul><li>jQuery parse le DOM à chaque utilisation de $/Find </li></ul><ul><li>Utilisation des ID (plus rapide) $(“input”) -> lent $(“#monItem input”) -> rapide </li></ul>
  11. 11. AJAX <ul><li>jQuery possède un support excellent pour AJAX </li></ul><ul><li>Il implémente des méthodes génériques Cross-Browser pour une mise en place facile d’un fonctionnement AJAX </li></ul><ul><li>Voici quelques méthodes à utiliser pour faire de l’AJAX: </li></ul><ul><ul><li>$.get(url, params, callback) </li></ul></ul><ul><ul><li>$.post(url, params, callback) </li></ul></ul><ul><ul><li>$.getJSON(url, params, callback) </li></ul></ul><ul><ul><li>$.getScript(url, callback) </li></ul></ul>
  12. 12. Extensible (Plugins) <ul><li>jQuery est extensible grave aux plugins qui peuvent ajouter des nouvelles méthodes à l’objet jQuery </li></ul><ul><ul><li>UI (Contrôles utilisateurs plus ‘user friendly’) </li></ul></ul><ul><ul><li>Interface (Carousel, Drag and Drop, Thickbox, jQuery UI) </li></ul></ul><ul><ul><li>Formulaire (Manipulation plus aisé, gestion des types, erreurs, etc ...) </li></ul></ul>
  13. 13. Aller plus loin <ul><li>www.jQuery.com (Officiel, EN) </li></ul><ul><li>www.learningjQuery.com (EN) </li></ul><ul><li>docs.jquery.com (Documentation, EN) </li></ul><ul><li>plugins.jquery.com (Plugins, EN) </li></ul>

×