JQUERY

1-Présentation Jquery
 Bibliothèque Javascript
 Navigateurs supportés:
• Chrome,Firefox: >= version courante – 1
• Safari: 5.1+
• Opera: 12.1x ou >= v courante -1
• iOS: 6.1+
• Android: 2.3, 4.0+
• IE:
• Jquery 1.x (IE 6+)
• Jquery 2.x (IE 9+)
2
3
2- Jquery: Caractérisitiques
 Gestion HTML/DOM
 CSS
 Evénements HTML
 Effets et animations
 AJAX
 Utilitaires
 Support des plugins

4
3- Intégrer Jquery à une
application
 Chargement de la bibliothèque à partir d’un site distant
• Microsoft:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery‐
2.1.1.min.js"> </script>
• Google
<script
src="ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.
js "> </script>
• <script src="https://code.jquery.com/jquery‐
2.1.1.min.js"> </script>

 Chargement local:
<script src="jquery‐2.1.1.js"></script> chargement
des éléments de base de la bibliothèque.

5
4- Syntaxe Jquery
 $(sélecteur).action(): un élément (ou une collection
d’éléments)est sélectionné à l’aide de la fonction $,
puis l’action « action() » lui est appliquée.
 $ est un raccourci de la fonction jquery.
 Jquery utilise les sélecteurs css pour sélectionner
les éléments, exemples:
• $(this).hide() //cache l'élément en cours
• $("p").hide() //masque tous les éléments <p>

• $(".c1").hide() // masque tous les éléments de la classe c1

• $("#id1").hide() // masque l'élément dont l'id est id1

6
5- Les fonctions de base
 $(document).ready(function () {
// ...
});
 Ou bien
$(function () {
// ...
});
 Exécute la fonction anonyme une fois la
page est complètement chargée.
7
 Sélection des éléments avec
css et xpath
 Jquery utilise une combinaison des langages
css et xpath pour sélectionner les éléments.
 Exemples:
• $("*") // Sélection de tous les éléments
• $("p.intro") //Sélection de tous les éléments p de la
classe intro
• $("p:first") //sélection du premier élément <p>
• $("ul li:first") //Sélection du premier élément li dans le
premier élément ul.
• $("ul li:first‐child") // Sélectionne le premier élément
<li> de chaque <ul>

8
• $("[required]") //Sélectionne tous les éléments ayant
un attribut required
• $("a[target='_blank']") //Sélectionne tous les
éléments <a> ayant l'attribut target = _blank
• $("a[target!='_blank']")
• $(":button") //Sélectionne tous les éléments <button>
et <input> de type button
• $("tr:even") // Sélectionne tous les élément <tr>
pairs
• $("tr:odd") // Sélectionne tous les élément <tr>
impairs
• $("p[@class]") //Sélectionne tous les éléments p
ayant un attribut class.
• $("input[@name=txtNom]")
• $("li:contains('Marrakech')"); // Sélectionne les
éléments li contenant le mot 'Marrakech’.

9
 5- les événements
 Jquery Simplifie la gestion des événements de JavaScript
 connecter une fonction à un événement DOM, exemple: définir l’événement
clic de tous les paragraphes :
$("p").click(function () {
// ...
});
$("p").dblclick(function () {
$(this).hide();
});
$("input").focus(function () { $(this).css("background‐color",
"#cccccc"); });
$("input").blur(function () {$(this).css("background‐color",
"#ffffff");
});
10
 6- Ajax
 La fonction load
• $(selecteur).load(URL [, parametres, fonction_rappel]);
• La fonction load charge les données à partir de l’url « URL » et
les affiche dans l’élément identifié par « selecteur ».
• parametres: données à envoyer en paramètre de la requete Ajax.
• fonction_rappel: fonction à appeler après le chargement des
données.
 La fonction de rappel peut avoir les paramètres suivants
(reponse,satut,xhr):
• reponse: résultat de la requête Ajax
• statut: statut de l’appel, peut avoir l’une des valeurs: success ou error.
• xhr: l’objet xhr.
 Exemple:
• $("#div1").load("contenu.txt");

11
$.get() et $.post()
 $.get(URL, fonction_rappel,[type_donnees]);
