在运行时设置 href 属性

IT技术 javascript jquery html
2021-01-30 05:46:07

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

另外,你如何使用jQueryhref获取<a>标签属性

5个回答

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

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

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

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

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

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

这可能意味着您的发布链接是一个类而不是一个 id。尝试: alert($(".publish-link").attr("href")); 反而
2021-03-25 05:46:07
啊对不起。你说的对。我已经应用了类,并且在 jquery 代码中使用了“#”。它与 alert($(".publish-link").attr("href")); 非常感谢。:)
2021-03-29 05:46:07
我用它来获取href。alert($("#publish-link").attr("href")); 它给了我警报“未定义”。
2021-04-08 05:46:07
@lakum4stackof:如果您在此处发布确切的 < a > 标签会有所帮助:)
2021-04-09 05:46:07

在 jQuery 1.6+ 中最好使用:

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

$(selector).prop('href')获取value

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

同意 '.prop' 将获得完整路径,如:http : //www.../index.html 而 .attr 将仅获得:'index.html'
2021-03-27 05:46:07

设置href属性

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

并使用阅读它

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

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

希望这可以帮助 !

@lakum4stackof 您很可能在设置href属性之前执行了该警报代码,假设您的选择器是正确的。
2021-03-16 05:46:07
尝试: alert($(".publish-link").attr("href")); 因为您的元素可能是一个类而不是一个 id。事实上,如果它在您的活动中,可能会使用 $(this)
2021-04-01 05:46:07
我用它来获取href。alert($("#publish-link").attr("href")); 它给了我警报“未定义”。
2021-04-10 05:46:07

三种方案的小型性能测试对比:

  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

好的!奇怪的是,我得到的结果与您相反,但能够自己运行它们很有趣。
2021-03-16 05:46:07
@HoldOffHunger 是的 - 非常有趣 - 你的机器、操作系统和浏览器是什么?
2021-03-20 05:46:07
FF59,Win10。结果似乎又略有变化(可能取决于打开的选项卡数量),但仍然大致相同:imgur.com/a/MLDnTWM机器:10 年历史的英特尔板 (dp55wg),3.1GHz 四核, 16GB DDR3 内存,gtx1070。
2021-03-29 05:46:07
<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>
仅代码答案不如具有工作代码和有用解释的答案有用。在这种情况下,向一个 5 岁的孩子解释这个答案是值得的。
2021-04-02 05:46:07