jQuery
jQuery :header Selector Examples
The jQuery header selector is used to selects all elements that are headers. This means that you will be able to easily target the heading tags such as h1, h2, h3, h4, h5 and h6. In this article, I am going to share easy examples of using the :header selector.
How to use the jQuery header selector
:header represents the Header Selector
For ease of understanding let us assume that we have the heading tags h1-h6 in our web page, along with some content. Now we would like to add a class to these heading tags and thereby highlight them when a button is clicked. This is how it can be done:
Example: Highlight all Heading tags when a button is clicked
<html>
<head>
<title>Examples of using the :header selector in jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.green {
background-color: #D7FFD7;
border: 1px solid #090;
}
</style>
</head>
<body>
<div class="divs_container">
<h1>This is H1</h1>
<p>This is some custom text.</p>
<h2>This is H2</h2>
<p>This is some custom text.</p>
<h3>This is H3</h3>
<p>This is some custom text.</p>
<h4>This is H4</h4>
<p>This is some custom text.</p>
<h5>This is H5</h5>
<p>This is some custom text.</p>
<h6>This is H6</h6>
<p>This is some custom text.</p>
</div>
<p>
<input type="submit" name="sbt_highlight_all_header" id="sbt_highlight_all_header" value="Add Green class to ALL HEADERS">
</p>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
$('#sbt_highlight_all_header').on("click", function(e){
$('.divs_container :header').addClass('green');
e.preventDefault();
});
});
</script>
</body>
</html>That’s it!
Do you know of any other ways to use the jQuery :header selector? Feel free to suggest by commenting below.