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

Question

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

Answer 1

使用

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

会修改所有超链接的href以指向Google。你可能想要一个更精致的选择器。例如，如果您混合了链接源（超链接）和链接目标（a.k.a。<！> quot; anchor <！>;;）锚标记：

<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>

...那么您可能不想意外地将href属性添加到它们中。为了安全起见，我们可以指定我们的选择器只匹配<a>标签与现有的http://www.google.com/属性：

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

当然，你可能会想到一些更有趣的东西。如果要将锚点与特定的现有http://stackoverflow.com匹配，可以使用以下内容：

$("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");
   });

第一部分仅选择href 启动的链接和<=>。然后，定义一个函数，该函数使用简单的正则表达式将URL的这一部分替换为新部分。请注意这为您提供的灵活性 - 可以在此处对链接进行任何类型的修改。

Answer 2

使用jQuery 1.6及更高版本，你应该使用：

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

prop和attr之间的区别在于<=>获取HTML属性，而<=>获取DOM属性。

您可以在此文章中找到更多详细信息： .prop（）vs .attr（）

Answer 3

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

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

Answer 4

这取决于你是否要改变所有的相同链接到别的东西或者你想要控制仅仅是那些在一定部分的页面或每一个单独的，你可以做一些。

改变所有链接到谷歌所以他们指出，谷歌地图：

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

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

改变链接在一定部分，添加容器div的类的选择。这个例子将会改变谷歌链接的内容，但是，不在脚注：

<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的选择。这个例子将会改变第二谷歌链接在内容，但不是第一个或一个在脚注：

<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] 属性的选择(a[href]): (实例)

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

• 如果你想改变的 href 值 <a> 元素 含有 一个具体的值，例如 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"] 可以用来选择 <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";
  });
  

..没有必要regex， 大多数 情况。

Answer 6

此片段在单击“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 7

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

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

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

Answer 8

这样做的简单方法是：

Attr功能（自jQuery版本1.0起）

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

或

道具功能（自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. 选择包含特定网址的href的所有锚点：$("a[href*='www.stackoverflow.com']")
5. 选择具有以特定URL开头的href的所有锚点：$("a[href^='www.stackoverflow.com']")
6. 选择href以特定URL结尾的所有锚点：$("a[href$='www.stackoverflow.com']")

现在，如果您想修改特定的网址，可以这样做：

例如，如果您要为google.com的所有网址添加代理网站，可以按照以下方式实施：

$("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 9

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

Answer 10

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

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

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

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

[myjavascript]

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

Answer 11

属性中的

href，所以你可以使用纯JavaScript来改变它，但是如果你已经在页面中注入了jQuery，请不要担心，我将以两种方式展示它：

想象一下，你有以下JS：

<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一个看起来更短，更多的跨浏览器......但除此之外，我选择<=>一个......