如何用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>
输出:
方法:首先,我们将创建一个段落元素,其中包含一个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>
输出: