关于javascript：如何使用jQuery更改超链接的href


How to change the href for a hyperlink using jQuery

如何使用jquery更改超链接的href？

相关讨论

使用

1
$("a").attr("href","http://www.google.com/")

将修改所有超链接的href以指向Google。不过，您可能需要一个更精细的选择器。例如，如果您混合了链接源(超链接)和链接目标(也称为"锚")锚标记：

1
The CodeProject

…那么您可能不想意外地向它们添加href属性。为了安全起见，我们可以指定选择器将只与现有的href属性匹配标记：

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

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

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

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

1
2
3
4
5
6
$("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及更高版本，您应该使用：

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

prop和attr的区别在于attr获取html属性，而prop获取dom属性。

您可以在本文中找到更多详细信息：.prop()与.attr()。

相关讨论

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

1
$("a.mylink").attr("href","http://cupcream.com");
相关讨论

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

更改所有指向谷歌的链接，使其指向谷歌地图：

1
2
$("a[href='http://www.google.com/']").attr('href',
'http://maps.google.com/');

要更改给定节中的链接，请将container div的类添加到选择器中。此示例将更改内容中的谷歌链接，但不会更改页脚中的链接：

1
2
3
4
5
6
7
8
9
10
11
12
    <p>
...link to Google
    in the content...
</p>



    Links: Google


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

要更改单个链接，不管它们在文档中位于何处，请向链接添加一个ID，然后将该ID添加到选择器中。此示例将更改内容中的第二个谷歌链接，但不会更改第一个或页脚中的链接：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <p>
...link to Google
    in the content...
</p>
    <p>
...second link to <a href="http://www.google.com/"
        id="changeme">Google
    in the content...
</p>



    Links: Google


$("a#changeme").attr('href',
'http://maps.google.com/');

尽管OP明确要求jquery回答，但您现在不需要对所有内容都使用jquery。

一些没有jquery的方法：

  • 如果要更改所有元素的href值，请选择所有元素，然后遍历nodelist：(示例)

    1
    2
    3
    4
    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href="http://stackoverflow.com";
    });

  • 如果要更改实际具有href属性的所有元素的href值，请通过添加[href]属性选择器(a[href]来选择它们：(示例)

    1
    2
    3
    4
    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href="http://stackoverflow.com";
    });

  • 如果要更改包含特定值的元素的href值，例如google.com，请使用属性选择器a[href*="google.com"]：(示例)

    1
    2
    3
    4
    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[href^="https://"]可用于选择元素，href值以https://为前缀。

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

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

…在大多数情况下，不需要regex。

当单击"menu link"类的链接时，此代码段将调用，并显示链接的文本和URL。返回错误将阻止跟踪链接。

1
2
3
4
5
6
7
8
9
10
11
Option 1
Option 2

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

   return false;
});
相关讨论

停止使用jquery只是为了它！这对于仅使用JavaScript非常简单。

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

https://jsfidle.net/bo77f8mg/1/

相关讨论

这样做的简单方法是：

ATTR函数(自jquery 1.0版起)

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

或

prop函数(自jquery 1.6版起)

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

此外，上述方法的优点是，如果选择器选择单个锚，它将只更新该锚；如果选择器返回锚组，它将只通过一条语句更新特定组。

现在，有很多方法可以确定确切的锚或锚组：

非常简单的：

  • 通过标签名称选择锚点：$("a")。
  • 通过索引选择锚：$("a:eq(0)")。
  • 为特定类选择锚定(如在本类中仅锚定)用active类：$("a.active")类
  • 选择具有特定ID的锚(在示例profileLink中)ID)：$("a#proileLink")。
  • 选择第一个锚Href:$("a:first")。

    • 更有用的是：

  • 选择具有href属性：$("[href]")的所有元素
  • 用特定的href:$("a[href='www.stackoverflow.com']")选择所有锚
  • 选择所有没有特定Href:$("a[href!='www.stackoverflow.com']")的锚
  • 用包含特定url的href:$("a[href*='www.stackoverflow.com']")选择所有锚
  • 使用Href从特定URL开始选择所有锚：$("a[href^='www.stackoverflow.com']")。
  • 选择Href以特定URL结尾的所有锚：$("a[href$='www.stackoverflow.com']")。

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

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

    1
    2
    3
    4
    5
    6
    7
    $("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);
        });
       });
    1
    2
    3
    4
    5
    6
     $("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的短代码。

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

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

    1
    [myjavascript]

    选择器可能会根据您使用的图像以及视网膜是否已就绪而改变，但您始终可以通过使用开发人员工具来确定。

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

    假设您有下面的href：

    1
    Alireza Dezfoolian

    你想改变它的链接…

    在没有任何库的情况下使用纯javascript，您可以做到：

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

    但在jquery中，您也可以执行以下操作：

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

    或

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

    在这种情况下，如果您已经注入了jquery，那么jquery一个看起来更短、更跨浏览器……但除此之外，我使用的是JS一个……