Comment utiliser le Framework jQuery pour créer des sites Web exceptionnels

Formation jQuery pour créer des sites Web exceptionnels
À travers six cours complets en vidéo, accompagnés d'exemples de codes source, apprenez à utiliser le Framework jQuery pour créer des sites Web Performants.
Maîtriser les différentes fonctionnalités comme par exemple les sélecteurs, les filtres, la manipulation du DOM, des attributs, des classes CSS, etc...

Commentez cet article : 4 commentaires Donner une note à l'article (4)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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.

 
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 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: 10px;
		font: 15px Arial, Helvetica, sans-serif;}

.menu { width: 250px;// largeur du menu}

.menu_principal { padding: 10px;
				cursor: pointer;
				position: relative;
				margin:3px;
				font-weight:bold;
				background: #23fe56;
				border: 1px solid black;}

.sous_menu a { display:block;
				color:black;
				background-color:white;
				padding-left:30px;
				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

 
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: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 precedents 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: 15px; 
	   font-family: Arial; }

h1, h2, h3, div { margin: 3px 0;
			 width: 250px; }

li { width: 250px;
     padding-left: 3px;}
</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

 
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: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: 15px; 
	   font-family: Arial; }

h1, h2, h3, div { margin: 3px 0;
			 width: 250px; }

li { width: 250px;
     padding-left: 3px;}
</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.

 
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: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: 250px;
   /*	height:30px;*/
	border: 1px dotted black;
	margin: 10px;}
</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.

 
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: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: 250px;
   	/*height:30px;*/
	border: 1px dotted black;
	margin: 10px;}

.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.

Formation jQuery Facile !
Cliquez simplement ici pour recevoir gratuitement la formation "jQuery Facile" !Cliquez simplement ici pour recevoir gratuitement la formation jQuery Facile !

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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Licence Creative Commons
Le contenu de cet article est rédigé par Développement Facile et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 3.0 non transposé.
Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright © 2013 Developpez.com.