• La fonction de rappel possède deux paramètres
(donnees, statut)
• $.post(URL, parametres, fonction_rappel,
type_donnees]);
• donnees: Les données téléchargées par la requête Ajax.
• statut: statut de l’exécution de la requête Ajax.
• type_donnees: html,text,xml,json

12
$.ajax
var req = $.ajax({
type: "POST",
dataType: "json",
url:"clients.aspx",
data: "{'ID': '123'}",
contentType:
"application/json; charset=utf‐8",
success: function (res) {
alert("Nom du client: " + res.nom);},
error: function (xhr, textStatus, thrownError) {
alert(xhr.status);
alert(textStatus);
alert(thrownError);
},
async:true });

13
 7- Effets et animations
 hide() et show()
• Syntaxe: $(selecteur).hide(vitesse,rappel);
• Vitesse: slow, fast ou une valeur en ms.
 toggle()
• Syntaxe: $(selecteur).toggle (vitesse,rappel);
• Si l’élément est affiché il sera masqué et inversement.
 Fading()
• fadeIn(): $(selecteur).fadeIn(vitesse,rappel);
• fadeOut(): $(selecteur).fadeOut(vitesse,rappel);
• fadeToggle(vitesse, rappel)
• fadeTo(vitesse,opacité, rappel): opacité entre 0 et 1.

14
 Exemple FadeIn et FadeOut
Script HTML
$("#cmdMasquer").click(function () { <p>FadeIn et FadeOut</p>
$("#div1").fadeOut(); <button
id="cmdMasquer">Masquer</button><butt
$("#div2").fadeOut("slow"); on id="cmdAfficher">Afficher</button>
<br><br>
$("#div3").fadeOut(3000); <div id="div1"
}); style="width:80px;height:80px;backgro
und‐color:red;"></div><br>
$("#cmdAfficher").click(function () { <div id="div2"
$("#div1").fadeIn(); style="width:80px;height:80px;backgro
und‐color:green;"></div><br>
$("#div2").fadeIn("slow"); <div id="div3"
style="width:80px;height:80px;backgro
und‐color:blue;"></div>
$("#div3").fadeIn(3000);
});
15
Sliding
 Fonctions
• slideDown()
• slideUp()
• slideToggle()
 Les fonctions acceptent les paramètres
vitesse, et rappel.

16
 Exemple SlideDown
Script {
$("#p1").click(function () { padding:50px;
display:none;
$("#p2").slideDown("slow"); } HTML
}); <div id="p1">Cliquez ici</div>
Style <div id="p2">Un panneau</div>
#p1,#p2
{
padding:5px;
text‐align:center;
background‐color:#e5eecc;
border:solid 1px #c3c3c3;
}
#p2

17
animate
 Syntaxe:$(selecteur).animate({params},v
itesse,rappel);
 params:propriétés css à animer

18
 Exemple Animate
