📅  最后修改于: 2023-12-03 15:24:48.014000             🧑  作者: Mango
在 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>
上面的代码展示了一个带有两个按钮的网页,点击按钮可以更改选定链接的属性和文本内容。你可以尝试复制代码并运行它,看看效果如何。