jQuery 如何使用jQuery在点击时获取锚文本/href？

How to get anchor text/href on click using jQuery?

提问by ACP

Consider I have an anchor which looks like this

考虑我有一个看起来像这样的锚

 <div class="res">
     <a href="~/Resumes/Resumes1271354404687.docx">
         ~/Resumes/Resumes1271354404687.docx
     </a>
 </div>

NOTE:There won't be any id or class for the anchor...

注意：锚不会有任何 id 或类...

I want to get either href/text in the jQuery onclickof that anchor.

我想在该onclick锚点的 jQuery中获取 href/text 。

回答by Sarfraz

Note:Apply the class info_linkto any link you want to get the info from.

注意：将类info_link应用于您想要从中获取信息的任何链接。

<a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
    ~/Resumes/Resumes1271354404687.docx
</a>

For href:

对于href：

$(function(){
  $('.info_link').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

For Text:

对于文本：

$(function(){
  $('.info_link').click(function(){
    alert($(this).text());
  });
});

.

.

Update Based On Question Edit

更新基于问题编辑

You can get them like this now:

你现在可以像这样得到它们：

For href:

对于href：

$(function(){
  $('div.res a').click(function(){
    alert($(this).attr('href'));
    // or alert($(this).hash();
  });
});

For Text:

对于文本：

$(function(){
  $('div.res a').click(function(){
    alert($(this).text());
  });
});

回答by GlenCrawford

Edited to reflect update to question

编辑以反映对问题的更新

$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});

回答by Josh Crozier

Without jQuery:

没有 jQuery：

You don't needjQuery when it is so simple to do this using pure JavaScript. Here are two options:

当使用纯 JavaScript 执行此操作如此简单时，您不需要jQuery。这里有两个选项：

• Method 1 - Retrieve the exact value of the hrefattribute:

  Select the element and then use the .getAttribute()method.

  This method does notreturn the full URL, instead it retrieves the exact value of the hrefattribute.

  var anchor = document.querySelector('a'),
      url = anchor.getAttribute('href');
  
  alert(url);

  <a href="/relative/path.html"></a>

• 方法 1 - 检索href属性的确切值：

  选择元素，然后使用.getAttribute()方法。

  这个方法并没有返回完整的URL，而不是它检索的精确值href属性。

  var anchor = document.querySelector('a'),
      url = anchor.getAttribute('href');
  
  alert(url);

  <a href="/relative/path.html"></a>

---

---

• Method 2 - Retrieve the full URL path:

  Select the element and then simply access the hrefproperty.

  This method returns the full URL path.

  In this case: http://stacksnippets.net/relative/path.html.

  var anchor = document.querySelector('a'),
      url = anchor.href;
  
  alert(url);

  <a href="/relative/path.html"></a>

• 方法 2 - 检索完整的 URL 路径：

  选择元素，然后简单地访问href属性。

  此方法返回完整的 URL 路径。

  在这种情况下：http://stacksnippets.net/relative/path.html。

  var anchor = document.querySelector('a'),
      url = anchor.href;
  
  alert(url);

  <a href="/relative/path.html"></a>

---

---

As your title implies, you want to get the hrefvalue on click. Simply select an element, add a click event listener and then return the hrefvalue using either of the aforementioned methods.

正如您的标题所暗示的，您希望href在点击时获得价值。只需选择一个元素，添加一个单击事件侦听器，然后href使用上述任一方法返回值。

var anchor = document.querySelector('a'),
    button = document.getElementById('getURL'),
    url = anchor.href;

button.addEventListener('click', function (e) {
  alert(url);
});

<button id="getURL">Click me!</button>
<a href="/relative/path.html"></a>

回答by Jacob Ashcraft

Alternative

选择

Using the example from Sarfraz above.

使用上面 Sarfraz 的示例。

<div class="res">
    <a class="info_link" href="~/Resumes/Resumes1271354404687.docx">
        ~/Resumes/Resumes1271354404687.docx
    </a>
</div>

For href:

对于href：

$(function(){
  $('.res').on('click', '.info_link', function(){
    alert($(this)[0].href);
  });
});

回答by rahul

Updated code

更新代码

$('a','div.res').click(function(){
  var currentAnchor = $(this);
  alert(currentAnchor.text());
  alert(currentAnchor.attr('href'));
});