jQuery est l'un des framework javascript les plus populaires sur internet. Il va vous permettre de réaliser vos propres traitement javascript de manière simple et rapide. jQuery est utilisé en natif sur les sites Drupal ainsi que sur les boutiques Zlio. Si vous utilisez une de ces deux technologies pour votre site, vous n'aurez aucune installation à faire. Dans les autres cas, la rubrique installation vous décrira les étapes à effectuer pour pouvoir utiliser jQuery sur votre site.
Pour bien comprendre tous les exemples du guide, il est nécessaire de connaître les bases du langage HTML ainsi que les styles CSS. Il peut être également utile d'avoir un environnement de développement web efficace, dans ce domaine nous vous conseillons fortement l'utilisation du navigateur Mozilla FireFox avec son plugin FireBug qui vous permettra de "debugger" c'est à dire de suivre en pas à pas l'exécution de votre code JavaScript .
La première chose à faire pour installer jQuery, c'est de récupérer la bibliothèque sur le site officiel jquery.com. Sélectionnez la version de production (qui pèse seulement 24KB) puis cliquez sur le gros bouton "Download jQuery". Le fichier "jquery-1.4.2.min.js" (la version est susceptible d'évoluer) s'affiche alors dans votre navigateur. Il ne vous reste plus qu'à sauvegarder le fichier sur votre ordinateur en sélectionnant Fichier/Enregistrer sous (ou en cliquant sur les touches Ctrl+S).
La librairie JavaScript jQuery se charge au niveau de votre balise <head>, c'est à dire dans l'entête de votre page HTML.
Voici un exemple si votre fichier "jquery-1.4.2.min.js" est situé dans le même répertoire que votre page HTML :
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <title>Ma page HTML</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> </head> <body> .... le contenu de la page HTML </body> </html>
Attention l'attribut "src" permet de définir le chemin d'accès au fichier javascript "jquery-1.4.2.min.js". Si vous avez placez ce fichier dans un répertoire différent de votre page HTML, il faudra indiquer le chemin complet comme dans l'exemple :
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr"> <head> <title>Ma page HTML <script type="text/javascript" src="nomrepertoire/jquery-1.4.2.min.js"></script> </head> <body> .... le contenu de la page HTML </body> </html>
Avant de débuter avec jQuery, il faut installer le fichier jquery.js sur son ordinateur. Une fois l'installation terminée, nous pourrons commencer à découvrir petit à petit les formidables possibilités de ce framework JavaScript.
Pour bien commencer et suivre notre guide au fur et à mesure vous pouvez créer votre propre page de test comme suit :
<!DOCTYPE html> <html> <head> <title>Ma première page HTML - jQuery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> // notre code javascript sera ajouté ici // Attention le code javascript doit toujours être ajouté entre des balises script </script> </head> <body> <!-- notre code HTML sera ajouté ici --> </body> </html>
Avant d'exécuter du JavaScript, il faut s'assurer que les éléments de la page ont terminé d'être chargés (on parle de Document Ready). En effet le JavaScript permet de manipuler les éléments HTML mais si vous essayez de manipuler un élément qui n'est pas encore chargé votre code risque de tomber en erreur en vous indiquant qu'il n'a pas trouvé l'élément. Heureusement jQuery vous fournit une fonction ready() qui permet de savoir le plus tôt possible quand la page est prête pour le JavaScript. Insérons le code correspondant dans la zone JavaScript de notre page HTML:
$(document).ready(function(){
// vous pouvez exécuter du code JavaScript ici car la page HTML est prête...
});
Pour l'instant notre page ne fait pas grand chose, nous allons donc ajouter un peu d'animation à tout ça. Pour cela nous utiliserons la fonction JavaScript alert() qui permet d'afficher un message à l'aide d'une popup. Remplaçons la ligne de commentaire précédente pour obtenir le code suivant :
$(document).ready(function(){
alert("Le JavaScript et jQuery c'est vraiment génial !! ");
});
Très bien, nous avons réussi à créer notre première fonctionnalité JavaScript. Essayons maintenant d'interagir avec l'utilisateur de la page HTML
L'un des principaux intérêts du JavaScript c'est de pouvoir exécuter un traitement en réponse à un événement utilisateur comme un clic ou un survole de souris. Cela permet à votre page HTML de devenir plus interactive et plus ergonomique. Avec jQuery rien de plus simple, il suffit de remplacer le code JavaScript et le code HTML précédent par les exemples ci-dessous :
$(document).ready(function(){
$("#demo1 a").click(function(){
alert("Vous venez de cliquer sur "+ $(this).html());
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#demo1 a").click(function(){
alert("Vous venez de cliquer sur "+ $(this).html());
return false;
});
});
</script>
</head>
<body>
<div id="demo1">
<div id="div1">
<h1>Ma page HTML pour tester jQuery</h1>
<p>Entete de ma page avec un <a href="#">lien 1</a></p>
</div>
<div id="div2">
<p>Contenu de ma page avec un <a href="#">lien 2</a></p>
</div>
<div id="div3">
<p>Pied de page avec un <a href="#">lien 3</a></p>
</div>
</div>
</body>
</html>
Voilà nous venons donc, très simplement et avec peu de code, d'associer un traitement lors du clic sur chacun des liens de notre page. Analysons ensemble ce code jQuery. Nous pouvons remarquer l'utilisation de 3 fonctions jQuery, les fonctions $(), click() et html().
La fonction $() (écriture simplifiée de la fonction jQuery()) représente la fonction principale du framework jQuery. Cette fonction vous permet notamment de récupérer un élément de votre page HTML en fonction de sélecteurs CSS (la même syntaxe que dans vos styles CSS). De plus la fonction $() ajoute de nouvelles propriétés à l'élément récupéré, on dit qu'elle étend les fonctionnalités de base de l'objet pour pouvoir le manipuler plus facilement. Dans notre exemple, nous avons :
$("#demo1 a")
La fonction $() va alors nous récupérer tous les éléments HTML de la page qui vérifient le sélecteur CSS à savoir toutes les balises de type a (lien) qui sont contenues dans l'élément dont l'attribut "id" est égal à "demo1". Dans notre exemple, la fonction nous ramène donc une liste de trois éléments HTML correspondant aux liens 1, 2 et 3. Ensuite, de manière transparente, jQuery applique la fonction click() à chaque élément récupéré. Nous utilisons le terme transparent car vous n'avez pas à vous soucier du fait que la fonction ramène un ou plusieurs éléments, jQuery s'occupe de ça pour vous. Vous pouvez par exemple changer le sélecteur pour récupérer uniquement le lien 2 dans le contenu de la page et tester que seul ce lien ouvre une popup alert :
$("#demo1 #div2 a")
$("#demo1 a").click(function(){
alert("Vous venez de cliquer sur "+ $(this).html());
return false;
});
Il est important de noter l'utilisation de l'objet this qui représente l'élément source de l'évènement. Dans notre cas this représente le lien <a> sur lequel l'utilisateur vient de cliquer. La fonction click() est en fait un cas particulier qui a été ajoutée pour simplifier toujours plus le code. En effet c'est la fonction générale jQuery bind() qui permet d'ajouter un listener d'évènements pour n'importe quel type d'évènement. Le type d'évènement est passé comme premier argument de la fonction. Voici un exemple de notre fonction click() codée en utilisant la fonction générale bind():
$("#demo1 a").bind("click",function (){
alert("Vous venez de cliquer sur "+ $(this).html());
return false;
});
Si nous avions voulu ajouter un évènement lors du survole de la souris, nous aurions écrit :
$("#demo1 a").bind("mouseover",function (){
alert("Vous venez de survoler le "+ $(this).html());
return false;
});
Ou la version plus simple
$("#demo1 a").mouseover(function (){
alert("Vous venez de survoler le "+ $(this).html());
return false;
});
$("#demo1 a").click(function (){
//Lorsque nous allons cliquer sur le lien, celui-ci va changer d'apparence
//Modifions en conséquence le contenu du lien pour le mettre en évidence
$(this).html("<strong>lien cliqué</strong>");
return false;
});
jQuery vous fournit un ensemble de fonctions qui vont vous permettre d'appliquer des animations à vos éléments HTML. Essayons par exemple de coder un lien qui permettra d'afficher ou de cacher une zone de texte.
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").show();
});
$("a.hide").click(function(){
$("#text-hidden").hide();
});
});
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").show();
return false;
});
$("a.hide").click(function(){
$("#text-hidden").hide();
return false;
});
});
</script>
</head>
<body>
<a class="show" href="#">Afficher</a>
<div id="text-hidden" style="display:none">
<a class="hide" href="#">Fermer</a>
<p>Mon texte caché s'affiche ou disparait en fonction de mes clics</p>
<a class="hide" href="#">Fermer</a>
</div>
</body>
</html>
Dans cet exemple, nous utilisons deux nouvelles fonctions jQuery, la fonction show() et la fonction hide(). Lorsque nous cliquerons sur un lien avec la class "show" alors nous appliquerons la fonction show à l'élément identifié par l'id="text-hidden". Lorsque nous cliquerons sur les liens avec la class "hide" alors nous appliquerons la fonction hide à l'élément identifié par l'id="text-hidden".
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").fadeIn();
return false;
});
$("a.hide").click(function(){
$("#text-hidden").fadeOut();
return false;
});
});
La fonction fadeIn() a le même but que la fonction show() c'est à dire afficher un élément caché. La différence c'est que la fonction fadeIn ajoute un effet de type fondu (l'opacité augmente de 0 à 1). Réciproquement, la fonction fadeOut permet de caché un élément mais moins brutalement que la fonction hide().
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").slideDown();
return false;
});
$("a.hide").click(function(){
$("#text-hidden").slideUp();
return false;
});
});
La fonction slideDown() a le même but que la fonction show() c'est à dire afficher un élément caché. La différence c'est que la fonction slideDown ajoute un effet de type slide. Réciproquement, la fonction slideUp permet de caché un élément mais moins brutalement que la fonction hide().
Une fonctionnalité importante de jQuery, c'est la possibilité de modifier à la volée l'apparence (c'est à dire les styles CSS) d'un élément HTML . Pour illustrer ce paragraphe, nous allons essayer de coder une zone de texte dont l'apparence change lorsqu'elle est survolée par la souris de l'utilisateur
$(document).ready(function(){
$("#zone-texte").hover(function(){
$(this).css({'background-color' : '#555', 'color' : '#FFF', 'border' : '1px solid #000'});
},function(){
$(this).css({'background-color' : '#FFF', 'color' : '#555', 'border' : '1px solid #555'});
});
});
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zone-texte").hover(function(){
$(this).css({'background-color' : '#555', 'color' : '#FFF', 'border' : '1px solid #000'});
},function(){
$(this).css({'background-color' : '#FFF', 'color' : '#555', 'border' : '1px solid #555'});
});
});
</script>
</head>
<body>
<div id="zone-texte">
Zone de texte qui change d'apparence lors d'un survol de souris !!!
</div>
</body>
</html>
Dans cet exemple, nous avons utilisé deux nouvelles fonctions jQuery, hover() et css(). Comme vous pouvez vous en douter , la fonction hover() va permettre de gérer l'évènement "survole de la souris" alors que la fonction css() permet de modifier les styles css et donc l'apparence de votre élément HTML.
La fonction hover va vous permettre de gérer l'entrée et la sortie de la souris sur l'élément auquel elle est appliquée. Vous pouvez remarquer que la fonction hover possède deux arguments (hover(function(){...}, function(){...}) , une première fonction qui contient le traitement exécuté lorsque la souris entre sur l'élément puis une seconde fonction qui contient le traitement exécuté lorsque la souris sort de l'élément
Utiliser la fonction hover est la manière simplifiée de coder l'exemple suivant :
$(document).ready(function(){
//Ajout d'un traitement lorsque la souris entre dans la zone de texte
$("#zone-texte").mouseover(function(){
$(this).css({'background-color' : '#555', 'color' : '#FFF', 'border' : '1px solid #000'});
});
//Ajout d'un traitement lorsque la souris sort de la zone de texte
$("#zone-texte").mouseout(function(){
$(this).css({'background-color' : '#FFF', 'color' : '#555', 'border' : '1px solid #555'});
});
});
Comme son nom l'indique, la fonction css vous permet de modifier dynamiquement les propriétés CSS de l'élément auquel elle est appliquée. La syntaxe à utiliser est quasiment la même que pour les styles CSS sauf qu'il ne faut pas oublier d'ajouter les caractères quote ' autour des propriétés.
La plupart des fonctions jQuery retourne l'objet jQuery sur lequel elles sont appliquées. Concrètement cela signifie que vous pouvez enchainer les fonctions les unes après les autres. Pour illustrer nos propos, reprenons l'exemple où nous avions modifié le texte du lien sur lequel l'utilisateur clique
$("#demo1 a").click(function (){
$(this).html("<strong>lien cliqué</strong>");
return false;
});
Dans cet exemple, nous avions modifié le texte du lien pour indiquer qu'il avait été cliqué ("lien cliqué"). Imaginons maintenant que nous souhaitions mettre encore plus en évidence le lien cliqué en lui ajoutant un fond rouge. Dans ce cas nous pourrions modifier le code pour obtenir
$(this).html("<strong>lien cliqué</strong>");
$(this).css({'background':'red'});
Mais pour simplifier le code, jQuery nous permet d'enchainer les fonctions
$(this).html("<strong>lien cliqué</strong>").css({'background':'red'});
Dans le concept jQuery, tout est encapsulé dans le fameux objet jQuery que nous avons étudié précédemment. Cependant il arrivera parfois que vous souhaitiez utiliser les propriétés des objets javascript standards (éléments DOM). Pour cela jQuery vous fournit la fonction get qui vous permet de récupérer les objets javascript standards à partir de l'objet jQuery.
Ici nous ajoutons à tous les éléments (grâce au caractère spéciale *) contenu dans l'élément identifié par "demo-get" un traitement lors du clic utilisateur. Pour chaque élément, nous récupérons l'objet javascript standard correspondant pour pouvoir utiliser la propriété classique tagName.
$(function(){
$("#demo-get *").click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0); //équivalent à $(this)[0]
$("#demo-get span").html("Elément de type - " + domEl.tagName);
});
});
Texte dans un paragraphe avec un mot important
Vous avez peut être remarqué lors de la demo une imperfection au niveau du code. Cette imperfection a été ajoutée volontairement pour vous faire bien comprendre comment passer d'un objet javascript standard à un objet jQuery et vis versa. En effet, l'objet identifié par this représente un objet javascript standard, nous lui avons appliquer la méthode $() pour le transformer en objet jQuery et ainsi ajouter les propriétés et méthodes jQuery. Enfin nous avons utilisé la méthode jQuery get pour repasser d'un élément jQuery à un élément javascript standard.
$(this).get(0) équivaut à thisCi-dessous le code simplifié :
$(function(){
$("#demo2-get *").click(function (e) {
e.stopPropagation();
$("#demo2-get span").html("Elément de type - " + this.tagName);
});
});
Texte dans un paragraphe avec un mot important
Voilà, ce petit quide démarrage jQuery est terminé en espérant que celui-ci vous ait donné envie d'approfondir votre apprentissage. Pour cela, nous travaillons sur d'autres rubriques à venir.
Dans cette partie, nous allons étudier plus en détails les fonctions de base du framework JavaScript jQuery
La fonction jQuery()(ou son équivalent simplifié la fonction $()) est la fonction de base du framework, c'est elle que vous serez amené à utiliser le plus souvent. Il est donc important de connaître en détail son fonctionnement. Il existe 4 utilisations différentes pour la fonction jQuery qui vont vous permettre notamment de récupérer un élément HTML de votre page ou encore créer un nouvel élément HTML dans votre page.
La fonction each(function) permet d'exécuter un traitement pour chaque élément d'une liste récupérée par la fonction jQuery. Le traitement à effectuer doit être défini dans une fonction passée en paramètre. (en savoir plus)
Le but de cet exemple est de parcourir une liste d'éléments span pour leur appliquer un traitement spécifique. Le traitement à appliquer est défini dans une fonction et consiste à numéroter chaque span. Le premier attribut de la fonction (appelé ici index) contient le numéro de l'élément courant dans la liste. A noter que la numérotation commence à zéro (comme souvent en informatique). L'utilisation du mot clé this permet de récupérer l'élément courant.
$("span").each(function(index){
$(this).html(index+1);
});
$("span").each(function(i){
var index = i+1;
$(this).html(index);
if(index==2){return true;}
$(this).css("background","#C1D4EA");
if(index==3){return false;}
});
$("ul.alt-style li").each(function(i){
var color = i%2? '#999' : '#FFF';
$(this).css("background", color);
});
La propriété length retourne le nombre d'éléments de l'objet jQuery. Elle retourne le même résultat que la fonction size() mais son exécution est légèrement plus rapide (à utiliser donc de préférence)
$("a.add").click(function(){
if( $("#demo-length div").length<6){
$("#demo-length").append($("<div>"));
}
return false;
});
$("a.count").click(function(){
var n = $("#demo-length div").length;
alert("il y a "+n+" divs");
return false;
});
ajouter | compter | reset (6 divs maxi)
$("#demo-size").click(function () {
$("#demo-size").append($("<div>"));
var n = $("#demo-size div").size();
$("span#counter").text("Il y a " + n + " divs." + "Cliquer pour en ajouter.");
}).click();
La fonction eq(position) permet de récupérer un élément spécifique dans une liste de résultats jQuery. Cette fonction prend en argument la position de l'élément dans la liste.
$("li").eq(2).css("background", "#999");
La fonction get() permet de récupérer les éléments de type DOM (objets javascript standards) qui sont "encapsulés" dans l'objet jQuery. La liste des éléments est retournée sous forme de tableau. Cette fonction est très utile si vous souhaitez utiliser directement les propriétés des élément DOM au lieu des propriétés jQuery.
$("#demo-get a").click(function(){
var tableau = $("#demo-get ul li").get().reverse();
var tmp= [];
for (var i = 0; i < tableau.length; i++) {
tmp.push(tableau[i].innerHTML);
}
for (var i = 0; i < tmp.length; i++) {
$("#demo-get ul li").get(i).innerHTML=tmp[i];
}
return false;
});
$(function(){
$("#demo2-get *").click(function (e) {
e.stopPropagation();
var domEl = $(this).get(0); //équivalent à $(this)[0]
$("#demo2-get span").html("Elément de type - " + domEl.tagName);
});
});
Texte dans un paragraphe avec un mot important
La fonction index(element) parcourt la liste des éléments récupérés par une fonction jQuery pour y rechercher l'élément passé en paramètre. Si l'élément est trouvé la fonction retourne sa position (index) dans la liste, si l'élément est introuvable la fonction retourne -1
Dans nottre exemple, nous associons à chaque clic sur un item de type <li> une fonction qui va afficher la position (index) de l'élément dans la liste (rappel : la numération commence à zéro)
$("#demo-index li").click(function () {
var index = $("#demo-index li").index(this);
$("#demo-index span").html("Index du li : " + index);
});
La fonction each(function) permet d'exécuter un traitement pour chaque élément d'une liste récupérée par la fonction jQuery. Le traitement à effectuer doit être défini dans une fonction passée en paramètre.
$("span").each(function(index){
$(this).html(index+1);
});
$("span").each(function(i){
var index = i+1;
$(this).html(index);
if(index==2){return true;}
$(this).css("background","#C1D4EA");
if(index==4){return false;}
});
Dans cet exemple, nous allons parcourir les éléments d'une liste pour leurs appliquer un style particulier en fonction de l'index. Si i%2 (i modulo 2, le reste de la division de i par 2) est égale à 0 (= false en informatique), c'est à dire si i est pair alors la couleur sera blanche sinon grise. (rappel l'indexation commence à zéro)
$("ul.alt-style li").each(function(i){
var color = i%2? '#999' : '#FFF';
$(this).css("background", color);
});
La fonction jQuery() (ou son équivalent simplifié la fonction $()) est la fonction de base du framework, c'est elle que vous serez amené à utiliser le plus souvent. Il est donc important de connaître en détail son fonctionnement. Il existe 4 utilisations différentes pour la fonction jQuery qui vont vous permettre notamment de récupérer un élément HTML de votre page ou encore créer un nouvel élément HTML dans votre page.
Cette fonction prend un premier argument qui est une chaîne de caractères représentant un sélecteur CSS. Elle vous permet de filtrer les éléments que vous souhaitez récupérer. Le deuxième argument est facultatif et représente le contexte de recherche. Par défaut, la recherche est effectuée dans le document HTML tout entier mais vous pouvez spécifier un contexte plus précis comme élément du DOM ou un objet jQuery
Nous récupérons les titres h4 contenus dans la div identifiée par 'demo1' pour leur appliquer une bordure basse
$("div#demo1 h4").css({'border-bottom':'1px solid #000'});
//équivalent à
//jQuery("div#demo1 h4").css({'border-bottom':'1px solid #000'});
le titre ci-dessus est dans la div donc a une de bordure basse
le titre ci-dessus n'est pas dans la div donc n'a pas de bordure basse
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div#demo1 h4 ").css({'border-bottom':'1px solid #000'});
});
</script>
</head>
<body>
<div id="demo1">
<h4>Titre h4 dans la div</h4>
<p>le titre ci-dessus est dans la div donc a une de bordure basse</p>
</div>
<h4>Titre h4 hors div</h4>
<p>le titre ci-dessus n'est pas dans la div donc n'a pas de bordure basse</p>
</body>
</html>
Mais si nous voulons faire un traitement sur la div avant de mettre une bordure au titre h4, nous pouvons utiliser le paramètre facultatif "contexte".
Nous indiquons que notre variable contexte sera la div identifiée par 'demo2'. Ensuite nous lui ajoutons un fond gris puis nous recherchons dans le contexte, c'est à dire dans la div identifiée par 'demo2' tous les titres h4 pour leur appliquer une bordure basse.
var contexte;
contexte= $("div#demo2");
contexte.css({'background':'#999'});
$("h4",contexte).css({'border-bottom':'1px solid #000'});
le titre ci-dessus est dans la div donc a une de bordure basse
le titre ci-dessus n'est pas dans la div donc n'a pas de bordure basse
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var contexte;
contexte= $("div#demo2");
contexte.css({'background':'#999'});
$("h4",contexte).css({'border-bottom':'1px solid #000'});
});
</script>
</head>
<body>
<div id="demo2">
<h4>Titre h4 dans la div</h4>
<p>le titre ci-dessus est dans la div donc a une de bordure basse</p>
</div>
<h4>Titre h4 hors div</h4>
<p>le titre ci-dessus n'est pas dans la div donc n'a pas de bordure basse</p>
</body>
</html>
Cette fonction prend un premier argument qui est une chaîne de caractères représentant du code HTML. Elle vous permet de créer un élément HTML (élément du DOM ) de manière dynamique dans votre page. Le deuxième argument est facultatif et représente le document dans lequel les nouveaux éléments seront crées.
Nous allons créer un lien qui permettra d'ajouter à chaque clic un nouveau champ à notre formulaire
$("#demo3 a.add").click(function(){
$("<input type='text'></input>").appendTo($("#demo3 form"));
return false;
});
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#demo3 a.add").click(function(){
$("<input type='text'></input>;").appendTo($("#demo3 form"));
return false;
});
});
</script>
</head>
<body>
<div id="demo3">
<a href="#" class="add">ajouter un champ</a>
<form>
<input type='text'></input>
</form>
</div>
</body>
</html>
Cette fonction prend en argument une autre fonction. Elle permet de s'assurer que la fonction passée en paramètre sera exécutée uniquement lorsque tous les éléments de votre page HTML seront chargés et donc prêts à être manipulés. Elle est donc équivalente à la fonction vu précédemment $(document).ready() et peut donc être utilisée comme écriture simplifiée. Il est à noter que la fonction $(fonction) de même que la fonction $(document).ready() peuvent être utilisées autant de fois que voulu sur la même page.
$(function(){
// Les éléments de la page HTML sont chargés et peuvent être manipulés
});
est équivalent à
$(document).ready(function(){
// Les éléments de la page HTML sont chargés et peuvent être manipulés
});
Cette fonction prend en argument un ou plusieurs éléments du DOM. Elle permet d'étendre les fonctionnalités d'un élément en lui ajoutant les propriétés jQuery.
Par exemple pour définir la couleur de fond de l'élément body
$(document.body).css( "background", "#000" );
On peut également utiliser la fonction pour plusieurs éléments en passant par un tableau. Ici, on souhaite inhiber tous les champs d'un formulaire
Inhibition des champs du formulaire dont l'identifiant est "contact"
$(document.forms['contact'].elements).attr("disabled","disabled").css("background","#333");
<!DOCTYPE html>
<html>
<head>
<title>Ma première page HTML - jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$(document.forms['contact'].elements).attr("disabled","disabled").css("background","#333");
});
</script>
</head>
<body>
<form id="contact">
<p>
<label for="nom">Nom</label>
<input type='text' id="nom"></input>
</p>
<p>
<label for="prenom">Prenom</label>
<input type='text' id="prenom"></input>
</p>
<p>
<label for="email">Email</label>
<input type='text' id="email"></input>
</p>
</form>
</body>
</html>
Découvrez les méthodes permettant de manipuler les attributs de vos éléments HTML
La fonction addClass va vous permettre d'ajouter un ou plusieurs noms de class au niveau de l'attribut class de(s) élément(s) récupéré(s) par la fonction jQuery. Associée aux styles CSS, cette fonction vous permettra de modifier dynamiquement l'apparence de vos éléments HTML.
$("#attributs-addClass a.add").click(function(){
$("#attributs-addClass div").addClass("style");
return false;
});
$("#attributs-addClass a.remove").click(function(){
$("#attributs-addClass div").removeClass("style");
return false;
});
.style {
background: #FFE51E;
border:2px solid #333;
font-style:italic;
padding:2px;
}
<div id="attributs-addClass"> <a href="#" class="add">Ajouter style</a> | <a href="#" class="remove">Supprimer style</a> <div>Je peux changer le style de mon texte dynamiquement</div> </div>
La fonction removeClass va vous permettre de supprimer un ou plusieurs noms de classe au niveau de l'attribut class de(s) élément(s) récupéré(s) par la fonction jQuery. Associée aux styles CSS, cette fonction vous permettra de modifier dynamiquement l'apparence de vos éléments HTML.
$("#attributs-removeClass a.add").click(function(){
$("#attributs-removeClass div").addClass("style color-red");
return false;
});
$("#attributs-removeClass a.remove").click(function(){
$("#attributs-removeClass div").removeClass("style");
return false;
});
.style {
background: #FFE51E;
border:2px solid #333;
font-style:italic;
padding:2px;
}
<div id="attributs-removeClass"> <a href="#" class="add">Ajouter style</a> | <a href="#" class="remove">Supprimer style</a> <div>Je peux changer le style de mon texte dynamiquement</div> </div>
La fonction toogleClass va vous permettre d'ajouter ou supprimer un ou plusieurs noms de classe au niveau de l'attribut class de(s) élément(s) récupéré(s) par la fonction jQuery. Si le nom de class est déjà présent alors il sera supprimé, s'il est absent il sera ajouté. Associée aux styles CSS, cette fonction vous permettra de modifier dynamiquement l'apparence de vos éléments HTML.
$("#attributs-toogleClass div").click(function(){
$(this).toggleClass("style");
});
.style {
background: #FFE51E;
border:2px solid #333;
font-style:italic;
padding:2px;
}
color-red{
color: red;
}
<div id="attributs-toogleClass"> <div >Cliquez pour intervertir le style</div> <div>Je peux changer le style de mon texte dynamiquement</div> <div>Je peux changer le style de mon texte dynamiquement</div> </div>
La fonction hasClass(classname) permet de tester si un objet ou groupe d'objets possède le nom de class passé en paramètre.
$("#attributs-hasClass li").each(function(){
$(this).click(function(){
var current = $(this);
current.toggleClass("style");
if(current.hasClass("style")){
current.html("<span> avec style</span>");
} else {
current.html("<span> sans style</span>");
}
});
});
.style {
background: #FFE51E;
border:2px solid #333;
font-style:italic;
padding:2px;
}
<ul id="attributs-hasClass"> <li>sans style</li> <li class="style">avec style</li> <li class="style">avec style</li> <li>sans style</li> </ul>
La fonction attr permet de récupérer ou mettre à jour les attributs d'un élément HTML.
Pour récupérer la valeur d'un attribut on utilise la syntaxe suivante attr("nomattribut")
$("#attributs-attr li").each(function(){
$(this).click(function(){
alert("class="+$(this).attr("class"));
});
});
<ul id="attributs-attr"> <li>Cliquez pour connaître ma class</li> <li class="style">Cliquez pour connaître ma class</li> </ul>
Pour mettre à jour la valeur d'un attribut on utilise la syntaxe suivante attr('nomattribut', 'valeur')
$("a.enable").click(function(){
$("#attributs-attr-maj input").removeAttr('disabled');
return false;
});
$("a.diseable").click(function(){
$("#attributs-attr-maj input").attr('disabled', 'disabled');
return false;
});
Activer | Desactiver