Come puoi modificare l'href per un collegamento ipertestuale usando jQuery?

utilizzando

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

modificherà l'href di tutti i collegamenti ipertestuali per puntare a Google. Probabilmente vuoi un selettore un po 'più raffinato. Ad esempio, se hai una combinazione di tag di ancoraggio sorgente link (hyperlink) e target link (aka "anchor"):

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

... Quindi probabilmente non vorrai aggiungere accidentalmente hrefattributi ad essi. Per sicurezza, quindi, possiamo specificare che il nostro selettore abbinerà solo i <a>tag con un hrefattributo esistente :

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

Certo, probabilmente avrai in mente qualcosa di più interessante. Se si desidera abbinare un'ancora a uno specifico esistente href, è possibile utilizzare qualcosa del genere:

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

Questo troverà collegamenti dove hrefesattamente corrisponde alla stringa http://www.google.com/. Un'attività più coinvolta potrebbe corrispondere, quindi aggiornare solo una parte di href:

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

I seleziona prima parte pubblicitari solo se il href inizia con http://stackoverflow.com. Quindi, viene definita una funzione che utilizza una semplice espressione regolare per sostituire questa parte dell'URL con una nuova. Nota la flessibilità che ti offre: qualsiasi tipo di modifica al link potrebbe essere fatta qui.

Con jQuery 1.6 e versioni successive dovresti usare:

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

La differenza tra prope attrè che attrafferra l'attributo HTML mentre propafferra la proprietà DOM.

Puoi trovare maggiori dettagli in questo post: .prop () vs .attr ()

Usa il attrmetodo per la tua ricerca. Puoi cambiare qualsiasi attributo con un nuovo valore.

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

A seconda che tu voglia cambiare tutti i collegamenti identici in qualcos'altro o vuoi controllare solo quelli in una data sezione della pagina o ognuno individualmente, potresti fare uno di questi.

Cambia tutti i link a Google in modo che puntino a Google Maps:

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

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

Per modificare i collegamenti in una determinata sezione, aggiungi la classe div del container al selettore. Questo esempio cambierà il link di Google nei contenuti, ma non nel piè di pagina:

<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/');

Per modificare i singoli collegamenti indipendentemente da dove rientrano nel documento, aggiungere un ID al collegamento e quindi aggiungere quell'ID al selettore. Questo esempio cambierà il secondo link di Google nel contenuto, ma non il primo o quello nel piè di pagina:

<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/');

_{Anche se l'OP ha chiesto esplicitamente una risposta jQuery, in questi giorni non è necessario utilizzare jQuery per tutto.}

Alcuni metodi senza jQuery:

• Se si desidera modificare il hrefvalore di tutti gli <a> elementi, selezionarli tutti e quindi scorrere l' elenco dei nodi : (esempio)

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

• Se vuoi cambiare il hrefvalore di tutti gli <a>elementi che hanno effettivamente un hrefattributo, selezionali aggiungendo l' [href]attributo selector ( a[href]): (esempio)

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

• Se si desidera modificare il hrefvalore degli <a>elementi che contengono un valore specifico, ad esempio google.com, utilizzare il selettore di attributi a[href*="google.com"]: (esempio)

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

  Allo stesso modo, puoi anche usare gli altri selettori di attributo . Per esempio:

  • a[href$=".png"]potrebbe essere usato per selezionare <a>elementi il ​​cui hrefvalore termina con .png.

  • a[href^="https://"]potrebbe essere utilizzato per selezionare <a>elementi con hrefvalori con prefissohttps:// .

• Se si desidera modificare il hrefvalore di <a>elementi che soddisfano più condizioni: (esempio)

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

..non c'è bisogno di regex, nella maggior parte dei casi.

Questo frammento viene richiamato quando si fa clic su un collegamento della classe "menu_link" e mostra il testo e l'URL del collegamento. Il ritorno false impedisce che il collegamento venga seguito.

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

Il modo semplice per farlo è:

Funzione Attr (dalla versione 1.0 di jQuery)

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

o

Funzione Prop (dalla versione 1.6 di jQuery)

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

Inoltre, il vantaggio di cui sopra è che se il selettore seleziona un singolo ancoraggio, aggiornerà solo quell'ancoraggio e se il selettore restituisce un gruppo di ancoraggi, aggiornerà il gruppo specifico attraverso una sola istruzione.

Ora, ci sono molti modi per identificare l'ancora esatta o il gruppo di ancore:

Molto semplici:

1. Seleziona l'ancoraggio tramite il nome del tag: $("a")
2. Seleziona ancora tramite indice: $("a:eq(0)")
3. Seleziona ancora per classi specifiche (come in questa classe solo ancore con classe active):$("a.active")
4. Selezione di ancore con ID specifico (qui in esempio profileLink ID):$("a#proileLink")
5. Selezione del primo href di ancoraggio: $("a:first")

Più utili:

6. Selezione di tutti gli elementi con l'attributo href: $("[href]")
7. Selezione di tutte le ancore con href specifico: $("a[href='www.stackoverflow.com']")
8. Selezione di tutte le ancore che non hanno href specifico: $("a[href!='www.stackoverflow.com']")
9. Selezione di tutte le ancore con href contenente URL specifico: $("a[href*='www.stackoverflow.com']")
10. Selezione di tutte le ancore con href a partire da un URL specifico: $("a[href^='www.stackoverflow.com']")
11. Selezione di tutte le ancore con href che termina con URL specifico: $("a[href$='www.stackoverflow.com']")

Ora, se si desidera modificare URL specifici, è possibile farlo come:

Ad esempio, se desideri aggiungere un sito Web proxy per tutti gli URL che vanno su google.com, puoi implementarlo come segue:

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

Smetti di usare jQuery solo per il gusto di farlo! Questo è così semplice solo con 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");
   });

Cambia l'HREF dell'immagine del logo del tema WordPress Avada

Se installi il plugin PHP ShortCode Exec puoi creare questo Shortcode che ho chiamato myjavascript

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

Ora puoi andare su Aspetto / Widget e selezionare una delle aree del widget piè di pagina e utilizzare un widget di testo per aggiungere il seguente shortcode

[myjavascript]

Il selettore può cambiare a seconda dell'immagine che stai utilizzando e se è pronta per la retina, ma puoi sempre capirla usando gli strumenti per sviluppatori.

href in un attributo, quindi puoi cambiarlo usando JavaScript puro, ma se hai già iniettato jQuery nella tua pagina, non ti preoccupare, lo mostrerò in entrambi i modi:

Immagina di avere questo hrefqui sotto:

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

E ti piace cambiarlo il link ...

Utilizzando JavaScript puro senza alcuna libreria puoi fare:

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

Ma anche in jQuery puoi fare:

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

o

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

In questo caso, se hai già iniettato jQuery, probabilmente jQuery sembra più corto e più cross-browser ... ma a parte quello vado con JSquello ...