jQueryを使用してハイパーリンクのhrefをどのように変更できますか？

使用する

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

Googleを指すようにすべてのハイパーリンクのhrefを変更します。おそらく、もう少し洗練されたセレクターが必要でしょう。たとえば、リンクソース（ハイパーリンク）とリンクターゲット（別名 "アンカー"）アンカータグが混在している場合：

<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のこの部分を新しいものに置き換える関数を定義します。これにより柔軟性が得られることに注意してください。リンクへの変更はここで行うことができます。

jQuery 1.6以降では、以下を使用する必要があります。

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

違いpropとは、attrそれがされたattrのに対し、HTML属性をつかむpropグラブDOMプロパティ。

詳細については、この投稿をご覧ください：.prop（）と.attr（）

attrルックアップでメソッドを使用します。新しい値で任意の属性を切り替えることができます。

$("a.mylink").attr("href", "http://cupcream.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をセレクターに追加します。この例では、コンテンツの2番目の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/');

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

.. ほとんどの場合、正規表現は必要ありません。

このスニペットは、「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;
});

これを行う簡単な方法は次のとおりです。

attr関数（jQueryバージョン1.0以降）

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

または

Prop関数（jQueryバージョン1.6以降）

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

また、上記の方法の利点は、セレクターが単一のアンカーを選択した場合、そのアンカーのみを更新し、セレクターがアンカーのグループを返す場合、1つのステートメントのみで特定のグループを更新することです。

現在、正確なアンカーまたはアンカーのグループを識別する方法はたくさんあります。

かなりシンプルなもの：

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

そのためだけにjQueryの使用を停止してください！これはJavaScriptだけでとても簡単です。

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

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

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

Wordpress Avadaテーマロゴ画像のHREFを変更する

ShortCode Exec PHPプラグインをインストールすると、myjavascriptと呼ばれるこのショートコードを作成できます

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

これで、外観/ウィジェットに移動し、フッターウィジェット領域の1つを選択し、テキストウィジェットを使用して次のショートコードを追加できます。

[myjavascript]

セレクターは、使用しているイメージや網膜の準備ができているかどうかによって変わる場合がありますが、開発者ツールを使用していつでもそれを把握できます。

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の方が短く、クロスブラウザーに見えますが、それ以外はJS1つで...