I. Introduction▲
jQuery est une bibliothèque très complète pour JavaScript. Elle vous permettra de faciliter l'écriture de script dans le code HTML des de vos pages Web.
Cette bibliothèque comprend, entre autres, le parcours et la modification du DOM, la gestion des événements, la manipulation des feuilles de style, la gestion des plugins, AJAX et des utilitaires.
Apprenez à intégrer cette bibliothèque, en utilisant une méthode de formation structurée, pas à pas et orientée pratique.
Avec la méthode "Développement Facile", vous allez apprendre à développer des sites Web exceptionnels, que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite "jQuery Facile", composée de plus de 30 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du jQuery.
Téléchargez le framework jQuery, iciTéléchargez le Framework jQuery, ici
II. Comment utiliser les événements avec le framework jQuery▲
Dans cette vidéo, apprenez à gérer facilement la partie événementiel de JavaScript grâce à jQuery.
Découvrez comment gérer les clics et les survols de souris, les pertes de focus, etc.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery</title>
<meta charset="UTF-8">
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("div.div_menu").click(function () // clic sur une balise div avec la classe div_menu
{
$(this).slideUp();// masque la div
});
$("div.div_menudb").dblclick(function () // double-clic sur une balise div avec la classe div_menu
{
$(this).slideUp();// masque la div
});
$("input#mail").focus(function () // l'utilisateur met le focus sur le champ input avec un id mail
{
$(this).val("obligatoire");
});
$("input#mail").blur(function () // perte du focus sur le champ input avec un id mail
{
$(this).css({"background-color":"#81F781"});// ajoute une couleur de fond
$("p:first").append(" OK");// ajoute la mention ok dans le paragraphe
});
$("textarea").scroll(function () // utilisation de la barre de défilement
{
$("span").css({"display": "inline"}).fadeOut("slow");
});
$("input#click_here").mousedown(function()
{
$("#sortie").append("mousedown<br />");
});
$("input#click_here").mouseup(function()
{
$("#sortie").append("mouseup<br />");
});
$("input#click_here").click(function()
{
$("#sortie").append("click<br />");
});
});
</script>
<style type="text/css">
.div_menu, .div_menudb, .div_normal { width: 100px;
height: 100px;
margin: 5px;
float: left;
font-family: Arial;
background-color:#81F781;}
span { display:none;}
</style>
</head>
<body>
<div class="div_menu">Module 0</div>
<div class="div_menu">Module 1</div>
<div class="div_menu">Module 2</div>
<div class="div_menudb">Module 10</div>
<div class="div_menu">Module 11</div>
<div class="div_menudb">Module 12</div>
<br /><br /><br /><br /><br /><br />
<p>Votre Mail : <input id="mail" type="text" value="" /></p>
<p>Faites défiler le texte...</p>
<textarea cols="28" rows="5">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed non risus. Lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras
elementum ultrices diam. Maecenas ligula massa, varius a, semper
congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl sit amet
erat. Duis semper.</textarea>
<p><span>Vous utilisez la barre de défilement !</span></p>
<p><input type="button" id="click_here" value="Cliquez ici" /></p>
<div id="sortie" class="div_normal"></div>
</body>
</html>
III. La technique pour écouter les événements avec le framework jQuery▲
Cette vidéo est la suite du cours précédent consacré aux événements en jQuery.
Apprenez à valider rapidement un formulaire sans recharger la page.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery</title>
<meta charset="UTF-8">
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("div#mouse").mousemove(function(e)// souris au-dessus de la balise div avec id mouse
{
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
$("span#mousep").text("Position du curseur : " + pageCoords);
});
$("div#mouse").mouseout(function(e)// la souris n'est plus au-dessus de la balise div avec id mouse
{
$("span#mousep").text("");// modifie le texte de la balise span avec id mouse
});
/*$("div#mouse_over").mouseenter(function()
{
$(this).css({"background-color":"#F79F81"});
$("span#mousep").text("mouseenter");
})
$("div#mouse_over").mouseleave(function()
{
$(this).css({"background-color":"#610B0B"});
$("span#mousep").text("mouseleave");
});*/
$("div#mouse_over").mouseover(function()
{
$(this).css({"background-color":"#F79F81"});
$("span#mousep").text("mouseover");
})
$("div#mouse_over").mouseout(function()
{
$(this).css({"background-color":"#610B0B"});
$("span#mousep").text("mouseout");
});
$("form").submit(function()// appel lors de la validation du formulaire
{
if ($("input#mot_de_passe").val() == "facile")
{
return true;// la validation du formalire est effectuée
}
$("span#mousep").html("<b>Mot de passe non valide.</b><br />Recommencez!").show();
return false;// stoppe la validation du formulaire
});
});
</script>
<style type="text/css">
.div_menu, .div_over { width: 300px;
height: 300px;
margin: 5px;
float: left;
font-family: Arial;
background-color:#81F781;}
p { margin-left:10px; }
span { display:block; }
</style>
</head>
<body>
<p>Survolez la division avec la souris.</p>
<div id="mouse" class="div_menu"></div>
<div id="mouse_over" class="div_over"></div>
<span id="mousep"> </span>
<p>Entrez votre identifiant pour accéder au site.</p>
<form action="javascript:window.location.href='http://www.programmation-facile.com/';">
<div>
<input type="password" id="mot_de_passe" size="30" />
<input type="submit" />
</div>
</form>
</body>
</html>
IV. La méthode de gestion avancée des événements avec le framework jQuery▲
Dans cette troisième vidéo sur les événements avec jQuery, apprenez les fonctionnalités avancées.
Ci-dessous, l'exemple de code.
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery</title>
<meta charset="UTF-8">
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// associe un événement au passage de la souris sur la balise div avec l'id back_over
$("div#back_over").bind("mouseenter mouseleave", function(e)
{
$(this).toggleClass("over");// ajoute / supprime la classe over
});
$("button#one_clic").one("click", function()// clic sur le bouton
{
$("div#response").html("<b>Inutile de cliquer encore !</b>");
});
$("input#check").bind("click", function()// associe une alerte pour un clic sur la case à cocher
{
alert("Checkbox cliquée");
});
$("a#check_a").bind("click", function()
{
$("input#check").trigger("click");// renvoie sur la fonction clic sur la case à cocher
return false;
});
$("p.add_p").on("click", function()// ajoute une fonction sur le clic
{
console.log("clic ici");// le debug
$(this).after('<p class="add_p">Ajout d\'un nouveau paragraphe</p>');
});
});
</script>
<style type="text/css">
.div_menu { width: 300px;
height: 300px;
margin: 5px;
float: left;
font-family: Arial;
cursor:pointer;}
p { cursor:pointer;
padding-left:20px;}
div.over { background: #81F781;}
p.add_p { width: 250px;
background: #FA5858;
cursor: pointer;
padding-left: 5px;
margin : 7px 0 7px 0;}
</style>
</head>
<body>
<h3>Paragraphe</h3>
<div id="back_over" class="div_menu">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié.</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
1 seul clic est permis<br />
<button id="one_clic">C'est parti !</button>
<div id="response" class="div_over"></div>
<br /><br />
<p><input type="checkbox" id="check" />Cochez la case</p>
<p><a href="#" id="check_a">Active / Désactive le clic sur le checkbox</a></p>
<br /><br />
<p class="add_p">Cliquez-moi !</p>
</body>
</html>
V. Comment implémenter les méthodes du framework jQuery▲
Dans ce cours vidéo, découvrez quelques méthodes utiles en jQuery.
Vous verrez les méthodes hover et toggle.
Dans l'exemple ci-dessous, remplacez image1.png et image2.png par vos propres images de test
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery</title>
<meta charset="UTF-8">
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("img#hover_t").hover(function ()// souris au dessus de la balise img avec un idi hover_t
{
this.src = "image1.png";// modifie l'URL de l'image
},function ()
{
this.src = "image2.png";
});
$("div#div_j").click( function ()
{
$( "div#div_j" ).toggle( "slow" );// fais disparaître l'élément div
$(this).css({"background-color": "#F7D358","text-align": "right"});
//$(this).css({"background-color": "#31B404", "text-align": "left"});
});
});
</script>
<style type="text/css">
.image { position: absolute;
top: 10px;
left: 10px;}
#div_j { width: 350px;
height: 360px;
cursor: pointer;
border: 1px solid #81F781;
padding-left: 10px;
padding-right: 10px;}
</style>
</head>
<body>
<div class="image">
<img id="hover_t" src="14-logo-dev-facile.png" />
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="div_j">Le Framework jQuery</div>
</body>
</html>
VI. Comment ajouter des effets d'animations avec le framework jQuery▲
Dans cette vidéo, apprenez à ajouter des animations sur votre page Web.
Ci-dessous, l'exemple de code
Sélectionnez
<!DOCTYPE html>
<html lang="fr">
<head>
<!--
/**
The Initial Developer of the Original Code is
Matthieu - http://www.programmation-facile.com/
Portions created by the Initial Developer are Copyright (C) 2013
the Initial Developer. All Rights Reserved.
Contributor(s) :
*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-->
<title>jQuery</title>
<meta charset="UTF-8">
<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
/**
* Appel de jQuery à la fin du chargement de la page
* @return {[type]} [description]
*/
$(document).ready(function()
{
var $oSuiteParagraphe = $("p:eq(1)");// le 2e paragraphe est chargé dans la variable $oSuiteParagraphe
$oSuiteParagraphe.hide(); // masque le 2e paragraphe
$("a.suite").click(function()// lors du clic sur le lien
{
// si le 2e paragraphe est masqué ?
if ($oSuiteParagraphe.is(":hidden"))
{
$oSuiteParagraphe.show("slow"); // affiche le 2e paragraphe avec un effet lent
$(this).text("Lire moins <");// modifie le texte du lien
}
else
{
$oSuiteParagraphe.hide("slow");// masque le 2e paragraphe avec un effet lent
$(this).text("> Lire la suite...");// modifie le texte du lien
return false;
}
});
$("li:has(ul)").click(function()// lors du clic sur un élément de liste (<li>) qui possède une liste imbriquée (<ul>.
{
// Si les listes imbriquées de cet élément sont cachées, l'image est changée en 15-moins.png et les listes sont affichées
if ($(this).children().is(":hidden"))
{
$(this).css("list-style-image","url(15-moins.png)")
.children().show();
}
// Sinon, l'image 15-plus.png est affichée et les listes imbriquées sont cachées.
else
{
$(this).css("list-style-image","url(15-plus.png)")
.children().hide();
}
return false;
})
.css("cursor","pointer").click();// la forme du curseur de la souris
// si l'élément ne possèdepas de liste imbriquée alors la forme du curseur reste par défaut
$("li:not(:has(ul))").css({cursor: "default","list-style-image":"none"});
});
</script>
<style type="text/css">
body{
font-family: Arial;
}
.div_j { width: 350px;
height: 160px;
border: 2px solid #FE2E2E;
padding-left: 10px;
padding-right: 10px;}
a { color: ##08088A;
font-weight: bold;
text-decoration: none;}
</style>
</head>
<body>
<h2>Lorem Ipsum</h2>
<p class="div_j">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.</p>
<p class="div_j"> Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker</p>
<div><a href="#" class="suite">> Lire la suite...</a></div>
<ul>
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3
<ul>
<li>Chapitre 3.1</li>
<li>Chapitre 3.2
<ul>
<li>Exercices 3.2.1</li>
<li>Exercices 3.2.2</li>
<li>Exercices 3.2.3
<ul>
<li>Solutions 3.2.3.1</li>
<li>Solutions 3.2.3.2</li>
<li>Solutions 3.2.3.3</li>
<li>Solutions 3.2.3.4</li>
<li>Solutions 3.2.3.5</li>
</ul>
</li>
</ul>
</li>
<li>Chapitre 3.3</li>
<li>Chapitre 3.4
<ul>
<li>Exercices 3.4.1</li>
<li>Exercices 3.4.2</li>
<li>Exercices 3.4.3</li>
</ul>
</li>
</ul>
</li>
<li>Module 4
<ul>
<li>Chapitre 4.1</li>
<li>Chapitre 4.2
<ul>
<li>Exercices 4.2.1</li>
<li>Exercices 4.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Module 5</li>
</ul>
</body>
</html>
VII. Recevez gratuitement la formation "jQuery Facile"▲
Si vous souhaitez aller plus loin dans la création de sites Web exceptionnels,
vous pouvez recevoir gratuitement la formation "jQuery Facile" avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques sous chaque cours.
Vous allez ainsi découvrir comment utiliser le framework jQuery et l'intégrer à vos pages Web pour les rendre exceptionnelles.
Cliquez simplement ici pour recevoir gratuitement la formation "jQuery Facile" !Cliquez simplement ici pour recevoir gratuitement la formation jQuery Facile !
VIII. Remerciements▲
Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jacques Jeanjacques_jean pour sa relecture orthographique.
