Jquery PDF

1
Introduction
 jQuery est une énorme bibliothèque de fonctions JavaScript qui
ont été écrites et regroupées en un seul et unique fichier pour
plus de simplicité.
 jQuery offre un ensemble d'objets et de fonctions permettant :
 d'accéder, modifier ou supprimer des éléments HTML et leurs
propriétés CSS
 de gérer les évènements de façon indépendante des navigateurs
 de produire des animations de façon très simple
 d’envoyer et de recevoir des données depuis un serveur grâce à
AJAX (asynchronous JavaScript and XML) pour ne plus avoir
besoin de recharger les pages après validation d'un formulaire.
2
jQuery, un framework ou une librairie ?
 Une librairie, en programmation, est une bibliothèque de
fonctions.Tout ce que le programmeur a à faire, c'est d'inclure
la librairie dans son code. Il peut ainsi commencer à utiliser
les fonctions qui s'y trouvent pour avancer dans son code.
 Le framework pose les bases d'une application, et il va nous
"forcer" à programmer selon les codes qu'il nous impose.
Ainsi, on peut dire que c'est notre manière de coder qui
s'intègre à la vision du framework. C’est le cas de jQuery.
 jQuery est plus qu'une simple librairie même s'il en a les traits
majeurs, il va vraiment nous faire coder en JavaScript d'une
nouvelle manière.
Plugins jQuery
 Des centaines plugins existent d'ores et déjà, de qualité variable; certains
mis en avant par l'équipe de développement :
http://plugins.jquery.com/
 Galerie photo : VisualLightbox
http://visuallightbox.com
 ensemble de composants graphiques téléchargeable à l'adresse
http://jqueryui.com/download
 des « widgets »
http://jqueryui.com/demos/
 des « effets »
http://jqueryui.com/demos/effect/
 Une collection de thèmes
http://jqueryui.com/themeroller/
4
Utiliser la librairie jQuery
 Disponible sur le site de Jquery à télécharger :
http://jquery.com/
Puis l’intégrer dans le code à travers l’appel :
<script 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>
5
Utiliser la librairie jQuery
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="chemin/jquery.min.js"></script>
</head>
<body>
...
</body>
</html>
6
La fonction $()
 Dans jQuery, la sélection d’une partie du document
constitue l’opération fondamentale.
 Pour cela, nous utilisons la construction $( ).
 $ est un raccourci alias pour jQuery( ). Donc, en
utilisant $("#id" ) est de même que jQuery("#id").
 Il est généralement utilisé comme un sélecteur.
 Un sélecteur est une fonction qui renvoie un ensemble
d'éléments trouvés dans les DOM.
7
Lancement au chargement de la page
 ready() : utile pour spécifier la fonction à exécuter lorsque le
document est complètement chargé.
$(document).ready() : jQuery prend un argument. Ici, elle
cible le "document", qui représente tout simplement le
document HTML sur lequel on travaille : la page web.
On attend que la page HTML soit chargée avant de commencer
de traiter du code jQuery.
jQuery(document).ready(function(){
// notre code ici
});
Une fois que l’événement « ready » est vérifié, on lance une
8
fonction anonyme dans laquelle on va placer le code jQuery.
Syntaxe :
<script src="chemin/jquery.min.js"></script>
<script>
$(document).ready(function(){ // Traitement à effectuer });
</script>
Exemple :
$(document).ready(function(){
alert("Le jQuery est vraiment intéressant !! "); });
 jQuery propose, également, une écriture simplifiée pour la
fonction ready qui permet d’économiser quelques caractères :
Exemple :
$(function(){
alert("Le jQuery est vraiment intéressant !! "); });
9
Gérer des événements
 blur() : Quand un objet perd son focus.
 change() :Après la modification d'un objet.
 click() :Quand on clique.
 dblclick() :Quand on double-clique.
 hover() : Au passage de la souris.
 keydown() : Quand une touche clavier est enfoncée.
 keypress() : Quand on appuie sur une touche.
 keyup() :Quand on lâche une touche clavier.
 load() : Au chargement.
 mousedown() :Quand le bouton de la souris est enfoncé.
 mousemove() : Quand le curseur bouge.
 mouseout() : Quand le curseur sort de l'objet.
 mouseover() : Quand le curseur passe sur l'objet.
 mouseup() : Quand le bouton de la souris est relâché.
 …
10
Exemple 1 : afficher un message lorsqu'un lien est cliqué.
<script >
$(document).ready( function() {
});
</script>
<a href="#">Cliquer ici </a>
11
Exemple 2 : affiche le code de la dernière touche pressée
<h1>Cours jQuery</h1>
<label for="t1">Ecrivez dans le champ : </label>
<input type="text" id="t1">
<script >
});
</script >
12
Sélecteurs
 Les sélecteurs permettent de sélectionner un ou plusieurs éléments
