Télécharger en tant que PDF, PPTX
![Récupération d’un collection ◦$(‘div’) retourne une collection de tous les div Taille de la collection: ◦$(‘div’).length ◦$(‘div’).size() Récupération du premier élement: ◦$(‘div’)[0] Récupération du dernier élément: ◦$(‘div’)[$(‘div’).length-1] LightPath 2014© - http://www.jmrenouard.fr 16](https://image.slidesharecdn.com/17javascript-jquery-141125135823-conversion-gate01/75/Javascript-et-JQuery-16-2048.jpg)
![◦HTML <input type=« test » name=« langage »/> ◦JQuery sur liste $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); LightPath 2014© - http://www.jmrenouard.fr 43](https://image.slidesharecdn.com/17javascript-jquery-141125135823-conversion-gate01/75/Javascript-et-JQuery-43-2048.jpg)
![◦HTML <input type=« test » name=« langage »/> ◦JQuery $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); (); LightPath 2014© - http://www.jmrenouard.fr 44](https://image.slidesharecdn.com/17javascript-jquery-141125135823-conversion-gate01/75/Javascript-et-JQuery-44-2048.jpg)
Téléchargé parJean-Marie Renouard
Javascript et JQuery
Le document présente un guide complet sur jQuery, incluant des bases sur l'utilisation de la bibliothèque, la gestion des événements, l'animation, et la création de plugins. Il décrit également divers composants interactifs comme les onglets, les boîtes de dialogue, et les sélecteurs de date. En outre, il aborde les requêtes AJAX et diverses manipulations DOM pour améliorer l'interaction utilisateur sur des pages web.
Javascript et JQuery
- 1.
- 2. Le logo PHPest du domaine public http://commons.wikimedia.org/wiki/File:PHP-logo.svg Ce document est licencié sous licence ◦Attribution-NonCommercial-ShareAlike ◦CC BY-NC-SA Plus de détails: http://creativecommons.org/licenses/by-nc-sa/3.0/fr/ LightPath 2014© - http://www.jmrenouard.fr 2
- 3. Présentation de l’écosystème Javascript Bases de Jquery Jouer avec les données avec JQuery Gestion des évenements Démarrage avec JQuery Chaînage d’opérations Ajax et JQuery Animations en JQuery Création de plugins LightPath 2014© - http://www.jmrenouard.fr 3
- 4. Onglets et menusen Jquery Selecteur de date Jquery Champs d’autocompletion Boite de dialogue Barre de progression Barre de selection Drag and drop en JQuery Selection, redimensionnement et tri LightPath 2014© - http://www.jmrenouard.fr 4
- 5. LightPath 2014© -http://www.jmrenouard.fr 5
- 6. Un langage deprogrammation Intégration dans les navigateurs Web Standard Restriction sur certains opérations de l’écriture et de lecture. LightPath 2014© - http://www.jmrenouard.fr 6
- 7. Javascript version 2.0 Basé sur ECMAScript 5 Format d’échange de données : JSON Support de l’AJAX Autre implémentation: ActionScript LightPath 2014© - http://www.jmrenouard.fr 7
- 8. Un framework ouplûtôt une librairie Il en existe d’autres Concept simple Multi-navigateur Communauté active Paradigme conducteur: trouver/faire LightPath 2014© - http://www.jmrenouard.fr 8
- 9. Prototype : petit,simple et élégant YUI: La librairie JS de Yahoo Dojo: une librairie JS complète mooTools: Idem LightPath 2014© - http://www.jmrenouard.fr 9
- 10. Léger Simple Apprentissagerapide Pas complexe Taille réduite Intégration facile avec divers composants LightPath 2014© - http://www.jmrenouard.fr 10
- 11. LightPath 2014© -http://www.jmrenouard.fr 11
- 12. Focalisation sur l’interactionHTML / Javascript 2 opérations de base: ◦Trouver quelque chose ◦Faire quelque chose avec LightPath 2014© - http://www.jmrenouard.fr 12
- 13. Jquery: une seulefonction jQuery est LA fonction de jQuery. Cette fonction à un raccourci: $ Préservation de conflit: jQuery.noConflict() LightPath 2014© - http://www.jmrenouard.fr 13
- 14. Recherche d’un divavec id « titre » ◦jQuery(‘div#titre’) ◦jQuery(‘#titre’) Recherche de tous les liens a ◦jQuery(‘a’) Recherche des élements de classe label ◦jQuery(‘.label’) Recherche des champs input ◦jQuery(‘:input’) LightPath 2014© - http://www.jmrenouard.fr 14
- 15. Recherche d’un divavec id « titre » ◦$(‘div#titre’) ◦$(‘#titre’) Recherche de tous les liens a ◦$(‘a’) Recherche des élements de classe label ◦$(‘.label’) Recherche des champs input ◦$(‘:input’) LightPath 2014© - http://www.jmrenouard.fr 15
- 16. Récupération d’un collection ◦$(‘div’) retourne une collection de tous les div Taille de la collection: ◦$(‘div’).length ◦$(‘div’).size() Récupération du premier élement: ◦$(‘div’)[0] Récupération du dernier élément: ◦$(‘div’)[$(‘div’).length-1] LightPath 2014© - http://www.jmrenouard.fr 16
- 17. Méthode each Cachertoutes les div $(‘div’).each( function() { this.hide(); } Affichage avec index $(‘div’).each( function(i) { console.log( i+’ ) ‘+this); } LightPath 2014© - http://www.jmrenouard.fr 17
- 18. LightPath 2014© -http://www.jmrenouard.fr 18
- 19. Manipulation de texte ◦$(‘div’).text(« contenu de la div »); Manipulation de contenu html ◦$(‘div’).html(«<p>contenu de la div</p> »); LightPath 2014© - http://www.jmrenouard.fr 19
- 20. Manipulation de valeurd’un champ input ◦$(‘:input#nom’).attr(«value », « Pierre »); ◦$(‘:input#nom’).attr( {«value »: « Pierre », « id »: « nom »} ); Récupération de la valeur de l’attribut ◦$(‘#nom’).attr(‘value’) Retrait d’attribut ◦$(‘div’).removeAttr (« id »); LightPath 2014© - http://www.jmrenouard.fr 20
- 21. Ajout de classeCSS ◦$(‘:input#nom’).addClass(«label»); Retrait de classe CSS ◦$(‘div’).removeClass(« label »); Désactivation/activation de classe CSS ◦$(‘div’).toggleClass(« label »); Ajout de style CSS à la volée ◦$(‘p’).css({‘color’: ‘red’, ‘font-size’: ‘20px’}); LightPath 2014© - http://www.jmrenouard.fr 21
- 22. LightPath 2014© -http://www.jmrenouard.fr 22
- 23. Jquery permet decréer un framework evenementiel simple. 3 opérations de base: ◦Branchement ◦Débranchement ◦Envoi d’événement LightPath 2014© - http://www.jmrenouard.fr 23
- 24. Connexion d’un événementclick ◦$(‘div#label’).click(function(evt) { this.hide(); } Envoi d’un événement click ◦$(‘div#label’).click(); LightPath 2014© - http://www.jmrenouard.fr 24
- 25. Débranchement d’un gestionnaire ◦$(‘div#label’).unbind(‘monEvenement’); Branchement d’un gestionnaire ◦$(‘div#label’).bind(‘monEvenement’, function() { console.log(‘monEvenement’); ◦}); Lancement de l’événement ◦$(‘div#label’).trigger(‘monEvenement’); LightPath 2014© - http://www.jmrenouard.fr 25
- 26. LightPath 2014© -http://www.jmrenouard.fr 26
- 27. Dés que ledocument est chargé: ◦$(document).ready(function() { // Le code JS/Jquery de démarrage } Dés que je découvre l’élément racine $(function() { // Le code JS/Jquery de démarrage }); LightPath 2014© - http://www.jmrenouard.fr 27
- 28. LightPath 2014© -http://www.jmrenouard.fr 28
- 29. Il est possiblede chaîner des opérations ◦$(‘div#label’).html(‘<p>cool</p>’).css({‘color: ‘red’}).show(); ◦Affectation du contenu ◦Changement de style CSS ◦Afficahge du contenu LightPath 2014© - http://www.jmrenouard.fr 29
- 30. LightPath 2014© -http://www.jmrenouard.fr 30
- 31. Chargement du contenudans une div ◦$(‘div#main).load(‘contenuDiv.php?id=main »); Effectuer une requête GET ◦$.get(url, params, callback); ◦$.getJSON(url, params, callback); Effectuer une requête POST ◦$.post(url, params, callback); ◦$.postJSON(url, params, callback); Chargement de script JS ◦$.getScript(url, params, callback); LightPath 2014© - http://www.jmrenouard.fr 31
- 32. LightPath 2014© -http://www.jmrenouard.fr 32
- 33. Cacher/afficher ◦$(‘div#label’).hide(); ◦$(‘div#label’).show(); Cacher/afficher avec effet ◦$(‘div#label’).hide(‘slow’); ◦$(‘div#label’).show(‘slow’); Animation d’apparition ◦$(‘div#label’).slideDown(‘fast’); ◦$(‘div#label’).fadeOut(2000); Chaînage ◦$(‘div#label’).fadeOut(2000).slideDown(‘fast’); LightPath 2014© - http://www.jmrenouard.fr 33
- 34. LightPath 2014© -http://www.jmrenouard.fr 34
- 35. Défintion d’un fonction Attachement de la fonction à un élément HTML Appel de la fonction sur l’élément HTML LightPath 2014© - http://www.jmrenouard.fr 35
- 36. $.fn.hideA=fuction() { This.find.element(‘a’).hide(); } jQuery.fn.hideA=fuction() { This.find.element(‘a’).hide(); } LightPath 2014© - http://www.jmrenouard.fr 36
- 37. $(‘div#header’).hideA(); LightPath 2014©- http://www.jmrenouard.fr 37
- 38. LightPath 2014© -http://www.jmrenouard.fr 38
- 39. Jquery ◦$(document).ready(function() {$("#tabs").tabs(); }); HTML ◦<div id="tabs"> <ul> <li><a href="#fragment-1"><span>One</span></a></li> <li><a href="#fragment-2"><span>Two</span></a></li> <li><a href="#fragment-3"><span>Three</span></a></li> </ul> <div id="fragment-1"> <p>Active par défaut</p> </div> <div id="fragment-2"> ………………. </div> <div id="fragment-3"> blabla</div> </div> LightPath 2014© - http://www.jmrenouard.fr 39
- 40. $('#tabs').tabs({ load: function(event,ui) { $('a',ui.panel).click( function() { $(ui.panel).load(this.href); return false; }); } }); Ajout de cache via option ◦ cache: true LightPath 2014© - http://www.jmrenouard.fr 40
- 41. ◦<div id="tabs"> <ul> <li><a href="tab1.php"><span>One</span></a></li> <li><a href="tab2.php"><span>Two</span></a></li> <li><a href="tab3.php"><span>Three</span></a></li> </ul> </div> LightPath 2014© - http://www.jmrenouard.fr 41
- 42. ◦HTML <input type=«test » name=« date »/> ◦JQuery $("#date").datepicker(); LightPath 2014© - http://www.jmrenouard.fr 42
- 43. ◦HTML <input type=«test » name=« langage »/> ◦JQuery sur liste $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); LightPath 2014© - http://www.jmrenouard.fr 43
- 44. ◦HTML <input type=«test » name=« langage »/> ◦JQuery $("input#langage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); (); LightPath 2014© - http://www.jmrenouard.fr 44
- 45. function setupZipCodeCityAutocomplete(zipCodeInput) { zipCodeInput.autocomplete({ source: function(request, response){ $.get(« /code?term=« +request.term, response); this.options.highlightRegExp = initHighlighting(request.term); }, select: function(event, ui) { zipCodeInput.attr("value", ui.item.code); cityInput.attr("value", ui.item.town); return false; }, renderLabel: function(item) { return item.code + " " + item.town; } }); } LightPath 2014© - http://www.jmrenouard.fr 45
- 46. HTML ◦<div id="dialog"title=« Titre">contenu</div> JQuery ◦$("#dialog").dialog(); LightPath 2014© - http://www.jmrenouard.fr 46
- 47. HTML ◦<div id="progressbar"></div> JQuery ◦$("#progressbar").progressbar({ value: 37 }); LightPath 2014© - http://www.jmrenouard.fr 47
- 48. HTML ◦<div id="droppable">Drophere</div> ◦<div id="draggable">Drag me</div> JQuery $(document).ready(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function() { alert('dropped'); } }); }); LightPath 2014© - http://www.jmrenouard.fr 48
- 49. HTML ◦<ul id="selectable"> ◦<li>Item 1</li> <li>Item 2</li> ◦<li>Item 3</li> <li>Item 4</li> ◦<li>Item 5</li> ◦</ul> JQuery ◦$("#selectable").selectable({ selected: function(event, ui) { alert(‘selectionné’); } } ); LightPath 2014© - http://www.jmrenouard.fr 49
- 50. HTML ◦<div id=«redim"></div> JQuery ◦$("# redim ").resizable(); LightPath 2014© - http://www.jmrenouard.fr 50
- 51. HTML ◦<ul id=«tri"> ◦<li>Item 1</li> <li>Item 2</li> ◦<li>Item 3</li> <li>Item 4</li> ◦<li>Item 5</li> ◦</ul> JQuery ◦$("#tri").sortable(); Liste triée: ◦$("#tri").sortable(« toArray »); LightPath 2014© - http://www.jmrenouard.fr 51
- 52. Documentation de Jquery http://www.jquery.com LightPath 2014© - http://www.jmrenouard.fr 52
- 53. LightPath: ◦Société deconseil et d’ingénierie ◦Formations, Conseil, Audit et mise en oeuvre ◦jmrenouard@lightpath.fr Jean-Marie RENOUARD ◦jmrenouard@gmail.com ◦Twitter: @jmrenouard ◦http://www.jmrenouard.fr LightPath 2014© - http://www.jmrenouard.fr 53