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. Comment le framework JavaScript jQuery peut simplifier votre développement▲
Dans cette vidéo, découvrez une présentation du framework jQuery pour JavaScript.
Accélérez et simplifiez votre développement.
Ci-dessous, l'exemple de code.
<!
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 avant le chargement complet de la page
$(
document
).ready
(
function(
)
{
$(
"div.sous_menu"
).hide
(
);
// accès à la classe div "sous_menu"
// sur click de la souris
$(
"p.menu_principal"
).click
(
function(
)// accès à la classe p "menu_principal"
{
// ouverture du sous-menu enfant de p "menu_principal"
$(
this).next
(
"div.sous_menu"
).slideDown
(
300
).siblings
(
"div.sous_menu"
).slideUp
(
"slow"
);
}
);
}
);
</script>
<style type
=
"text/css"
>
body {
margin:
10
px;
font:
15
px Arial,
Helvetica,
sans-serif
;}
.menu
{
width:
250
px;
/* largeur du menu */
}
.menu_principal
{
padding:
10
px;
cursor:
pointer
;
position:
relative
;
margin:
3
px;
font-weight:
bold
;
background:
#23fe56
;
border:
1
px solid
black
;}
.sous_menu
a {
display:
block
;
color:
black
;
background-color:
white
;
padding-left:
30
px;
text-decoration:
none
;}
.sous_menu
a:
hover
{
color:
#2E2EFE
;
background:
#32eff3
;}
</style>
</head>
<body>
<div>
<div class
=
"menu"
>
<p class
=
"menu_principal"
>
Module 1</p>
<div class
=
"sous_menu"
>
<a href
=
"#"
>
Présentation jQuery</a>
<a href
=
"#"
>
Installation jQuery</a>
<a href
=
"#"
>
Utilisation jQuery</a>
</div>
<p class
=
"menu_principal"
>
Module 2</p>
<div class
=
"sous_menu"
>
<a href
=
"#"
>
Présentation Dojo</a>
<a href
=
"#"
>
Installation Dojo</a>
<a href
=
"#"
>
Utilisation Dojo</a>
</div>
<p class
=
"menu_principal"
>
Module 3</p>
<div class
=
"sous_menu"
>
<a href
=
"#"
>
Applications jQuery</a>
<a href
=
"#"
>
Applications Dojo</a>
<a href
=
"#"
>
Compléments jQuery &
Dojo</a>
</div>
</div>
</div>
</body>
</html>
III. Comment utiliser les sélecteurs du framework jQuery▲
Dans ce cours, apprenez à utiliser les sélecteurs jQuery pour accéder aux éléments de votre page Web.
IV. La technique pour utiliser les filtres de base du framework jQuery▲
Dans cette vidéo, une première introduction aux filtres jQuery et comment les utiliser dans votre code.
Vous verrez comment filtrer les éléments d'une liste et faire un filtre sur les balises div.
Ci-dessous, l'exemple de code
<!
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:first").css("border","2px solid #2E2EFE");// sélectionne le premier élément de la liste
//$("li:last").css("border","2px dashed #01DF3A");// sélectionne le dernier élément de la liste
//$("li:even").css("border","2px groove #DF013A");// sélectionne les éléments pairs de la liste
//$("li:odd").css("border","2px ridge #F5A9BC");// sélectionne les éléments impairs de la liste
//$("li:eq(3)").css("background","#B45F04");// sélectionne le 4e élément
//$("li:gt(2)").css("background","#B45F04");// sélectionne les éléments suivants après le 2e
$(
"li:lt(2)"
).css
(
"background"
,
"#01A9DB"
);
// sélectionne les éléments précédents après le 2e
$(
":header"
).css
(
"border"
,
"3px solid #2E2EFE"
);
// sélectionne toutes les balises de titre de la page.
$(
"div:not(.not_select)"
).css
(
"border"
,
"3px solid #B45F04"
);
// sélectionne tous les blocs div sauf celui avec la classe not_select.
}
);
</script>
<style type
=
"text/css"
>
body {
font-size:
15
px;
font-family:
Arial;
}
h1,
h2,
h3,
div {
margin:
3
px 0
;
width:
250
px;
}
li {
width:
250
px;
padding-left:
3
px;}
</style>
</head>
<body>
<ul>
<li class
=
"un"
>
Module 1</li>
<li class
=
"deux"
>
Module 2</li>
<li class
=
"trois"
>
Module 3</li>
<li class
=
"quatre"
>
Module 4</li>
<li class
=
"cinq"
>
Module 5</li>
</ul>
<h1>Titre du Module 1</h1>
<p>Contenu</p>
<h2>Titre du Module 2</h2>
<p>Contenu</p>
<h3>Titre du Module 3</h3>
<p>Contenu</p>
<div class
=
"not_select"
>
Module 1</div>
<div>Module 2</div>
<div class
=
"not_select"
>
Module 3</div>
<div>Module 4</div>
<div class
=
"not_select"
>
Module 5</div>
</body>
</html>
V. Comment implémenter les filtres enfants du framework jQuery▲
Dans ce cours, apprenez à utiliser les filtres enfants avec l'option "child".
Ci-dessous, l'exemple de code
<!
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:first-child").css("border","3px solid #2E2EFE");// sélectionne le premier élément de la liste
//$("li:last-child").css("background","#2ECCFA");// sélectionne le dernier élément de la liste
//$("ul li:nth-child(2)").css("background","#FE2E2E");// sélectionne le 2e élément
//$("ul li:nth-child(odd)").css("background","#F7FE2E");// sélectionne les éléments impairs de la liste
$(
"ul li:nth-child(even)"
).css
(
"background"
,
"#FA58D0"
);
// sélectionne les éléments pairs de la liste
$(
"p a:only-child"
).css
(
"background"
,
"#FA5882"
);
// sélectionne les balises <a> qui n'ont pas de frère
}
);
</script>
<style type
=
"text/css"
>
body {
font-size:
15
px;
font-family:
Arial;
}
h1,
h2,
h3,
div {
margin:
3
px 0
;
width:
250
px;
}
li {
width:
250
px;
padding-left:
3
px;}
</style>
</head>
<body>
<ul>
<li class
=
"un"
>
Module 1</li>
<li class
=
"deux"
>
Module 2</li>
<li class
=
"trois"
>
Module 3</li>
<li class
=
"quatre"
>
Module 4</li>
<li class
=
"cinq"
>
Module 5</li>
</ul>
<p><a href
=
"#"
>
Chapitre 1</a>
-- <a href
=
"#"
>
Chapitre 2</a>
-- <a href
=
"#"
>
Chapitre 3</a><br /></p>
<p><a href
=
"#"
>
Chapitre 4</a>
- <a href
=
"#"
>
Chapitre 5</a></p>
<p><a href
=
"#"
>
Chapitre 6</a></p>
</body>
</html>
VI. Apprenez à utiliser les filtres de contenu avec le framework jQuery▲
Apprenez à modifier les éléments de contenu de votre page HTML en réalisant des sélections sur les blocs div.
Ci-dessous, l'exemple de code.
<!
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:contains('Facile')").css("background","#01DF3A");// sélectionne les blocs div qui contiennent le texte "Facile".
//$("div:empty").css("background","#B18904");// sélectionne les blocs div vides
//$("div:parent").css("background","#B40404");// sélectionne les blocs div qui ont des éléments enfants
$(
"div:has(p)"
).css
(
"background"
,
"#2E2EFE"
);
// sélectionne les blocs div qui ont un ou plusieurs paragraphes
}
);
</script>
<style type
=
"text/css"
>
div {
width:
250
px;
/* height:30px;*/
border:
1
px dotted
black
;
margin:
10
px;}
</style>
</head>
<body>
<div>Développement Facile <p>tout de suite !</p></div>
<br />
<div>Formation avec suivi <p>individuel</p></div>
<br />
<div></div>
<div>Tout est facile <div>je suis un enfant</div></div>
</body>
VII. Comment utiliser les filtres de visibilité avec le framework jQuery▲
Dans cette vidéo, apprenez à utiliser les filtres de visibilité de jQuery.
Découvrez les attributs visible et hidden.
Ci-dessous, l'exemple de code.
<!
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:visible"
).css
(
"background"
,
"#2ffEFE"
);
// sélectionne les blocs div visibles
$(
"#button_hid_show"
).click
(
function (
)
{
$(
"div:hidden"
).css
(
"background"
,
"#ee58FA"
).show
(
);
// sélectionne les blocs div cachés
}
);
$(
"#button_show"
).click
(
function (
)
{
$(
"div.hidden"
).hide
(
);
// masque les blocs div avec la classe hidden
}
);
}
);
</script>
<style type
=
"text/css"
>
div {
width:
250
px;
/*height:30px;*/
border:
1
px dotted
black
;
margin:
10
px;}
.hidden
{
display:
none
;}
p {
text-align:
center
;}
</style>
</head>
<body>
<p><button id
=
"button_hid_show"
>
Montrer les blocs cachés</button></p>
<p><button id
=
"button_show"
>
Masquer les blocs cachés</button></p>
<div>Développement Facile <p>tout de suite !</p></div>
<br />
<div class
=
"hidden"
>
Formation avec suivi <p>individuel</p></div>
<br />
<div class
=
"hidden"
>
caché</div>
<div>visible</div>
<div class
=
"hidden"
>
caché</div>
<div class
=
"hidden"
>
Tout est facile <div>je suis un enfant</div></div>
</body>
</html>
VIII. Recevez gratuitement la formation "jQuery Facile"▲
Si vous souhaitez aller plus loin dans la création rapide de sites Web performants,
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 Applications Web pour les rendre performantes.
IX. 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.