如何使用 jQuery 获取 href 值？答案

【问题标题】：How to get href value using jQuery?如何使用 jQuery 获取 href 值？
【发布时间】：2010-01-20 01:13:12
【问题描述】：

我正在尝试使用 jQuery 获取 href 值：

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

但它不起作用。为什么？

【问题讨论】：

想告诉我们究竟是什么不起作用？警报是空的吗？你有没有收到 2 个警报？有js错误吗？它对我有用...
UPSs ...，对不起。问题是清除缓存
小提琴在这里：jsfiddle.net/LijoCheeran/t1xs4wo7

标签： javascript jquery

【解决方案1】：

你需要

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

在 jQuery 单击处理程序中，this 对象指的是单击的元素，而在您的情况下，您总是会获得页面上第一个 <a> 的 href。顺便说一句，这就是为什么您的示例有效但您的真实代码无效的原因

【讨论】：

【解决方案2】：

您可以通过此代码获取当前的 href 值：

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

通过ID获取href值

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

【讨论】：

【解决方案3】：

值得一提的是

$('a').attr('href'); // gets the actual value
$('a').prop('href'); // gets the full URL always

【讨论】：

【解决方案4】：

它有效...在 IE8 中测试（如果您从计算机测试文件，请不要忘记允许 javascript 运行）和 chrome。

【讨论】：

Chrome 可以根据您的设置抑制第二个弹出窗口，您是否在 chrome 中进行测试？如果是这样，请注释掉您的第一个警报，它会起作用。

【解决方案5】：

如果页面有一个<a> 可以，但是，很多<a> ，必须使用var href = $(this).attr('href');

【讨论】：

给出未定义的输出

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

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

然后你可以访问jquery中的href，如下所示（不需要在href中使用“a”）

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

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

【讨论】：

【解决方案8】：

假设你有这个 html ：

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

你可以用这个 JS sn-p 获取并显示 href 属性：

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

【讨论】：