Festlegen des href-Attributs zur Laufzeit

Wie kann das hrefAttribut des <a>Tags zur Laufzeit mit jQuery am besten festgelegt werden?

Wie erhalten Sie mit jQuery den Wert des hrefAttributs des <a>Tags?

Um ein Attribut eines HTML-Elements abzurufen oder festzulegen, können Sie die element.attr()Funktion in jQuery verwenden.

Verwenden Sie den folgenden Code, um das href- Attribut abzurufen :

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

Verwenden Sie den folgenden Code, um das href- Attribut festzulegen :

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

Verwenden Sie in beiden Fällen den entsprechenden Selektor. Wenn Sie die Klasse für das Ankerelement festgelegt haben, verwenden Sie '.class-name'und wenn Sie die ID für das Ankerelement festgelegt haben, verwenden Sie '#element-id'.

In jQuery 1.6+ ist es besser zu verwenden:

$(selector).prop('href',"http://www...") zu setzen , den Wert, und

$(selector).prop('href') zu erhalten , den Wert

Kurz gesagt, .propruft Werte für das DOM- Objekt ab .attrund legt Werte für HTML fest . Dies macht .propin einigen Kontexten etwas schneller und möglicherweise zuverlässiger.

Setzen Sie das hrefAttribut mit

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

und lesen Sie es mit

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

Wobei "Selektor" ein gültiger jQuery-Selektor für Ihr <a>Element ist (".myClass" oder "#myId", um die einfachsten zu nennen).

Hoffe das hilft !

Kleiner Leistungstestvergleich für drei Lösungen:

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

Hier können Sie den Test selbst durchführen https://jsperf.com/a-href-js-change

Wir können href-Werte auf folgende Weise lesen

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

Hier können Sie den Test selbst durchführen 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>