The ':input Selector' is used to select all the input elements.
Say, for example, if you want something to be entered by the user.
And HTML uses the <input> element to achieve the above.
Let us learn more with the below example.
<html>
<head>
<title> My First Programme </title>
</head>
<body>
<h1> JQuery </h1>
<span> Enter first value :: </span>
<input type = "text">
<br/>
<span> Enter second value :: </span>
<input type = "text">
<br/>
<button> Click me </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
<script>
$('button').click( function() {
$(':input').css("background-color", "green");
});
</script>
</body>
</html>
So, if you see the above code. We can see that there are three input elements. The first two,
<input type = "text"> <input type = "text">
Has the <input> tag.
While the third one is a button.
<button> Click me </button>
Yes! A <button> is also an input element.
And we want to change the color of those input elements using 'css()' function provided by JQuery.
Thus the contents of,
<input type = "text"> <input type = "text"> <button> Click me </button>
Gets changed.
And this happened with the ':input' element selector.
$('button').click( function() {
$(':input').css("background-color", "green");
});The moment the button is clicked, JQuery statement gets triggered.
$(':input').css("background-color", "green");And the JQuery code locates the input elements and changes their color to green.