{"id":3421,"date":"2013-04-08T19:05:49","date_gmt":"2013-04-08T19:05:49","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=3421"},"modified":"2013-04-08T19:05:49","modified_gmt":"2013-04-08T19:05:49","slug":"jquery-header-selector-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-header-selector-examples\/","title":{"rendered":"jQuery :header Selector Examples"},"content":{"rendered":"<p>The <em><strong>jQuery header selector<\/strong><\/em>\u00a0is used to\u00a0selects all elements that are headers. This means that you will be able to easily\u00a0target 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.<\/p>\n<p><!--more--><\/p>\n<h2>How to use the jQuery header selector<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3421\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>:header represents the Header Selector<\/p>\n<p>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:<\/p>\n<h3>Example: Highlight all Heading tags when a button is clicked<\/h3>\n<pre class=\"lang:xhtml decode:true crayon-selected\" title=\"Example\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Examples of using the :header selector in jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n.green {\n\tbackground-color: #D7FFD7;\n\tborder: 1px solid #090;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div class=\"divs_container\"&gt;\n\n\t&lt;h1&gt;This is H1&lt;\/h1&gt;\n\n    &lt;p&gt;This is some custom text.&lt;\/p&gt;\n\n\t&lt;h2&gt;This is H2&lt;\/h2&gt;\n\n    &lt;p&gt;This is some custom text.&lt;\/p&gt;    \n\n\t&lt;h3&gt;This is H3&lt;\/h3&gt;\n\n    &lt;p&gt;This is some custom text.&lt;\/p&gt;    \n\n\t&lt;h4&gt;This is H4&lt;\/h4&gt;            \n\n    &lt;p&gt;This is some custom text.&lt;\/p&gt;    \n\n\t&lt;h5&gt;This is H5&lt;\/h5&gt;\n\n    &lt;p&gt;This is some custom text.&lt;\/p&gt;    \n\n\t&lt;h6&gt;This is H6&lt;\/h6&gt;        \n\n    &lt;p&gt;This is some custom text.&lt;\/p&gt;  \n\n&lt;\/div&gt;\n\n&lt;p&gt;\t\n&lt;input type=\"submit\" name=\"sbt_highlight_all_header\" id=\"sbt_highlight_all_header\" value=\"Add Green class to ALL HEADERS\"&gt;\n\n&lt;\/p&gt;\n\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$(document).ready(function(){\n\n\t$('#sbt_highlight_all_header').on(\"click\", function(e){\t\t\n\n\t\t$('.divs_container :header').addClass('green');\n\n\t\te.preventDefault();\n\n\t});\t\t\n\n});\t\n\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=3421\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>That&#8217;s it!<\/h5>\n<p>Do you know of any other ways to use the <em><strong>jQuery :header selector<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery header selector\u00a0is used to\u00a0selects all elements that are headers. This means that you will be able to easily\u00a0target 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.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,43,41],"class_list":["post-3421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-snippets","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-Tb","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=3421"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/3421\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=3421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=3421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=3421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}