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

Posted 2023-03-05

【中文标题】如何使用 jQuery 更改超链接的 href 属性

【英文标题】：How to change the href attribute for a hyperlink using jQuery

【发布时间】：2010-09-15 20:02:24

【问题描述】：

如何使用 jQuery 更改超链接的 href 属性（链接目标）？

【问题讨论】：

对于那些对没有使用 jQuery 的解决方案感兴趣的人 - ***.com/questions/179713/…

对于较新的 jQuery 版本：***.com/a/6348239/4928642

没有jQuery的最简单例子***.com/a/39276418/696535

可能的解决方案的完整列表、一些有用的选择器以及获取正则表达式匹配值并使用它们更新href的方法：***.com/a/49568546/1262248

【参考方案1】：

使用

$("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]") //...

当然，您可能会有更有趣的想法。如果您想将锚点与特定的现有 href 匹配，您可以使用如下内容：

$("a[href='http://www.google.com/']").attr('href', 'http://www.live.com/')

这将找到href 与字符串http://www.google.com/ 完全匹配的链接。一个更复杂的任务可能是匹配，然后只更新href的一部分：

$("a[href^='http://***.com']")
   .each(function()
    
      this.href = this.href.replace(/^http:\/\/beta\.***\.com/, 
         "http://***.com");
   );

第一部分仅选择 href 以http://***.com 开始 的链接。然后，定义了一个函数，该函数使用一个简单的正则表达式将这部分 URL 替换为新的部分。请注意这给您带来的灵活性 - 可以在此处对链接进行任何形式的修改。

【讨论】：

为了完整起见，由于这仍然偶尔链接，我将补充一点，自 jQuery 1.4 以来，最后一个示例不需要使用 each - 现在可以使用以下内容：@987654335 @

【参考方案2】：

对于 jQuery 1.6 及更高版本，您应该使用：

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

prop 和attr 的区别在于attr 抓取html 属性，而prop 抓取DOM 属性。

您可以在这篇文章中找到更多详细信息：.prop() vs .attr()

【讨论】：

解释为什么你应该使用 prop 而不是 attr 将不胜感激，因为人们提出这个问题并发现 attr 在较新的 jQuery 版本中显然工作得很好......

【参考方案3】：

在您的查找中使用attr 方法。您可以使用新值切换任何属性。

$("a.mylink").attr("href", "http://cupcream.com");

【参考方案4】：

根据您是要将所有相同的链接更改为其他内容，还是只想控制页面给定部分中的链接或单独控制每个链接，您可以执行其中之一。

将所有指向 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/');

【参考方案5】：

_{尽管 OP 明确要求提供 jQuery 答案，但如今您不需要对所有事情都使用 jQuery。}

几个不用jQuery的方法：

如果您想更改 all <a> 元素的 href 值，请将它们全部选中，然后遍历 nodelist：(example)

var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (element, index) 
    element.href = "http://***.com";
);

如果您想更改实际上具有href 属性的所有<a> 元素的href 值，请通过添加[href] 属性选择器(a[href]) 来选择它们：(example)

var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) 
    element.href = "http://***.com";
);

如果您想更改包含特定值的<a>元素的href值，例如google.com，请使用属性选择器a[href*="google.com"]：(example) p>

var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) 
    element.href = "http://***.com";
);

同样，您也可以使用另一个attribute selectors。例如：

a[href$=".png"] 可用于选择<a> 值以.png 结尾的元素。

a[href^="https://"] 可用于选择带有href 值的<a> 元素以https:// 为前缀。

如果要更改满足多个条件的<a>元素的href值：(example)

var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
Array.prototype.forEach.call(anchors, function (element, index) 
    element.href = "http://***.com";
);

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

【参考方案6】：

这样做的简单方法是：

Attr function（自 jQuery 1.0 版起）

$("a").attr("href", "https://***.com/") 

或

Prop function（从 jQuery 版本 1.6 开始）

$("a").prop("href", "https://***.com/")

另外，上述方式的好处是，如果选择器选择了单个锚点，它将只更新该锚点，如果选择器返回一组锚点，它将仅通过一个语句更新特定组。

现在，有很多方法可以识别准确的锚点或锚点组：

很简单的：

通过标签名称选择锚点：$("a") 通过索引选择锚点：$("a:eq(0)") 为特定类选择锚（因为在这个类中只有锚 与班级active)：$("a.active") 选择具有特定 ID 的锚点（此处以 profileLink 为例 身份证）：$("a#proileLink") 选择第一个锚href：$("a:first")

