jQuery (Débutant) <ul><li>24 Mars 2010 @ SUPINFO Orléans </li></ul>
Qu’est-ce que jQuery ? <ul><li>jQuery est un framework JavaScript parmis tant d’autres  (Mootools, Prototype, YUI etc...) ...
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...
Comment commencer ? <ul><li>Simplement en ajoutant dans le header de votre code HTML l’import du fichier js </li></ul><ul>...
Utilisation du selecteur <ul><li>Sélectionner avec  $  ou  jQuery   -> jQuery.noConflict(); </li></ul><ul><li>Sélectionner...
Manipuler le DOM - Partie #1 <ul><li>$('div.section').addClass('highlighted') </li></ul><ul><li>$('img.photo').attr('src',...
Manipuler le DOM - Partie #2 <ul><li>$('div.section').next(); </li></ul><ul><li>$('div.section').prev(); </li></ul><ul><li...
Chaînage <ul><li>La plupart des méthodes jQuery retournent un objet jQuery qui représente souvent la même collection. Ce q...
Les événements <ul><li>Pas de javascript dans les balises HTML ! </li></ul><ul><li>Binder des actions à des événements sim...
Les performances <ul><li>Les  performances  dépendent de votre code et non du framework </li></ul><ul><li>jQuery parse le ...
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...
Extensible  (Plugins) <ul><li>jQuery est  extensible  grave aux plugins qui peuvent ajouter des nouvelles méthodes à l’obj...
Aller plus loin <ul><li>www.jQuery.com   (Officiel, EN) </li></ul><ul><li>www.learningjQuery.com   (EN) </li></ul><ul><li>...
Prochain SlideShare
Chargement dans…5
×

Présentation jQuery pour débutant

11 225 vues

Publié le

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 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

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>

×