javascript - jq更改內容 - js改變href




如何使用jQuery更改超鏈接的href (7)

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

選擇器可能會根據您使用的圖像以及是否準備好視網膜而發生變化,但您始終可以通過使用開發人員工具將其解決。

你如何改變使用jQuery的超鏈接的href?


儘管OP明確要求提供jQuery答案,但現在你不需要為jquery使用jQuery。

一些沒有jQuery的方法:

  • 如果要更改所有 <a>元素的href值,請選擇所有元素,然後遍歷該nodelist :( (example)

    var anchors = document.querySelectorAll('a');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • 如果要更改實際上具有href屬性的所有<a>元素的href值,請通過添加[href]屬性選擇器( a[href] )來選擇它們:( (example)

    var anchors = document.querySelectorAll('a[href]');
    Array.prototype.forEach.call(anchors, function (element, index) {
        element.href = "http://.com";
    });
    
  • 如果要更改包含特定值的<a>元素的href值(例如google.com ,請使用屬性選擇器a[href*="google.com"] :( (example)

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

    同樣,您也可以使用其他屬性選擇器 。 例如:

    • a[href$=".png"]來選擇<a> href值以.png結尾的元素。

    • a[href^="https://"]來選擇<a>具有以https://前綴的 href值的元素。

  • 如果您想更改滿足多個條件的<a>元素的href(example)

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

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


取決於你是否想要將所有相同的鏈接改為別的東西,或者你想控制頁面給定部分中的鏈接或每個鏈接,你可以執行其中的一個。

更改所有指向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/');

在查找中使用attr方法。 您可以切換出任何具有新值的屬性。

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

為了它,停止使用jQuery! 這僅僅適用於JavaScript。

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

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


簡單的方法是:

Attr函數 (自jQuery版本1.0以來)

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

要么

Prop函數 (自jQuery版本1.6以來)

$("a").prop("href", "https://.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..com']")
  3. 選擇所有不具有特定href的錨: $("a[href!='www..com']")
  4. 使用包含特定URL的href選擇所有錨點: $("a[href*='www..com']")
  5. 以特定URL開頭選擇所有帶有href的錨: $("a[href^='www..com']")
  6. 選擇具有以特定URL結尾的href的所有錨: $("a[href$='www..com']")

現在,如果你想修改特定的URL,你可以這樣做:

例如,如果您想為所有到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);
    });
   });

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

第一部分只選擇href以http://.com 開頭的鏈接。 然後,定義一個函數,使用一個簡單的正則表達式來替換這部分URL。 注意這給你的靈活性 - 可以在這裡完成對鏈接的任何修改。





hyperlink