更有用的：

选择所有具有 href 属性的元素：$("[href]") 选择具有特定href的所有锚点：$("a[href='www.***.com']") 选择所有没有特定href的锚点：$("a[href!='www.***.com']") 选择所有带有包含特定 URL 的 href 的锚点：$("a[href*='www.***.com']") 选择所有以特定 URL 开头的 href 锚点：$("a[href^='www.***.com']") 选择所有以特定 URL 结尾的 href 锚点：$("a[href$='www.***.com']")

现在，如果你想修改特定的 URL，你可以这样做：

例如，如果您想为所有访问 google.com 的 URL 添加代理网站，您可以按如下方式实现：

$("a[href^='http://www.google.com']")
   .each(function()
    
      this.href = this.href.replace(/http:\/\/www.google.com\//gi, function (x) 
        return "http://proxywebsite.com/?query="+encodeURIComponent(x);
    );
   );

【参考方案7】：

当单击“menu_link”类的链接时，此 sn-p 调用，并显示链接的文本和 url。 return false 会阻止链接被跟踪。

<a rel='1' class="menu_link" href="option1.html">Option 1</a>
<a rel='2' class="menu_link" href="option2.html">Option 2</a>

$('.menu_link').live('click', function() 
   var thelink = $(this);
   alert ( thelink.html() );
   alert ( thelink.attr('href') );
   alert ( thelink.attr('rel') );

   return false;
);

【讨论】：

我对投反对票并不太迂腐，但如果你不打算说你投反对票的原因，那就没有任何成果，你不应该打扰。

拒绝投票是迂腐的。他/她可能没有像其他用户那样在他的答案上付出那么多努力，但他/她确实提供了解决问题的代码。除了复制和粘贴定制的解决方案之外，OP 只需要多考虑一下。

【参考方案8】：

为了它而停止使用 jQuery！仅使用 javascript 就非常简单。

document.querySelector('#the-link').setAttribute('href', 'http://google.com');

https://jsfiddle.net/bo77f8mg/1/

【参考方案9】：

href 在一个属性中，所以你可以使用纯 JavaScript 来改变它，但是如果你已经在你的页面中注入了 jQuery，别担心，我会以两种方式显示它：

想象一下你在下面有这个href：

<a id="ali"  href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

而你想改变它的链接...

使用 纯 JavaScript 无需任何库即可：

document.getElementById("ali").setAttribute("href", "https://***.com");

但在 jQuery 中你也可以这样做：

$("#ali").attr("href", "https://***.com");

或

$("#ali").prop("href", "https://***.com");

在这种情况下，如果你已经注入了 jQuery，可能 jQuery one 看起来更短且更跨浏览器...但除此之外，我使用 JS one...

【参考方案10】：

 $("a[href^='http://***.com']")
   .each(function()
    
      this.href = this.href.replace(/^http:\/\/beta\.***\.com/, 
         "http://***.com");
   );

【参考方案11】：

更改 Wordpress Avada 主题徽标图像的 HREF

如果你安装了 ShortCode Exec php 插件，你可以创建这个我称之为 myjavascript 的 Shortcode

?><script type="text/javascript">
jQuery(document).ready(function() 
jQuery("div.fusion-logo a").attr("href","tel:[phone]");
);
</script>

您现在可以转到外观/小部件并选择一个页脚小部件区域并使用文本小部件添加以下短代码

[myjavascript]

选择器可能会根据您使用的图像以及它是否已准备好视网膜而改变，但您始终可以使用开发人员工具找出它。

【参考方案12】：

试试

link.href = 'https://...'

link.href = 'https://***.com'

<a id="link" href="#">Click me</a>

【参考方案13】：

<a class="link">My Link</a>
<script>
$(document).ready(function()
    $("a.link").attr("href", "https://toptruyenfull.com/")
)
</script>

【讨论】：

这似乎与当前答案没有任何显着差异，尤其是***.com/a/179719/4294399。

【参考方案14】：

试试这个；

$("#link").attr("href", "https://coenvink.com/")

代码功能的细分：

$("#link")

这部分代码获取id为“Link”的元素。在此之后，您将属性“href”（witch 基本上是链接到 url）设置为您的新 url，在这种情况下，witch 是我自己的网站：

.attr("href", "https://coenvink.com/")

我希望现在清楚了！