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 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. La méthode pour manipuler les attributs HTML avec le framework jQuery partie 1▲
Dans cette vidéo, apprenez à sélectionner et manipuler les attributs HTML de votre page directement en JavaScript, grâce à jQuery.
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()
{
//$("li[class]").css("background", "#5858FA").show();// sélectionne les blocs li avec une classe
//$("li[class='gras']").css("background", "#5858FA").show();// sélectionne les blocs li avec une classe nommée gras
//$("li[class!='gras']").css("background", "#5858FA").show();// sélectionne les blocs li sans classe et ceux avec une classe différente de gras
//$("li[class^='ok_']").css("background", "#5858FA").show();// sélectionne les blocs li avec une classe qui commence par ok_
//$("li[class$='_user']").css("background", "#5858FA").show();// sélectionne les blocs li avec une classe se terminant par _user
//$("li[class*='dev']").css("background", "#5858FA").show();// sélectionne les blocs li avec une classe dont la valeur contient dev
$("li[id][class$='user']").css("background", "#5858FA").show();// sélectionne les blocs li avec un identifiant id et dont la classe se termine par user
});
</script>
<style type="text/css">
li { width: 250px;}
.gras { font-weight: bold;
font-family: Arial; }
</style>
</head>
<body>
<ul>
<li id="1" class="ok_grasdev_user">Module 1</li>
<li class="gras">Module 2</li>
<li >Module Surprise</li>
<li id="2" class="ok_devother">Module 3</li>
<li class="gras">Module 4</li>
<li id="3" class="other_user">Module 5</li>
<li id="4" >Module bonus</li>
</ul>
</body>
</html>
III. La méthode pour manipuler les attributs HTML avec le framework jQuery partie 2▲
Allez plus loin dans la manipulation des attributs HTML grâce à cette vidéo.
Découvrez comment ajouter ou modifier une classe CSS
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()
{
$("p.hidden").toggleClass("hidden_elts");// affiche ou masque l'élément selon sa valeur
// Au survol de la souris, le script jQuery ajoute un arrière-plan uniquement pour les paragraphes avec la classe user.
$("div").mouseover(function()// au passage la souris
{
if ( $(this).hasClass("user") )
$(this).addClass("back");// ajoute la classe back au div survolé par la souris
else
$(this).addClass("back_mini");// ajoute la classe back_mini au div survolé par la souris
});
$("div").mouseout(function()// la souris ne survole plus l'élément div
{
if ( $(this).hasClass("user") )
$(this).removeClass("back");// supprime la classe back au div survolé par la souris
else
$(this).removeClass("back_mini");// supprime la classe back au div survolé par la souris
});
$("a").click(function()// au clic de la souris sur la balise a
{
$("p.hidden").toggleClass("hidden_elts");// affiche ou masque l'élément selon sa valeur
});
});
</script>
<style type="text/css">
div { width: 250px;
height: 35px;
line-height: 35px;
vertical-align: middle;
text-align: center;
font-family: Arial;
cursor: pointer;}
.back { background-color: #5858FA;
border: 2px solid #81F781;
font-size: 26px;}
.back_mini { background-color: #81F781;
border: 2px solid #5858FA;
font-size: 17px;}
.hidden_elts { display: none;}
</style>
</head>
<body>
<div class="user">Module 1</div>
<div>Module 2</div>
<div class="user">Module 3</div>
<div>Module 4</div>
<div>Module 5</div>
<p><a href="#">Afficher / Masquer</a></p>
<p class="hidden">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é. 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>
<p>Suite du chapitre...</p>
</body>
</html>
IV. La méthode pour manipuler les attributs HTML avec le framework jQuery partie 3▲
Dans cette vidéo, vous allez continuer à apprendre à manipuler les attributs.
Vous verrez comment retrouver, ajouter, modifier ou supprimer un attribut.
Dans l'exemple de code ci-dessous, remplacez image_suivante.png et image_initiale.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()
{
$("button#search").click(function()// clic sur le bouton avec id search
{
var css = $("span").attr("style");// récupère le style de la balise span
$("div#div1").text(css);// affiche le style dans la balise div
});
$("button#grow").click(function()// clic sur le bouton avec id grow
{
$("table").attr("width","250px");// ajoute le style width
});
$("a#picture").click(function()// au clic sur le lien
{
$("img").attr({ src: "image_suivante.png",
alt: "Logo Dev Facile",
title: "Developpement Facile"
});
});
$("a#disabled").click(function()// au clic sur le lien
{
$("div").removeAttr("style");// enlève le style
});
$("button#search_value").click(function()// clic sur le bouton avec id search_value
{
var choix = $('input:radio:checked').val(); // récupère la valeur choisie par l'utilisateur
$("div#div4").text(choix);
});
$("input#valid").click(function(){// clic sur le bouton
$("input#valid").val("Vous avez déjà fait une demande !");
});
});
</script>
<style type="text/css">
div { width: 300px;
height: 35px;
line-height: 35px;
vertical-align: middle;
text-align: center;
font-family: Arial;
border: 2px dotted #5858FA;}
table { border-collapse: collapse;
border: 5px solid #5858FA;}
td { text-align: center;
border: 2px solid #81F781;}
div#div3 { width: 300px;
height: 200px;}
</style>
</head>
<body>
<p><button id="search">Chercher</button></p>
<p>
jQuery est un framework <span style="font-style:italic;font-weight:bold">JavaScript</span> génial !
</p>
Le style de la balise <span> est :<div id="div1"></div>
<p><button id="grow">Agrandir le tableau</button></p>
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
</table>
<p><a href="#" id="picture">Image suivante</a></p>
<p>
<img src="image_initiale.png" alt="Logo jQuery"/>
</p>
<p><a href="#" id="disabled">Désactiver le style</a></p>
<div id="div3" style="background-color: #8A0886; border: 2px solid #DBA901;
color: white; font-weight: bold;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed non risus. Suspendisse lectus
tortor, dignissim sit amet, adipiscing nec, ultricies sed,
dolor.</div>
<form action="">
<input type="radio" name="1" value="ActionScript 3" />ActionScript 3<br />
<input type="radio" name="1" value="PHP" />PHP<br />
<input type="radio" name="1" value="JavaScript" />JavaScript<br />
<input type="radio" name="1" value="C++" />C++<br />
<input type="radio" name="1" value="HTML5" />HTML5<br />
<input type="radio" name="1" value="CSS3" />CSS3
</form>
<p>Votre choix est :
<button id="search_value">Chercher</button></p>
<div id="div4" ></div>
<form action="">
<p>Votre commande : <input type="text" id="input1" value="Obligatoire" /></p>
<p><input type="submit" id="valid" value="Une seule demande par utilisateur" /></p>
</form>
</body>
</html>
V. Comment modifier le style CSS avec le framework jQuery▲
Dans cette vidéo, vous allez apprendre à modifier le style CSS de votre page, grâce à jQuery
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()
{
$("#div1").click(function ()// clic sur la div identifiée par div1
{
var couleur = $(this).css("background-color");
$("#resultat").html("La couleur est <span>" + couleur + "</span>.");
});
$("#div2").click(function () // clic sur la div identifiée par div2
{
var hauteur = $(this).css("height");
$("#resultat").html("La hauteur du div est <span>" + hauteur + "</span>.");
});
$("#div3").click(function () // clic sur la div identifiée par div3
{
var visibility = $(this).css("visibility");
$("#resultat").html("La visibilité est <span>" + visibility +"</span>.");
});
$("div.div_over").mouseover(function ()
{
$(this).css({"background-color":'#5858FA', "font-style":'italic'});
});
$("div.div_over").mouseout(function ()
{
$(this).css({"background-color" : "", "font-style" : ""});
});
$("div#bloc1").mouseover(function () // passage de la souris au dessus du div identifié par bloc1
{
$(this).css("z-index","10");
});
$("div#bloc1").mouseout(function () // passage de la souris en dehors du div identifié par bloc1
{
$(this).css("z-index","");
});
$("div#double").mouseover(function ()
{
hauteur=$(this).height()
largeur=$(this).width()
$(this).height(hauteur*2).width(largeur*2);
});
$("div#double").mouseout(function ()
{
hauteur=$(this).height()
largeur=$(this).width()
$(this).height(hauteur/2).width(largeur/2);
});
$("#go").click(function ()
{
$("div.demo").scrollTop(300);
});
$("#reset").click(function ()
{
$("div.demo").scrollTop(0);
});
});
</script>
<style type="text/css">
.div_menu { width: 100px;
height: 100px;
margin: 5px;
float: left;
font-family: Arial;
background-color:#81F781;}
.div_over{width:250px;
border: 2px solid #5858FA;
font-family: Arial;}
#bloc1 { position: absolute;
left: 20px;
top: 250px;
width: 180px;
height: 150px;
padding: 4px;
border: 2px solid black;
font-family: Arial;
background-color: #5858FA;}
#bloc2 { position: absolute;
left: 150px;
top: 230px;
width: 80px;
height: 50px;
padding: 4px;
border: 2px solid black;
font-family: Arial;
background-color: #81F781;}
.demo { width: 200px;
height: 200px;
float: left;
font-family: Arial;
overflow: auto}
</style>
</head>
<body>
<div id="div1" class="div_menu"></div>
<div id="div2" style="border: 3px solid #5858FA;" class="div_menu"></div>
<div id="div3" style="visibility: visible;" class="div_menu"></div>
<br /><br />
<br />
<div style="clear: left;" id="resultat">Résultat </div>
<br />
<div class="div_over">Survoler ce texte avec le curseur.</div>
<div class="div_over">Idem que pour le texte précédent.</div>
<div id="bloc1">Module 1</div>
<div id="bloc2">Module 2</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="double" class="div_menu">Hello !</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<button id="go">Allez au paragraphe 2</button>
<button id="reset">Reset</button>
<br /><br />
<div class="demo">
<p><span>Paragraphe 1</span> Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer id semper enim. Vestibulum
metus felis, elementum sit amet tristique non, pulvinar vitae
metus. Pellentesque interdum, felis non placerat volutpat, nisi
justo eleifend magna, at tincidunt massa velit non dolor</p>
<p><span>Paragraphe 2</span> In sem velit, placerat vel vestibulum
vel, interdum at tortor. Suspendisse vitae metus sem, ut venenatis
eros. Sed iaculis dapibus diam, in tempor eros tincidunt in. Ut id
vestibulum risus. Integer eu mauris at odio pharetra convallis.
In sem velit, placerat vel vestibulum vel, interdum at tortor.
Suspendisse vitae metus sem, ut venenatis eros. Sed iaculis
dapibus diam, in tempor eros tincidunt in. Ut id vestibulum risus.
Integer eu mauris at odio pharetra convallis.</p>
</div>
</body>
</html>
VI. 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 !
VII. 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.
