如何使用jQuery更改超链接的href?
#1楼
使用
$("a").attr("href", "/")
会修改所有超链接的href,以指向Google。 您可能需要一个更精细的选择器。 例如,如果您混合使用链接源(超链接)和链接目标(也称为“锚”)锚标签:
<a name="MyLinks"></a><a href="/">The CodeProject</a>
...那么您可能不想意外地向它们添加href
属性。 为了安全起见,我们可以指定选择器只匹配具有现有href
属性的<a>
标签:
$("a[href]") //...
当然,您可能会想到一些更有趣的东西。 如果要使锚与特定的现有href
匹配,则可以使用如下所示的内容:
$("a[href='/']").attr('href', '/')
这将找到href
完全匹配字符串/
。 一个更复杂的任务可能是匹配,然后仅更新href
一部分:
$("a[href^='']").each(function(){ this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, "");});
第一部分仅选择href以开头的链接。 然后,定义一个函数,该函数使用简单的正则表达式将URL的这一部分替换为新的。 请注意,这为您提供了灵活性-可以在此处对链接进行任何形式的修改。
#2楼
在查询中使用attr
方法。 您可以切换出具有新值的任何属性。
$("a.mylink").attr("href", "");
#3楼
根据您是要将所有相同的链接更改为其他链接,还是要仅控制页面给定部分中的链接,还是要单独控制每个链接,可以执行其中之一。
更改所有指向Google的链接,使它们指向Google Maps:
<a href="">$("a[href='/']").attr('href', '/');
要更改给定部分中的链接,请将容器div的类添加到选择器。 此示例将更改内容中的Google链接,但不会更改页脚中的链接:
<div class="content"><p>...link to <a href="/">Google</a>in the content...</p></div><div class="footer">Links: <a href="/">Google</a></div>$(".content a[href='/']").attr('href', '/');
要更改各个链接,无论它们在文档中的位置如何,请向该链接添加一个ID,然后将该ID添加至选择器。 此示例将更改内容中的第二个Google链接,但不会更改第一个或页脚中的一个:
<div class="content"><p>...link to <a href="/">Google</a>in the content...</p><p>...second link to <a href="/" id="changeme">Google</a>in the content...</p></div><div class="footer">Links: <a href="/">Google</a></div>$("a#changeme").attr('href', '/');
#4楼
即使OP明确要求提供jQuery答案,但这些天都不需要使用jQuery。
一些没有jQuery的方法:
如果要更改所有<a>
元素的href
值,请全部选择它们,然后遍历nodelist :(示例)
var anchors = document.querySelectorAll('a'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = ""; });
如果要更改实际上具有href
属性的所有<a>
元素的href
值,请通过添加[href]
属性选择器(a[href]
)进行选择:(示例)
var anchors = document.querySelectorAll('a[href]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = ""; });
如果要更改包含特定值的<a>
元素的href
值,例如,请使用属性选择器
a[href*=""]
:(示例)
var anchors = document.querySelectorAll('a[href*=""]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = ""; });
同样,您也可以使用其他属性选择器 。 例如:
a[href$=".png"]
可用于选择href
值以.png
结尾的<a>
元素。
a[href^="https://"]
可用于选择<a>
具有href
值并以https://
<a>
元素。
如果要更改满足多个条件的<a>
元素的href
值:(示例)
var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]'); Array.prototype.forEach.call(anchors, function (element, index) { element.href = ""; });
..在大多数情况下不需要正则表达式。
#5楼
$("a[href^='']").each(function(){ this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, "");});
#6楼
仅仅为了它而停止使用jQuery! 仅使用JavaScript如此简单。
document.querySelector('#the-link').setAttribute('href', '');
/bo77f8mg/1/
#7楼
更改Wordpress Avada主题徽标图像的HREF
如果您安装ShortCode Exec PHP插件,则可以创建我称为myjavascript的此Shortcode。
?><script type="text/javascript">jQuery(document).ready(function() {jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");});</script>
现在,您可以转到外观/小部件并选择页脚小部件区域之一,并使用文本小部件添加以下短代码
[myjavascript]
选择器可能会根据您使用的图像以及是否已准备好视网膜而改变,但是您始终可以使用开发人员工具来找出它。
#8楼
单击“ menu_link”类的链接时,将调用此代码片段,并显示该链接的文本和URL。 返回false阻止链接被跟踪。
<a rel='1' class="menu_link" href="option1.html">Option 1</a><a rel='2' class="menu_link" href="option2.html">Option 2</a>$('.menu_link').live('click', function() {var thelink = $(this);alert ( thelink.html() );alert ( thelink.attr('href') );alert ( thelink.attr('rel') );return false;});
#9楼
这样做的简单方法是:
Attr函数 (自jQuery 1.0版开始)
$("a").attr("href", "/")
要么
Prop函数 (自jQuery 1.6版开始)
$("a").prop("href", "/")
同样,上述方式的优点在于,如果选择器选择单个锚,则仅更新该锚,并且如果选择器返回一组锚,则仅通过一条语句更新特定组。
现在,有很多方法可以识别确切的锚点或一组锚点:
很简单的一个:
通过标签名称选择锚:$("a")
通过索引选择锚点:$("a:eq(0)")
选择特定类的锚点(如在该类中,仅锚定类为active
锚点):$("a.active")
选择具有特定ID的锚点(此处为profileLink
ID示例):$("a#proileLink")
选择第一个锚href:$("a:first")
更有用的:
选择所有具有href属性的元素:$("[href]")
选择所有具有特定href的锚点:$("a[href='']")
选择所有不具有特定href的锚点:$("a[href!='']")
选择所有带有带有特定URL的href的锚点:$("a[href*='']")
选择以特定URL开头的带有href的所有锚点:$("a[href^='']")
选择所有以特定网址结尾的href锚:$("a[href$='']")
现在,如果要修改特定的URL,可以执行以下操作:
例如,如果您要为转到的所有URL添加代理网站,则可以按以下方式实现它:
$("a[href^='']").each(function(){ this.href = this.href.replace(/http:\/\/\//gi, function (x) {return "/?query="+encodeURIComponent(x);});});
#10楼
属性中的href
,因此您可以使用纯JavaScript进行更改,但是如果您已经在页面中注入了jQuery,请不要担心,我将同时展示两种方式:
假设您在下面有这个href
:
<a id="ali" alt="Ali" href=".au">Alireza Dezfoolian</a>
您想更改链接...
使用不带任何库的纯JavaScript,您可以执行以下操作:
document.getElementById("ali").setAttribute("href", "");
而且,在jQuery中,您可以执行以下操作:
$("#ali").attr("href", "");
要么
$("#ali").prop("href", "");
在这种情况下,如果您已经注入了jQuery,则jQuery可能看起来更短并且跨浏览器更多...但是除此之外,我使用JS
之一...
#11楼
在jQuery 1.6及更高版本中,您应该使用:
$("a").prop("href", "")
prop
和attr
之间的区别在于attr
捕获HTML属性,而prop
捕获DOM属性。
您可以在这篇文章中找到更多详细信息: .prop()vs .attr()