jQuery - Select elements with specific tag name

Select elements with specific tag name in jQuery

In this tutorial, you will learn how to select all the elements with specific tag name using jQuery.

Solution

To select the elements in the document that have a specific tag name using jQuery, you can use the tag selector.

var elements = $("tagname");

Replace the "tagname" with the required tag name. For example, if you want to select all the paragraphs, use "p". Or if you want to select all the Heading 1 elements, use "h1", etc.

Programs

1. In the following script, when user clicks on the button, we select all the paragraph elements in the document, and change their color to red.

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#action").click(function() {
          // Select the elements by tag name
          var elements = $("p");
    
          // Do something with the selected elements
          elements.css("color", "red");
        });
      });
    </script>
  </head>
  <body>
    <h2>Hello User!</h2>
    <input type="submit" id="action" value="Click Me"></input>
    <p>This is a paragraph.</p>
    <p>This is second paragraph.</p>
    <p class="my-note">This is third paragraph.</p>
    <h3>Another section</h3>
  </body>
</html>

JavaScript Code