在运行时设置href属性

小开

最佳答案

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

要获得href属性，使用以下代码:

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

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

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

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

小开

设置href属性为

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

然后用

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

这里的"selector"是任意适用于<a>元素的jQuery选择器("。myClass”或“#myId”来命名最简单的)。

希望这能有所帮助!

小开

在jQuery 1.6+中，最好使用:

$(selector).prop('href',"http://www...")到集的值，和

$(selector).prop('href')到得到的值

简而言之，.prop在DOM对象上获取和设置值，而.attr在超文本标记语言对象中获取和设置值。这使得.prop更快一点，在某些上下文中可能更可靠。

小开

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

小开

小性能测试对比三种解决方案:

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

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

我们可以用以下方法读取href值

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

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