// Installer JQuery
Déjà, pour pouvoir utiliser les fonctions très utiles de JQuery, il faut importer la librairie
dans votre document HTML.
Etape 1 : Télécharger la librairie JQuery
C'est un simple fichier texte, avec une extension .js pour signaler qu'il est écrit en
Javascript.
Etape 2 : L'importer dans vos documents
Dans chaque document html où vous souhaitez utiliser JQuery, il faut ajouter dans le
header la balise :
<script language="javascript" src="lib/jquery-1.7.1.min.js"></script>
Si vous importez plusieurs fichiers Javascript dans votre document, commencez par
JQuery, au cas où un des fichiers suivants en aurait besoin pour s'exécuter...
Etape 3 : Mettre en place "l'enveloppe d'exécution"
Le principe, c'est que si on exécute notre code JQuery avant que toute la page soit
chargée, on reste d'essayer d'accéder à des balises (ou des images) qui ne sont pas
encore écrites dans le document...
Pour pallier au problème, on va donc saisir toutes les instructions JQuery dans une
fonction spéciale qui se déclenche seulement une fois que l'ensemble de la page est
chargée.
On doit donc créer le bloc suivant dans le header, après les imports de JQuery et des
autres fichiers Javascript :
< script language="javascript" >
$(document).ready(function(){
// Code Jquery
}) ;
< /script >
Rien n'empêche d'utiliser cette fonction dans un fichier.js séparé, aussi.
// Les sélecteurs JQuery
En fait, les sélecteurs de JQuery sont complètement hérités des sélecteurs CSS, avec en
plus le support des sélecteurs CSS3.
Avec JQuery ça fonctionne très bien, quel que soit le navigateur (s'il a moins de 10 ans,
quoi).
JQuery est une syntaxe "ciblée", on commence donc presque toujours une instruction en
désignant l'élément HTML sur lequel on veut agir.
Comme en CSS, on peut sélectionner 1 ou plusieurs éléments du <body>, et de plusieurs
manières.
Sélecteur JQuery Balises HTML Exemple HTML
ciblées
$('h1') Toutes les balises < h1>...</h 1>
<h1></h1> du
document
$('#truc') La balise unique (de < p id="truc">...</p >
n'importe quel type) ou
dont l'attribut id est < h1 id="truc">,,,</h 1>
"truc"
$('.truc') Toutes les balises de < p class="truc">...</p >
tous types dont < h1 class="titre truc">...</h 1>
l'attribut classe est
"truc"
On peut cumuler les 3 syntaxes pour écrire des chemins plus complexes vers une cible
mieux délimitée :
$('div#article .titre') Sélectionne seulement les balises de classe "titre" à
l'intérieur de la div dont l'id est "article"
$('h1.titre') Sélectionne seulement les h1 de classe titre, mais pas les
h2 de classe "titre" par ex
$('#article .titre a') Sélectionne les liens (balises <a></a>) qui se trouvent
dans une balises de la classe titre, seulement dans la div
dont l'id est "article"
Quelques sélecteurs spéciaux hérités du CSS :
$('a') Tous les liens
$('a:hover') Le style au survol des liens
$('a:visited') Le style des liens déjà visités
Quelques sélecteurs spécifiques de JQuery (hérités du CSS3 ou pas) :
Sélecteur JQuery Balises HTML ciblées Exemple HTML
$(window) La fenêtre dans laquelle
la page s'exécute
$(document) Le document html au
complet, la page dans
son entièreté
$('body') Tout le body du document < body>...</body >
(aussi appelé le DOM du
document)
$('h1:first') Sélectionne la première <h1>...</h1> // celle-ci
balise <h1> rencontrée < h1>...</h 1>
< h1>...</h 1>
$('h1’).first()
$('h1:last') Sélectionne la dernière < h1>...</h 1>
balise <h1> rencontrée < h1>...</h 1>
<h1>...</h1> // celle-ci
$('h1’).last()
$('h1).eq(3) Permet de sélectionner < h1>...</h 1>
un objet spécifique de la < h1>...</h 1>
liste complète des balises < h1>...</h 1>
<h1>.
<h1>...</h1> // celle-ci
La liste commence au
< h1>...</h 1>
numéro 0, eq(3) va donc
< h1>...</h 1>
cibler le 4ème <h1>.
$('h1:contains("Test")') Sélectionne les balises h1 < h1>un truc</h 1>
seulement si elles <h1>le Test n°774</h1> // celle-ci
contiennent le mot "Test" < h1>des bidules</h 1>
$('#truc').parent() Permet d'accéder à la <div> // la div au complet
balise "parente" de la <h1>...</h1>
balise ciblée. <h1 id="truc">...</h1>
$('#truc').parents() Par parente on entend la <h1>...</h1>
balise qui contient la < /div >
balise id="truc"
$('#truc').children()
$('#truc').find('p') Permet de chercher un < div id="truc" >
type de balise à l'intérieur <h1>...</h1>
d'une autre... <h1>
<p>blabla</p> // ça
<p>blabla</p> // et ça
</h1>
<h1>...</h1>
< /div >
$('#truc').siblings()
$('#truc').next() Sélectionne la balise < div> // la div au complet
suivante, après celle <h1>...</h1>
ciblée... en restant au <h1 id="truc">...</h1>
même niveau. <h1>...</h1> // celle-ci
< /div >
$('#truc').prev() Sélectionne la balise <div> // la div au complet
précédente, avant celle <h1>...</h1> // celle-ci
ciblée... en restant au <h1 id="truc">...</h1>
même niveau. <h1>...</h1>
< /div >
// La syntaxe de JQuery
Une fois la cible sélectionnée, on va pouvoir lui appliquer les fonctions proposées par
Jquery, comme par ex :
$('#truc').hide();
Exemple 1
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>Clicquer sur cacher ou afficher ???.</p>
<button id="hide">cacher</button>
<button id="show">afficher</button>
</body>
</html>
Exemple 2 :
$("#btn").click(function(){
$("p").hide(1000);
});
Exemple 3 :
$("#btn").click(function(){
$("p").toggle();
});
Exemple 4 :
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Exemple 5 :
$("#btn").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Exemple 6 :
La méthode fadeTo() de jQuery est utilisée pour changer l'opacité des éléments <div>
avec des animations de différentes durées.
$("#btn").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
Exemple 7 :
<!DOCTYPE html>
<html><head><script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#test").click(function(){
$("#pan").slideUp("slow");
});
});
</script>
<style>
#test, #pan {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#pan {
padding: 50px;
}
</style>
</head>
<body>
<div id="test">Cliquer pour le slide up du panneau</div>
<div id="pan">Slide UP!</div>
</body>
</html>
Exemple 8 :
$("#test").click(function(){
$("#pan").slideToggle();
});
Exemple 9 :
$("#btn").click(function(){
$("div").animate({left: '250px'});
});
Exemple 10 :
$("btn").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Exemple 11 :
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Exemple 12 :
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Exemple 13
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Exemple 14
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Exemple 15 :
Stop() pour arrêter l’animation encours
Stop(true) pour arrêter toutes les animations
$("#stop").click(function(){
$("#pan").stop();
});
// Les fonctions et les familles usuelles de JQuery
Afficher/masquer un bloc
Fonctions JQuery Description Paramètres
.hide() Masque un élément, via (); // instantanné
le css : display:none; ('slow'); // lent
('fast'); // rapide
(2000); // dure 2 sec.
.show() Montre un élément masqué en css ou // idem hide()
en JQuery via hide()
.toggle() si visible -> invisible, // idem hide()
si invisible -> visible
.fadeIn() fondu d'alpha entrant, c'est à dire pour // idem hide()
faire apparaître un bloc
.fadeOut() fondu d'alpha sortant, c'est à dire pour // idem hide()
faire disparaître un bloc
.fadeToggle() si visible -> invisible, // idem hide()
si invisible -> visible
.fadeTo() vers un alpha spécifique, entre 0 et 1 (0.5, 'slow'); // vers 50%
(0, 'slow'); // invisible
.slideDown() effet volet roulant, pour ouvrir // idem hide()
.slideUp() effet volet roulant, pour fermer // idem hide()
.slideToggle() si ouvert -> fermé, // idem hide()
si fermé -> ouvert
.stop() pour arrêter une animation en cours de
route
.scrollTop() pour récupérer ou définir le scroll (); // renvoie le scroll actuel
vertical de la page. (150); // scrolle jusqu'à 150px
c'est le nombre de pixels qui sont
masqués en haut de la page. ce
n'est pas animé.
.scrollLeft() pour récupérer ou définir le scroll (); // renvoie le scroll actuel
horizontal de la page. (150); // scrolle jusqu'à 150px
c'est le nombre de pixels qui sont
masqués en haut de la page. ce
n'est pas animé.
Styles et attributs d'un bloc
Fonctions JQuery Description Paramètres
.css() permet de consulter ou modifier les ({'color':'#FF0000'}); // texte en rouge
attributs CSS de la cible ({ 'color':'#ff0000', 'font-size':'14px'});
// texte en rouge, typo à 14px
('color'); // renvoie la couleur actuelle
.animate() permet de consulter ou modifier les ({ font-size: '14px', width: '300px'}, 500);
attributs CSS de la cible... en // va prendre 0.5 sec pour aller du style
interpolation sur une certaine durée ! actuel aux nouvelles valeurs
.addClass() ajoute une classe CSS au bloc ('test'); // va ajouter test dans l'attribut
sélectionné. class="..."
aucun pb pour avoir plusieurs classes
en même temps.
.removeClass() retire une classe CSS de l'élément ('test'); // le bloc n'a plus la classe test
ciblé, si elle existait. dans son attribut class="..."
.toggleClass()
.hasClass() renvoie true si le bloc est bien associé ('test'); // regarde si le bloc à la classe
à la classe CSS, false sinon test ou pas
.attr() renvoie n'importe quel attribut HTML sur < p id="truc" >
du bloc cible $('p').attr('id'); renvoit "truc"
sur < img src="truc.gif" >
$('img').attr('src'); renvoit "truc.gif"
.width() renvoie la largeur du bloc, en pixels () ;
spécifie la largeur du bloc en pixels (300); // pour avoir un bloc de 300px
.height() renvoie la hauteur du bloc, en pixels () ;
spécifie la hauteur du bloc en pixels (300); // pour avoir un bloc de 300px
.offset() renvoie ou spécifie les coordonnées x ().left; // renvoie x
et y du bloc, en pixels. .left c'est ().top // renvoie y
x, .top c'est y ({top: 10, left: 30}); // pour placer le bloc
à x=10 et y=30 pixels
.important {
font-weight: bold;
font-size: xx-large;
}
.blue {
color: blue;
}
$("btn1").click(function(){
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
$("btn2").click(function(){
$("#div1").addClass("important blue");
});
Exemple 2
$("btn").click(function(){
$("h1, h2, p").removeClass("blue");
});
Exemple 3 :
$("p").css({"background-color": "yellow", "font-size": "200%"});
Gestion des contenus textes
Fonctions JQuery Description Paramètres
.html() renvoie ou spécifie le contenu HTML (); // renvoie le contenu
de la balise ciblée écrase le ('blablabla'); // remplace le contenu par
contenu qui existait "blabla"
auparavant dans le bloc
.append() ajoute du contenu HTML à la fin du ('blabla'); // va ajouter blabla à la fin du
contenu existant texte existant
.prepend() ajoute du contenu HTML au début du ('blabla'); // va ajouter blabla au début
contenu existant du texte existant
.remove() supprime la balise sélectionnée et son
contenu
.empty() supprime le contenu de la balise
sélectionnée, mais pas la balise elle-
même
Exemples :
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended élément</li>");
});
});
$(document).ready(function(){
$("button").click(function(){
$("p").html("Bonjour <b> tout le monde</b>");
});
});
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b> texte au début</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li> Element au debut</li>");
});
});
$(document).ready(function(){
$("button").click(function(){
$("p").remove();
});
});
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
Charger de l'HTML et du Javascript externes
Fonctions JQuery Description Paramètres
.load() récupère le code du document indiqué ('actu.html'); // va injecter actu.html
(html, php, …) et l'injecte directement directement dans la balise ciblée...
dans le bloc ciblé...
écrase le contenu qui existait
auparavant dans le bloc
.getScript() pour charger via Javascript du code $.getScript("js/
Javascript, et l'exécuter aussitôt ! monscript.js"); // va importer
évite d'avoir à insérer une balise monscript.js et l'interpréter
<script src="...">, du coup.
Gestion des formulaires
Fonctions JQuery Description Paramètres
.val() renvoie ou spécifie la valeur du pour <input id="test" name="test"
champ de formulaire input, textarea, type="text" value="blabla" />
select, etc $('#test').val(); // renvoit "blabla"
$('#test').val('blibli'); // change le contenu
de value="..." visible à l'écran
[name="lenom"] un sélecteur qui permet de cibler un <input name="test" type="text"
champ <input> via son attribut value="blabla" />
name="..." sera ciblée par $('input[name="test"]')
:checked un sélecteur pour obtenir seulement $('input:checked') cible seulement les
les checkbox qui ont été cochées input où la case a été cochée
:selected un sélecteur pour obtenir seulement pour
la balise sélectionnée dans un champ < select name="choix" >
list/menu (champ déroulant, quoi) <option value="texte1">
choix 1
</option>
<option value="texte2">
choix 2
</option>
< /select >
Le choix sélectionné est accessible avec
$('select:selected')
.submit() permet de valider un formulaire sans http://api.jquery.com/submit/
cliquer sur le bouton submit
Exemples
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("Hamzaoui ali");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
alert("OK envoyé");
});
});
</script>
</head>
<body>
<form action="" >
Nom: <input type="text" name="nom" value="ALLAOUI"><br>
Prénom: <input type="text" name="pre" value="ali"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<form action=" " method="get">
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Interactivité à la souris
Fonctions JQuery Description Paramètres
.click() permet d'indiquer ce qu'on veut faire $('#truc').click(function(){
quand un clic est constaté sur $(this).hide('slow');
l'élément ciblé // $(this) c'est ici comme $
('#truc') }) ;
.mouseover() permet d'indiquer ce qu'on veut faire $('#truc').mouseover(function(){
quand la souris entre en survol de $(this).hide('slow');
l'élément ciblé // $(this) c'est ici comme $
('#truc') }) ;
.mouseout() permet d'indiquer ce qu'on veut faire $('#truc').mouseout(function(){
quand la souris sort du survol de $(this).hide('slow');
l'élément ciblé // $(this) c'est ici comme $
('#truc') }) ;
.mousedown() permet d'indiquer ce qu'on veut faire $('#truc').mousedown(function(){
au moment où le clic est enfoncé sur $(this).hide('slow');
l'élément ciblé // $(this) c'est ici comme $
équivalent à onPress en ActionScript ('#truc') }) ;
.mouseup() permet d'indiquer ce qu'on veut faire $('#truc').mouseup(function(){
au moment où le clic est relâché sur $(this).hide('slow');
l'élément ciblé // $(this) c'est ici comme $
équivalent à onRelease en ('#truc') }) ;
ActionScript ne cohabite pas bien avec
.click()
.on() permet de récupérer d'autres $(document).ready(function(){
évènements $('#monBouton').on('click', function() {
alert('Bouton cliqué !');
});
});
Interactivité au clavier
Fonctions JQuery Description Paramètres
.keydown() exécute la fonction indiquée au $(window).keydown(function(){
moment ou la touche est enfoncée. // le code Javascript / JQuery
le code s'exécute une fois, même si on // à exécuter
garde la touche enfoncée. }) ;
.keypress() exécute la fonction indiquée au $(window).keypress(function() {
moment ou la touche est enfoncée. le // le code Javascript / JQuery
code est répété ensuite tant que la // à exécuter
touche est enfoncée. }) ;
.keyup() exécute la fonction indiquée au $(window).keyup(function() {
moment ou la touche est relâchée. // le code Javascript / JQuery
// à exécuter
}) ;
.on() permet de récupérer d'autres $(document).ready(function(){
évènements $('#monBouton').on('click', function() {
alert('Bouton cliqué !');
});
});
Evénements de la page
Fonctions JQuery Description Paramètres
.ready() exécute la fonction indiquée dès que $(document).ready(function(){
la page est chargée // le code Javascript / JQuery
// à exécuter
}) ;
.resize() exécute la fonction indiquée à chaque $(window).resize(function() {
fois que la page est redimensionée // le code Javascript / JQuery
// à exécuter
}) ;
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
x = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(x += 1);
});
});
</script>
</head>
<body>
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>
</body>
</html>
