Définition de l'attribut href à l'exécution

Quelle est la meilleure façon de définir l' hrefattribut du<a> balise au moment de l'exécution à l'aide de jQuery?

De plus, comment obtenez-vous la valeur de l' hrefattribut de la <a>balise à l'aide de jQuery?

Pour obtenir ou définir un attribut d'un élément HTML, vous pouvez utiliser la element.attr()fonction dans jQuery.

Pour obtenir l' attribut href , utilisez le code suivant:

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

Pour définir l' attribut href , utilisez le code suivant:

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

Dans les deux cas, veuillez utiliser le sélecteur approprié. Si vous avez défini la classe de l'élément d'ancrage, utilisez '.class-name'et si vous avez défini l'ID de l'élément d'ancrage, utilisez '#element-id'.

Dans jQuery 1.6+, il est préférable d'utiliser:

$(selector).prop('href',"http://www...")pour définir la valeur, et

$(selector).prop('href')pour obtenir la valeur

En bref, .propobtient et définit des valeurs sur l' objet DOM , et .attrobtient et définit des valeurs dans le HTML . Cela rend .propun peu plus rapide et peut-être plus fiable dans certains contextes.

Définissez l' hrefattribut avec

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

et le lire en utilisant

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

Où "sélecteur" est un sélecteur jQuery valide pour votre <a> élément (".myClass" ou "#myId" pour nommer les plus simples).

J'espère que cela t'aides !

Petite comparaison des tests de performances pour trois solutions:

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

Ici, vous pouvez effectuer le test par vous-même https://jsperf.com/a-href-js-change

Nous pouvons lire les valeurs href de la manière suivante

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

Ici, vous pouvez effectuer le test par vous-même 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>