IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

[Archive Faq] Les propositions qui ont été traitées


Sujet :

jQuery

  1. #1
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut [Archive Faq] Les propositions qui ont été traitées
    Cette discussion reprend toutes les propositions qui ont été traitées afin d'alléger le post des contributions à la Faq jQuery.

    ===================================================



    [FAIT] [jQuery 1.6.1] [2011-05-20]

    Comment installer la bibliothèque jQuery ?

    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 :


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

    jQuery MIT License : http://github.com/jquery/jquery/blob...IT-LICENSE.txt
    jQuery GPL License : http://github.com/jquery/jquery/blob...PL-LICENSE.txt

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Où dois-je placer mon code ?
    [FAIT] [jQuery 1.5] [2011-02-02]

    Où dois-je placer mon code ?

    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".

    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
    18
    19
    20
    21
    22
    <!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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Que dois-je connaître avant d’utiliser efficacement jQuery ?
    [FAIT] [jQuery 1.4.2] [2010-03-26]

    Que dois-je connaître avant d’utiliser efficacement jQuery ?

    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 (http://fr.wikipedia.org/wiki/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 (http://fr.wikipedia.org/wiki/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 (http://fr.wikipedia.org/wiki/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 (http://fr.wikipedia.org/wiki/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é.
      • 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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Où dois-je poser mon $ ?
    [FAIT] [jQuery 1.4.2] [2010-03-27]

    Où dois-je poser mon $ ?

    Entre deux balises : <script> $ </script>

    Le symbole $ est la forme abrégée du mot clé jQuery. Ces deux lignes de code sont équivalentes :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $("p").css("color", "red");
     
    jQuery("p").css("color", "red");
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(document).ready(function(){ ... });
    a pour forme abrégée 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
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(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.

    On écrira donc, par exemple :
    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
    <script>
    	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");
    		});
    	});	
    </script>
    S’il vous prend l’idée bizarre d’utiliser plus d’une bibliothèque JavaScript en même temps, il faut écrire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    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 :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    (function($){ ... })(jQuery);
    Exemple :
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <script>
    	// 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);
    		});
    	});	
    </script>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Pourquoi dois-je utiliser une bibliothèque JavaScript ?
    [FAIT] [jQuery 1.5] [2011-02-02]

    Pourquoi dois-je utiliser une bibliothèque JavaScript ?

    JavaScript

    http://fr.wikipedia.org/wiki/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 lesquels 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 œuvre 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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  6. #6
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je sélectionner un élément à l'aide d'une classe ou d'un id ?
    [FAIT] [jQuery 1.4.2] [2010-04-02]

    Comment puis-je sélectionner un élément à l'aide d'une classe ou d'un id ?

    Ce code sélectionne un élément d'id « monID » :
    Nota Bene : un id doit être unique !


    Ce code sélectionne tous les éléments ayant la classe « maClasse » : Un élément sélectionné peut être assigné à une variable JavaScript :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var myDivElement = $("#monID");
    Habituellement, les éléments sélectionnés sont utilisés par d'autres fonctions jQuery :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    // 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");

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  7. #7
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je vérifier si un élément a une classe en particulier ?
    [FAIT] [jQuery 1.4.2] [2010-04-02]

    Comment puis-je vérifier si un élément a une classe en particulier ?

    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 » :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    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.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $("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");
    	}
    });

    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 :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    .animate({left: "-=100px"}, 3000);

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  8. #8
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je vérifier si un élément existe ?
    [FAIT] [jQuery 1.5] [2011-02-02]

    Comment puis-je vérifier si un élément existe ?

    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».
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    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]
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $("#conteneur").click(function(){
        var nodeType = $(this)[0];
        alert(nodeType);
    });
    Nota Bene : Si l'élément n'existe pas, jQuery ne fait rien et aucune erreur n'est signalée.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  9. #9
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je déterminer si un élément est visible ou non ?
    [FAIT] [jQuery 1.4.2] [2010-04-11]

    Comment puis-je déterminer si un élément est visible ou non ?

    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.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(".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.
    • 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.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    alert($(this).css("visibility", "hidden").is(":hidden"));
    Cette alerte retourne « false » !

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  10. #10
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je gérer les attributs booléens ?
    [FAIT] [jQuery 1.6] [2011-05-08]

    Comment puis-je gérer les attributs booléens ?

    On doit distinguer les attributs, qui sont du code HTML, d'avec les propriétés du DOM portant le même nom.

    Liste des propriétés pour les attributs booléens
    checked  (input type=checkbox/radio)
    selected (option)
    disabled (input, textarea, button, select, option, optgroup)
    readonly (input type=text/password, textarea)
    multiple (select)
    
    Pour construire ou gérer un attribut HTML, on doit utiliser la méthode attr() : http://api.jquery.com/attr/

    Pour construire ou gérer une propriété du DOM, on doit utiliser la méthode prop() : http://api.jquery.com/prop/

    Désactiver les éléments "button" : $("button").prop("disabled",true);.

    Activer les éléments "input" : $("input").prop("disabled", false);.

    Autoriser le choix multiple dans un élément "select" d'ID "selectSpec" : $("#selectSpec").prop("multiple", true);.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  11. #11
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je obtenir les paramètres de l'option choisie (select option) ?
    [FAIT] [jQuery 1.4.2] [2010-04-14]

    Comment puis-je obtenir les paramètres de l'option choisie (select option) ?

    Chaque élément sélectionné possède deux paramètres :
    1. La valeur :
      Code : Sélectionner tout - Visualiser dans une fenêtre à part
      $("#monID option:selected").val();
    2. Le texte :
      Code : Sélectionner tout - Visualiser dans une fenêtre à part
      $("#monID option:selected").text();


    Exemple, lorsque plusieurs options peuvent être sélectionnées :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $("#monID").change(function(){
    	var monArray = [];
    	var str = "";
     
    	$("#monID option:selected").each(function(i, item){
    		str = $(item).val() + " = " + $(item).text();
    		monArray.push(str);
    	});
     
    	alert(monArray.join("\n"));
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  12. #12
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je remplacer une partie du texte d'un ou de plusieurs éléments dans une liste d'éléments ?
    [FAIT] [jQuery 1.4.2] [2010-04-21]

    Comment puis-je remplacer une partie du texte d'un ou de plusieurs éléments dans une liste d'éléments ?

    La liste d'éléments

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <ul id="maListeID">
    	<li><a href="#signet1">liste, item 1</a></li>
    	<li><a href="#signet2">liste, item 2</a></li>
    	<li><a href="#signet3">liste, item 3</a></li>
    	<li><a href="#signet4">liste, item 4</a></li>
    	<li><a href="#signet5">liste, item 5</a></li>
    </ul>
    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 ».
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    obj.text(obj.text().replace("liste","liste de signets"));
    Exemple 2

    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.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var obj = $("#maListeID").children("li:gt(2)").children("a");
    Le texte de chaque objet est remplacé par le texte modifié
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $.each(obj, function(i, item){
    	$(item).text($(item).text().replace("item","élément n°"));
    });
    On peut également l'écire sous cette forme:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $("#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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  13. #13
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je créer un nouvel élément du DOM ?
    [FAIT] [jQuery 1.4.2] [2010-04-21]

    Comment puis-je créer un nouvel élément du DOM ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(elementVide, objetJSON).appendTo(selecteurJQuery);
     
    $("<div/>", { id:"maDivID" }).appendTo("#conteneur");
    La construction débute obligatoirement par un élément vide, on ne peut pas écire "<div id='monID'/>".

    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.

    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .maClass {
    	color:black;
    }
     
    var str = "<p>Un mot pour remplir.</p>";
     
    $("<div/>",{
    	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");
    Exemple 2

    Construire des fragments du DOM à partir d'un assemblage d'objets JSON.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $(elementVide, $.extend(true, {}, obj1, obj2)).appendTo(selecteurJQuery);
    $.extend() permet de fusionner le contenu de deux ou de plusieurs objets en modifiant l'objet cible ou en créant un nouvel objet.

    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    var obj1 = {
    	html:"<p>Un mot pour remplir</p>",
    	css:{
    		margin:"12px",
    		padding:"6px",
    		fontSize:"2em",
    		backgroundColor:"#ced0d7",
    		border:"1px solid gray",
    		cursor:"pointer"
    	}
    };
     
    var obj2 = {
    	id:"monID1",
    	click:function(event){
    		alert(new Date(event.timeStamp));
    	}
    };
     
    var obj3 = {
    	id:"monID2",
    	mouseenter:function(){
    		$(this).css("color","red");
    	},
    	mouseleave:function(){
    		$(this).css("color","black");
    	}
    };
     
    $("<div/>", $.extend(true, {}, obj1, obj2)).appendTo("#conteneur");
     
    $("<div/>", $.extend(true, {}, obj1, obj3)).appendTo("#conteneur");
    Nota Bene : Avec cette technique, le risque d'obtenir plusieurs fragments du DOM ayant le même ID n'est pas négligeable. Vérifiez toujours que le nouveau fragment du DOM correspond bien à vos souhaits.

    Exemple 3

    Construire un formulaire en fragmentant la construction jusqu'à l'excès.

    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    function soumettre(){
    	alert("Identifiant = " + $("#nameID").val() + "\nMot de passe = " + $("#passwordID").val());
    }
     
    var nameLabel = $("<label/>",{
    	html: "Identifiant :",
    	css:{
    		margin: "12px"
    	}
    });
     
    var nameInput = $("<input/>",{
    	type: "text",
    	css:{
    		margin: "12px",
    		marginBottom: "24px",
    		width: "300px"
    	},
    	change:function(){
    		var obj = $(this);
     
    		if (obj.val().length < 8){
    			alert("Votre identifiant doit comporter plus de 8 caractères !");
    			obj.val("");
    		}
    	}
    });
     
    var passwordLabel = $("<label/>",{
    	html: "Mot de passe :",
    	css:{
    		margin: "12px"
    	}
    });
     
    var passwordInput = $("<input/>",{
    	type: "password",
    	css:{
    		margin: "12px",
    		width: "300px"
    	},
    	change:function(){
    		var obj = $(this);
     
    		if (obj.val().length < 8){
    			alert("Votre mot de passe doit comporter plus de 8 caractères !");
    			obj.val("");
    		}
    	}
    });
     
    var submitBtn = $("<input/>",{
    	type: "submit",
    	css:{
    		margin: "12px",
    		width: "300px"
    	},
    	click:function(){
    		var boolOK = true;
     
    		$(nameInput).change();
    		$(passwordInput).change();
     
    		var name = $(nameInput).val();
    		var password = $(passwordInput).val();
     
    		if ((name.length < 8) || (password.length < 8)){
    			boolOK = false;
    		}
     
    		return boolOK;
    	}
    });
     
    $("<form/>",{
    	action:"javascript:soumettre();",
    	css:{
    		marginTop: "12px"
    	}
    }).append(nameLabel, "<br/>", nameInput, "<br/>", passwordLabel, "<br/>", passwordInput, "<br/>", submitBtn).appendTo("#conteneur");
     
    $(nameInput).focus();
    Nota Bene : cet exemple permet d'ajouter un formulaire au DOM, mais l'utilisation de la transaction AJAX load est beaucoup plus rapide.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    $("#conteneur").load("monFormulaire.html")

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  14. #14
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut Comment puis-je imposer une saisie monétaire dans un input ?
    [FAIT] [jQuery 1.5] [2011-02-02]

    Comment puis-je imposer une saisie monétaire dans un input ?

    Permets d'éliminer tous les caractères non compatibles avec une saisie monétaire dans une zone de texte (input) ayant la classe money :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input class="money" type="text" />
    On n'autorise que les chiffres de 0 à 9 et la série doit se terminer par un point ou une virgule suivit par deux chiffres décimaux, par exemple : 73.25

    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    $(function(){
    	var half = 1/2;
     
    	/*
    	 * On détermine le séparateur décimal du système (O.S.) de l'utilisateur
    	 * et on impose la valeur de dec et d'alpha en fonction des besoins.
    	 * Si le résultat contient une virgule le séparateur
    	 * décimal est la virgule sinon le point.
    	 */
    	var dec = (half.toString().match(/,/)) ? ',' : '.';
     
    	// Par opposition, on détermine celui qui ne l'est pas.
    	var alpha = (dec == '.') ? ',' : '.';
     
    	/*
    	 * On teste, au moment de la frappe, chaque caractère saisi
    	 * par l'utilisateur et on apporte les corrections nécessaires.
    	*/ 
    	$('.money').keyup(function(){
    		var field = $(this);
    		var valNum = field.val();
     
    		/*
    		 * On remplace le non séparateur par le séparateur.
    		 * Si la chaîne commence par le séparateur, on met un zéro devant.
    		 */ 
    		valNum = valNum.replace(new RegExp("["+alpha+"]"), dec);
    		valNum = valNum.replace(new RegExp("^["+dec+"]"), '0.');
     
    		if (valNum != ''){
    			/*
    			 * Si la chaîne est au format monétaire (9999.99)
    			 * alors on ne change rien
    			 * sinon on teste si la chaîne comporte d'autres caractères que de 0 à 9 ou le séparateur
    			 * alors, s'il la chaîne comporte d'autres caractères, on les supprime
    			 * sinon on limite le nombre de décimales à 2
    			 */ 
    			valNum = (new RegExp("^[0-9]+("+dec+"[0-9]{,2})?$").test.valNum) ? valNum : (valNum.match(new RegExp("[^0-9"+dec+"]"))) ? valNum.replace(new RegExp("[^0-9"+dec+"]","g"),'') : valNum.match(new RegExp("^[0-9]+(["+dec+"][0-9]{0,2})?"))[0];
    		}
     
    		field.val(valNum);
    	});
     
    	// On s'assure du format de la saisie en fixant le nombre de décimales à 2
    	$('.money').blur(function(){
    		var field = $(this);
    		var valNum = (field.val() * 1).toFixed(2);
     
    		field.val(valNum);
    	});
    });
    Documentation
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  15. #15
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Pourquoi ma fonction hover() provoque-t-elle un va-et-vient ?
    [FAIT] [jQuery 1.4.2] [2010-05-29]

    Pourquoi ma fonction hover() provoque-t-elle un va-et-vient ?

    Si la partie mouseenter (mouseover) déclenche la partie mouseleave (mouseout) c'est bien normal, car les événements se bousculent.

    Exemple :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    $("#imgID").hover(
     function(){
      $(this).fadeOut("slow");
     },
     function(){
      $(this).fadeIn("slow");
     }
    );
    Un fadeOut() ou un animate({opacity : 0}) se traduit par un « display: none » qui provoque un événement mouseleave(mouseout).

    Un fadeIn() ou un animate({opacity: 1}) se traduit par un "display: block » qui provoque un événement mouseenter(mouseover).

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  16. #16
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je récupérer les valeurs sélectionnées de checkbox de même nom ?
    [FAIT] [SpaceFrog, danielhagnoul] [jQuery 1.5] [2011-02-02]

    Comment puis-je récupérer les valeurs sélectionnées de checkbox de même nom ?

    Exemple :
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    <!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">
    	<title>Forum jQuery</title>
    	<style>
    		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; }
    	</style>
    </head>
    <body>
    	<h1>Forum jQuery</h1>
    	<div id="conteneur">
     
    		<p id="count"></p>
     
    		<p>checkbox newsletter : </p>
    		<form>
    			<input type="checkbox" name="newsletter" checked="checked" value="Hourly" />
    			<input type="checkbox" name="newsletter" value="Daily" />
    			<input type="checkbox" name="newsletter" value="Weekly" />
    			<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
    			<input type="checkbox" name="newsletter" value="Yearly" />
    		</form>
     
    		<p>checkbox check[] : </p>		
    		<form>
    			<input type='checkbox' name='check[]' value='one'/>
    			<input type='checkbox' name='check[]' value='two'/>
    			<input type='checkbox' name='check[]' value='three'/>
    			<input type='checkbox' name='check[]' value='four'/>
    			<input type='checkbox' name='check[]' value='five'/>
    			<input type='checkbox' name='check[]' value='six'/>
    			<input type='checkbox' name='check[]' value='seven'/>
    			<input type='checkbox' name='check[]' value='eight'/>
    			<input type='checkbox' name='check[]' value='nine'/>
    			<input type='checkbox' name='check[]' value='ten'/>
    		</form>
     
    		<p id="values"></p>
     
    	</div>
    	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    	<script>				
    		$(function(){
    			function nameCheck(){
    				var tab = [];
     
    				$("input:checked[name='check[]']").each(function(){
    					tab.push($(this).val());
    				});
     
    				$("#values").text("check[] = " + tab.join(', '));
     
    				return false;
    			}
     
    			// Compter l'ensemble des éléments checked
    			function countChecked() {
    				var n = $("input:checked").length;
     
    				$("#count").text(n + (n <= 1 ? " is" : " are") + " checked !");
    			}
     
    			countChecked();
     
    			$(":checkbox").click(function(){
    				countChecked();
    				nameCheck();
    			});			
    		});
    	</script>
    </body>  
    </html>
    À noter que l'on pourrait aussi bien récupérer les id ou un array littéral avec les id en index. On peut aussi le décliner pour les select multiples avec selected au lieu de checked.

    Voir également :

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  17. #17
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je changer l'ordre des éléments d'une liste ?
    [FAIT] [jQuery 1.5] [2011-02-02]

    Comment puis-je changer l'ordre des éléments d'une liste ?

    Exemple avec une liste de sélection multiple et en utilisant appendTo(), insertAfter(), insertBefore() et clone() :

    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<title>Forum jQuery</title>
    	<style>
    		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;
    		}
    	</style>
    </head>
    <body>
    	<h1>Forum jQuery</h1>
    	<div id="conteneur">
     
    		<select id="selectID" multiple="multiple" size="4">
    			<option value="opt 1">Option n° 1</option>
    			<option value="opt 2" selected="selected">Option n° 2</option>
    			<option value="opt 3">Option n° 3</option>
    			<option value="opt 4">0ption n° 4</option>
    			<option value="opt 5" selected="selected">Option n° 5</option>
    			<option value="opt 6">Option n° 6</option>
    		</select>
     
    	</div>
    	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
     	<script>
    		/*
    		 * 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");
     
    			console.log("------------------");
    			selectList("selectID");
    		});
    	</script>
    </body>
    </html>
    Nota Bene : clone(true) permet de copier la totalité des données (data) et des événements associés à un élément du DOM.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  18. #18
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je réaliser une itération en jQuery ?
    [FAIT] [danielhagnoul, SpaceFrog, Arnaud F.] [jQuery 1.4.3] [2010-11-01]

    Comment puis-je réaliser une itération en jQuery ?

    @danielhagnoul

    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.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $("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.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $("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.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $.each([52, 97], function(i, item) { 
      console.log(i, item); 
    });
    Les autres objets sont parcourus en suivant l'ordre de leurs propriétés nommées.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    var map = { 
      'flammable': 'inflammable', 
      'duh': 'no duh' 
    };
     
    $.each(map, function(key, value){ 
      console(key, value); 
    });
    3) Exemples

    @SpaceFrog, exemple 1 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var chaine ="un;deux;trois;quatre;cinq;six"
    var tab = chaine.split(';')
     
    $.each(tab, function(i, item){
    	console.log(i, item);
    });
    @SpaceFrog, exemple 2 :

    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
    18
    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);
    });
    @SpaceFrog, exemple 3 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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");
    });
    @SpaceFrog, exemple 4 :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var doo = {
    	jules: function(key, param){
    		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');
    });
    @Arnaud F., exemple 1 :

    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
    18
    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);

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  19. #19
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je établir un lien permanent entre deux éléments du DOM ?
    [FAIT] [jQuery 1.5] [2011-02-02]

    Comment puis-je établir un lien permanent entre deux éléments du DOM ?

    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émennt du DOM

    Exemple :
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<title>Forum jQuery</title>
    	<style>
    		/* 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 */
    		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;
    		}
    	</style>
    </head>
    <body>
    	<h1>FAQ jQuery</h1>
    	<div id="conteneur">
    		<ul>
    			<li class="exemple">Liste n° 1</li>
    			<li class="exemple">Liste n° 2</li>
    			<li class="exemple">Liste n° 3</li>
    			<li class="exemple">Liste n° 4</li>
    			<li class="exemple">Liste n° 5</li>
    		</ul>
    		<div class="exemple">Division n° 1</div>
    		<div class="exemple">Division n° 2</div>
    		<form>
    			<p>Un mot pour remplir</p>
    			<div class="exemple">Division n° 3</div>
    		</form>
    		<div class="exemple">Division n° 4</div>
    		<div class="exemple">Division n° 5</div>
    	</div> 
    	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    	<script>
    		$(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)
    						.data("division", temp.shift()) // retire le premier élément de temp
    						.click(function(){
    							// avec animation 1,5s
    							$("html, body").animate({"scrollTop": $(this).data("division").position().top}, 1500);
     
    							// sans animation
    							// $("html, body").scrollTop($(this).data("division").position().top);
    						});
    				}
    			});
    		});
     	</script>
    </body>  
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  20. #20
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut Comment puis-je manipuler plusieurs attributs d'un élément du DOM en même temps ?
    [FAIT] [jQuery 1.5] [2011-02-02]

    Comment puis-je manipuler plusieurs attributs d'un élément du DOM en même temps ?

    Exemple :
    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
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    <!doctype html>
    <html lang="fr">
    <head>
    	<meta charset="utf-8">
    	<meta name="Author" content="Daniel Hagnoul">
    	<title>Forum jQuery</title>
    	<style>
    		/* 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;
    			margin-bottom:6px;
    		}
    		a.principale {
    			background-color:lightyellow;
    		}
    	</style>
    </head>
    <body>
    	<h1>FAQ jQuery</h1>
    	<div id="conteneur">
    		<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
    		<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
    		<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
    		<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
    		<a href="http://danielhagnoul.developpez.com">Page index de MonCaEx</a>
    	</div> 
    	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
    	<script>
    		$(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 !"
    			});
    		});
     	</script>
    </body>  
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

Discussions similaires

  1. Réponses: 3
    Dernier message: 20/01/2007, 19h09
  2. Réponses: 8
    Dernier message: 08/12/2006, 13h22
  3. Ne choisir QUE les lignes qui ont ce critere
    Par elreybubu dans le forum Oracle
    Réponses: 13
    Dernier message: 29/11/2006, 16h59
  4. supprimer les fichiers qui ont des mêmes noms
    Par manaboko dans le forum Langage
    Réponses: 5
    Dernier message: 08/03/2006, 09h09
  5. Selectionner les date qui ont minimum une heure d'ecart
    Par uraxyd dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 26/07/2005, 13h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo