web-dev-qa-db-fra.com

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

Quel est le meilleur moyen de définir l'attribut href de la balise <a> lors de l'exécution à l'aide de jQuery?

Aussi, comment obtenez-vous la valeur de l'attribut href de la balise <a> à l'aide de jQuery?

javascriptjqueryhtml
201
gautamlakum

Pour obtenir ou définir un attribut d'un élément HTML, vous pouvez utiliser la fonction element.attr() 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 pour l'élément anchor, utilisez '.class-name' et si vous avez défini l'ID pour l'élément ancré, utilisez '#element-id'.

377
user529141

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

$(selector).prop('href',"http://www...") to set la valeur, et

$(selector).prop('href') to get la valeur

En bref, .prop obtient et définit des valeurs sur l'objet DOM, et .attr obtient et définit des valeurs dans HTML. Cela rend .prop un peu plus rapide et éventuellement plus fiable dans certains contextes.

18
Gerbus

Définissez l'attribut href 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 élément <a> (".myClass" ou "#myId" pour nommer les plus simples).

J'espère que cela t'aides !

14
Valentin Flachsel

Comparaison des tests de performance 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";

enter image description here

Ici, vous pouvez effectuer un 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;

enter image description here

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

2
Kamil Kiełczewski
<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>
1
Nanang HD