JQuery

Transcription

JQuery

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
 $()
●
●
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 :
–
●
(ou jQuery() ) accepte :
$('.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
...
$("selecteur").evenementAGerer(function()
{
//traitement
});
Manipulations
16/36
Méthodes


●
●
●
●
●
●
●
●
Evénements
Manipulations
css
attr $("selecteur").fonctionDeManipulation(valeurEventuelle);
empty
prop
position
val
text
...
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, 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();
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>
$(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
...
$(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
...
$(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
...
$(function()
{
$('#videListe').click(function()
{
$('#selectVille').empty();
});
});
</script>
<body>
<form>
</SELECT>
<input type="button" id="videListe" value="vider la liste">
</form>
...
24/36
Ajouter des options à une liste déroulante
...
$(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>
<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
...
$(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
...
$(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-ui1.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

JQuery

Transcription

Documents pareils

JavaScript - Perfectionnement :

L`agence Extra recrute un développeur web (h/f)

Formation HTML - Web Formation

MONECHO - Stage Dev Informatique 2016

Tutoriel : Php | Catégorie : Scripts | Ecrit par pcleder le 22/03

Soirée "sot l`y laisse"

refuge de gerbey, aide et assistance aux animaux

PEGWAYS RECRUTE UN DÉVELOPPEUR WEB/MOBILE

DEVELOPPEUR WEB PHP/JAVASCRIPT

Collège George Brassens - Pont