如何用jQuery在anchor标签中添加标题

在这篇文章中，我们将看到如何使用jQuery在锚标签中添加标题。标题属性是用来指定元素的额外信息的。当鼠标移动到该元素上时，它就会显示这些信息。

语法:

$("#GFG").prop('title', "Title Value");

方法：首先我们将创建一个段落元素，它将包含一个id为GFG的锚元素。我们还将创建一个按钮，当按钮被点击时，jQuery部分将被执行，并在锚元素上添加标题道具。

例子1：在这个例子中，我们通过使用jQuery为锚点元素添加标题属性。

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">
  
    <script src="//code.jquery.com/jquery-3.2.1.min.js">
    </script>
  
    <title>
        How to add a title in anchor tag using jQuery?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>How to add a title in anchor tag using jQuery?</h3>
  
    <p>
        Welcome to <a id="GFG" href=
        "https://www.geeksforgeeks.org/">
        GeeksforGeeks</a>
    </p>
  
    <input type="button" value="Add Title Attribute" 
        id="btn" style="padding: 5px 15px;">
  
    <script>
        (document).ready(function () {
            ("#btn").click(function() {
                $("#GFG").prop('title', 
                      "A computer science portal")
            });
        });
    </script>
</body>
  
</html>

输出:

如何用jQuery在anchor标签中添加标题？

方法：首先，我们将创建一个段落元素，其中包含一个id为GFG的图片锚元素。我们还将创建一个按钮，当按钮被点击时，jQuery部分被执行，并将标题道具添加到锚元素（图片）。

例子2：在这个例子中，我们通过使用jQuery为锚点元素（图片）添加标题属性。

<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <script src="//code.jquery.com/jquery-3.2.1.min.js">
    </script>
  
    <title>
        How to add a title in anchor tag using jQuery?
    </title>
  
    <style>
        body {
            text-align: center;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>How to add a title in anchor tag using jQuery?</h3>
  
    <p>
        <a id="GFG" href=
        "https://www.geeksforgeeks.org/">
        <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">    
        </a>
    </p>
  
    <input type="button" value="Add Title Attribute" 
        id="btn" style="padding: 5px 15px;">
  
    <script>
        (document).ready(function () {
            ("#btn").click(function() {
                $("#GFG").prop('title', 
                    "A computer science portal")
            });
        });
    </script>
</body>
  
</html>