📌  相关文章
📜  如何更改 jquery 中的选定链接 - Javascript (1)

📅  最后修改于: 2023-12-03 15:24:48.014000             🧑  作者: Mango

如何更改 jQuery 中的选定链接 - JavaScript

在 jQuery 中,我们可以通过选择器选定一个或多个链接,并对它们进行操作。本文将介绍如何更改选定链接的属性,比如链接地址和文本内容。

更改链接地址

我们可以通过 .attr() 方法获取或设置链接的属性。其中,第一个参数是属性名,第二个参数是属性值。

// 获取链接地址
var href = $('a').eq(0).attr('href');

// 设置链接地址
$('a').eq(0).attr('href', 'http://www.example.com');

上面的代码中,我们首先选定了第一个链接,并获取了它的 href 属性值。然后,我们设置了该链接的 href 属性为 http://www.example.com

更改链接文本内容

我们可以通过 .text() 方法获取或设置链接的文本内容。

// 获取链接文本内容
var text = $('a').eq(0).text();

// 设置链接文本内容
$('a').eq(0).text('新的链接文本内容');

上面的代码中,我们首先选定了第一个链接,并获取了它的文本内容。然后,我们设置了该链接的文本内容为 新的链接文本内容

示例

下面是一个完整的示例,演示如何更改选定链接的属性和文本内容。

<!DOCTYPE html>
<html>
<head>
	<title>更改链接属性和文本内容</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<a href="http://www.google.com">原始链接</a>
	<br>
	<button id="changeHref">更改链接地址</button>
	<br>
	<button id="changeText">更改链接文本内容</button>

	<script>
		$(function() {
			// 更改链接地址
			$('#changeHref').click(function() {
				$('a').eq(0).attr('href', 'http://www.example.com');
			});

			// 更改链接文本内容
			$('#changeText').click(function() {
				$('a').eq(0).text('新的链接文本内容');
			});
		});
	</script>
</body>
</html>

上面的代码展示了一个带有两个按钮的网页,点击按钮可以更改选定链接的属性和文本内容。你可以尝试复制代码并运行它,看看效果如何。