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

Question

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

Answer 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://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

第一部分选择其中的href只链接开始使用http://stackoverflow.com.然后,定义一个函数,该函数使用简单的正则表达式将URL的这一部分替换为新部分.请注意这为您提供的灵活性 - 可以在此处对链接进行任何类型的修改.

Answer 2

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

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

之间的区别prop和attr是attr抓住HTML属性,而prop抓住DOM属性.

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

Answer 3

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

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

Answer 4

根据您是否要将所有相同的链接更改为其他内容,或者您​​希望仅控制页面的给定部分或每个部分中的链接,您可以执行其中一个.

更改所有指向Google的链接,以便他们指向Google地图:

<a href="http://www.google.com">

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

要更改给定部分中的链接,请将容器div的类添加到选择器.此示例将更改内容中的Google链接,但不会更改页脚中的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/');

Answer 5

_{尽管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]属性selector(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";
  });
  

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

Answer 6

尝试这个;

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

代码作用的细分：

$("#link")

这部分代码获取 id 为“Link”的元素。之后，您将属性“href”（女巫基本上是链接到网址）设置为您的新网址，在本例中，女巫是我自己的网站：

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

我希望现在一切都清楚了！

Answer 7

单击"menu_link"类的链接时会调用此代码段,并显示链接的文本和网址.返回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;
});

Answer 8

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

Answer 9

停止使用jQuery只是为了它!仅使用JavaScript非常简单.

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

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

Answer 10

这样做的简单方法是：

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. 选择特定类别的锚点（例如，在该类别中仅锚定class active）：$("a.active")
4. 选择具有特定ID的锚点（此处为示例profileLink ID）：$("a#proileLink")
5. 选择第一个锚href： $("a:first")

更有用的：

6. 选择所有具有href属性的元素： $("[href]")
7. 选择所有具有特定href的锚点： $("a[href='www.stackoverflow.com']")
8. 选择所有没有特定href的锚点： $("a[href!='www.stackoverflow.com']")
9. 选择所有带有href且包含特定URL的锚点： $("a[href*='www.stackoverflow.com']")
10. 选择以特定网址开头的带有href的所有锚点： $("a[href^='www.stackoverflow.com']")
11. 选择所有带有以特定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);
    });
   });

Answer 11

href 在一个属性中，因此您可以使用纯 JavaScript 更改它，但是如果您已经在页面中注入了 jQuery，请不要担心，我会以两种方式展示它：

想象一下你有这个href：

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

你喜欢改变它的链接...

使用没有任何库的纯 JavaScript，您可以执行以下操作：

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

但也可以在jQuery中执行以下操作：

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

或者

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

在这种情况下，如果您已经注入了 jQuery，那么 jQuery one 可能看起来更短、更跨浏览器……但除此之外，我选择了那个JS……