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.
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 :
Description : Sélectionne tous les éléments bouton et tous les éléments de type button.
Syntaxe
$(":button") ;
<!DOCTYPE html> <html lang="fr"> <head> <title>jQuery les seleceurs éléments de formulaire </title> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(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>
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')
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(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>
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<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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>
Exemple :
Sélectionner le code<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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>
Syntaxe
$("input:disabled")
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 type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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>
Description : Sélectionne tous les éléments qui sont activés.
Syntaxe
$("input:enabled")
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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>
Description : le sélecteur :file Sélectionne tous les éléments de type = " file".
Syntaxe
$("input:file") ;
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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> <input type="reset" /> <input type="submit" /><br /> </fieldset> </form> <div> </div> </center> </body> </html>
Description : Le sélecteur :focus sélectionne l'élément s’il a le focus actuellement.
Syntaxe
$(':focus') ;
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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>
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 type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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="image" src="http://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" /> <input type="submit" value="valider"/> </form><br /><br /> <div> </div></center> </body> </html>
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 type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(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="http://www.oujood.com/images/apprendre.png"/ width="100" /> <input type="password" /> <input type="reset" /> <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>
Visiteurs Massifs Google
Comment Obliger Google à vous envoyer Gratuitement 500 visiteurs Minimum par Jour ?
Des Visiteurs Prêts à acheter vos produits....[Livre PDF, audio, et Vidéo]
Formation en ligne