blocks|key|308263|text|注意：将info_link类应用于您想要从中获取信息的任何链接。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|308264|<a+class="info_link"+href="~/Resumes/Resumes1271354404687.docx">
++++~/Resumes/Resumes1271354404687.docx
</a>|code-block|syntax|javascript|308265|href的：|308266|$(function(){
++$('.info_link').click(function(){
++++alert($(this).attr('href'));
++++//+or+alert($(this).hash();
++});
});|308267|文本的：|308268|$(function(){
++$('.info_link').click(function(){
++++alert($(this).text());
++});
});|308269|。|308270|根据问题编辑进行更新|308271|你现在可以像这样得到它们：|308272|308273|$(function(){
++$('div.res+a').click(function(){
++++alert($(this).attr('href'));
++++//+or+alert($(this).hash();
++});
});|308274|308275|$(function(){
++$('div.res+a').click(function(){
++++alert($(this).text());
++});
});|308276|entityMap^0|0|3|4|9|0|0|5|1|0|0|3|1|0|0|0|0|0|5|1|0|0|3|1|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|1C|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|E|@]|F|$]]|$1|N|3|O|5|I|7|1G|8|@]|E|@]|F|$J|K]]|$1|P|3|Q|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|E|@]|F|$]]|$1|R|3|S|5|I|7|1K|8|@]|E|@]|F|$J|K]]|$1|T|3|U|5|6|7|1L|8|@]|E|@]|F|$]]|$1|V|3|W|5|6|7|1M|8|@]|E|@]|F|$]]|$1|X|3|Y|5|6|7|1N|8|@]|E|@]|F|$]]|$1|Z|3|M|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|E|@]|F|$]]|$1|10|3|11|5|I|7|1R|8|@]|E|@]|F|$J|K]]|$1|12|3|Q|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|E|@]|F|$]]|$1|13|3|14|5|I|7|1V|8|@]|E|@]|F|$J|K]]|$1|15|3|-4|5|6|7|1W|8|@]|E|@]|F|$]]]|16|$]]

<p><strong>Note:</strong> Apply the class <code>info_link</code> to any link you want to get the info from.</p>

<pre><code>&lt;a class="info_link" href="~/Resumes/Resumes1271354404687.docx"&gt;
    ~/Resumes/Resumes1271354404687.docx
&lt;/a&gt;
</code></pre>

<p><strong>For href:</strong></p>

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

<p><strong>For Text:</strong></p>

<pre><code>$(function(){
  $('.info_link').click(function(){
    alert($(this).text());
  });
});
</code></pre>

<p>.</p>

<h1>Update Based On Question Edit</h1>

<p>You can get them like this now:</p>

<p><strong>For href:</strong></p>

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

<p><strong>For Text:</strong></p>

<pre><code>$(function(){
  $('div.res a').click(function(){
    alert($(this).text());
  });
});
</code></pre>


blocks|key|3263343|text|已更新代码|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3263344|$('a','div.res').click(function(){
++var+currentAnchor+=+$(this);
++alert(currentAnchor.text());
++alert(currentAnchor.attr('href'));
});|code-block|syntax|javascript|3263345|entityMap^0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><strong><em>Updated code</em></strong></p>

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


blocks|key|308278|text|对进行了编辑，以反映对问题的更新|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|308279|$(document).ready(function()+{
++++$(".res+a").click(function()+{
++++++++alert($(this).attr("href"));
++++});
});|code-block|syntax|javascript|308280|entityMap^0|1|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><strong>Edited to reflect update to question</strong></p>

<pre><code>$(document).ready(function() {
    $(".res a").click(function() {
        alert($(this).attr("href"));
    });
});
</code></pre>


blocks|key|3263413|text|不使用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3263414|当使用纯JavaScript完成这项工作非常简单时，您并不需要jQuery。这里有两个选项：|3263415|3263416|Method+1-检索href+属性的确切值：|unordered-list-item|offset|length|style|BOLD|CODE|3263417|3263418|选择元素，然后使用.getAttribute()方法。|3263419|此方法不返回完整的URL，而是检索href属性的精确值。|3263420|var锚=+document.querySelector('a')，url+=+anchor.getAttribute('href')；警告(Url)；|3263421|3263422|3263423|URL+2-检索完整的|3263424|Method路径：|3263425|3263426|选择该元素，然后只需访问href+property。|3263427|此方法返回完整的URL路径。|3263428|在本例中：http://stacksnippets.net/relative/path.html.|3263429|var锚=+document.querySelector('a')，url+=+anchor.href；警告(Url)；|3263430|3263431|3263432|正如您的标题所暗示的，您希望在单击时获得href值。只需选择一个元素，添加一个单击事件侦听器，然后使用上述任一方法返回href值。|3263433|​|3263434|var+anchor+=+document.querySelector('a'),
++++button+=+document.getElementById('getURL'),
++++url+=+anchor.href;

