Que fait le sélecteur :button en jQuery ?

Le sélecteur :button en jQuery sélectionne tous les éléments bouton et les éléments de type button.

Comment utilise-t-on le sélecteur :checked ?

Le sélecteur :checked est utilisé pour sélectionner tous les éléments cases à cocher et boutons radio qui sont cochés. Sa syntaxe est $(:checked).

À quoi sert le sélecteur :disabled ?

Le sélecteur :disabled sélectionne tous les éléments de formulaire qui sont désactivés. Il peut être utilisé seul ou avec un nom de balise comme $('input:disabled').

Quelle est la syntaxe du sélecteur :file en jQuery ?

La syntaxe du sélecteur :file est $("input:file"). Il est utilisé pour sélectionner tous les éléments de type file.

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

OUJOOD.COM

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 :

Sélecteur :button Sélectionne tous les éléments bouton et/ou tous les éléments de type bouton.
Sélecteur :checkbox Sélectionne tous les éléments de type checkbox.
Sélecteur :checked Sélectionne tous les éléments de type checkbox qui sont cochés
Sélecteur :disabled Sélectionne tous les éléments qui sont désactivées.
Sélecteur :enabled Sélectionne tous les éléments qui sont activées.
Sélecteur :file Sélectionne tous les éléments de type file
Sélecteur :focus Sélectionne l'élément s’il a le focus actuellement.
Sélecteur :image Sélectionne tous les éléments de type image
Sélecteur :input Sélectionne tous les éléments input, textarea, et bouton.
Sélecteur :password Sélectionne tous les éléments de type password (mot de passe) .
Sélecteur :radio Sélectionne tous les éléments de type radio.
Sélecteur :reset Sélectionne tous les éléments de type reset.
Sélecteur :selected Sélectionne tous les éléments sélectionnés.
Sélecteur :submit Sélectionne tous les éléments de type submit
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

Exemple : 📝 Copier 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

Exemple : 📝 Copier 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

Exemple : 📝 Copier 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 :

Exemple : 📝 Copier 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')

Exemple :

Exemple : 📝 Copier 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 :

Exemple : 📝 Copier 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.

Exemple : 📝 Copier 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

Exemple : 📝 Copier 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 :

Exemple : 📝 Copier 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 :

Exemple : 📝 Copier 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

JQuery référenves des sélecteurs

Haut de la page

Par gerywa 25 juillet 2014