SELECTORS - :button Selector

The ':button Selector' is used to select all the input elements with type="button".

Say, for example, if you want something to be entered by the user.

And HTML uses the <input> element to achieve the above.

Also the <input type="button"> creates a button.

Let us learn more with the below example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    
    <form >
    	<span> Enter User :: </span>
    	<input type = "text">
        <br/>
    	
    	<span> Enter Password :: </span>
    	<input type = "password">
        <br/>
        
        <input type = "button" value = "Click Me">
        <br/>
    	
    </form>	

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      
			$(':button').css("background-color", "green");
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are three input elements.

<input type = "text">
<input type = "password">
<input type = "button" value = "Click Me">

And we want to highlight the color of those input elements that has 'type = "button"'(Using 'css()' function provided by JQuery).

And we can see that there is one <input> element that has 'type = "button"'.

Thus the contents of,

<input type = "button" value = "Click Me">

Gets changed.

And this happened with the ':reset' element selector.

$(':button').css("background-color", "green");

And the JQuery code locates the input element of type button and changes the color to green.

❮❮ PREV NEXT ❯❯