JQuery.

JQuery

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.

JQueryUI Conclusion

Mise en oeuvre Téléchargeable sur le site de Jquery : <script type="text/javascript" src="jquery.js"></script> Ou directement sur Google code <script type="text/javascript" src=" </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

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, . ')

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^= $('img[src$=.png]'

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>

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();

JQueryUI Conclusion

Cacher le texte d'une DIV
<html> <script type="text/javascript" src=" </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=" </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

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=" </script> <script type="text/javascript" src="jquery-ui customLightness/js/jquery-ui custom.min.js"></script> <script type="text/javascript" src=" <link rel="stylesheet" type="text/css" href="jquery-ui customLightness/css/ui-lightness/jquery-ui 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. 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 :

JQuery.

Présentations similaires

Présentation au sujet: "JQuery."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back

Entrer

S'autoriser via un réseau social:

JQuery.

Présentations similaires

Présentation au sujet: "JQuery."— Transcription de la présentation:

Présentations similaires

Notre projet

Feed-back