Beispiel für eine JQuery-Eingabeauswahl

In diesem Tutorial wird die Verwendung des Eingabeselektors in jQuery erläutert. Der Eingabeselektor wählt alle Eingabeelemente im Dokument aus. Es werden nur Formularelemente ausgewählt, die als Textfeld, Passwortfeld, Optionsfeld, Kontrollkästchen, Senden-Schaltfläche und Zurücksetzen-Schaltfläche dargestellt werden können. Das Eingabeelement wird zum Erstellen interaktiver Steuerelemente für webbasierte Formulare verwendet. Es wird als „: Eingabe“ geschrieben und muss mit einem Doppelpunkt vor dem Tag-Namen beginnen.

Syntax der JQuery-Eingabeauswahl

$(“:input”)

Beispiel für eine JQuery-Eingabeauswahl

<!doctype html>
<head>
<title>JQuery Input Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Input Selector Example</h2>
<style>
input:valid
{
background: lightpink;
}
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $(":input").css("border","2px solid green");
   });
</script>
<body>
<form>
  <fieldset>
      <legend>User Details</legend>
     <p>Name    : <input type="text" name="uname"/></p>
     <p>Password: <input type="password" name="pwd"/></p>
     <p>Email   : <input type="email" name="address"/></p>
     <p>Gender  : <input type="radio" name="option" value="male"/>Male
                  <input type="radio" name="option" value="female"/>Female</p>
     <p> Select your hobbies: <input type="checkbox" name="option1"    value="Cricket"/>Cricket
     <input type="checkbox" name="option1" value="Football"/>Football
     <input type="checkbox" name="option1" value="Hockey" checked/>Hockey</p>
     <input type="button" value="Submit"/>
     <input type="button" value="Reset"/>
  </fieldset>
</form>
</body>
</html>

Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
$(“:input”).css(“border”,2px solid green“); Zeile definiert den Eingabeselektor, der alle Elemente vom Typ Eingabe auswählt. Es verwendet die CSS-Stileigenschaft, um den Rahmen aller Eingabeelemente mit grüner Farbe festzulegen.
Der :valid-Selektor ermöglicht die Auswahl von Eingabeelementen, die gültige Inhalte enthalten, die durch ihr Typattribut bestimmt werden.