如何使用 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屬性。 為了安全起見，我們可以指定我們的選擇器只匹配帶有現有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 的這一部分替換為新的。 請注意這為您提供的靈活性 - 可以在此處對鏈接進行任何類型的修改。

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 鏈接，但不會更改頁腳中的鏈接：

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

• 如果要更改所有<a>元素的href值，請將它們全部選中，然后遍歷節點列表：（示例）

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

• 如果要更改包含特定值（例如google.com的<a>元素的href值，請使用屬性選擇器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://"]可用於選擇帶有前綴https:// href值的<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"; });

..在大多數情況下不需要正則表達式。

Answer 6

這樣做的簡單方法是：

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

比較有用的：

6. 選擇所有具有 href 屬性的元素： $("[href]")
7. 選擇具有特定 href 的所有錨點： $("a[href='www.stackoverflow.com']")
8. 選擇所有沒有特定 href 的錨點： $("a[href!='www.stackoverflow.com']")
9. 選擇所有帶有包含特定 URL 的 href 的錨點： $("a[href*='www.stackoverflow.com']")
10. 選擇所有帶有以特定 URL 開頭的 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 7

當單擊“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;
});

Answer 8

停止使用 jQuery 只是為了它！ 僅使用 JavaScript 就如此簡單。

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

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

Answer 9

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 可能看起來更短且更跨瀏覽器......但除此之外，我選擇了JS ......

Answer 10

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

Answer 11

更改 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]

選擇器可能會根據您使用的圖像以及它是否已准備好視網膜而改變，但您始終可以使用開發人員工具來弄清楚。

Answer 12

嘗試

link.href = 'https://...'

 link.href = 'https://stackoverflow.com'

 <a id="link" href="#">Click me</a>

Answer 13

<a class="link">My Link</a>
<script>
$(document).ready(function(){
    $("a.link").attr("href", "https://toptruyenfull.com/")
})
</script>

Answer 14

嘗試這個;

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

代碼功能的細分：

$("#link")

這部分代碼獲取 ID 為“Link”的元素。 在此之后，您將屬性 'href'（女巫基本上是指向 url 的鏈接）設置為您的新網址，在本例中，女巫是我自己的網站：

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

我希望現在清楚了！