du DOM, ces derniers pouvant être manipulés comme tout autre
objet.
 Pour récupérer le bon objet, il va falloir passer des arguments à la
fonction ; ces arguments sont représentés sous la forme de sélecteurs
qui s'appuient sur la syntaxe de CSS.
 Les sélecteurs fonctionnent selon la syntaxe $( type de selecteur).
Schéma :
13
La fonction $ permet de sélectionner directement des éléments à l’aide
de la syntaxe CSS :
 $("#ident") sélectionne l'élément d'identifiant ident ; c'est donc
l'équivalent d'un document.getElementById("ident") en plus court.
Par exemple : $("#id_imag") sélectionne l’élément ayant l’id id_imag.
 $("nomÉlément") sélectionne les éléments portant un nom donné.
Par exemple : $("p") sélectionne tous les éléments <p>.
 $(".nomclas") sélectionne les éléments portant la classe nomclas.
Par exemple : $(".parag") sélectionne l’élément ayant le nom de classe parag.
 De même, $(".nomclas1 .nomclas2") sélectionne les éléments
portant les classes nomclas1 et nomclas2.
Par exemple : $(".parag1 .parag2") sélectionne les éléments ayant les noms
14 de classe parag1 et parag2.
 $("*") sélectionne tous les éléments.
 Il est possible d'indiquer plusieurs sélecteurs :
$(".nomclas, Balise, #ident") sélectionne tous les éléments de classe
nomclas, tous les éléments de Balise et l'élément d'identifiant ident.
Par exemple : $(".parag, div, #id_image")
 $("Balise").eq(index) Réduit l'ensemble des éléments selon l'index
spécifié.
Par exemple : $("h2").eq(1) cible le deuxième élément h2 du document.
 Remarque : la plupart du temps, on obtient un tableau. Sa taille est
évidemment disponible grâce à la propriété length.
Par exemple : $("p").length permet de connaître le nombre de paragraphes dans un
document.
15
Manipulation du CSS
 $("Balise").css({" attribut " : "définition css"}) : accepte des
propriétés de mise en forme.
Par exemple : $("li").css({" border " : "solid 0.1em red", "color ":
"purple" }) : affecte des propriétés de mise en forme à <li>.
 $(".nomclas" ou "balise" ou "#ident").addClass("class") :
ajoute une classe pour chaque élément sélectionné.
Par exemple : $("p").addClass("test")
 $(".nomclas" ou "balise" ou
"#ident").removeClass("class") permet de supprimer la ou
les classes spécifiés des éléments concernés.
Par exemple : $("p").removeClass("test")
16
Exemple 1 :
<script>
}) ;
</script>
<div id="zone-texte">
17
Zone de texte qui change d'apparence lors d'un survol de souris !!! </div>
Exemple 2 : $('#id2').mouseover(function() {
<style> $('#id2').addClass('bleu'); });
.vert {background-color:green;} $('#id2').mouseout(function() {
$('#id2').removeClass();
.bleu {background-color:blue;}
});
</style>
});
<script>
</script>
$(document).ready( function() {
$('#id1').mouseover(function() { <p> <a id="id1">le fond1</a>
$('#id1').addClass('vert'); </p>
}); <p> <a id="id2">le fond2</a>
$('#id1').mouseout(function() { </p>
$('#id1').removeClass();
18
});
Filtrage
 jQuery offre une très large possibilité de sélection
d'éléments en fonction de filtres sur des collections
d'éléments.
 Le fonctionnement de la sélection par filtre est simple :
 on sélectionne d'abord un ensemble d'éléments (ou
par défaut, tous)
 puis on affine cette sélection à partir de certains
critères.
19
Filtres sur l'arborescence
 :first sélectionne le premier élément d'une collection.
 :last sélectionne le dernier élément d'une collection. Par exemple,
$(". Nomcl:last") sélectionne le dernier élément de classe « Nomcl » dans le
document.
 :not(selecteur) permet de retirer de la sélection tous les éléments
spécifiés. Par exemple, $(". Nomcl:not(.Nomcl2)") permet de sélectionner
tous les éléments de la classe « Nomc1l » et ne possédant pas la classe
« Nomcl2 ».
 :header sélectionne tous les titres (h1, h2, etc.)
 :odd et :even sélectionne tous les éléments d'ordre respectivement
impair et pair d'une collection. Par exemple, $(tr:even) sélectionne les
lignes de tableau n°0, 2, 4, etc.
20
Exemple : Lignes paires et impaires ayant des couleurs différentes
<script>
}) ;
</script>
<table border="1">
<tr><th>Nom</th><th>Prénom</th><th>Age</th></tr>
<tr><td>Tounsi</td><td>Mohamed</td><td>20</td></tr>
<tr><td>Sfaxi</td><td>Hedia</td><td>18</td></tr>
<tr><td>Laarbi</td><td>Ali</td><td>21</td></tr>
21 </table>
Filtres de contenu
 contains(texte) sélectionne tous les éléments contenant un
