Open In App

How to find the title attribute of the first emphasized element in the page using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In JavaScript, we have a lot of different libraries for different purposes. jQuery is also a part of the JavaScript library which is made to simplify the JavaScript codes, and you can do animation to make your website more creative as well as dynamic.

Before learning jQuery library you must have a basic knowledge of HTML, CSS, and JavaScript. 

In this article, we will see how to find the title attribute of the first emphasized on the page using jQuery. The title is an attribute, not an element that is a part of the head element. Emphasized is an element that is used to give more importance to that text.

Method/function used – 

  • .click(): This method triggers the click event to run when a click event occurs.
  • .attr(): It is used to get the value of an attribute for the first element in the set of matched elements.
  • .text(): It is used to get the combined text contents of each element in the set of matched elements, including their descendants.

Example 1: In the following examples first, we will find the emphasized element and print the title value after clicking the button.

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <style type="text/css">
      button {
        display: block;
        margin: 20px 0 0 0;
      }
    </style>
  </head>
  <body>
    <p>
      GeeksForGeeks
      <em title="is a computer science portal for geeks.">
       (GFG)
      </em>.
    </p>
  
    <p id="id1"></p>
  
    <button id="button1">
      Click to see what is there in the title attribute
    </button>
    <script>
      $("#button1").click(function () {
        var title = $("em").attr("title");
        $("#id1").text(title);
      });
    </script>
  </body>
</html>


Output: The text present in the paragraph and the emphasized element gets displayed followed by the button. After clicking the button you can see the text(value) present in the title attribute.

Example 2: 

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-git.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <style type="text/css">
      button {
        display: block;
        margin: 20px 0 0 0;
      }
    </style>
  </head>
  <body>
    <p>John <em title="You Can't see me">Cena</em>.</p>
  
    <p id="id1"></p>
  
    <button id="button1">
      Click to see what is there in the title attribute
    </button>
    <script>
      $("#button1").click(function () {
        var title = $("em").attr("title");
        $("#id1").text(title);
      });
    </script>
  </body>
</html>


Output:

Before click:



Last Updated : 07 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads