FAQ jQuery - Developpez.com
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
FAQ jQuery
Date de publication : 14/02/2011
Dernière mise à jour : 16/02/2011
Cette FAQ a été réalisée pour répondre aux questions les plus fréquemment posées sur
le forum jQuery.
Nous tenons à souligner que cette FAQ ne garantit en aucun cas que les informations
qu'elle contient sont correctes ; les auteurs font le maximum, mais l'erreur est humaine.
Si vous trouvez une erreur, ou que vous souhaitez devenir rédacteur, lisez Comment
participer à cette FAQ ?.
Sur ce, on vous souhaite une bonne lecture.Ont contribué à cette FAQ : Sepia - dukej - Arnaud F. - Kerod - Bovino - danielhagnoul - SpaceFrog - L'équipe JavaScript (JavaScript) - vermine -
FAQ jQuery
1. Informations générales (4) .........................................................................................................................................................4
2. Introduction (7) .......................................................................................................................................................................... 5
3. Utilisation du DOM (13) .........................................................................................................................................................11
4. Les formulaires (3) .................................................................................................................................................................. 26
5. La gestion des évènements (1) ................................................................................................................................................29
6. Requête Ajax (1) ..................................................................................................................................................................... 30
7. Les objets (1) ........................................................................................................................................................................... 32
8. Plugins (2) ................................................................................................................................................................................37
9. Divers scripts utiles (2) ........................................................................................................................................................... 45
-3-
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
Sommaire > Informations générales
Comment bien utiliser cette FAQ ?
Auteurs : vermine ,
Le but
Cette FAQ a été conçue pour être la plus simple possible d'utilisation. Elle tente d'apporter des réponses simples et
complètes aux questions auxquelles ont souvent été confrontés les développeurs Web en JavaScript.
L'organisation
Les questions sont organisées par thème, rendant la recherche plus facile.
Les réponses
Les réponses peuvent être complétées de liens vers d'autres réponses, vers la documentation en ligne de Microsoft ou
vers un autre site en rapport.
Nouveautés et mises à jour
Lors de l'ajout ou de la modification d'une question/réponse, un indicateur est placé à côté du titre de la question.
Cet indicateur reste visible pour une durée de 15 jours afin de vous permettre de voir rapidement les modifications
apportées.
J'espère que cette FAQ pourra répondre à vos questions. N'hésitez pas à nous faire part de tous commentaires/
remarques/critiques.
lien : Comment participer à cette FAQ ?
Comment participer à cette FAQ ?
Auteurs : vermine ,
Cette FAQ est ouverte à toute collaboration. Pour éviter la multiplication des versions, il serait préférable que toute
collaboration soit transmise aux administrateurs de la FAQ.
Plusieurs compétences sont actuellement recherchées pour améliorer cette FAQ.
Rédacteur : bien évidemment, toute nouvelle question/réponse est la bienvenue.
Correcteur : malgré nos efforts, des fautes d'orthographe ou de grammaire peuvent subsister. Merci de contacter les
administrateurs si vous en débusquez une... Idem pour les liens erronés.
lien : Quels sont les droits de reproduction de cette FAQ ?
Quels sont les droits de reproduction de cette FAQ ?
Auteurs : vermine ,
Merci de contacter les auteurs pour toute copie, intégrale ou partielle de ce document, voir Comment participer à cette
FAQ ?.
lien : Comment participer à cette FAQ ?
Nous tenons à remercier
Auteurs : vermine ,
L'ensemble de l'équipe des rédacteurs de www.developpez.com pour leurs remarques constructives. Ainsi que Bovino
et Kerod pour leur confiance. Un grand merci à danielhagnoul pour son enthousiasme, ses relectures attentives et
son implication au sujet de jQuery. Il me reste à remercier ClaudeLELOUP pour sa correction orthographique et sa
méthode de travail efficace !
-4-
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
Sommaire > Introduction
Présentation de jQuery
Auteurs : Sepia , danielhagnoul , vermine ,
jQuery est une bibliothèque (framework) JavaScript utilisée pour développer rapidement des applications Web et des
pages HTML au travers d'un ensemble cohérent de fonctions et de méthodes permettant la gestion des événements,
l'animation et la prise en charge des transactions asynchrones (Ajax) de plusieurs types avec un serveur.
jQuery s'inscrit dans la liste des outils Javascript comme :
• Ext JS ;
• Prototype ;
• Dojo ;
• Mootools ;
• ...
La bibliothèque est composée d'un fichier Javascript avec les méthodes de bases mais divers plugins (créés par la
communauté) peuvent lui être ajoutés.
jQuery propose également une gestion de conflit entre plusieurs scripts Javascript. Cependant, les possibilités offertes
devraient suffir à ne pas mélanger plusieurs bibliothèques.
Pourquoi dois-je utiliser une bibliothèque JavaScript ?
Auteurs : danielhagnoul ,
[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 ;
-5-
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
• 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.
Que dois-je connaître avant d'utiliser efficacement jQuery ?
Auteurs : danielhagnoul ,
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 JSON (JavaScript 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 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 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 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é.
-6-
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
• 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.
Comment installer la bibliothèque jQuery ?
Auteurs : danielhagnoul ,
[jQuery 1.4.4]
jQuery MIT License : jQuery MIT License
jQuery GPL License : jQuery GPL License
I) jQuery Code Server
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.
II) Je fais confiance à Google : http://code.google.com/intl/fr/apis/ajaxlibs/documentation/index.html#jquery
a) AJAX Libraries API, vous devez demander une clé API (gratuite)
google.load("jQuery", "1.4.2");
$(function(){
// votre code
});
b) J'utilise le service sans demander une clé API (plus lent ?)
$(function(){
// votre code
});
Où dois-je placer mon code ?
Auteurs : danielhagnoul ,
[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.
-7-
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ 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".
Exemple, non fonctionnel, pour l'incorporation des fichiers jQuery
Un mot pour remplir.
Qu'est-ce que la notion de Ready ?
Auteurs : vermine ,
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.
Où dois-je poser mon $ ?
Auteurs : danielhagnoul ,
[jQuery 1.4.2]
Entre deux balises :
$
Le symbole $ est la forme abrégée du mot clé jQuery. Ces deux lignes de code sont équivalentes :
$("p").css("color", "red");
-8-
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
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("ajoute(3, 4) = " + ajoute(3, 4) + "");
$("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;
-9-
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
}
modifie = function(id){
var obj = $("#"+id);
obj.css("color", "black");
};
})(jQuery);
jQuery.noConflict();
jQuery(function($){
$("body").append("ajoute(3, 4) = " + ajoute(3, 4) + "");
$("p").mouseenter(function(){
$(this).css("color", "red");
});
$("p").mouseleave(function(){
modifie(this.id);
});
});
- 10 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
Sommaire > Utilisation du DOM
Comment puis-je sélectionner un élément à l'aide d'une classe ou d'un id ?
Auteurs : danielhagnoul ,
[jQuery 1.4.2]
Ce code sélectionne un élément d'id "monID" :
$("#monID");
Un id doit être unique !
Ce code sélectionne tous les éléments ayant la classe "maClasse" :
$(".maClasse");
Habituellement, les éléments sélectionnés sont utilisés par d'autres fonctions jQuery :
// récupère la valeur d'un élément input ou select
var myValue = $("#monID").val();
// définit la valeur d'un élément input ou select
$("#monID").val("Bonjour");
Comment puis-je vérifier si un élément a une classe en particulier ?
Auteurs : danielhagnoul ,
[jQuery 1.4.2]
Vous pouvez utiliser la fonction hasClass() ou la fonction is().
Exemple n° 1
Si l'élément d'id "monID" a la classe "maClasse" alors le montrer en passant la propriété CSS display de none à bloc :
if ($("monID").is(".maClasse")){
$(this).show();
}
Exemple n° 2
Lors d'un clic sur une division, si la division a la classe "maClasse" alors colorer le texte en rouge et animer la division
en l'agrandissant vers la gauche de 100px puis en la diminuant vers la droite de 100px.
$("div").click(function(){
// Pour accélérer le traitement de la fonction.
// Le traitement d'un sélecteur est une opération coûteuse.
var obj = this;
if (obj.hasClass("maClasse")){
obj
.css("color","red")
.animate({left: "+=100px"}, "slow")
.animate({left: "-=100px"}, "slow");
}
});
- 11 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
La durée de cette animation est réglée par le paramètre slow qui pourrait être remplacé par une durée exprimée en
millisecondes, par exemple :
.animate({left: "-=100px"}, 3000);
Comment puis-je vérifier si un élément existe ?
Auteurs : danielhagnoul ,
[jQuery 1.5]
Un sélecteur retourne toujours un objet jQuery, c'est la raison pour laquelle on peut chaîner les instructions.
Mais un sélecteur peut être traité comme un tableau (array) pour retrouver l'élément du DOM et on peut donc vérifier
de combien d'éléments il est composé.
Exemple : si le nombre d'éléments du DOM ayant la classe "maClasse" est positif, ajoutez à ces éléments la classe
"monAutreClasse".
if ($(".maClasse").length > 0){
$(".maClasse").addClass(".monAutreClasse");
}
On peut sélectionner un élément par son numéro d'index.
Exemple : retrouver le type de l'élément DOM, ici [object HTMLDivElement]
$("#conteneur").click(function(){
var nodeType = $(this)[0];
alert(nodeType);
});
Si l'élément n'existe pas, jQuery ne fait rien et aucune erreur n'est signalée.
Comment puis-je déterminer si un élément est visible ou non ?
Auteurs : danielhagnoul ,
[jQuery 1.4.2]
Le sélecteur :hidden sélectionne tous les éléments qui sont cachés.
Le sélecteur :visible sélectionne tous les éléments qui sont visibles.
Exemple : sélectionner tous les éléments :hidden ayant la classe "maClass" et changer la taille du texte contenu dans
ces éléments.
$(".maClass:hidden").css("fontSize", "2.4em");
Nota Bene :
Pour améliorer la rapidité d'exécution, la définition d'un élément visible ou caché a été profondément modifiée.
Avant jQuery 1.3.2, un élément est visible si la propriété CSS display n'est pas none, si la propriété CSS visibility n'est
pas hidden, et son type (input) n'est pas hidden.
En jQuery 1.3.2 et après, un élément est visible si la propriété offsetWidth ou la propriété offsetHeight est supérieure à 0.
Les éléments sont considérés :hidden pour plusieurs raisons :
• ils ont une valeur d'affichage nulle ;
• ils sont des éléments de formulaire de type hidden ;
• leur largeur et leur hauteur sont explicitement mises à 0 ;
- 12 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
• un élément ancêtre est caché, l'élément n'est pas affiché sur la page ;
• un élément est supposé être caché si lui ou l'un de ses parents ne consomme pas d'espace dans le document.
La propriété CSS visibility n'est donc pas prise en compte, car l'élément consomme de l'espace dans le document.
alert($(this).css("visibility", "hidden").is(":hidden"));
Cette alerte retourne false !
Comment puis-je activer ou désactiver un élément ?
Auteurs : danielhagnoul ,
[jQuery 1.4.2]
On désactive un élément du DOM en attribuant la valeur disabled à l'attribut CSS disabled.
Pour désactiver :
$("#monID").attr("disabled","disabled");
Pour activer :
$("#monID").attr("disabled", "");
ou
$("#monID").removeAttr("disabled");
Comment puis-je remplacer une partie du texte d'un ou de plusieurs éléments dans une liste d'éléments ?
Auteurs : danielhagnoul ,
[jQuery 1.4.2]
La liste d'éléments :
liste, item 1
liste, item 2
liste, item 3
liste, item 4
liste, item 5
Exemple 1
On crée un objet jQuery qui représente, dans la liste d'id maListeID, les éléments enfants a du troisième élément li.
var obj = $("#maListeID").children("li").eq(2).children("a");
Le texte de l'objet est remplacé par le texte modifié, replace() est une fonction JavaScript.
obj.text(obj.text().replace("liste", "liste de signets"));
Exemple 2
- 13 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
On crée un objet jQuery qui représente, dans la liste d'id maListeID, les éléments enfants a des éléments li n° 4 et 5.
var obj = $("#maListeID").children("li:gt(2)").children("a");
Le texte de chaque objet est remplacé par le texte modifié
$.each(obj, function(i, item){
$(item).text($(item).text().replace("item","élément n°"));
});
On peut également l'écrire sous cette forme :
$("#maListeID").children("li:gt(2)").children("a").each(function(i, item){
$(item).text($(item).text().replace("item","élément n°"));
});
Description des sélecteurs
• .children() -- cherche parmi les enfants de l'élément parent (un niveau du DOM)
• .find() -- cherche parmi les descendants de l'élément parent (plusieurs niveaux du DOM)
• .eq(n) ou :eq(n) -- sélectionne l'élément numéro n (base zéro)
• .eq(-n) ou :eq(-n) -- sélectionne l'élément numéro length-n (base zéro)
• .first() ou :first -- idem eq(0)
• .last() ou :last -- idem eq(-1)
• :even -- sélectionne les éléments impairs : 1, 3, 5, 7, ...
• :odd -- sélectionne les éléments pairs : 2, 4, 6, 8, ...
• :gt(n) -- sélectionne tous les éléments supérieurs à n (base zéro)
• :lt(n) -- sélectionne tous les éléments inférieurs à n (base zéro)
• :nth-child(n) -- sélectionne l'élément numéro n (base un)
• :first-child -- idem :nth-child(1) sélectionne l'élément numéro 1 (base un)
• :last-child -- idem :nth-child(length) sélectionne l'élément numéro length (base un)
• :only-child -- sélectionne l'élément unique ou rien si l'élément parent a plusieurs enfants
Nota Bene :
• Pour un DOM complexe, vous pouvez accélérer votre programme en utilisant le sélecteur de recherche
approprié, par exemple children au lieu de find.
• Évitez d'écrire un sélecteur abrégé, exemple $("#maListeID li:eq(2) a"). Depuis la version 1.4.0, jQuery
transforme un sélecteur abrégé en « forme longue » avant de l'exécuter, soit une perte de temps et une source
d'erreur.
Comment puis-je changer l'ordre des éléments d'une liste ?
Auteurs : danielhagnoul ,
[jQuery 1.5]
Exemple avec une liste de sélection multiple et en utilisant appendTo(), insertAfter(), insertBefore() et clone() :
Forum jQuery
- 14 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* TEST */
#selectID {
width: 200px;
}
Forum jQuery
Option n° 1
Option n° 2
Option n° 3
0ption n° 4
Option n° 5
Option n° 6
/*
* Pour parcourir tous les éléments de la liste
*/
var selectList = function(id){
$("#"+id).children("option").each(function(i, item){
console.log($(item).val(), $(item).text());
});
};
/*
* Pour parcourir tous les éléments sélectionnés de la liste
*/
var selectedList = function(id){
$("#"+id).children("option:selected").each(function(i, item){
console.log($(item).val(), $(item).text());
});
};
$(function(){
selectList("selectID");
var obj = $("#selectID");
// déplacer le premier élément en dernière position
obj.children("option:first").appendTo(obj);
// déplacer le premier élément en troisième position
obj.children("option:first").insertAfter(obj.children("option").eq(2));
// copier le cinquième élément en première position
obj.children("option:eq(4)").clone().insertBefore(obj.children("option:first"));
// modifier la valeur de l'élément cloné
obj.children("option:first").val("opt 7");
- 15 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
console.log("------------------");
selectList("selectID");
});
clone(true) permet de copier la totalité des données (data) et des événements associés à un
élément du DOM.
Remarque à ce propos ici.
Est-il toujours utile de tester la longueur d'un sélecteur jQuery ?
Auteurs : dukej ,
[jQuery 1.4.4]
Exemple :
if ($(".maclasse").length > 0) {
$(".maclasse").css('color','blue');
}
Pour cet usage, non ! Le sélecteur est un objet jQuery qui peut être manipulé comme un "array" d'objets. Si le tableau
est vide, jQuery n'exécute pas la méthode demandée.
Il suffit donc d'écrire :
$(".maclasse").css('color','blue');
Quelle différence y a-t-il entre $(...)[0] et $(...).eq(0) ?
Auteurs : danielhagnoul ,
[jQuery 1.4.4]
La différence est très importante et elle est souvent mal comprise.
Un sélecteur retourne toujours un objet jQuery, c'est la raison pour laquelle on peut chaîner les instructions.
Mais un sélecteur peut être traité comme un tableau (array) pour retrouver l'élément du DOM et, par exemple, utiliser
les propriétés et méthodes du JavaScript qui n'ont pas d'équivalent dans le langage jQuery.
Exemple :
Choix n° 1
Choix n° 2
Choix n° 3
Choix n° 4
Choix n° 5
$(function(){
// Nous utiliserons Firebug pour examiner le résultat de nos codes
// $(...) = [object Object]
console.log("$(...) = " + $("#choix"));
// $(...).eq(0) = [object Object]
console.log("$(...).eq(0) = " + $("#choix").eq(0));
- 16 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
// $(...)[0] = [object HTMLSelectElement]
console.log("$(...)[0] = " + $("#choix")[0]);
$("#choix").children().eq(2).css("color", "red");
// $("#choix").children().eq(2) = [object Object]
console.log('$("#choix").children().eq(2) = ' + $("#choix").children().eq(2));
// eq(2) est la troisième option, valeur 3
console.log($("#choix").children().eq(2).val());
// $("#choix").children()[4] = [object HTMLOptionElement]
console.log('$("#choix").children()[4] = ' + $("#choix").children()[4]);
// $("#choix").children()[4].tagName = OPTION
console.log('$("#choix").children()[4].tagName = ' + $("#choix").children()[4].tagName);
// $("#choix").children().eq(4).tagName = undefined
// undefined car l'objet jQuery n'a pas une propriété tagName
console.log('$("#choix").children().eq(4).tagName = ' + $("#choix").children().eq(4).tagName);
});
Comment puis-je réaliser une itération en jQuery ?
Auteurs : danielhagnoul , SpaceFrog , Arnaud F. ,
[jQuery 1.4.3]
1) En utilisant each()
Cette méthode parcourt tous les éléments d'une sélection, et exécute une fonction pour chacun d'eux. La fonction reçoit
automatiquement l'index de l'élément courant et l'élément DOM lui-même comme arguments.
On peut dénommer l'index et l'élément du DOM comme l'on veut. Personnellement je respecte la convention suivante :
i, j, k, m, et n pour l'index ; item, jtem, ktem, mtem, ntem pour l'élément du DOM. Je retrouve ainsi plus facilement
qui est quoi et à quel niveau il se situe dans les itérations imbriquées.
$("p").each(function(i, item) {
console.log(i, item);
});
$("p").each() parcourt les éléments du DOM qui font partie du sélecteur jQuery. La fonction de rappel est lancée dans
le contexte de l'élément DOM en cours, de sorte que le mot-clé this fait référence à l'élément.
Lorsqu'une condition est remplie, vous pouvez sortir de l'itération par un return false;.
Un return true; est équivalent à l'instruction "continue" dans une boucle for, on passe immédiatement à l'itération
suivante.
$("p").each(function(i, item) {
if (i > 20){
return false;
} else {
console.log(i, item);
}
});
2) $.each(collection, function(i, item){ ... });
Cet itérateur générique peut être utilisé sur des objets et des tableaux.
Les tableaux et les objets de type tableau sont parcourus en suivant l'index, de 0 à length-1.
$.each([52, 97], function(i, item) {
console.log(i, item);
});
- 17 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
Les autres objets sont parcourus en suivant l'ordre de leurs propriétés nommées.
var map = {
'flammable': 'inflammable',
'duh': 'no duh'
};
$.each(map, function(key, value){
console(key, value);
});
3) Exemples
Exemple 1 :
var chaine ="un;deux;trois;quatre;cinq;six"
var tab = chaine.split(';')
$.each(tab, function(i, item){
console.log(i, item);
});
Exemple 2 :
var obj = {
un:{
en:'one',
de:'ein'
},
deux:{
en:'two',
de:'zwei'
},
trois:{
en:'three',
de:'drei'
}
};
$.each(obj, function(i, item){
console.log(i, item.en, item.de);
});
Exemple 3 :
var doo = {
truc: function(param){
console.log(param);
},
machin: function(param){
console.log("encore\n" + param);
}
};
$.each(doo, function(i, item){
console.log(i, item);
item("bonjour");
});
Exemple 4 :
var doo = {
jules: function(key, param){
- 18 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
console.log(param + ' ' + key);
},
roger: function(key, param){
console.log(param + '\n' + key);
}
};
$.each(doo, function(i, item){
console.log(i, item);
item(i, 'bonjour');
});
Exemple 5 :
var b = {
one: 1,
two: 2,
three: 3
};
// On ajoute les méthodes getFirst et getLast à l'objet b
$.each(["First", "Last"], function(i, item) {
b["get" + item] = function() {
console.log(this[(item == "First") ? "one" : "three"]);
};
});
b.getFirst(); // alert 1
b.getLast(); // alert 3
console.log(b);
Comment puis-je manipuler plusieurs attributs d'un élément du DOM en même temps ?
Auteurs : danielhagnoul ,
[jQuery 1.5]
Exemple :
Forum jQuery
/* Base */
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* Test */
a {
display:block;
width:300px;
height:20px;
- 19 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
margin-bottom:6px;
}
a.principale {
background-color:lightyellow;
}
FAQ jQuery
Page index de MonCaEx
Page index de MonCaEx
Page index de MonCaEx
Page index de MonCaEx
Page index de MonCaEx
$(function(){
$("#conteneur a:eq(2)").attr({
"id": "juliaID",
"class": "principale",
"target": "_blank",
"href": function(){
var obj = $(this);
obj.text("Les ensembles de Julia en JavaScript !");
return obj.attr("href") + "/bacasable/julia.php";
},
"title": "Pour le fun !",
"alt": "Les ensembles de Julia en JavaScript !"
});
});
Comment puis-je établir un lien permanent entre deux éléments du DOM ?
Auteurs : danielhagnoul ,
[jQuery 1.5]
On peut utiliser les événements, un élément du DOM attendant l'événement déclenché par un autre élément du DOM.
Mais on peut stocker la référence d'un élément du DOM dans les données d'un autre élément du DOM
Exemple :
Forum jQuery
/* Base */
body { background-color:#dcdcdc; color:#000000; font-family:sans-serif;
font-size:medium; font-style:normal; font-weight:normal; line-height:normal;
letter-spacing:normal; }
h1,h2,h3,h4,h5 { font-family:serif; }
div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
p { padding:6px; }
div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto;
background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
/* Test */
- 20 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
div.exemple {
width:100px;
height:100px;
margin:12px;
margin-top:400px;
padding:6px;
background-color:yellow;
border:1px solid gray;
}
li.exemple {
display:block;
width:100px;
height:100px;
margin:12px;
padding:6px;
background-color:lightgreen;
border:1px solid grey;
}
form {
background-color:red;
}
FAQ jQuery
Liste n° 1
Liste n° 2
Liste n° 3
Liste n° 4
Liste n° 5
Division n° 1
Division n° 2
Un mot pour remplir
Division n° 3
Division n° 4
Division n° 5
$(function(){
var temp = [];
var obj = $("#conteneur");
obj.find("div").each(function(i, item){
temp.push($(item));
});
obj.find("li").each(function(i, item){
// au cas où il n'y aurait pas le même nombre de chaque type d'élément !
if (temp.length > 0){
$(item)
// retire le premier élément de temp
.data("division", temp.shift())
.click(function(){
// avec animation 1,5s
$("html, body")
.animate({
"scrollTop": $(this).data("division").position().top
}, 1500);
// sans animation
/*
$("html, body")
- 21 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/FAQ jQuery
.scrollTop($(this).data("division").position().top);
*/
});
}
});
});
Comment puis-je créer un nouvel élément du DOM ?
Auteurs : danielhagnoul ,
[jQuery 1.4.2]
$(elementVide, objetJSON).appendTo(selecteurJQuery);
$("", { id:"maDivID" }).appendTo("#conteneur");
La construction débute obligatoirement par un élément vide, on ne peut pas écrire :
Cette technique est particulièrement utile lors de l'écriture de plug-ins ou de widgets, et pour ajouter un fragment au
DOM lorsque son existence ou son contenu est conditionné par le résultat d'un script.
Exemple 1
Ajoutez une nouvelle division d'id maDivID, avec la classe maClass et l'attribut title. Cette division doit réagir au clic
et au survol du pointeur.
.maClass {
color:black;
}
var str = "Un mot pour remplir.";
$("",{
id:"maDivID",
"class":"maClass",
title:"Ma nouvelle division est géniale !",
html:str,
css:{
margin:"12px",
padding:"6px",
fontSize:"2em",
backgroundColor:"#ced0d7",
border:"1px solid gray",
cursor:"pointer"
},
click:function(event){
alert(new Date(event.timeStamp));
},
mouseenter:function(){
$(this).css("color","red");
},
mouseleave:function(){
$(this).css("color","black");
}
}).appendTo("#conteneur");
- 22 -
Les sources présentées sur cette pages sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre la page de présentation de ces sources
constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2011 Developpez LLC. Tout droits réservés Developpez LLC. Aucune
reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez
LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts.
http://javascript.developpez.com/faq/jquery/Vous pouvez aussi lire