texte donné . Par exemple $("p:contains('essai')") cible tous les
paragraphes contenant le texte « essai ».
 has(sélecteur) sélectionne les éléments contenant au moins
un élément sélectionné par sélecteur. Par exemple, $("li:has(ul)")
sélectionne les éléments d'item de liste (li) contenant au moins une liste.
 :empty sélectionne les éléments vides.
22
Exemple : Tounsi est souligné
<body>
<div>Mohamed Tounsi</div>
<div>Hedia Laarbi</div>
<div>Ali Tounsi </div>
<script>
</script>
</body>
23
Filtres de visibilité
 :visible sélectionne les éléments qui sont visibles
Par exemple, $("p:visible") sélectionne les paragraphes visibles.
 :hidden sélectionne les éléments qui ont été cachés
Par exemple, $("div:hidden") sélectionne les zones « div » cachés.
24
Filtres d'attributs
 [Nomatt] sélectionne les éléments possédant l'attribut
« Nomatt ». Par exemple, $("img[width]") sélectionne les éléments img
possédant un attribut « width ».
 [attribute=valeur] sélectionne les éléments possédant un
attribut valant « valeur ». Par exemple, $("td[colspan=2]")
sélectionne les cellules des tableaux fusionnant deux colonnes.
 $(':[text|password|radio|checkbox|submit|image|
reset|button|file|hidden]') sélectionne les <input /> du
type choisi.
25
Exemple : Cacher les éléments ayant l’attribut href
<script>
});
</script>
</head>
<body>
<h2>Un titre</h2>
<p>Un paragraphe</p>
<p>Un autre paragraphe</p>
<p><a href="../html/index.html">Présentation de HTML </a></p>
<p><a href="../css/index.html"> Présentation de CSS </a></p>
<button>Cliquer </button>
26
Les effets
 Les effets jQuery ajoutent sans conteste une certaine convivialité à la page.
 Les effets sont, au fait, des formes d'animation d'un objet respectivement
lié à différents états.
Effet Description Exemple

fadeIn Fait apparaitre les éléments sélectionnés en function(){
ajustant leur opacité. $('#effet').fadeIn("fast"); }
fadeOut Fait disparaitre les éléments sélectionnés en function ()

ajustant leur opacité. {$('#effet').fadeOut("slow"); }
fadeTo Modifie l'opacité des éléments. L’opacité est function () {
un nombre décimal compris entre 0 et 1. $('#effet').fadeTo("slow", 0.5); }
fadeToggle affiche ou cache l'élément, grâce à l'opacité. function () {$('#effet').
fadeToggle("slow"); }
 On peut remplacer fast ou slow par des chiffres représentant la durée en

millisecondes (par défaut 400 millisecondes).
27
hide Cache chaque élément de la function() {
sélection s'ils sont affichés. $('#effet').hide("slow"); }
show Affiche chaque élément de la function()
sélection s'ils sont cachés. {$('#effet').show("slow"); }
slideDown Affiche tous les éléments function()
sélectionnés selon un effet {$('#effet').slideDown("normal");
spécifique. }
slideUp Cache tous les éléments function()
sélectionnés selon un effet {$('#effet').slideUp("normal"); }
spécifique de "glissement".
slideToggle Permet de masquer ou d’afficher function()

un contenu (slideDown et {$('#effet').slideToggle("slow"); }
slideUp en même temps).
28
animate permet de contrôler une animation. // animation avec le style, la
animate(style,[duration],[easing],[complete]) durée et la fonction de retour
- style (objet contenant des couples function(){
$("#effet").animate({
attribut/valeur CSS) : détermine le style de
width: "70%",
l'élément à la fin de l'animation. opacity: 0.4,
- duration (nombre de millisecondes marginLeft: "0.6in",
représentant la durée de l'animation, ou fontSize: "3em",
"slow" (600 ms) ou "normal" (400 ms) ou borderWidth: "10px"
"fast" (200 ms). },
1500 ); }
- easing (chaîne de caractères) : détermine la
façon dont les propriétés vont changer au
cours du temps : "swing" par défaut.
- complete : une fonction qui va être appelée
quand l'animation de l'élément est finie.
29
Exemple 1 :
<div id="txt1"> Cliquer ici pour l'effet FadeOut </div>
<div id="txt2"> Cliquer ici pour l'effet FadeIn </div>
<div id="txt3"> Cliquer ici pour effectuer FadeToggle </div>
<div id="txt4"> Cliquer ici pour effectuer l'opacité </div>
<img id="book" src="images/book.jpg" alt="" width="100" height="123" />
<script>
$(document).ready(function() {
$('#txt1').click(function() {
$('#book').fadeOut('slow'); });
$('#book').fadeIn('slow'); });
$('#book').fadeToggle('slow'); });
$('#book').fadeTo('slow',0.5); });
});
</script>
30
Exemple 2 :
<style>
#demo{
height:150px;
width:150px;
background-color:#270993;
color:#e7fc54;
}
</style>
<a href="#" id="lien1">Cliquez ici pour effectuer le slideUp</a> ***
<a href="#" id="lien2">Cliquez ici pour effectuer le slideDown</a>***
<a href="#" id="lien3">Cliquez ici pour effectuer le slideToggle</a>
<div id="demo">Les effets de SLIDE</div>
<script>
$("#lien1").click(function(){ $('#demo').slideUp('fast'); });
$("#lien2").click(function(){ $('#demo').slideDown('fast'); });
$("#lien3").click(function(){ $('#demo').slideToggle('slow'); });
});
</script>
31
Manipulation du DOM
 jQuery propose toute une série de fonctions qui permettent de
