Discussion :

[danielhagnoul]

Bienvenue à tous.

Une foire aux questions (Frequently Asked Questions), est une liste faisant la synthèse des questions posées de manière récurrente sur un sujet donné, accompagnées des réponses correspondantes, que l'on rédige afin d'éviter que les mêmes questions soient toujours reposées, et d'avoir à y répondre constamment.

Il faut bien entendu répondre aux fondamentaux : comment intégrer la bibliothèque jQuery, qu'est-ce qu’un objet jQuery, etc. Puis repérer sur le forum les questions les plus courantes pour l'enrichir au fur et à mesure.

Je vous propose de placer à la suite les sources et les astuces que vous avez découvertes et que vous jugez intéressantes de partager.

Comment apporter votre contribution ?

Vous postez un message dans ce fil de discussion (une simple réponse) en inscrivant simplement votre code. Si ce code est décomposé en plusieurs fichiers, joignez un ZIP.

Les contributions taguées [FAIT] se trouvent déjà dans la FAQ jQuery.

Merci à tous, Daniel.

------------------------------------------------------------------------
Contenu

1. [FAIT] Comment installer la bibliothèque jQuery ?
   
2. [FAIT] Où dois-je placer mon code ?
   
3. [FAIT] Que dois-je connaître avant d’utiliser efficacement jQuery ?
   
4. [FAIT] Où dois-je poser mon $ ?
   
5. [FAIT] Pourquoi dois-je utiliser une bibliothèque JavaScript ?
   
6. [FAIT] Comment puis-je sélectionner un élément à l'aide d'une classe ou d'un id ?
   
7. [FAIT] Comment puis-je vérifier si un élément a une classe en particulier ?
   
8. [FAIT] Comment puis-je vérifier si un élément existe ?
   
9. [FAIT] Comment puis-je déterminer si un élément est visible ou non ?
   
10. [FAIT] Comment puis-je gérer les attributs booléens ?
    
11. [FAIT] Comment puis-je obtenir les paramètres de l'option choisie (select option) ?
    
12. [FAIT] Comment puis-je remplacer une partie du texte d'un ou de plusieurs éléments dans une liste d'éléments ?
    
13. [FAIT] Comment puis-je créer un nouvel élément du DOM ?
    
14. [FAIT] Comment puis-je imposer une saisie monétaire dans un input ?
    
15. [FAIT] Pourquoi ma fonction hover() provoque-t-elle un va-et-vient ?
    
16. [FAIT] Comment puis-je récupérer les valeurs sélectionnées de checkbox de même nom ?
    
17. [FAIT] Comment puis-je changer l'ordre des éléments d'une liste ?
    
18. [FAIT] Comment puis-je réaliser une itération en jQuery ?
    
19. [FAIT] Comment puis-je établir un lien permanent entre deux éléments du DOM ?
    
20. [FAIT] Comment puis-je manipuler plusieurs attributs d'un élément du DOM en même temps ?
    
21. [FAIT] Comment puis-je surligner des mots identiques ?
    
22. [FAIT] Est-il toujours utile de tester la longueur d'un sélecteur jQuery ?
    
23. [FAIT] Quelle différence y a-t-il entre $(...)[0] et $(...).eq(0) ?
    
24. [FAIT] Exemples d'utilisation de jQuery.sub()
    
25. [FAIT] Comment puis-je écrire un plugin ?
    
26. [FAIT] Comment dois-je formuler une requête AJAX ?
    
27. [FAIT] Comment puis-je utiliser l’objet jQuery.Deferred ?
    
28. [FAIT] Comment puis-je intercepter les frappes multitouches ?
    
29. [FAIT] Comment puis-je filtrer dynamiquement une table ?
    
30. [FAIT] Présentation de jQuery
    
31. [FAIT] Comment puis-je interrompre une boucle each ?
    
32. [FAIT] Où puis-je trouver la documentation officielle (en anglais) en ligne ?
    
33. [FAIT] Comment puis-je ajuster une image à son conteneur ?
    
34. [FAIT] Comment puis-je différer la fermeture d'un menu ?
    
35. [FAIT] Qu'est-ce que la notion de Ready ?
    
36. [FAIT] Menu minimaliste avec curseur animé
    
37. [FAIT] Construire un plugin qui applique un effet CSS, au choix de l'utilisateur, pendant une durée indéterminée
    
38. [FAIT] Réaliser un plugin de slider automatique
    
39. [FAIT] Plugin de valeur par défaut pour des champs input ou textarea
    
40. [FAIT] Comment trier et classer des li dans un ul ?
    
41. [FAIT] Comment fixer la vitesse par défaut d'un effet ?
    
42. [FAIT] Comment appliquer un fadeIn ou fadeOut à une image png avec une semi transparence ?

Archivage : les propositions qui ont été traitées sont archivées dans cette discussion.

[SpaceFrog]

Comment appliquer un fadeIn ou fadeOut à une image png avec semi transparence:

Il suffit d'applique à l'image le css suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
img {
	background: transparent;
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" !important; /* IE8 */   
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF) !important;   /* IE6 & 7 */      
	zoom: 1;
 
}

[dkmix]

Comment passer des variables supplémentaires au callback de la fonction $.ajax

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 $.ajax({
    url: "monScriptCoteServeur",
    type: "POST",
    dataType: "json",
    maVariable: "variable 1",
    maVariable2: "variable 2",
    success: function(data, textStatus, jqXHR) {
        alert("maVariable :" + this.maVariable + " maVariable2 : " + this.maVariable2);
    },
    failue: function(data, textStatus, jqXHR) {
        alert("maVariable :" + this.maVariable + " maVariable2 : " + this.maVariable2);
    },
    complete: function() {
        alert("maVariable :" + this.maVariable + " maVariable2 : " + this.maVariable2);
    }
});

[danielhagnoul]

Pour la section scripts utiles

EDIT : adopte la solution de Bovino.

Comment obtenir la valeur d'un attribut data-* lors d'un événement change()

[ jQuery 1.8.2 ] [Bovino, danielhagnoul]

<select id="selectID"></select>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var data = [
		"images/adoptez-le.png",
		"images/avatarDVJH.jpg",
		"images/badge.jpg"
	];
 
for(var i in data){
	$( '<option value="' + i + '" data-dvjh-src="' + data[ i ] + '">' + i + '</option>' ).appendTo( "#selectID" );
}
 
$( "#selectID" ).change( function(){
	console.log( $( this ).val(), $( this ).find( ":selected" ).data( "dvjhSrc" ) );
});

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
// donne undefined pour les dvjhSrc
$( "#selectID" ).change( function(){
	console.log( $( this ).val(), $( this ).data( "dvjhSrc" ) );
});

Daniel, c'est normal que cette portion de code renvoie undefined : $( this ).val() renvoie non pas un élément mais la valeur de l'option sélectionnée, qui ne peut donc pas avoir de data lié

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
    <head>
		<title>Data option</title>
        <meta charset="utf-8" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
		<script>
                        jQuery(function($){
                                $('#toto option').each(function(rg){
                                        $(this).data('test', 'Rang : ' + rg);
                                });
                        });
                        function getData(){
                                console.log($('#toto :selected').data('test'));
                        }
                </script>	
    </head>
    <body>
		<select id="toto" onchange="getData()">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
		</select>
	</body>
</html>

fonctionne en revanche parfaitement.

[danielhagnoul]

$( this ).val() renvoie non pas un élément mais la valeur de l'option sélectionnée

Bonjour

C'est ce qui m'a induit en erreur, à cause de $( this ).val() j'ai pris $( this ) pour l'option sélectionnée, laquelle a bien un dataset.