在运行时使用 jQuery设置标签href
属性的最佳方法是什么<a>
?
另外,你如何使用jQueryhref
获取<a>
标签的属性值?
在运行时使用 jQuery设置标签href
属性的最佳方法是什么<a>
?
另外,你如何使用jQueryhref
获取<a>
标签的属性值?
要获取或设置 HTML 元素的属性,您可以使用element.attr()
jQuery 中的函数。
要获取href属性,请使用以下代码:
var a_href = $('selector').attr('href');
要设置href属性,请使用以下代码:
$('selector').attr('href','http://example.com');
在这两种情况下,请使用适当的选择器。如果您已经为锚元素设置了类,请使用'.class-name'
,如果您已经为锚元素设置了 id,请使用'#element-id'
.
在 jQuery 1.6+ 中最好使用:
$(selector).prop('href',"http://www...")
到设定值,
$(selector).prop('href')
以获取value
简而言之,.prop
获取和设置DOM对象的值,以及.attr
获取和设置HTML 中的值。.prop
在某些情况下,这会使速度更快,并且可能更可靠。
设置href
属性
$(selector).attr('href', 'url_goes_here');
并使用阅读它
$(selector).attr('href');
其中“选择器”是<a>
元素的任何有效 jQuery 选择器(“.myClass”或“#myId”以命名最简单的选择器)。
希望这可以帮助 !
三种方案的小型性能测试对比:
$(".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
<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>