manipuler facilement la structure DOM (Document Object
Model).
 Le DOM est une interface de programmation, utilisée
exclusivement pour les documents XML et HTML.
 Manipuler le DOM càd qu’il est possible de modifier une page
web sans la recharger : supprimer un paragraphe, ajouter une
image, changer tout le contenu d'une div, etc.
 C'est grâce au DOM qu'il est possible d'agir sur une page web
avec JavaScript, et plus précisément à travers ses fonctions.
 Celles utilisées avec jQuery sont plus simples que celles utilisées
dans le JavaScript natif dont la syntaxe est beaucoup plus
32
complexe, tout en étant moins flexible.
La descendance
 Une structure HTML permet d'imbriquer des blocs les uns dans les
autres.
 Ceux étant à l'intérieur sont appelés enfants, ceux qui entourent un
élément sont des parents.
 Le parcours du DOM se base sur ce concept.
 L'arbre contient des nœuds, les nœuds peuvent avoir des fils, et tous
les nœuds ont un parent (sauf la racine).
33
Exemple :
<p dir="ltr">
Exemple de code <b>ayant <br />plusieurs</b>enfants
</p>
nœud enfant attribut
‘Exemple de code’ b ‘enfants’ dir = ‘ltr’
nœud enfant
34 ‘ayant’ br ’plusieurs
fonctions de parcours : parent()
 parent() : cette méthode permet d'accéder au bloc parent
de l'élément actuellement ciblé.
Exemple :
<p>un paragraphe qui contient un <a href="#">lien</a></p>
35
Exemple :
<script>
// rend le lien ciblé seulement de couleur bleue.
// ici, c'est le parent de l'enfant qui verra son texte devenir rouge.
// retourne seulement l'ensemble des blocs parents ayant la classe .texte

qui verront leurs textes devenir verts.
});
</script>
<p>un paragraphe qui contient <span> un autre contenu
fils</span></p>
<p class="texte">Deuxième paragraphe ayant une classe qui contient
<span>un autre contenu fils</span></p>
<p class="texte">Un autre paragraphe ayant une classe
36
uniquement</p>
Remarque :
parent() retourne seulement la première occurrence trouvée
: dès qu'elle tombait sur un parent, elle s'arrêtait sans aller
plus loin.
Si on veut agir sur tous les parents d'un élément en même
temps, on ne parlera ici plus de parents, mais d'ancêtres.
Pour cela on utilisera la fonction : parents() – Avec un s à la
fin.
Exemple :
$('a').parents();
// cible tous les éléments ancêtres du lien : paragraphe, bloc(s),
balise <body>,etc.
37
Exemple :
<head>
<script>
// Tous les parents de span deviennent rouges.
});
</script>
</head>
<body>
<h1>un titre</h1>
<p>un paragraphe qui contient <span> un autre contenu fils</span></p>
<p>Un autre paragraphe sans fils</p>
</body>
38
Fonctions de parcours : children()
 children() permet de cibler l'élément enfant descendant
directement de l'élément sélectionné.
 Cette méthode équivaut donc au sélecteur >, mais permet, comme
la fonction parent(), de préciser la recherche avec un argument.
 children() ne va cibler que les enfants directs d'un élément. Mais ne
permet pas de récupérer tous les fils et petits-fils d'un bloc.
Exemple :
<p>un paragraphe qui contient un <a href="#">lien</a></p>
39
Exemple :
<script>
// cible l'élément enfant direct du bloc div pour les rendre verts
// cible seulement l'ensemble des paragraphes enfants du bloc div pour

les rendre rouges
});
</script>
<div>une zone ayant <p>un premier paragraphe qui contient
<span>un autre contenu</span> </p>et <p>un autre paragraphe
sans fils</p> en plus <h6>d’un titre de niveau 6</h6></div>
40
Fonctions de parcours : find()
 find() permet de trouver tous les enfants d'un élément,
quelle que soit leurs positions par rapport à ce dernier.
 Il suffit alors de donner le type d'élément à trouver.
