Le framework jQuery est une bibliothèque logicielle, rapide et concise, conçue pour les programmeurs JavaScript.

• Elle facilite le développement rapide d'applications web.
• Elle simplifie de nombreuses tâches en réduisant la quantité de code que nous avons besoin d'écrire.
• Elle fournit un socle éprouvé de propriétés et de méthodes (parcours et modification du DOM, gestion des événements, effets et animations, transactions asynchrones de plusieurs types avec un serveur) qui procure le même résultat sur tous les navigateurs depuis IE6+.
• Mais elle ne dispense pas le programmeur de l'apprentissage des bases : CSS, HTML, DOM, JavaScript (fonction, événement, objet, JSON).

Le programmeur trouvera sur le web de nombreux modules d'extension, que l'on appelle plugins, qui lui apporteront des solutions dans de nombreux domaines. L'écriture d'un plugin n'est pas une tâche anodine, mais c'est à la portée d'un débutant expérimenté.

Avant de réinventer la roue, le programmeur n'oubliera pas l'existence de l'interface graphique, jQuery UI, et de ses composants, que l'on appelle widgets. Cette interface graphique possède des composants élaborés et flexibles qui répondent à la quasi-totalité des besoins du concepteur de site web.

[jQuery 1.5]

JavaScript

Le langage a été créé en 1995 par Brendan Eich pour le compte de Netscape Communications Corporation.
JavaScript 1.5 : Interpréteur basé sur les spécifications ECMA-262 3e édition.
Le langage actuellement à la version 1.7 est une implémentation du standard ECMA-262.
La version 1.8 est en développement et intégrera des éléments du langage Python.
La version 2.0 du langage est prévue pour intégrer la 4e version du standard ECMA.

Le JavaScript n'est pas né conforme à une norme, il est le résultat d'une lente maturation. C'est dans l'anarchie qu'il fut implémenté dans les différents navigateurs. Les possibilités et les syntaxes évoluant à chaque nouvelle version, version implémentée par certains et ignorée par d'autres. Des biais de sa naissance et de son évolution, JavaScript a gardé une syntaxe permissive et des pratiques diverses.

Les bibliothèques JavaScript

Le but premier est de faciliter l'usage du JavaScript en permettant au développeur de faire abstraction des différentes implémentations du langage et des différents navigateurs sur lequels son code doit fonctionner.

Une bibliothèque JavaScript se doit d'être pérenne, pour atteindre ce but elle doit répondre à plusieurs critères :

• une documentation de qualité ;
• une large communauté offrant un support de qualité ;
• un grand nombre de développeurs doivent l'utiliser quotidiennement ;
• un ratio performances/contraintes favorable ;
• une mise en oeuvre aisée ;
• l'adhésion d'acteurs de premier plan ;
• un grand nombre de plug-ins et de widgets performants doivent être disponibles ;
• le projet doit être porté par une équipe ;
• le projet doit être dynamique et en évolution permanente.

Il existe plusieurs bibliothèques JavaScript qui répondent au but premier et aux critères cités. Certaines veulent principalement faciliter l'usage du JavaScript alors que d'autres souhaitent également simplifier, modifier ou complexifier, au choix, le langage et son modèle objet.

Quoi qu'en pensent certains, le JavaScript est un langage de programmation robuste et expressif. L'avenir lui appartient à la seule condition qu'il se libère de la contrainte des navigateurs obsolètes.

jQuery

Dynamique, en évolution rapide, ses performances et ses possibilités augmentent au fil des versions. Les critiques devraient revoir leurs arguments en fonction de ce qu'il est et deviendra et non en fonction de ce qu'ils en ont vu dans le passé.

Au moment où j'écris, 2011-02-02, nous en somme à jQuery 1.5 et à jQuery UI 1.8.9, que de chemin parcouru par rapport au moment où je l'ai découvert à la version 1.2.6 vers la fin de l'année 2008. Il s'est amélioré sur tous les points et ses widgets ne sont pas en reste.

Le sommaire : http://api.jquery.com/Sommaire

Les pages à lire absolument

• Comment ça marche ? : http://learn.jquery.com/about-jquery/how-jquery-works/Comment ça marche ?
• FAQ : http://learn.jquery.com/using-jquery-core/faq/FAQ
• Tutoriels (certains en français, vers le milieu de la page) : http://learn.jquery.com/Tutoriels
• Une page intitulée "Types" : http://api.jquery.com/Types/Types

