Où dois-je poser mon $ ?

Index

Entre deux balises "script" : <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" );

Le document ready : $( document ).ready( function(){ ... }); et sa forme abrégèé : $( 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. Nota bene : ces pourcentages sont le résultat d'une estimation très personnelle.

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($){
	// votre code
});

Vous pourrez ainsi continuer à utiliser le symbole $ à l'intérieur de la fonction anonyme.

Tests unitaires avec QUnit.