Exemple :
$('body').find('p');
// cible l'ensemble des paragraphes contenus dans le corps du
document, quelle que soit leur position
41
Exemple :
<script>
//Retrouver tous les paragraphes appartenant au div et les rendre verts
//Retrouver tous les span appartenant au div et les rendre rouges
});
</script>
<div>une zone ayant <p>un premier paragraphe qui contient <span>un
autre contenu</span> et contient aussi<p>un autre paragraphe
</p></p> </div>
<p>Un paragraphe non fils de div qui contient <span>un autre
contenu</span> </p>
42
La fraternité d'éléments
 Le frère d'un élément, c'est tout simplement la balise présente
directement à côté de celui-ci.
 Il y a quatre façons de faire appel à ce concept :

 prev() sélectionne l'élément frère précédant directement l'objet ciblé.
 next() sélectionne l'élément frère suivant directement l'objet ciblé.
 prevAll() sélectionne tous les éléments frères précédant l'objet ciblé.
 nextAll() sélectionne tous les éléments frères suivant l'objet ciblé.
43
Exemple :
<script>
// cible les éléments frères précédant du bloc div et les rendre rouges
});
</script>
<h1>un titre</h1>
<p>un paragraphe </p>
<div>Une zone</div>
44
Insertion de contenu
 Trois sortes de contenu :
 le contenu textuel, ce qui correspond à du texte, tout
simplement, sans fioritures telles que des balises ;
 le contenu HTML, qui représente le contenu textuel avec les
balises structurelles en plus ;
 et le contenu des éléments de formulaire, qui est la valeur
des différents champs de texte, de mot de passe, de textarea...
 Ces différentes sortes de contenu ne se manipule pas tout à
fait de la même manière
45
Le contenu textuel
 La méthode text() permet de lire ou de modifier le contenu textuel
des éléments auxquels elle est appliquée.
 Elle ignore les balises, pour cela les caractères < et > sont convertis
en entités HTML.
Exemple :
$("#id1").text() lit ainsi le contenu de l'élément d'identifiant id1
Alors que $("li").text("salut") permet de modifier le contenu de tous les
éléments li en "salut". cette méthode écrase le contenu actuel pour le
remplacer par le nouveau
46
Le contenu HTML
 Le code HTML est accessible via la méthode html(). Si cette méthode
est appelée sans argument, elle renvoie le contenu HTML de l'élément
sélectionné. Elle respecte le balisage html présent.
Ainsi, si on a :
<p id="p1">Un peu de texte <em>important</em> </p>
alert($("#p1").html()); affichera :
Un peu de texte <em>important</em>
 Si cette méthode est appelée avec argument, alors elle permet de
modifier le contenu HTML. Toujours avec le même code source
HTML,
alert($("#p1").html("Un peu de texte <strong>très important</strong>."))
a pour effet de remplacer le code source initial.
47
Exemple 1 :
<div class="contenu" id="mesLiens"> Le contenu

<a id="lien-perso" href="http://www. perso.tn">
lien personnel </a></div>
Pour récupérer le contenu HTML du DIV « mes-liens » :
var mon-contenu = $("#mesLiens").html()
Aura pour résultat :
Le contenu <a id="lien- perso" href="http://www. perso.tn">
lien personnel </a> </div>
Si on veut récupérer seulement le texte on utilisera :
var mon-contenu = $("#mesLiens").text()
On aura pour résultat : Le contenu lien personnel
48
Exemple :
<style> .vert{color:green;} </style>
<script>
});
</script>
<input id="b1" type="button" value="Changer le contenu du premier
élément p" />
<input id="b2" type="button" value="Changer le contenu du deuxième
élément p" />
<p>Un premier paragraphe.</p>
49 <p>Un deuxième paragraphe.</p>
Le contenu des éléments de formulaire
 La méthode val() est équivalente à la propriété value en

JavaScript, elle va servir à manipuler le contenu des éléments
de formulaire, ce qui est en général entré par l'utilisateur.
 Elle fonctionne exactement de la même manière que text()
(elle n'admet aucune balise structurelle).
Exemple :
$('input').val(); // retourne le contenu de l'élément input
$('input').val('Nouvelle valeur '); // modifie le contenu actuel de
l'élément (écrase puis écrit).
50
Exemple :
<script>
});
</script>
<form>
opérande 1 : <input type="text" id="op1" value="0"/> + <br />
opérande 2 : <input type="text" id="op2" value="0"/> <br />
Résultat : <input type="text" id="res" value="0"/>
</form>
51
Les attributs
 .attr() permet d'accéder ou de modifier la valeur de
n'importe quel attribut d'un élément.
Exemple :
$("img").attr("width"); //retourne la valeur de l’attribut width de
l’image.
$("img").attr("width","500"); // Modifie la valeur de l’attribut
width de l’image.
$("img").attr({width:"150",height:"100"}); // Modifie
plusieurs valeurs d’attributs de l’image.
52
Exemple :
<script type="text/javascript">
});
</script>
<a>Ici un lien vers http://creersonsiteweb.net </a>
53
Ajouter du contenu HTML à l’intérieur des
balises
 append() ajoute le contenu HTML passé en argument après le
