JQuery 1/36
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 3/36
Définition Bibliothèque javascript open-source et cross-navigateur dont la première version est sortie en janvier 2006. Le principal auteur de cette bibliothèque est John Resig ( développeur d outils JavaScript pour Mozilla Corporation). Elle permet de parcourir et manipuler très facilement l'arbre DOM des pages web. JQuery permet de : Changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. Gérer les événements javascript Faire des requêtes AJAX simplement 4/36
Définition JQuery n'est pas : Un substitut pour apprendre JavaScript Une réponse à tout Utilisez jquery uniquement lorsque c est nécessaire. On commence toujours par HTML+CSS avant de chercher des plug-ins jquery magiques. 5/36
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 6/36
Mise en oeuvre Téléchargeable sur le site de Jquery : http://jquery.com/ <script type="text/javascript" src="jquery.js"></script> Ou directement sur Google code <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery. min.js"> </script> 7/36
Mise en oeuvre jquery repose sur une seule fonction : jquery() ou $() C est une fonction JavaScript Elle accepte des paramètres Elle retourne un objet 8/36
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 9/36
Sélecteur $() (ou jquery() ) accepte : Un sélecteur CSS en argument Des ID : $('#nomid') retourne l'élément ayant pour id "nomid"(équivalent du javascript document.getelementbyid('nomid') ) Des classes : $('.maclasse') retourne tous les éléments qui correspondent à cette classe Plusieurs sélecteurs $('.nom,.prenom,.email') 10/36
Sélecteur Des sélecteurs spécifiques : $(':radio'), $(':header'), $(':first-child') Des sélecteurs de filtrages : $(':checked'), $(':odd'), $(':visible') $(':contains(du texte)') Des attributs $('a[href]'), $('a[href^=http://'), $('img[src$=.png]' 11/36
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 12/36
DOM Le Document Object Model (DOM) est une convention cross-platform et indépendante du langage pour représenter et interagir avec les objets dans des documents en HTML, XHTML ou XML. 13/36
DOM <html> <head> <title>my title</title> </head> <body> <a href>my link</a> <h1>my header</h1> </body> </html> 14/36
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 15/36
Méthodes Evénements Click Change Keypress Select Submit... Manipulations $("selecteur").evenementagerer(function() { //traitement 16/36
Méthodes Evénements Manipulations css attr empty prop position val text... $("selecteur").fonctiondemanipulation(valeureventuelle); 17/36
Les méthodes peuvent s'appliquent à tous les éléments sélectionnés $('.classe').hide(); $('.classe').show(); De nombreuses méthodes utilitaires Parcourir le DOM:.parent(),.next(),.children(),.parents() Ajouter ou retirer des classes CSS: addclass, remove- Class Manipuler: append, wrap, prepend La plupart des méthodes de l'objet retournent l'objet lui-même Il est possible de chaîner les appels $('rien').parent().find('toujours rien').show(); 18/36
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 19/36
Cacher le texte d'une DIV <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <script type="text/javascript"> $(function() { $("#unediv").click(function() { $("#unediv").hide(); </script> <body> <div id="unediv">le texte a cacher</div> </body> </html> 20/36
Modifier la valeur d'un champ en fonction d'un autre <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <script type="text/javascript"> $(function() { $("#champ1").focusout(function() { var valeurchamp1 = $("#champ1").val(); // la valeur de champ1 va dans champ2 $("#champ2").val(valeurchamp1); </script> <body> <form> <input type="text" name="champ1" id="champ1"> <input type="text" name="champ2" id="champ2"> </form> </body> </html> 21/36
Récupérer la valeur et le texte sélectionné d'une liste déroulante... <script type="text/javascript"> $(function() { $("#selectville").change(function() { // valeur de l'option selectionne var valeurvilleselect = $(this).val(); // texte de l'option selectionne var textevilleselect = $("#selectville option:selected").text(); // afficher une message box avec la valeur et le texte de l'option alert(valeurvilleselect+" "+textevilleselect); </script> <body> <form> <SELECT name="ville" id="selectville"> <OPTION value="paris">paris</option> <OPTION value="lemans">le Mans</OPTION> <OPTION value="souligne">souligné sous ballon</option> </SELECT> </form>... 22/36
Récupérer le nom et l'état d'une checkbox sur laquelle on clique... <script type="text/javascript"> $(function() { $('input[type=checkbox]').click(function() { var casechecketat = $(this).prop("checked"); // etat de la check box var casechecknom = $(this).prop("name"); // nom de la checkbox alert(casechecknom+" est "+casechecketat); </script> <body> <form> <INPUT type="checkbox" name="pomme">pomme<br> <INPUT type="checkbox" name="poire">poire<br> <INPUT type="checkbox" name="peche">peche<br> <INPUT type="checkbox" name="raisin">raisin<br> </form>... 23/36
Vider une liste déroulante... <script type="text/javascript"> $(function() { $('#videliste').click(function() { $('#selectville').empty(); </script> <body> <form> <SELECT name="ville" id="selectville"> <OPTION value="paris">paris</option> <OPTION value="lemans">le Mans</OPTION> <OPTION value="souligne">souligné sous ballon</option> </SELECT> <input type="button" id="videliste" value="vider la liste"> </form>... 24/36
Ajouter des options à une liste déroulante... <script type="text/javascript"> $(function() { $('#ajoutliste').click(function() { // ajouter a la fin $('#selectville').append($("<option>",{value : "bal"}).text("ballon")); // ajouter au debut $('#selectville').prepend($("<option>",{value : "yvr"}).text("yvre")); </script> <body> <form> <SELECT name="ville" id="selectville"> <OPTION value="paris">paris</option> <OPTION value="lemans">le Mans</OPTION> <OPTION value="souligne">souligné sous ballon</option> </SELECT> <input type="button" id="ajoutliste" value="ajouter option a la liste"> </form>... 25/36
Avoir la valeur et l'état du bouton radio sur lequel on vient de cliquer... <script type="text/javascript"> $(function() { $('input[name=sexe]:radio').click(function() { var valeursexe = $(this).val(); // valeur du radio bouton var etatsexe = $(this).prop("checked"); // etat du radio bouton alert(valeursexe+" est "+etatsexe); </script> <body> <form> <INPUT type="radio" name="sexe" value="f">féminin<br> <INPUT type="radio" name="sexe" value="m">masculin<br> </form>... 26/36
Faire disparaître tous les éléments d'un formulaire... <script type="text/javascript"> $(function() { $("#cache").click(function() { $(":input").fadeout('slow'); $("#decache").click(function() { $(":input").fadein('slow'); </script> <body> <form> <INPUT type="checkbox" name="pomme">pomme<br> <INPUT type="checkbox" name="poire">poire<br> <INPUT type="checkbox" name="peche">peche<br> <INPUT type="checkbox" name="raisin">raisin<br> <INPUT type="button" id="cache" value="faire disparaitre le formulaire"> <DIV id="decache">cliquez ici pour avoir le formulaire</div> </form>... 27/36
Toutes les fonctionnalités de JQuery http://api.jquery.com/ 28/36
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 29/36
JQueryUI http://jqueryui.com/ Des éléments interactifs draggable : pour glisser-déplacer un élément droppable : pour «déposer» un élément resizable : pour redimensionner un élément sélectable : pour sélectionner des éléments à la souris sortable : pour trier des éléments 30/36
JQueryUI Des Widgets accordéon autocomplétion bouton calendrier boîte de dialogue barre de progression curseur onglets 31/36
JQueryUI Des utilitaires position widget Effets 32/36
Le Widget DatePicker <html> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> <script type="text/javascript" src="jquery-ui-1.8.18.customlightness/js/jquery-ui-1.8.18.custom.min.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/i18n/jquery.ui.datepickerfr.js"></script> <link rel="stylesheet" type="text/css" href="jquery-ui-1.8.18.customlightness/css/ui-lightness/jquery-ui- 1.8.18.custom.css"> <script> $(function() { $( "#datepickerlightness" ).datepicker(); </script> <body> <form> <div> <p>date lightness: <input id="datepickerlightness" type="text"></p> </div> </form> </body> </html> 33/36
JQueryUI On peut étendre facilement jquery en utilisant des plugins Des centaines plug-ins existent, mais sont de qualité variable. http://plugins.jquery.com/ Menus Galerie photo... 34/36
Jquery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 35/36
Conclusion jquery est un framework complet et facile à utiliser Bibliothèque légère à charger Simplifie la syntaxe d accès au DOM UI et nombreux plug-ins complémentaires 36/36