Impostazione dell'attributo href in fase di esecuzione

Qual è il modo migliore per impostare l' hrefattributo del <a>tag in fase di esecuzione utilizzando jQuery?

Inoltre, come si ottiene il valore hrefdell'attributo del <a>tag usando jQuery?

Per ottenere o impostare un attributo di un elemento HTML, è possibile utilizzare la element.attr()funzione in jQuery.

Per ottenere l' attributo href , utilizzare il seguente codice:

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

Per impostare l' attributo href , utilizzare il seguente codice:

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

In entrambi i casi, utilizzare il selettore appropriato. Se hai impostato la classe per l'elemento anchor, usa '.class-name'e se hai impostato l'id per l'elemento anchor, usa '#element-id'.

In jQuery 1.6+ è meglio usare:

$(selector).prop('href',"http://www...")per impostare il valore e

$(selector).prop('href')per ottenere il valore

In breve, .propottiene e imposta i valori sull'oggetto DOM e .attrottiene e imposta i valori nell'HTML . Questo rende .propun po 'più veloce e forse più affidabile in alcuni contesti.

Impostare l' hrefattributo con

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

e leggilo usando

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

Dove "selector" è un selettore jQuery valido per il tuo <a>elemento (".myClass" o "#myId" per nominare quelli più semplici).

Spero che questo ti aiuti !

Confronto dei test delle prestazioni di piccole dimensioni per tre soluzioni:

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

Qui puoi eseguire il test da solo https://jsperf.com/a-href-js-change

Possiamo leggere i valori href nei seguenti modi

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

Qui puoi eseguire il test da solo 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>