contenu HTML actuellement en place.
 Évidemment, l'insertion s'effectue toujours à l'intérieur des balises
de l'élément.
Exemple :
$('p').append(' <strong>Texte inséré après le contenu actuel.</strong>');
 Il est possible d'ajouter du contenu au début d'un élément grâce à la
méthode prepend()
54
Exemple :
<script>
}); </script>
<p>Un pemier paragraphe.</p> <p>Un autre paragraphe.</p>
<ol> <li>Première ligne de la liste</li>
<li>Deuxième ligne de la liste</li>
<li>Troisième ligne de la liste</li> </ol>
<input type="button" id="btn1" value="Ajouter un texte"/>
<input type="button" id="btn2" value="Ajouter une ligne à la liste" />
55
Cloner des éléments
 clone() a pour effet de dupliquer l'élément ciblé.
 Seulement le clone d'élément ne sera pas ajouté au document, car on
ne lui arien ordonné : il restera là, vaquant, n’appartenant à aucune
partie du document.
 Il va alors falloir lui indiquer où se placer. Et ce avec les méthodes
append() ou prepend().
Exemple :
var $clone = $('.objet').clone(); // on clone notre élément
$('body').append($clone); // puis on l'ajoute à la fin de notre document .
// on peut également tout écrire sur une seule ligne grâce au chaînage de méthode
$('.objet').clone().appendTo('body');
56
Exemple :
<script>
$("button").click(function(){
$("body").append($("p:first").clone(true)); });
$("p").click(function(){
$(this).animate({fontSize:"+=5px"}); });
});
</script>
<p>Cliquer sur ce paragraphe pour aggrandir la taille du texte.</p>
<p>Il s'agit d'un autre paragraphe.</p>
<button>Copier le premier élément p (y compris les gestionnaires
d'événements et ce avec l'argument "true"), et ajouter à l'élément
body </button>
57
Ajouter du contenu HTML à l’extérieur des
balises
 Il est également possible d'insérer du code HTML à l'extérieur des
balises.
 Cela implique alors une modification du parent de cet élément, et
non de l'élément lui-même : celui-ci n'est pas modifié, mais la balise
qui l'entoure voit son contenu changé.
 before() et after() permettent respectivement d'ajouter du
contenu HTML avant et après l'élément ciblé.
Exemple :
$('p').before('<p>Paragraphe précédent</p>');
$('p').after('<p>Paragraphe suivant</p>');
58
Exemple :
<script>
});
</script>
<img src="images/book.jpg" alt="jQuery" width="100"
height="140">
<p>Clique l'un des boutons pour insérer le texte avant ou après
l'image.</p>
<input type="button" id="avant" value="Avant l'image"/>
<input type="button" id="apres" value="Après l'image" />
59
Vider et/ou supprimer un élément
 empty() et remove() sont les deux méthodes qui respectivement
permettent les actions de vidage ou de suppression d'éléments.
 Vider un élément supprimera simplement son contenu, qu'il soit
textuel ou structurel,
 alors que supprimer un élément fera disparaître ce dernier en
totalité, c'est-à-dire son contenu, mais aussi lui-même.
Exemple :
$('p').empty(); // vide l'élément, seules restent les balises <p></p> et leurs
attributs.
$('p').remove(); // supprime l'élément, avec son contenu, rien n'en restera
$('div').remove('.supp'); // supprime les éléments portant la classe .supp parmi
les blocs div trouvés
60
Exemple :
<style> div{height:100px;background-color:yellow; }</style>
<script>
});
</script>
<div> Voici un texte
<p>Ce paragraphe est à l'intéruer du div.</p>
</div>
<p>Ce paragraphe est à l'extérieur du div.</p>
<input type="button" id="btn" value="Supprimer le contenu du div"/>
61
Remplacer les éléments
 Les deux méthodes replaceWith() et replaceAll() permettent de
remplacer un élément par un autre.
 La seule différence entre les fonctions replaceWith() et replaceAll(),
c'est que la première va prendre en argument l'objet ou le nouveau
contenu à insérer, alors que l'autre va faire l'inverse, c'est-à-dire qu’il
faut spécifier l'élément à remplacer en argument.
Exemple :
$('.Elt1').replaceWith('<p>Cet élément a été remplacé !</p>');
// on remplace l'élément .Elt1 par un nouvel élément créé pour l'occasion
$('.Elt1').replaceWith( $('.Elt2') ); // ici, l'élément .Elt1 est remplacé par
l'élément .Elt2, ce dernier va se déplacer
$('.Elt2').replaceAll('.Elt1'); // on ordonne aux éléments .Elt2 de remplacer
62 tous les éléments .Elt1 trouvés
Exemple :
<style> div{ border:1px solid; } </style>
<script> $(document).ready(function(){
}); </script>
<button>Remplacer chaque élément p qui est le dernier enfant de son parent,
avec un élément span gras</button><br><br>
<div> <p>Le premier paragraphe dans le div.</p>
<p>Le dernier paragraphe dans le div.</p>
</div><br>
<div> <p>Le premier paragraphe dans un autre div.</p>
<p>Le dernier paragraphe dans un autre div.</p>
63 </div>
Envelopper/déballer des éléments
 Wrap() va agir autour de l'élément ciblé : elle va y insérer les balises
