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