SELECTORS - :header Selector

The ':header Selector' is used to select all the header elements, i.e. <h1>, <h2> e.t.c.

Let us simplify with the below example.

Example :

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

  	<body>
    	<h1> First Heading </h1>
    	
    	<h2> Second Heading </h2>
    	
    	<h3> Third Heading </h3>
    	
    	<div class = "newClass">
    		<p class = "para1"> First Paragraph </p>
    		<p class = "para2"> Second Paragraph </p>
    		<p class = "para3"> Third Paragraph </p>
    	</div>	
    	
    	<button> Click me </button>
    	
    	<h4> Fourth Heading </h4>


      	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
	  
      	<script>
      
			$('button').click( function() { 
            	$(':header').text("All the header elements got replaced")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are four headers.

<h1> First Heading </h1>
<h2> Second Heading </h2>
<h3> Third Heading </h3>
<h4> Fourth Heading </h4>

And on button click, the contents of all the header elements got replaced.

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

$('button').click( function() {
	$(':header').text("All the header elements got replaced")
});

The moment the button is clicked, JQuery statement gets triggered.

$(':header').text("All the header elements got replaced")

And replaces all the header elements with 'All the header elements got replaced'.

❮❮ PREV NEXT ❯❯