indiquées, et ce, automatiquement.
 Pour déballer les éléments, il suffit d'utiliser unwrap(). Cela aura
pour effet de détruire l'élément parent de celui qui est ciblé.
Exemple :
$('strong').wrap('<p >'); // entoure les balises <strong></strong> de
balises de paragraphe
$('span').wrap('<p class="description" >'); // il est possible de donner des
attributs au nouveau parent
$('span').unwrap(); // détruit le parent de tous les span
64
Exemple :
<style> div{background-color:yellow;} </style>
<script>
});
</script>
<p>Il s'agit d'un paragraphe.</p>
<p>C'est un autre paragraphe.</p>
<button id="b1">Créer un nouvelle div et l'envelopper autour de
chaque élément p</button>
<button id="b2">Annuler le div</button>
65
Présentation d’Ajax
 AJAX: (Asynchronous Javascript And XML) n'est ni une
technologie ni un langage de programmation ; AJAX est un
concept de programmation Web reposant sur plusieurs
technologies.
 AJAX regroupe deux technologies de base : Javascript et XML.
 Cependant il recourt très souvent à d’autres technologies à savoir
HTML, CSS , DOM (Document Object Model) et un langage de
script côté serveur tel que PHP, ASP, CGI…
 L’utilisation d’AJAX nécessite une connaissances préalable de
l’ensemble des technologies mentionnées.
 L'idée même d'AJAX est de faire communiquer une page Web
avec un serveur Web sans occasionner le rechargement de la
page.
 AJAX a pour objectif majeur l’optimisation des ressources sur
Internet.
 En effet, les pages dynamiques classiques qui reposent entièrement
(ou partiellement) sur des scripts côté serveur nécessitent un
rafraichissement après chaque requête passée au serveurWeb.
 De cette façon le serveur remet les données au client et ce dernier
les traite en utilisant un script côté client qui est, dans ce cas, le
JavaScript.
 Un avantage majeur est alors constaté. Il s’agit du rafraichissement
partiel de la page Web.
67
Comparatif avec les applications Web
traditionnelles :
classique
Comparatif avec les applications Web
traditionnelles :
Avec Ajax
Principe d’AJAX
 Pour pouvoir utiliser AJAX, il faut créer en JavaScript un objet que
l'on nomme XmlHttpRequest.
 XMLHttpRequest est un objet natif JavaScript, développé à l'origine
en tant qu'ActiveX dans Internet Explorer, qui facilite grandement la
communication JavaScript – Serveur.
 XMLHttpRequest permet d'interagir avec le serveur, grâce à ses
méthodes et ses attributs.
 L’objet XMLHttpRequest permet d’effectuer des requêtes sur le
serveur sans interrompre les autres tâches du navigateur.
 Le principe de fonctionnement d'XMLHttpRequest est d'envoyer une
requête HTTP vers le serveur, et une fois la requête envoyée, les
données renvoyées par le serveur peuvent être récupérées.
70
$.ajax()
 $.ajax() retourne l'objet XMLHttpRequest qu'il a crée.
 Dans la plupart des cas, on n'aura pas besoin de manipuler cet
objet directement, mais on peut l'utiliser si on souhaite annuler
une requête manuellement.
 C'est la methode $.ajax() qui permet de :
 créer un objet XmlHttpRequest
 créer la connexion
 envoyer la requête
 récupérer le résultat
71
Paramètres de la fonction $.ajax()
 type: Le type de requête POST or GET (GET par défaut).
 url : L’URL à cibler du programme qui s’exécute côté serveur.
 data : Lors de l’envoi de la requête, qu’il s’agisse d’une requête de
