Como você pode alterar o href de um hiperlink usando o jQuery?

Usando

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

modificará o href de todos os hiperlinks para apontar para o Google. Você provavelmente quer um seletor um pouco mais refinado. Por exemplo, se você tiver uma combinação de tags de âncora de origem de link (hiperlink) e destino de link (também conhecida como "âncora"):

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

... Então você provavelmente não deseja adicionar acidentalmente hrefatributos a eles. Por segurança, podemos especificar que nosso seletor corresponderá apenas às <a>tags com um hrefatributo existente :

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

Claro, você provavelmente terá algo mais interessante em mente. Se você deseja combinar uma âncora com uma existente específica href, você pode usar algo como isto:

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

Isso encontrará links onde hrefcorresponde exatamente à string http://www.google.com/. Uma tarefa mais envolvida pode estar correspondendo e, em seguida, atualizando apenas parte do href:

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

Os seleciona primeira parte mas apenas ligações onde a href começa com http://stackoverflow.com. Em seguida, é definida uma função que usa uma expressão regular simples para substituir esta parte da URL por uma nova. Observe a flexibilidade que isso oferece - qualquer tipo de modificação no link pode ser feita aqui.

Com o jQuery 1.6 e superior, você deve usar:

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

A diferença entre prope attré que attragarra o atributo HTML enquanto propagarra a propriedade DOM.

Você pode encontrar mais detalhes neste post: .prop () vs .attr ()

Use o attrmétodo em sua pesquisa. Você pode alternar qualquer atributo com um novo valor.

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

Dependendo se você deseja alterar todos os links idênticos para outros itens ou se deseja controlar apenas os de uma determinada seção da página ou de cada um individualmente, você pode fazer um destes.

Altere todos os links para o Google para que eles apontem para o Google Maps:

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

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

Para alterar os links em uma determinada seção, adicione a classe da div do contêiner ao seletor. Este exemplo alterará o link do Google no conteúdo, mas não no rodapé:

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

Para alterar links individuais, independentemente de onde eles caem no documento, adicione um ID ao link e, em seguida, adicione esse ID ao seletor. Este exemplo altera o segundo link do Google no conteúdo, mas não o primeiro ou o rodapé:

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

_{Embora o OP tenha solicitado explicitamente uma resposta do jQuery, você não precisa usar o jQuery para tudo nos dias de hoje.}

Alguns métodos sem jQuery:

• Se você deseja alterar o hrefvalor de todos os <a> elementos, selecione todos eles e, em seguida, itere através do nodelist : (exemplo)

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

• Se você deseja alterar o hrefvalor de todos os <a>elementos que realmente possuem um hrefatributo, selecione-os adicionando o [href]seletor de atributo ( a[href]): (exemplo)

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

• Se você deseja alterar o hrefvalor dos <a>elementos que contêm um valor específico, por exemplo google.com, use o seletor de atributos a[href*="google.com"]: (exemplo)

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

  Da mesma forma, você também pode usar os outros seletores de atributo . Por exemplo:

  • a[href$=".png"]poderia ser usado para selecionar <a>elementos cujo hrefvalor termina com .png.

  • a[href^="https://"]Pode ser utilizado para seleccionar <a>elementos com hrefvalores que são prefixados com https://.

• Se você deseja alterar o hrefvalor dos <a>elementos que atendem a várias condições: (exemplo)

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

..no necessidade de regex, na maioria dos casos.

Esse trecho é chamado quando um link da classe 'menu_link' é clicado e mostra o texto e o URL do link. O retorno false impede que o link seja seguido.

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

A maneira simples de fazer isso é:

Função Attr (desde o jQuery versão 1.0)

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

ou

Função Prop (desde o jQuery versão 1.6)

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

Além disso, a vantagem da maneira acima é que, se o seletor selecionar uma única âncora, ele atualizará somente essa âncora e se o seletor retornar um grupo de âncoras, ele atualizará o grupo específico por meio de apenas uma instrução.

Agora, existem várias maneiras de identificar a âncora exata ou o grupo de âncoras:

Muito Simples:

1. Selecione a âncora através do nome da tag: $("a")
2. Selecione a âncora através do índice: $("a:eq(0)")
3. Selecione âncora para classes específicas (como nesta classe, apenas âncoras com classe active):$("a.active")
4. Selecionando âncoras com ID específico (aqui no profileLink ID de exemplo ):$("a#proileLink")
5. Selecionando a primeira âncora href: $("a:first")

Mais úteis:

6. Selecionando todos os elementos com o atributo href: $("[href]")
7. Selecionando todas as âncoras com href específico: $("a[href='www.stackoverflow.com']")
8. Selecionando todas as âncoras que não possuem href específico: $("a[href!='www.stackoverflow.com']")
9. Selecionando todas as âncoras com href contendo URL específico: $("a[href*='www.stackoverflow.com']")
10. Selecionando todas as âncoras com href começando com URL específico: $("a[href^='www.stackoverflow.com']")
11. Selecionando todas as âncoras com href terminando com URL específico: $("a[href$='www.stackoverflow.com']")

Agora, se você deseja alterar URLs específicos, pode fazer isso da seguinte maneira:

Por exemplo, se você deseja adicionar um site proxy a todos os URLs que acessam google.com, é possível implementá-lo da seguinte maneira:

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

Pare de usar o jQuery apenas por isso! Isso é tão simples apenas com 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");
   });

Alterar o HREF da imagem do logotipo do tema Wordpress Avada

Se você instalar o plugin ShortCode Exec PHP, poderá criar este Shortcode que chamei de myjavascript

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

Agora você pode ir para Aparência / Widgets, escolher uma das áreas do widget de rodapé e usar um widget de texto para adicionar o seguinte código curto

[myjavascript]

O seletor pode mudar dependendo da imagem usada e da retina pronta, mas você sempre pode descobrir isso usando as ferramentas do desenvolvedor.

href em um atributo, para que você possa alterá-lo usando JavaScript puro, mas se você já tiver o jQuery injetado em sua página, não se preocupe, mostrarei as duas maneiras:

Imagine que você tem isso hrefabaixo:

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

E você gosta de mudar o link ...

Usando JavaScript puro sem nenhuma biblioteca, você pode:

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

Mas também no jQuery você pode fazer:

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

ou

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

Nesse caso, se você já tiver o jQuery injetado, provavelmente o jQuery parecerá mais curto e mais entre navegadores ... mas, além disso, eu vou com o JS...