在运行时设置href属性


202

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

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

Answers:


378

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

要获取href属性,请使用以下代码:

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

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

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

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


1
我用它来获取href。alert($(“#publish-link”)。attr(“ href”)); 它给了我警报“未定义”。
gautamlakum 2010年

3
这可能意味着您的发布链接是类而不是ID。试试:alert($(“。publish-link”)。attr(“ href”)); 相反
吉姆·托兰

3
@ lakum4stackof:如果您在此处使用精确的<a>标签,这将有所帮助:

嗯,对不起。你是对的。我已经应用了类,并且在jQuery代码中使用了“#”。它与alert($(“。publish-link”)。attr(“ href”))一起工作;非常感谢。:)
gautamlakum 2010年

18

在jQuery 1.6+中,最好使用:

$(selector).prop('href',"http://www...")设定值,

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

简而言之,.prop获取和设置DOM对象的值,并.attr获取和设置HTML的值。.prop在某些情况下,这会使速度更快,甚至可能更可靠。


1
同意'.prop'将获得完整的路径,例如:http://www.../index.html而.attr将仅获得:'index.html'–
DevWL

14

用设置href属性

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

并使用阅读

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

其中,“选择器”是<a>元素的任何有效jQuery选择器(“ .myClass”或“ #myId”用于命名最简单的选择器)。

希望这可以帮助 !


我用它来获取href。alert($(“#publish-link”)。attr(“ href”)); 它给了我警报“未定义”。
gautamlakum 2010年

href如果您的选择器正确,则@ lakum4stack很有可能在设置属性之前执行了警报代码。
Valentin Flachsel 2010年

2
试试:alert($(“。publish-link”)。attr(“ href”)); 因为您的元素可能是类而不是ID。实际上,如果它在您的事件中,则可能使用$(this)
jim tollan 2010年

2

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

  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


真好!奇怪的是,我得到的结果与您相反,但是能够自己运行它们很有趣。
HoldOffHunger

@HoldOffHunger是-非常有趣-您的机器,操作系统和浏览器是什么?
卡米尔·基列夫斯基(KamilKiełczewski),

1
FF59,Win10。结果似乎再次略有变化(可能取决于打开的选项卡的数量),但仍然大致相同:imgur.com/a/MLDnTWM机器:10岁的英特尔主板(dp55wg),3.1ghz四核, 16GB DDR3内存,GTX1070。
HoldOffHunger

1
<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
仅代码的答案不如具有有效代码和有用说明的答案有用。在这种情况下,有必要向5岁儿童解释此答案。
Somnath Muluk
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.