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

如何使用 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属性。为了安全起见,我们可以指定选择器只匹配具有现有href属性的<a>标签:

$("a[href]") //...

当然,您可能会想到一些更有趣的东西。如果要使锚与特定的现有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")

propattr之间的区别在于attr捕获 HTML 属性,而prop捕获 DOM 属性。

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

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

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

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

更改所有指向 Google 的链接,使它们指向 Google Maps:

<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 的方法:

  • 如果要更改所有 <a>元素的href值,请全部选择它们,然后遍历nodelist :( 示例)

    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";
    });
  • 如果要更改包含特定值的<a>元素的href值,例如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"]可用于选择href值以.png结尾的<a>元素。

    • a[href^="https://"]可用于选择<a>具有href值并 https:// <a>元素。

  • 如果要更改满足多个条件的<a>元素的href值:( 示例)

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

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

单击 “menu_link” 类的链接时,将调用此代码片段,并显示该链接的文本和 URL。返回 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;
});

仅仅为了它而停止使用 jQuery!仅使用 JavaScript 如此简单。

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

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

这样做的简单方法是:

Attr 函数 (自 jQuery 1.0 版开始)

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

要么

Prop 函数 (自 jQuery 1.6 版开始)

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

同样,上述方式的优点在于,如果选择器选择单个锚,则仅更新该锚,并且如果选择器返回一组锚,则仅通过一条语句更新特定组。

现在,有很多方法可以识别确切的锚点或一组锚点:

很简单的一个:

  1. 通过标签名称选择锚: $("a")
  2. 通过索引选择锚点: $("a:eq(0)")
  3. 选择特定类的锚点(如在该类中,仅锚定类为active锚点): $("a.active")
  4. 选择具有特定 ID 的锚点(此处为profileLink ID 示例): $("a#proileLink")
  5. 选择第一个锚 href: $("a:first")

更有用的:

  1. 选择所有具有 href 属性的元素: $("[href]")
  2. 选择所有具有特定 href 的锚点: $("a[href='www.stackoverflow.com']")
  3. 选择所有不具有特定 href 的锚点: $("a[href!='www.stackoverflow.com']")
  4. 选择所有带有带有特定 URL 的 href 的锚点: $("a[href*='www.stackoverflow.com']")
  5. 选择以特定 URL 开头的带有 href 的所有锚点: $("a[href^='www.stackoverflow.com']")
  6. 选择所有以特定网址结尾的 href 锚: $("a[href$='www.stackoverflow.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);
    });
   });
$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

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

如果您安装 ShortCode Exec PHP 插件,则可以创建我称为 myjavascript 的此 Shortcode。

?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>

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

[myjavascript]

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