JQuery.

Slides:



Advertisements
Présentations similaires
Création de pages Web dynamiques et sympathiques.
Advertisements

Copyright France Télécom, tous droits réservés Paris Web Ateliers Les bibliothèques JS jQuery Orange Labs Julien Wajsberg, Recherche & Développement.
Cours n°3 Les formulaires
JQuery.
28 novembre 2012 Grégory Petit
Manipulation de formulaires en Javascript
Jquery.
Javascript 2° PARTIE : EVENEMENTS ET OBJETS
 Objet window, la fenêtre du navigateur
Le JavaScript.. Histoire Langage créé en 1995 par Brendan Eich pour la Netscape Communications Corporation. Est inspiré de nombreux langages, notamment.
M2202 – Algorithmique – T.BAUSER. Objectifs Utiliser Jquery pour : - modifier/ajouter/supprimer un élément/un attribut/une classe, - créer des animations,
Dreamweaver le retour Avec Les Formulaires Les Calques
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
Les calques Les Template (modèles) Les Comportements Les scénarios Les formulaires Les CSS Le serveur Web de l’UTC Présentation.
Commerce électronique Automne  Introduction  Création du panier d’achats  Migration du panier d’achats  Conclusion.
Sommaire Sauvegarder un image ou un texte Télécharger un fichier FIN Utilisation de l’animation : Lorsque tu te déplaces sur les pages de l’animation,
GCstar Gestionnaire de collections personnelles Christian Jodar (Tian)
A TELIER E COLOGEEKS F ACEBOOK M ODULE 3 Sophie Nicklaus / Philippe Goirand 6 nov 2012.
Octobre 2013 Smartweb Refonte des sites Internet AIDE – K-Sup v6.
SPIP.
Ajouter le code dans une page html
Téléchargement de fichiers
Javascript et DOM Introduction Nicolas Chourot Informatique
Exploitation de logiciels :
HTML.
Asynchronous Javascript And Xml
Les boites texte et dossier
Environnement du développement de BD ORACLE REPORTS 10g
3 devient.
Projet Ville de Lyon Sites Internet
JavaScript.
5.
Collecte de données CAPI
Plugin POSH.
LE MASHUP.
Présentation multimédia avec open office
Astuces jquery.
Création de site web Feuilles de style.
Les technologies AJAX.
Asynchronous Javascript And Xml
Asynchronous Javascript And Xml
5.
Nouvelles balises de structure
Le CSS Principe de séparation du contenu et de la mise en forme
PHP – SESSIONS Aide mémoire
Les interfaces en PHP.
AJAX et JQuery
CSS et DREAMWEAVER (Suite et fin)  Les liens
Introduction à Internet
Guide n° 3 Formation initiale
Feuille de route Espace de travail Création de diapositives
Comment personnaliser Microsoft SharePoint Site web
Systèmes d ’Information : 6a
Informatique de base Pr. Namar Ydriss Cours 1: Introduction
Cours 5: Scripts Clients
Informatique de base Pr. Namar Ydriss Cours 4: Formulaires
Module 4 – Les Dashboards
Système de gestion de contenu de sites web
Atos, Atos et le poisson, Atos Origin et le poisson, Atos Consulting ainsi que le poisson seul sont des marques déposées d'Atos Origin SA. © 2006 Atos.
Présentation du site Martine Cochet.
Cours jQuery. Plan du cours I. Introduction II. Les sélecteurs III. Les évènements IV. Quelques effets V. Manipulation du DOM 2.
A la découverte du courrier électronique.
DOM (document object model)
JQuery (Débutant) 24 Mars SUPINFO Orléans.
AJAX Par M.Youssfi.
Bases de données Singleton pour la connexion
Le Javascript Cours et Atelier.
JQuery.
App Inventor trucs Afficher une image depuis le Web ou Google Drive.
Site web, Ce qu’il faut savoir ?
Transcription de la présentation:

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/