type POST ou GET, il peut être nécessaire d’envoyer des données
afin d’affiner, ou préciser, la recherche. Ces données, sous forme de
paire propriété / valeur, peuvent être mentionnées sous forme de
chaines de caractères, séparés alors par une esperluette '&' (l'éventuel
data est ajouté à l'url sous la forme usuelle nom1=valeur1&... ), ou
bien directement sous forme d’un objet JavaScript.
72
 data Type : Format de réponse attendu lors du retour de la réponse
du serveur :
 text : Retourne les données au format texte.
 xml: Retourne un document XML pouvant être réutilisé via jQuery.
 html: Retourne un document HTML comme du text sans mise en
forme où les scripts sont interprétés.
 script: Retourne une réponse JS comme du texte sans mise en forme.
 json: Interprète une réponse JSON et retourne un objet Javascript.
73
 async : d’asynchronisation (true par défaut).
Tous les appels AJAX sont asynchrones, c'est-à-dire que
l'exécution du Javascript n'est pas bloquée en attendant la
réponse du serveur. Lors de chaque appel AJAX, on indique une
fonction callback en javascript, et cette fonction sera appelée par le
moteur javascript du navigateur lorsque celui-ci aura reçu la réponse
du serveur.
Avec jQuery, il est possible de contourner ce mode de
fonctionnement standard en faisant un appel AJAX synchrone,
permettant ainsi de mettre en pause le programme javascript tant
que le serveur n'a pas envoyé sa réponse. Pour cela, le paramètre à
ajouter pour avoir un appel ajax synchrone est async: false
74
 success : appeler une fonction en cas de succès. Cette fonction ne
sera exécutée que si l'appel AJAX a abouti.
La fonction exécutée par success prend en charges deux arguments
Le premier correspond au code_html qui contient le HTML
renvoyé. Le deuxième est l'argument statut qui est une chaîne de
caractère automatiquement générée par jQuery pour donner le statut
(status) de la requête.
75
 error : appeler une fonction en cas d’erreur. Si l'appel AJAX a
rencontré une erreur. Le paramètre exécute une fonction si l'appel
AJAX a échoué.
La fonction exécutée par error prend en charges trois arguments : le
résultat, le statut, et l'erreur. Le premier est un objet
XmlHttpRequest renvoyé par jQuery. Le second argument, c'est le
même que pour success (le statut). Le dernier est une exception, on
peut placer une chaîne de caractère à afficher au visiteur si l'appel
AJAX n'a pas fonctionné.
76
Exemple 1
<p id="p1">Cliquer ici pour essayer !</p>
<div id="contenu"></div>
<script>
$('#p1').click(function() {
$.ajax({
}});
}); });
77 </script>
traitement.php :
<?php
header("Content-Type: text/plain");
header("Cache-Control: no-cache , private");
header("Pragma: no-cache");
$nom=$_GET['name'];
$loc=$_GET['location'];
echo "Bien reçu M. <strong>$nom</strong> de $loc";
?>
78
Exemple 2
<h3>Liste des départements :</h3>
<form method="POST">
<input type="text" id="depart" />
<input type="button" id="b1" value="Valider"/>
</form>
<div id="contenu"></div>
79
<script>
$('#b1').click(function() {
var dep=$('#depart').val();
$.ajax({
}); });
80 </script>
traitement.php :
<?php
header("Content-Type: text/plain");
header("Cache-Control: no-cache , private");
header("Pragma: no-cache");
$depart=$_POST["dep"];
switch($depart){
case 1 : echo "sfax"; break;
case 2 : echo "tunis";break;
case 3 : echo "sousse";break;
default: echo "non répertorié";break;
}
81
?>
jQuery UI
 jQuery UI est une collection d'éléments utiles dans le
développement d'une interface utilisateur construits sur la
base de la bibliothèque JavaScript : jQuery. Parmi ses
éléments on trouve :
 Des interactions comme par exemple le drag&drop
 Des "widgets" (composants d'interface graphique) tels que des
boutons, des tabs, etc.
 Des effets pour changer dynamiquement l'apparence
d'éléments sur l'înterface (ex. changement de couleur, faire
apparaître/disparaître un élément, etc.)
 Des thèmes avec des propriétés CSS pour la mise en page
d'éléments interactifs
82
Intégrer jQuery UI
 Etape 1 : télécharger la version de jQuery UI à utiliser.
Le site officiel pour télécharger jQuery UI est http://jqueryui.com/
 Etape 2 : choisir les éléments de la bibliothèque dont on a besoin pour
l’application.
 Etape 3 : choisir un thème graphique pour les éléments de la
bibliothèque.
 Etape 4 : inclure les fichiers suivants :
<script src="jquery.min.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css"
/>
83

Jquery PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Jquery PDF

Transféré par

Droits d'auteur :

Formats disponibles

1

 Ou directement sur Google code

Effet Description Exemple

fadeOut Fait disparaitre les éléments sélectionnés en function ()

 On peut remplacer fast ou slow par des chiffres représentant la durée en

slideToggle Permet de masquer ou d’afficher function()

nœud enfant attribut

‘Exemple de code’ b ‘enfants’ dir = ‘ltr’

// retourne seulement l'ensemble des blocs parents ayant la classe .texte

// cible seulement l'ensemble des paragraphes enfants du bloc div pour

//Retrouver tous les span appartenant au div et les rendre rouges

 Il y a quatre façons de faire appel à ce concept :

<div class="contenu" id="mesLiens"> Le contenu

 La méthode val() est équivalente à la propriété value en

Vous aimerez peut-être aussi