button.addEventListener('click',+function+(e)+{
++alert(url);
});|code-block|syntax|javascript|3263435|<button+id="getURL">Click+me!</button>
<a+href="/relative/path.html"></a>|3263436|3263437|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute|1|https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.href^0|0|0|0|0|F|G|7|B|4|0|0|9|F|9|F|0|0|H|4|0|0|0|0|0|0|9|0|0|C|4|C|D|1|0|0|5|17|0|0|0|0|K|4|1N|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1X|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1Z|8|@$H|20|I|21|J|K]|$H|22|I|23|J|K]|$H|24|I|25|J|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|26|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|27|8|@$H|28|I|29|J|L]]|9|@$H|2A|I|2B|1|2C]]|A|$]]|$1|P|3|Q|5|6|7|2D|8|@$H|2E|I|2F|J|L]]|9|@]|A|$]]|$1|R|3|S|5|6|7|2G|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|2H|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|2J|8|@]|9|@]|A|$]]|$1|X|3|Y|5|G|7|2K|8|@$H|2L|I|2M|J|K]]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|2N|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2O|8|@$H|2P|I|2Q|J|L]]|9|@$H|2R|I|2S|1|2T]]|A|$]]|$1|12|3|13|5|6|7|2U|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|2V|8|@$H|2W|I|2X|J|L]]|9|@]|A|$]]|$1|16|3|17|5|6|7|2Y|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|19|3|-4|5|6|7|30|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|6|7|31|8|@$H|32|I|33|J|L]|$H|34|I|35|J|L]]|9|@]|A|$]]|$1|1C|3|1D|5|6|7|36|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|1G|7|37|8|@]|9|@]|A|$1H|1I]]|$1|1J|3|1K|5|1G|7|38|8|@]|9|@]|A|$1H|1I]]|$1|1L|3|1D|5|6|7|39|8|@]|9|@]|A|$]]|$1|1M|3|-4|5|6|7|3A|8|@]|9|@]|A|$]]]|1N|$1O|$5|1P|1Q|1R|A|$1S|1T]]|1U|$5|1P|1Q|1R|A|$1S|1V]]]]

<h2>Without jQuery:</h2>

<p>You don't <em>need</em> jQuery when it is so simple to do this using pure JavaScript. Here are two options:</p>

<ul>
<li><p><strong>Method 1 - Retrieve the exact value of the <code>href</code> attribute:</strong></p>

<p>Select the element and then use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element.getAttribute" rel="nofollow"><code>.getAttribute()</code></a> method.</p>

<p>This method does <em>not</em> return the full URL, instead it retrieves the exact value of the <code>href</code> attribute.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var anchor = document.querySelector('a'),
    url = anchor.getAttribute('href');

alert(url);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="/relative/path.html"&gt;&lt;/a&gt;</code></pre>
</div>
</div>
</p></li>
</ul>

<hr>

<ul>
<li><p><strong>Method 2 - Retrieve the full URL path:</strong></p>

<p>Select the element and then simply access the <a href="https://developer.mozilla.org/en-US/docs/Web/API/URLUtils.href" rel="nofollow"><code>href</code> property</a>.</p>

<p>This method returns the full URL path.</p>

<p>In this case: <code>http://stacksnippets.net/relative/path.html</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var anchor = document.querySelector('a'),
    url = anchor.href;

alert(url);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="/relative/path.html"&gt;&lt;/a&gt;</code></pre>
</div>
</div>
</p></li>
</ul>

<hr>

<p>As your title implies, you want to get the <code>href</code> value on click. Simply select an element, add a click event listener and then return the <code>href</code> value using either of the aforementioned methods.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var anchor = document.querySelector('a'),
    button = document.getElementById('getURL'),
    url = anchor.href;

button.addEventListener('click', function (e) {
  alert(url);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="getURL"&gt;Click me!&lt;/button&gt;
&lt;a href="/relative/path.html"&gt;&lt;/a&gt;</code></pre>
</div>
</div>
</p>


blocks|key|313531|text|替代方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|313532|使用上面Sarfraz中的示例。|313533|<div+class="res">
++++<a+class="info_link"+href="~/Resumes/Resumes1271354404687.docx">
++++++++~/Resumes/Resumes1271354404687.docx
++++</a>
</div>|code-block|syntax|javascript|313534|对于href：|313535|$(function(){
++$('.res').on('click',+'.info_link',+function(){
++++alert($(this)[0].href);
++});
});|313536|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<h1>Alternative</h1>

<p>Using the example from Sarfraz above.</p>

<pre><code>&lt;div class="res"&gt;
    &lt;a class="info_link" href="~/Resumes/Resumes1271354404687.docx"&gt;
        ~/Resumes/Resumes1271354404687.docx
    &lt;/a&gt;
&lt;/div&gt;
</code></pre>

<h3>For href:</h3>

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


<p>Consider I have an anchor which looks like this</p>

<pre><code> &lt;div class="res"&gt;
     &lt;a href="~/Resumes/Resumes1271354404687.docx"&gt;
         ~/Resumes/Resumes1271354404687.docx
     &lt;/a&gt;
 &lt;/div&gt;
</code></pre>

<p><strong>NOTE:</strong> There won't be any id or class for the anchor...</p>

<p>I want to get either href/text in the jQuery <code>onclick</code> of that anchor.</p>


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

jQuery

假设我有一个锚点，如下所示 <div class="res">     <a href="~/Resumes/Resumes1271354404687.docx">         ~/Resumes/Resumes1271354404687.docx     </a> </div>注意：锚点将不会有任何id或类......

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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