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

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

运用

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

将修改所有超链接的href以指向Google.你可能想要一个更精致的选择器.例如,如果您混合使用链接源(超链接)和链接目标(也称为"锚点")锚标记:

The CodeProject

...那么你可能不想意外地href为它们添加属性.为了安全起见,我们可以指定我们的选择器只匹配带有现有href属性的标签:

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

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

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

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

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

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

    
...link to Google
    in the content...



    Links: Google


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

要更改单个链接而不管它们落在文档中的哪个位置,请在链接中添加一个ID,然后将该ID添加到选择器.此示例将更改内容中的第二个Google链接,但不会更改第一个或页脚中的链接:

    
...link to Google
    in the content...
    
...second link to Google
    in the content...



    Links: Google


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

_{尽管OP明确要求获得jQuery答案,但这些天你不需要使用jQuery.}

一些没有jQuery的方法:

如果要更改所有元素的href值,请选择所有 元素,然后遍历节点列表 :( 示例)

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

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

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

例如,如果要更改包含特定href值的元素的值,请使用属性选择器:( 示例)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"]可用于选择值以其href结尾的元素.png.

a[href^="https://"]可用于选择的元素href被值前缀与https://.

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

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

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非常简单.

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/")

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

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

很简单的一个：

通过标签名称选择锚点： $("a")

通过索引选择锚点： $("a:eq(0)")

选择特定类别的锚点（例如，在该类别中仅锚定class 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']")

选择所有带有href且包含特定URL的锚点： $("a[href*='www.stackoverflow.com']")

选择以特定网址开头的带有href的所有锚点： $("a[href^='www.stackoverflow.com']")

选择所有带有以特定URL结尾的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);
    });
   });