The ':text Selector' is used to select all the input elements with type="text".
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 User :: </span>
<input type = "text">
<br/>
<span> Enter Password :: </span>
<input type = "password">
<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() {
$(':text').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 = "password">
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 that has 'type = "text"'(Using 'css()' function provided by JQuery).
And we can see that there is one <input> element that has 'type = "text"'.
Thus the contents of,
<input type = "text">
Gets changed.
And this happened with the ':text' element selector.
$('button').click( function() {
$(':text').css("background-color", "green");
});The moment the button is clicked, JQuery statement gets triggered.
$(':text').css("background-color", "green");And the JQuery code locates the input element of type text and changes their color to green.