Sélecteurs jQuery pour les formulaires

Les selecteurs

• jQuery est fourni avec de nombreux sélecteurs de formulaire pour accéder aux éléments de formulaire plus facilement et plus efficacement.
• Lorsqu’on manipule des formulaires, les sélecteurs personnalisés de jQuery peuvent simplifier la sélection des éléments recherchés.
• Comme les autres sélecteurs, il est possible de combiner les sélecteurs pour formulaires afin d’obtenir une meilleure précision.
• Par exemple, nous pouvons sélectionner tous les boutons radio cochés (non les cases à cocher) avec $(':radio:checked') ou sélectionner toutes les zones de saisie de mot de passe et les champs de saisie de texte désactivés avec $(':password, :text:disabled').
• Pour sélectionne tous les éléments bouton et tous les éléments de type button: $(':button').
• Avec les sélecteurs personnalisés, nous appliquons les principes de base de CSS pour construire la liste des éléments correspondants.

jQuery sélecteurs d'élément

• La liste suivante décrit quelques sélecteurs du formulaire.

• Les boutons

  • En HTML5, il y a quatre sortes de boutons :
  • jQuery propose une pseudo-classe associée respectivement à chacun de ces boutons :
  • :button , Éléments button et input dont l’attribut de type est égal à button.
    • Exemple:
      • Pour sélectionner un bouton d’envoi :$('input:submit');
  • :reset,, : Sélectionne tous les éléments de type reset.
    • Exemple:
      • Pour sélectionner un bouton de réinitialisation :$('input:reset');
  • :image,, : Sélectionne tous les éléments de type image
  • :submit,, : Sélectionne tous les éléments de type submit

• Les champs

  • :text: Éléments de saisie dont l’attribut de type est égal au nom du sélecteur, sélectionne tous les éléments de type text
    • :password, , : Sélectionne tous les éléments de type password (mot de passe) .
      • Exemple:
        • Pour choisir un mot de passe :$('input:password');
        • Pour obtenir la valeur du mot de passe : $('input:password').val();
        • Pour définir la valeur du mot de passe : $('input:text').val("New Text");
    • :input , Éléments de type input, textarea, select et button.
      • Exemple:
        • Pour sélectionner une zone de texte :$('textarea');
        • Pour obtenir la valeur textarea : $('textarea').val();
        • Pour définir la valeur textarea : $('textarea').val("New Text in Textarea");

  • Les états des champs

    • :enabled Éléments de formulaire activés.
    • :disabled : Éléments de formulaire désactivés, Sélectionne tous les éléments qui sont désactivées.
    • :checked Boutons radio ou cases à cocher sélectionnés.
    • :selected Éléments option sélectionnés.

  • Le champ d'envoi de fichier

    • :file: Sélectionne tous les éléments de type file
      • Exemple:
        • Pour sélectionner un fichier :$('input:file');
        • Pour vérifier si une case à cocher est cochée : $('input:checkbox[name=checkboxname]').is(':checked');
        • Pour obtenir la valeur du fichier: $('input:file').val();

  • Les options

    • :checkbox : Sélectionne tous les éléments de type checkbox.
      • Exemple:
        • Pour sélectionner une case à cocher :$('input:checkbox');
        • Pour vérifier si une case à cocher est cochée : $('input:checkbox[name=checkboxname]').is(':checked');
        • Pour cocher une case: $('input:checkbox[name=checkboxname]').attr('checked',true);
        • Pour décocher une case à cocher: $('input:checkbox[name=checkboxname]').attr('checked',false);
    • :radio, : Sélectionne tous les éléments de type radio.
      • Exemple:
        • Pour sélectionner un bouton radio :$('input:radio');
        • Pour obtenir l’option du bouton radio sélectionné : $('input:radio[name=radiobutton-name]:checked').val();
        • Pour sélectionner la première option de bouton radio : $('input:radio[name=radiobutton-name]:nth(0)').attr('checked',true);, ou $('input:radio[name=radiobutton-name]')[0].checked = true;

Application

• Utiliser bootstrap4 pour créer un formulaire qui contient tous les éléments qu'on a vue précédemment
• Utiliser JQuery pour changer la couleur des boutons et leur contour
• Trouver le nombre de boutons dans le formulaire(<input type="button")

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