JQuery
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
Définition Bibliothèque javascript open-source et cross-browser 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
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.
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
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.11.2/jquery.min.js"> </script>
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
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
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')
Sélecteur Des sélecteurs spécifiques : Des sélecteurs de filtrages : $(':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]'
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
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.
DOM <html> <head> <title>My title</title> <body> <a href>My link</a> <h1>My header</h1> </body> </html>
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
Méthodes Evénements click change keypress select submit ... Manipulations $("selecteur").evenementAGerer(function() { //traitement });
Méthodes Evénements Manipulations css attr empty prop position val text ... $("selecteur").fonctionDeManipulation(valeurEventuelle);
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, removeClass 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();
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
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(); }); <body> <div id="uneDiv">Le texte cachable</div> </body> </html>
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); }); <body> <form> <input type="text" name="champ1" id="champ1"> <input type="text" name="champ2" id="champ2"> </form> </body> </html>
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>
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>
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>
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>
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>
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>
Toutes les fonctionnalités de JQuery http://api.jquery.com/
JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
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
JQueryUI Des Widgets accordéon autocomplétion bouton calendrier boîte de dialogue barre de progression curseur onglets
JQueryUI Des utilitaires position widget Effets
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.datepicker-fr.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(); }); <body> <form> <div> <p>Date lightness: <input id="datepickerLightness" type="text"></p> </div> </form> </body> </html>
JQueryUI On peut étendre facilement jQuery en utilisant des plug-ins Des centaines plug-ins existent, mais sont de qualité variable. http://plugins.jquery.com/ Menus Galerie photo ...
Jquery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion
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 Liens utiles : http://www.w3schools.com/jquery/default.asp http://jquery.com/ http://api.jquery.com/ http://jqueryui.com/