Script style="background:#98bf21;height:100p
$("button").click(function () { x;width:100px;position:absolute;">
$("div").animate({ </div>
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});{
}
HTML
<button>Animer</button>

<div

19
8-Fonctions HTML
Accès au contenu d’un élément HTLM
• text(): obtenir ou modifier le contenu d’un élément html
• html(): obtenir ou modifier le contenu d’un élément html (les
balises de l’élément sont comprises)
• val(): obtenir ou modifier la valeur d’un champ de formulaire
• attr(nom_attribut,valeur): lire ou modifier la valeur d’un
attribut.

20
Exemple: var contenu =
prompt("Modifier la valeur de l'attrbut size");
Script
<script> $("#t1").attr("size",contenu);
$(//document.ready $("#t1").val(contenu);
function () { });
// attacher un gestionnaire à }
l'événement clic de b1
$("#b1").click(function () );
{// Lecture du contenu des éléments html
alert("La fonction val:" + $("#t1").val()); </script>
alert("La fonction text:" + HTML
$("#d1").text());
<div id="d1" > <p>DIV d1
alert("La fonction html:" + $("#d1").html());
Les fonctions html DOM</p>
//Modification
</div>
var contenu = prompt("Modifier le contenu de
l'élément div d1"); <input id="t1" type="text" value=""
size="55"/>
$("#d1").text(contenu);
<input id="b1" type="button" value="button"
var contenu = prompt("Modifier l'élément div
/>
d2");
<div id="d2"> DIV d2
$("#d2").html(contenu);
Les fonctions html DOM
var contenu = prompt("Modifier la valeur de
t1"); </div>
$("#t1").val(contenu);
// Lecture et modification de l'attribut size
alert("La fonction
attr,size:" + $("#t1").attr("size"));

21
Ajouter des éléments DOM
 appendTo() : ajoute le contenu à la fin de l’élément sélectionné.
• Exemple: $("p").append("contenu");
 prepend() : ajoute le contenu au début de l’élément sélectionné.

 after() : insère le contenu après l’élément sélectionné.

 before() : insére le contenu avant l’élément sélectionné

Supprimer des éléments DOM

 remove(): supprime l’élément sélectionné.
• Exemples:
$("p").remove();
$("p").remove(".c1");
 empty(): efface le contenu de l’élément sélectionné.

22
 9- Jquery css
 addClass(): associer une classe css à la sélection
• $("div").addClass("c1");
 removeClass(): supprimer une classe de la sélection
• $("div").removeClass("c1");
 toggleClass(): bascule entre addClass et removeClass()
• $("div").toggleClass("c1");
 css(): obtenir ou modifier la valeur d’une propriété css.
• Lecture:var couleur = $("p").css("background‐color");
• Modification:
• $("p").css("background‐color", "yellow");
• $("p").css({ "background‐color": "yellow", "font‐size": "200%"
});

23
 9- Dimensions Jquery
 Lecture/Modification
• width()
• height()
 Lecture
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

24
 Exemple
Script
$("#b1").click(function () {
var lar = $("#t1").width();
alert(lar);
$("#t1").width(lar + 10);
});
HTML
<input id="t1" type="text" />
<input id="b1" type="button" value="size" />

25
 10- Jquery UI
 Jquery UI basée sur Jquery est structurée en quatre
catégories d’éléments
• Widgets: composants de l’interface utilisateurs (Menu, Dialog,…)
• Effets: ensemble d’animations et de transitions des éléments DOM
• Interactions: les interactions permettent à l’utilisateur d’interagir avec
les éléments DOM de la page web (draggable, sortable, droppable).
• Utilitaires: ensemble d’outils utilisés en interne par Jquery UI
 Intégration dans une page
• <link href="jquery‐ui.css" rel="stylesheet" />
• <script src="external/jquery/jquery.js"></script>
• <script src="jquery‐ui.js"></script>

26
27
 Accordéon
 Chaque panneau est composé d’un Panneau 2</div>
élément contenant le titre du panneau et <h3>Panneau 3</h3>
un autre le contenu. <div id="p3" >
Script Panneau 3</div>
$(function () { </div>

$("#ac").accordion({active:1 });
});
Html
<div id="ac" style="width:200px">
<h3>Panneau 1</h3>
<div id="p1" >
Panneau 1</div>
<h3>Panneau 2</h3>
<div id="p2" >
28
 Onglets
Script <div id="t2">
$("#t").tabs(); Onglet 2
Html </div>
<div id="t"> <div id="t3" >
<ul> Onglet 3
<li><a href="#t1">Onglet </div>
1</a></li> </div>
<li><a href="#t2">Onglet 2</a></li>
<li><a href="#t3">Onglet
3</a></li>
</ul>
<div id="t1" >
Onglet 1
</div>

29
 Menus
Script <ul>
$("#menu").menu( <li><a
Style href="#">Menu 3 1 2 1</a></li>
.ui‐menu {width:180px} <li><a
Html href="#">Menu 3 1 2 2</a></li>
<ul id="menu"> </ul>
<li><a href="#">Menu 1</a></li> </li>
<li><a href="#">Menu 2</a></li> </ul>
<li><a href="#">Menu 3</a></li> </li>
<li> <a href="#">Menu 3 1</a> </ul>
<ul>
<li><a href="#">Menu 3 1
1</a></li>
<li> <a href="#">Menu 3 1 2</a>

30
 Boîtes de dialogues
Script modal:true,
$("#dialog").dialog(); dialogClass: "no‐close",
Html buttons: [{
<div id="dialog" title="Un exemple text: "OK",
de boîte de dialoge" class="ui‐ click: function () {
dialog‐title">
<p class="ui‐dialog‐ $(this).dialog("close");
content">Contenu</p> }
</div> }
]
});
Exemple 2
Script
$("#dialog").dialog({

31