oujood.com

jQuery Les sélecteurs des éléments de formulaire

jQuery les sélecteurs des éléments de formulaire permettent de sélectionner les éléments dans un formulaire
Les sélecteurs des éléments de formulaire sont des sélecteurs qui sélectionnent les éléments dans un formulaire pour pouvoir les manipuler avec jQuery

chercher |

Définition et Usage éléments de formulaire

jQuery cours tutorial

Dans jQuery les éléments de formulaires peuvent être sélectionnés grâce aux sélecteurs qui suivent :

Nous allons voir les éléments de formulaires suivants :

  1. Sélecteur :button   Sélectionne tous les éléments  bouton et/ou  tous les éléments de type bouton.
  2. Sélecteur :checkbox Sélectionne tous les éléments de type checkbox.
  3. Sélecteur :checked Sélectionne tous les éléments de type checkbox qui sont cochés
  4. Sélecteur :disabled Sélectionne tous les éléments qui sont désactivées.
  5. Sélecteur :enabled Sélectionne tous les éléments qui sont activées.
  6. Sélecteur :file Sélectionne tous les éléments de type file
  7. Sélecteur :focus Sélectionne l'élément s’il a le focus actuellement.
  8. Sélecteur :image Sélectionne tous les éléments de type image
  9. Sélecteur :input Sélectionne tous les éléments input, textarea,  et bouton.
  10. Sélecteur :password   Sélectionne tous les éléments de type password (mot de passe) .
  11. Sélecteur :radio Sélectionne tous les éléments de type radio.
  12. Sélecteur :reset Sélectionne tous les éléments de type reset.
  13. Sélecteur :selected Sélectionne tous les éléments sélectionnés.
  14. Sélecteur :submit Sélectionne tous les éléments de type submit
  15. Sélecteur :text Sélectionne tous les éléments de type text

Le sélecteur :button

Description : Sélectionne tous les éléments  bouton et  tous les éléments de type button.

Syntaxe

$(":button") ;

Exemple : Trouver le nombre de boutons dans le formulaire

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
   <title>jQuery les seleceurs éléments de formulaire  </title>
<script " src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  <script ">
$(document).ready(function(){
    var input = $(":button").css({background:"yellow",
border:"3px red solid"});
    $("div").text("Pour ce type  jQuery a trouvé " + input.length
+ " boutons.")
            .css("color", "#ff0000");
    $("form").submit(function () { return false; });
});
</script>
</head>
<body>
 <center> <form>
    <input type="button" value="Input Bouton"/><br
/><br />
    <input type="checkbox" /><br />
    <input type="checkbox" /><br /><br />
    <input type="file" /><br />
    <input type="hidden" /><br />
    <input type="image" /><br />
    <input type="password" /><br />
    <input type="radio" /><br />
    <input type="text" /><br /><br />
   
<select><option>Option<option/></select><br
/><br />
    <textarea></textarea><br /><br
/>
    <input type="reset" />
    <input type="submit" />
    <button>Bouton</button>
  </form>
  <div>
  </div>
  </center>
</body>
</html>

 

Haut de la page

Le sélecteur : checkbox

Description :Lesélecteur : checkbox sélectionne tous les éléments de type checkbox.

Note :

$(':checkbox') est équivalent à $('[type=checkbox]'). Comme pour les autres sélecteurs de pseudo-classe (ceux qui commencent par un ":") il est recommandé de les faire précéder d'un nom de balise ou  autre sélecteur ; sinon, le sélecteur universel ("*") est utilisé implicitement. En d'autres termes, le  $(':checkbox') est équivalent à $('*:checkbox'), afin de $('input:checkbox') doit être utilisé à la place..

Syntaxe

$('input:checkbox')

Exemple : Trouver le nombre de case à cocher dans le formulaire

