如何使用jQuery获取href值?

我试图获得href值使用jQuery:

<html>
<head>
<title>Jquery Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
alert("As you can see, the link no longer took you to jquery.com");
var href = $('a').attr('href');
alert(href);
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>

但这并不奏效。为什么?

568920 次浏览

它的工作原理……在IE8和chrome中测试(如果你在电脑上测试文件,别忘了允许javascript运行)。

你需要

var href = $(this).attr('href');

在jQuery点击处理程序中,this对象指向被点击的元素,而在你的例子中,你总是得到页面上第一个<a>的href。顺便说一句,这就是为什么您的示例可以工作,而实际代码不能工作的原因

如果页面有一个<a>它是有效的,但是,许多<a>,必须使用var href = $(this).attr('href'); < /代码> < / p >

你可以通过下面的代码获取当前的href值:

$(this).attr("href");

通过ID获取href值

$("#mylink").attr("href");

值得一提的是

$('a').attr('href'); // gets the actual value
$('a').prop('href'); // gets the full URL always
**Replacing  href attribut value to other**
 

<div class="cpt">
<a href="/ref/ref/testone.html">testoneLink</a>
</div>


<div class="test" >
<a href="/ref/ref/testtwo.html">testtwoLInk</a>
</div>


<!--Remove first default Link from href attribut -->
<script>
Remove first default Link from href attribut
$(".cpt a").removeAttr("href");
    

Add  Link to same href attribut
var testurl= $(".test").find("a").attr("href");
$(".test a").attr('href', testurl);
</script>

如果你的html链接是这样的:

<a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>

然后你可以在jquery中访问href,如下所示(不需要使用"a"在这里)

$(".linkClass").on("click",accesshref);


function accesshref()
{
var url = $(".linkClass").attr("href");
//OR
var url = $(this).attr("href");
}

假设你有这样的html:

   <a class ="linkClass" href="https://stackoverflow.com/"> Stack Overflow</a>

你可以通过下面的JS代码片段获取并显示href属性:

<script>
$(".linkClass").click(function() {
alert($(this).attr("href"));
});
</script>