Home  >  Article  >  Web Front-end  >  jQuery Get h1-h6 title element value method example

jQuery Get h1-h6 title element value method example

小云云
小云云Original
2018-01-23 13:31:232177browse

This article mainly introduces jQuery's method of obtaining the value of h1-h6 title elements, involving the $(":header") selector to operate h1-h6 elements and event response related techniques. Friends in need can refer to it, I hope it can help. to everyone.

1. Problem background:

Find h1-h6, traverse them, and print out the content

2. Implementation code:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>查找标题</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
    <script>
      $(function(){
        //查找h1-h6
        $(":header").each(function(){
          $(this).click(function(event){
            console.info(event.target.innerText);
            console.log(event.currentTarget.innerHTML);
          });
        });
      });
    </script>
  </head>
  <body>
    <h1>Hello H1</h1>
    <h2>Hello H2</h2>
    <h3>Hello H3</h3>
    <h4>Hello H4</h4>
    <h5>Hello H5</h5>
    <h6>Hello H6</h6>
  </body>
</html>

3. Running rendering:

Related recommendations:

How to correctly use title elements, paragraphs and forced line breaks _Basic Tutorial

Summary of JQuery’s method of obtaining elements

Example analysis of JavaScript methods and attributes for obtaining elements


The above is the detailed content of jQuery Get h1-h6 title element value method example. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn