如何使用 jQuery 更改超链接的 href 属性

IT技术 javascript html jquery hyperlink
2021-01-21 03:45:00

如何href使用 jQuery更改超链接属性(链接目标)?

6个回答

使用

$("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.4 以来,最后一个示例不需要使用each- 现在可以执行以下操作:$(selector).attr('href', function() { return this.replace(/.../, '...'); });
2021-04-07 03:45:00

使用 jQuery 1.6 及更高版本,您应该使用:

$("a").prop("href", "http://www.jakcms.com")

之间的区别propattrattr抓住HTML属性,而prop争夺的DOM属性。

你可以在这篇文章中找到更多细节:.prop() vs .attr()

对于您提出问题并发现在较新的 jQuery 版本中显然工作得很好的人,我们将不胜感激您为什么应该使用propover的解释......attrattr
2021-04-09 03:45:00

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.coma[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";
    });
    

..在大多数情况下不需要正则表达式