在运行时设置 href 属性

Question

在运行时使用 jQuery 设置<a> 标记的href 属性的最佳方法是什么？

另外，如何使用jQuery获取<a>标签的href属性的值？

Answer 1

要获取或设置 HTML 元素的属性，可以使用 jQuery 中的element.attr() 函数。

要获取 href 属性，请使用以下代码：

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

要设置 href 属性，请使用以下代码：

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

在这两种情况下，请使用适当的选择器。如果你设置了锚元素的类，使用'.class-name'，如果你设置了锚元素的id，使用'#element-id'。

Answer 2

用

设置href属性

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

并使用阅读它

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

其中“选择器”是您的 <a> 元素的任何有效 jQuery 选择器（最简单的选择是“.myClass”或“#myId”）。

希望这会有所帮助！

Answer 3

在 jQuery 1.6+ 中最好使用：

$(selector).prop('href',"http://www...") 来设置值，并且

$(selector).prop('href')获取价值

简而言之，.prop 在 DOM 对象上获取和设置值，.attr 在 HTML 中获取和设置值。这使得.prop 在某些情况下更快一些并且可能更可靠。

Answer 4

<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>

Answer 5

三种解决方案的小型性能测试比较：

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

这里可以自行测试https://jsperf.com/a-href-js-change

---

我们可以通过以下方式读取href值

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

这里可以自行测试https://jsperf.com/a-href-js-read