Sélectionner le code

  <!DOCTYPE html>
   <html lang="fr">
   <head>
        <meta charset="utf-8">
     <title>jQuery demo </title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script ">
  $(document).ready(function(){function countChecked() {
    var n = $("input:checked").length;
    $("div").text(n + (n <= 1 ? " case est" : " cases sont") + "
  cochée" + (n > 1 ? "s!" : "!")).css("color", "#ff0000");
  }
  countChecked();
  $(":checkbox").click(countChecked);
  });
  </script>
  </head>
  <body>
    <center>
  <form>
    <p>
      <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"
  />
    </p>
  </form>
  <div></div>
  </center>
  <script>
  
  </script>
  
  </body>
  </html>

 

Haut de la page

Le sélecteur : checked

Description : Le sélecteur : checked séléctionne tous les éléments cases à cocher qui sont cochés.

 Le sélecteur : checked est utilisé pour les cases à cocher et les boutons radio.

Syntaxe
$(":checked")

Exemple 1: trouve toutes les case à cocher qui sont cochées

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script src="jquery.js"></script>
  <script ">
$(document).ready(function(){function countChecked() {
  var n = $("input:checked").length;
  $("div").text(n + (n <= 1 ? " case est" : " cases sont") + "
cochée" + (n > 1 ? "s!" : "!"));
}
countChecked();
$(":checkbox").click(countChecked);
});
</script>
</head>
<body>
  <center>
<form>
  <p>
    <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"
/>
  </p>
</form>
<div></div>
</center>
</body>
</html>

 

Haut de la page

Exemple :

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script src="jquery.js"></script>
  <script ">
$(document).ready(function(){
$("input").click(function() {
  $("#log").html( "L'option " + $(":checked").val() + " est
sélectionée!" );
});
});
</script>
</head>
<body>
 <center>
<form>
  <div>
    <input type="radio" name="fruit" value="orange"
id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="pommme"
id="pommme">
    <label for="pommme">pommme</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banane"
id="banane">
    <label for="banane">banane</label>
  </div>
  <div id="log"></div>
</form>
</center>
</body>
</html>

 

Haut de la page

Le sélecteur :disabled

Syntaxe

$("input:disabled")

Description :  Le sélecteur :disabled  sélectionne tous les éléments qui sont désactivées.

Note :  Comme pour les autres sélecteurs de pseudo-classe (ceux qui commencent par un ":") si vous ne faites pas précéder d'un nom de balise ou quelque autre sélecteur (comme ceci par exemple : $('input:disabled') ) le sélecteur universel ("*") est implicitement utilisé. En d'autres termes, le $(':disabled') est équivalent à $('*:disabled') .

Exemple :

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script src="jquery.js"></script>
  <script ">
$(document).ready(function(){
$("input:disabled").val("Ce champ est désactivé ");
});
</script>
</head>
<body>
  <center><form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
</center>
</body>
</html>

 

Haut de la page

Le sélecteur :enabled

Description : Sélectionne tous les éléments qui sont activés.

Syntaxe

$("input:enabled")

Exemple :

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script "src="jquery.js"></script>
  <script ">
$(document).ready(function(){
$("input:enabled").val("Ce champ est activé ");
$("input:disabled").val("Ce champ est désactivé ");
});
</script>
</head>
<body>
 <center> <form>

    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
</center>

</body>
</html>

 

Haut de la page

Le sélecteur :file

Description : le sélecteur :file Sélectionne tous les éléments de type = " file".

Syntaxe

$("input:file") ;

Exemple : Retrouve tous les intrants de fichier.

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script src="jquery.js"></script>
  <script ">
$(document).ready(function(){
var input = $("input:file").css({background:"yellow", border:"2px
#ff0000 solid"});
    $("div").text("jQuery a trouvé " + input.length + "de type
file.")
            .css("color", "#ff0000");
    $("form").submit(function () { return false; });
});
</script>
</head>
<body>
 <center> <form>
    <fieldset>
   <input type="button" value="Input Button"/><br
/>
    <input type="checkbox" /><br />

    <input type="file" /><br />
    <input type="hidden" /><br />
    <input type="image" /><br />

    <input type="password" /><br />
    <input type="radio" /><br /><br />
    <input type="text" />
   
<select><option>Option<option/></select><br
/><br />
    <textarea></textarea><br /><br />
    <button>Bouton</button>&nbsp;&nbsp;
    <input type="reset" />&nbsp;&nbsp;
    <input type="submit" /><br />
    </fieldset>   
  </form>
  <div>
  </div>
</center>
</body>
</html>

 

Haut de la page

Le sélecteur :focus

Description : Le sélecteur :focus sélectionne l'élément s’il a  le focus actuellement.

Syntaxe

$(':focus') ;

Exemple : Ajoute la classe ciblée à  l’élément qui a le focus Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script src="jquery.js"></script>
  <script ">
$(document).ready(function(){
$( "#content" ).delegate( "*", "focus blur", function( event )
{
    var elem = $( this );
    setTimeout(function() {
       elem.toggleClass( "focused", elem.is( ":focus" ) );
    }, 0);
});
});
</script>
<style>
.focused {
    background: #eeaa55;
}
</style>

</head>
<body>
<center> 
<div id="content">
    <input tabIndex="1"><br /><br />
    <input tabIndex="2"><br /><br />
    <select tabIndex="3"><br /><br />
        <option>select menu</option><br /><br
/>
    </select><br /><br />
    <div tabIndex="4">
       Un div
    </div>
</div>
</center>
</body>
</html>

 

Haut de la page

Le sélecteur :image

Description : Le sélecteur :imageSélectionne tous les éléments de type image.

:image est équivalent à [type="image"]

Syntaxe

$( ':image') ;

Exemple :

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script src="jquery.js"></script>
  <script ">
$(document).ready(function(){
 var input = $("input:image").css({border:"2px #00dd00
solid"});
    $("div").text("JQuery a trouvé " + input.length + " élément de
ce type .")
            .css("color", "red");
    $("form").submit(function () { return false; });
});
</script>
  <style>
  textarea { height:45px; }
  </style>
 
</head>
<body>
  <center><form>
 
    <input type="file" /><br /><br />
    <input type="imagesrc="https://www.oujood.com/images/apprendre.png"/
width="100" ><br /><br />
    <input type="password" /><br /><br />
    <input type="radio" /><br /><br />
 
    <input type="text" /><br /><br />
       
    <textarea></textarea><br />
    <input type="reset" />&nbsp;<input type="submit"
value="valider"/>
  </form><br /><br />
  <div>
  </div></center>
</body>
</html>

 

Haut de la page

Le sélecteur :input

Description :Le sélecteur :input  sélectionne tous les contrôles d’un  formulaire.

Syntaxe

$( :input)

Exemple :

Sélectionner le code

<!DOCTYPE html>
 <html lang="fr">
 <head>
      <meta charset="utf-8">
   <title>jQuery demo </title>
<script src="jquery.js"></script>
  <script ">
$(document).ready(function(){
 var allInputs = $(":input");
    var formChildren = $("form > *").css({border:"2px #00dd00
solid"});
    $("#messages").text(allInputs.length + " inputs trouvés dans ce
formulaire et " + formChildren.length + " enfants.");
    $("form").submit(function () { return false; });
});
</script>
  <style>
  textarea { height:100px; }
  </style>
</head>
<body>
  <center><form>
    <input type="button" value="Input Button"/>
    <input type="file" />
    <input type="hidden" />
    <input type="image" src="https://www.oujood.com/images/apprendre.png"/
width="100" />
    <input type="password" />
    <input type="reset" />&nbsp;
    <input type="submit" />
    <input type="text" />
   
<select><option>Option1</option><option>Option2</option>
    </select>
    <textarea id="messages"></textarea>
    <button>Button</button>
  </form>
  </center>
</body>
</html>

 

Haut de la page




Haut de la page

Par gerywa 25 juillet 2014

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web