L'API jQuery (documentation avec de courts exemples) : http://api.jquery.com/API

Efficacement ! La réponse facile c'est tout !

À savoir les langages CSS, HTML, JavaScript et un langage serveur pour la partie serveur des transactions AJAX. En JavaScript, maîtriser la notation JSONnotation JSON (JavaScript Object NotationJavaScript Object Notation). Un bon niveau en programmation fonctionnelle, en programmation par objets et en programmation événementielle.

On débute bien quelque part ? Oui, mais pas par le jQuery, encore moins par l'écriture d'un plug-in jQuery et encore moins par le jQuery UI !

La réponse difficile : donner un ordre d'importance et le niveau requis.

1. CSS. Un très bon niveau.
   • C'est l'alpha et l'oméga de la compréhension des sélecteurs de jQuery.
   • Tout en jQuery se fait par l'intermédiaire de sélecteurs qui, à l'exception du mot clé this, ne contiennent que du CSS et manipulent le DOM (Document Object ModelDocument Object Model).
     
     
2. HTML. Un bon niveau.
   • Structure d'une page HTML. Appel des fichiers de styles et des fichiers JavaScript.
   • Apprendre à écrire une page web sans utiliser un langage serveur !
   • Il n'y a pas de langage serveur ici ! Une page web, lorsqu'elle est diffusée sur l'Internet ne contient jamais aucune instruction en langage serveur car le serveur les a transformées en code HTML valide, pour autant que vos instructions en langage serveur soient valides ce qui est loin d'être toujours le cas.
     
     
3. JavaScript. Niveau débutant expérimenté.
   • La connaissance des instructions du langage.
   • Le JavaScript manipule le DOM (Document Object ModelDocument Object Model) et jQuery n'est rien d'autre qu'une bibliothèque (framework) JavaScript, donc à connaître.
   • Avoir construit des programmes qui utilisent les fonctions, les objets et les événements.
   • Tout est objet et peut être manipulé comme tel en JavaScript. Savoir comment créer et manipuler un objet et son prototype.
   • Savoir utiliser la notation JSON (JavaScript Object NotationJavaScript Object Notation). Création et manipulation d'objets.
   • Avoir de très bonnes notions en programmation événementielle. Une page web, du point de vue de l'utilisateur, est devenue un endroit où l'on clique à tout propos. Savoir comment répondre aux souhaits de l'utilisateur.
     
     
4. Un langage serveur. Niveau débutant expérimenté.
   • Savoir recueillir et manipuler les données transmises par une requête HTTP XMLHttpRequest.
   • Savoir construire et envoyer la réponse sous forme de données JSON ou XML.

[jQuery 1.6.1]

Il suffit d'inclure dans votre page web un appel au serveur de code de votre choix :

<!-- jQuery (Media Temple) : -->
<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
 
<!-- Google : -->
<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 
<!-- Microsoft : -->
<script charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>

Sur le serveur de code jQuery :

<script charset="utf-8" src="http://code.jquery.com/jquery-X.Y.Z.min.js"></script>

http://code.jquery.com/jquery.js est la dernière version officielle disponible non compressée (minified, abréviation min).
http://code.jquery.com/jquery-X.Y.Z.js est une version précise et non compressée.
http://code.jquery.com/jquery-X.Y.Z.min.js est une version précise et compressée.

Vous avez toujours la possibilité d'enregistrer une version précise sur votre serveur.

jQuery MIT License : http://github.com/jquery/jquery/blob/master/MIT-LICENSE.txtMIT-LICENSE

[jQuery 1.5]

Toujours dans un fichier JavaScript séparé du fichier HTML.

Ne vous laissez pas influencer par les exemples du forum ou d'autres qui placent le code JavaScript dans la page HTML uniquement pour des raisons de concision et de facilité. En production, conserver un fouillis CSS, HTML et JavaScript dans le même fichier est un non-sens du point de vue de la maintenance de votre code.

L'ordre d'incorporation de vos fichiers JavaScript dans la page HTML est d'une importance capitale.

Si vous travaillez comme il se doit en fractionnant votre code JavaScript en modules et composants, vous savez que tel module ou tel composant ne peut fonctionner si tel autre module ou tel autre composant n'est pas chargé le premier. Il en va de même dans le monde jQuery.

Exemple complexe non fonctionnel, utilisant jQuery, jQuery UI, un plug-in et votre fichier monCode.js. N'oubliez pas de renseigner quel codage des caractères a été utilisé pour chaque fichier. À l'ouverture d'un fichier, tout bon IDE doit vous indiquer le codage de caractère qui a été utilisé. Les fichiers du package jQuery UI 1.8.9 sont au format "utf-8".

<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Exemple, non fonctionnel, pour l'incorporation des fichiers jQuery">
	<title>Exemple, non fonctionnel, pour l'incorporation des fichiers jQuery</title>
	<base href="http://localhost/MonSiteWeb/">
	<link rel="stylesheet" type="text/css" href="lib/jqueryui/css/humanity/jquery-ui-1.8.9.custom.css">	
	<link rel="stylesheet" type="text/css" href="style/monStyle.css">
</head>
<body>
	<div id="conteneur">
		<p>Un mot pour remplir.</p>
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script charset="utf-8" src="lib/jqueryui/js/jquery-ui-1.8.9.custom.min.js"></script>
	<script charset="utf-8" src="lib/plugin-dvjh/jquery.dvjhBBCodeTextarea-1.3.2.js"></script>
	<script charset="utf-8" src="js/monCode.js"></script>
</body>  
</html>

Contrairement à d'autres frameworks, jQuery propose un gestionnaire d'évènements qui détermine précisément quand le DOM est fonctionnel. Il s'apparente au onload qui vérifie que tous les éléments d'une page sont chargés.

Dans l'exemple ci-dessous, l'alerte se lancera lorsque le DOM sera entièrement parsé :

$(document).ready(function(){
    alert('Dom est prêt!');
});

Cela vous permet de savoir quand vous pouvez effectivement manipuler l'arbre DOM. On ne parle bien entendu pas des images et d'autres éléments qui apparaissent après.

[jQuery 1.4.2]

Entre deux balises :

<script> $ </script>

Le symbole $ est la forme abrégée du mot clé jQuery. Ces deux lignes de code sont équivalentes :

$("p").css("color", "red");
 
jQuery("p").css("color", "red");

$(document).ready(function(){ ... });

a pour forme abrégée

$(function(){ ... });

Cette fonction anonyme sera exécutée dès que la structure du DOM de la page web aura été construite. Dans 98 % des cas, c'est le bon endroit pour vos appels de codes jQuery et vos instructions événementielles.
Dans 2 % des cas, il faut attendre la fin de la construction et de l'affichage de la page web. L'exemple d'utilisation le plus courant est le lancement d'une animation qui dépend du bon affichage de tous les éléments (principalement les images) de la page web.
On utilise alors

$(window).load(function(){ ... });

qui n'a pas de forme abrégée.

Ces pourcentages sont le résultat d'une estimation très personnelle.

On écrira donc, par exemple :

function ajoute(i, j){
	return i + j;
}
 
$(function(){
	$("body").append("<p id='pID'>ajoute(3, 4) = " + ajoute(3, 4) + "</p>");
 
	$("p").mouseenter(function(){
		$(this).css("color", "red");
	});
 
	$("p").mouseleave(function(){
		$(this).css("color", "black");
	});
});

S'il vous prend l'idée bizarre d'utiliser plus d'une bibliothèque JavaScript en même temps, il faut écrire :

jQuery.noConflict();
 
jQuery(function($){ ... });

Vous pourrez ainsi continuer à utiliser le symbole $ à l'intérieur de la fonction anonyme.
Pour vos autres codes jQuery, vous pouvez les placer dans une clôture jQuery :

(function($){ ... })(jQuery);

Exemple :

// cette clôture jQuery ayant normalement sa place dans un fichier JavaScript
(function($){
	ajoute = function(i, j){
		return i + j;
	}
 
	modifie = function(id){
		var obj = $("#"+id);
 
		obj.css("color", "black");
	};
})(jQuery);
 
jQuery.noConflict();
 
jQuery(function($){
	$("body").append("<p id='pID'>ajoute(3, 4) = " + ajoute(3, 4) + "</p>");
 
	$("p").mouseenter(function(){
		$(this).css("color", "red");
	});
 
	$("p").mouseleave(function(){
		modifie(this.id);
	});
});