Configurando o atributo href em tempo de execução

Qual é a melhor maneira de definir o href atributo da <a>tag em tempo de execução usando o jQuery?

Além disso, como você obtém o valor do hrefatributo da <a>tag usando jQuery?

Para obter ou definir um atributo de um elemento HTML, você pode usar a element.attr()função no jQuery.

Para obter o atributo href , use o seguinte código:

var a_href = $('selector').attr('href');

Para definir o atributo href , use o seguinte código:

$('selector').attr('href','http://example.com');

Nos dois casos, use o seletor apropriado. Se você definiu a classe para o elemento âncora, use '.class-name'e se você definiu o ID para o elemento âncora, use '#element-id'.

No jQuery 1.6+, é melhor usar:

$(selector).prop('href',"http://www...")para definir o valor e

$(selector).prop('href')para obter o valor

Em resumo, .propobtém e define valores no objeto DOM e .attrobtém e define valores no HTML . Isso torna .propum pouco mais rápido e possivelmente mais confiável em alguns contextos.

Defina o hrefatributo com

$(selector).attr('href', 'url_goes_here');

e leia usando

$(selector).attr('href');

Onde "seletor" é qualquer seletor jQuery válido para o seu <a>elemento (".myClass" ou "#myId" para nomear os mais simples).

Espero que isto ajude !

Comparação de teste de desempenho pequeno para três soluções:

1. $(".link").prop('href',"https://example.com")
2. $(".link").attr('href',"https://example.com")
3. document.querySelector(".link").href="https://example.com";

Aqui você pode realizar o teste sozinho https://jsperf.com/a-href-js-change

Podemos ler os valores href das seguintes maneiras

1. let href = $(selector).prop('href');
2. let href = $(selector).attr('href');
3. let href = document.querySelector(".link").href;

Aqui você pode realizar o teste sozinho https://jsperf.com/a-href-js-read

<style>
a:hover {
    cursor:pointer;
}
</style>

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".link").click(function(){
        var href = $(this).attr("href").split("#");
        $(".results").text(href[1]);
    })
})
</script>



<a class="link" href="#one">one</a><br />
<a class="link" href="#two">two</a><br />
<a class="link" href="#three">three</a><br />
<a class="link" href="#four">four</a><br />
<a class="link" href="#five">five</a>


<br /><br />
<div class="results"></div>