Augmente ou diminue l'espace entre les mots dans un texte
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
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") ;
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>
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 : 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>
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.
SyntaxeExemple : 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>
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>
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')
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>
Description : Sélectionne tous les éléments qui sont activés.
Syntaxe
$("input:enabled")
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>
Description : le sélecteur :file Sélectionne tous les éléments de type = " file".
Syntaxe
$("input:file") ;
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>
<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') ;
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>
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" /> <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 :
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" />
<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>
Par gerywa 25 juillet 2014