如何href
使用 jQuery更改超链接的属性(链接目标)?
如何使用 jQuery 更改超链接的 href 属性
使用
$("a").attr("href", "http://www.google.com/")
将修改所有超链接的 href 以指向 Google。不过,您可能想要一个更精致的选择器。例如,如果您混合使用链接源(超链接)和链接目标(又名“锚”)锚标记:
<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>
...那么您可能不想意外地href
向它们添加属性。为了安全起见,我们可以指定我们的选择器只匹配<a>
具有现有href
属性的标签:
$("a[href]") //...
当然,你可能会有更有趣的想法。如果要将锚点与特定的 existing 匹配href
,可以使用以下方法:
$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')
这将找到href
与字符串完全匹配的链接http://www.google.com/
。一个更复杂的任务可能是匹配,然后只更新部分href
:
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
第一部分只选择其中的链接中的href开始使用http://stackoverflow.com
。然后,定义一个函数,该函数使用简单的正则表达式将 URL 的这一部分替换为新的。请注意这为您提供的灵活性 - 可以在此处对链接进行任何类型的修改。
使用 jQuery 1.6 及更高版本,您应该使用:
$("a").prop("href", "http://www.jakcms.com")
之间的区别prop
和attr
是attr
抓住HTML属性,而prop
争夺的DOM属性。
你可以在这篇文章中找到更多细节:.prop() vs .attr()
attr
在查找中使用该方法。您可以使用新值切换出任何属性。
$("a.mylink").attr("href", "http://cupcream.com");
根据您是想将所有相同的链接更改为其他内容,还是只想控制页面给定部分中的链接或单独控制每个链接,您可以执行以下操作之一。
将所有指向 Google 的链接更改为指向 Google 地图:
<a href="http://www.google.com">
$("a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
要更改给定部分中的链接,请将容器 div 的类添加到选择器。此示例将更改内容中的 Google 链接,但不会更改页脚中的链接:
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$(".content a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');
要更改单个链接,无论它们位于文档的哪个位置,请向链接添加一个 id,然后将该 id 添加到选择器。此示例将更改内容中的第二个 Google 链接,但不会更改第一个或页脚中的链接:
<div class="content">
<p>...link to <a href="http://www.google.com/">Google</a>
in the content...</p>
<p>...second link to <a href="http://www.google.com/"
id="changeme">Google</a>
in the content...</p>
</div>
<div class="footer">
Links: <a href="http://www.google.com/">Google</a>
</div>
$("a#changeme").attr('href',
'http://maps.google.com/');
尽管 OP 明确要求提供 jQuery 答案,但如今您不需要对所有事情都使用 jQuery。
一些没有 jQuery 的方法:
如果要更改所有元素的
href
值,请将它们全部选中,然后遍历节点列表:(示例)<a>
var anchors = document.querySelectorAll('a'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "http://stackoverflow.com"; });
如果要更改
href
所有<a>
实际具有href
属性的元素的值,请通过添加[href]
属性选择器 (a[href]
) 来选择它们:(示例)var anchors = document.querySelectorAll('a[href]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "http://stackoverflow.com"; });
例如,如果要更改包含特定
href
值的<a>
元素的值,请使用属性选择器:(示例)google.com
a[href*="google.com"]
var anchors = document.querySelectorAll('a[href*="google.com"]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "http://stackoverflow.com"; });
同样,您也可以使用其他属性选择器。例如:
a[href$=".png"]
可用于选择<a>
其元素href
值与端部.png
。a[href^="https://"]
可用于选择<a>
的元素href
被值前缀与https://
。
如果要更改满足多个条件
href
的<a>
元素的值:(示例)var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = "http://stackoverflow.com"; });
..在大多数情况下不需要正则表达式。