javascript - js和jquery怎么获取点击链接的url？
本文介绍了javascript - js和jquery怎么获取点击链接的url？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
点击一个超链接，怎么获取到它的url呢？
解决方案
分析一下这个问题点击一个超链接，怎么获取到它的url呢
首先，需要获取信息，应当先保证其不跳转，即点击a标签时如何阻止其自动跳转到href的动作
获取url，即获取href属性的值
上面诸位同志回答2部分的都很好，但是都没处理自动跳转的问题
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档标题</title>
</head>
<body>
<!-- some other code -->
<a id='showHref' href="http://www.baidu.com">baidu</a>
</body>
</html>假设是阻止特定标签的跳转，就不进行全体a标签的遍历了
JS
<script type="text/javascript">
function init() {
document.getElementById('showHref').onclick = function() {
console.log(this.href);
/*下面两种写法任选其一*/
// return false;
event.preventDefault();
};
}
</script>
Jquery
<script type="text/javascript">
$(document).on('click','#showHref',function() {
console.log(this.href);
/*或者*/
// console.log($('#showHref').attr('href'));
/*下面两种写法任选其一*/
// return false;
event.preventDefault();
});
</script>
全体a标签的遍历
@ 莲_涳栢__ 写的很好了，我这里再整合一下jquery的写法
JS
<script type="text/javascript">
function init() {
Array.prototype.forEach.call(document.getElementsByTagName('a'), function(dom) {
dom.onclick = function() {
console.log(this.href);
/*下面两种写法任选其一*/
// return false;
event.preventDefault();
};
});
}
</script>
Jquery
<script type="text/javascript">
$(document).on('click','a',function() {
console.log(this.href);
/*或者*/
// console.log($('#showHref').attr('href'));
/*下面两种写法任选其一*/
// return false;
event.preventDefault();
});
</script>
补充
document.querySelectorAll()比getElement(s)系列有更好的兼容性，而且写法更统一，建议使用。当然IE6那种古董好像也是无法兼容的┑(￣Д ￣)┍
这篇关于javascript - js和jquery怎么获取点击链接的url？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
