如何使用jQuery更改超链接的href属性(链接目标)?
使用
$("a").attr("href", "http://www.google.com/")
将修改所有超链接的href以指向Google。不过,您可能需要一个更精细的选择器。例如,如果您有链接源(超链接)和链接目标(也称为“锚”)锚标记的组合:
<a name="MyLinks"></a>
<a href="http://www.codeproject.com/">The CodeProject</a>
…然后您可能不想意外地将href属性添加到它们中。为了安全起见,我们可以指定我们的选择器将仅与具有现有href属性的<a>标记匹配:
$("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的这部分替换为一个新的。请注意,这给了您灵活性——对链接的任何修改都可以在这里完成。
根据您是希望将所有相同的链接更改为其他链接,还是希望仅控制页面给定部分中的链接,或者单独控制每个链接,您可以执行以下操作之一。
更改所有指向谷歌的链接,使其指向谷歌地图:
<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/');
当单击类“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;
});
对于jQuery 1.6及以上版本,您应该使用:
$("a").prop("href", "http://www.jakcms.com")
prop和attr的区别在于,attr获取HTML属性,而prop获取DOM属性。
你可以在这篇文章中找到更多细节:.prop()vs.attr()
尽管OP明确要求jQuery的答案,但现在您不需要对所有事情都使用jQuery。
一些没有jQuery的方法:
如果要更改所有<a>元素的href值,请将其全部选中,然后遍历节点列表:(示例)var anchors=document.querySelectorAll('a');Array.protocol.forEach.call(锚,函数(元素,索引){element.href=“http://stackoverflow.com";});如果要更改实际具有href属性的所有<a>元素的href值,请通过添加[href]属性选择器(a[href]])来选择它们:(示例)var anchors=document.querySelectorAll('a[href]');Array.protocol.forEach.call(锚,函数(元素,索引){element.href=“http://stackoverflow.com";});如果要更改包含特定值的<a>元素的href值,例如google.com,请使用属性选择器a[href*=“google.com”]:(示例)var anchors=document.querySelectorAll('a[href=“google.com”]');Array.protocol.forEach.call(锚,函数(元素,索引){element.href=“http://stackoverflow.com";});同样,您也可以使用其他属性选择器。例如:a[href$=“.png”]可用于选择href值以.png结尾的<a>元素。a[href^=“https://”]可用于选择具有前缀为https://的href值的<a>元素。如果要更改满足多个条件的<a>元素的href值:(示例)var anchors=document.querySelectorAll('a[href=“https://”],a[href=“.png”]');Array.protocol.forEach.call(锚,函数(元素,索引){element.href=“http://stackoverflow.com";});
..在大多数情况下不需要正则表达式。
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.com");
});
不要为了jQuery而使用它!仅使用JavaScript就非常简单。
document.querySelector('#the-link').setAttribute('href', 'http://google.com');
https://jsfiddle.net/bo77f8mg/1/
更改Wordpress Avada主题徽标图像的HREF
如果你安装了ShortCode Exec PHP插件,你可以创建这个我称为myjavascript的短代码
?><script type="text/javascript">
jQuery(document).ready(function() {
jQuery("div.fusion-logo a").attr("href","tel:303-985-9850");
});
</script>
现在,您可以转到外观/小部件,选择一个页脚小部件区域,并使用文本小部件添加以下短代码
[myjavascript]
选择器可能会根据您使用的图像以及视网膜是否就绪而改变,但您始终可以使用开发人员工具来确定。
简单的方法是:
Attr函数(自jQuery 1.0版起)
$("a").attr("href", "https://stackoverflow.com/")
or
Prop函数(自jQuery 1.6版起)
$("a").prop("href", "https://stackoverflow.com/")
此外,上述方法的优点是,若选择器选择单个锚点,它将仅更新该锚点,若选择器返回一组锚点,则它将仅通过一条语句更新特定组。
现在,有很多方法可以确定确切的锚点或锚点组:
非常简单的:
通过标记名称选择锚点:$(“a”)通过索引选择锚点:$(“a:eq(0)”)为特定类选择锚点(如在该类中仅锚点类活动):$(“a.active”)选择具有特定ID的锚点(在示例profileLink中ID):$(“a#proileLink”)选择第一个锚点href:$(“a:first”)
更有用的:
选择具有href属性的所有元素:$(“[href]”)选择具有特定href:$(“a[href='ww.stacksoverflow.com']”)的所有锚点选择不具有特定href:$(“a[href!='ww.stacksoverflow.com']”)的所有锚点选择具有包含特定URL的href的所有锚点:$(“a[href*='ww.stacksoverflow.com']”)选择以特定URL:$(“a[href^='ww.stacksoverflow.com']”)开头的所有锚点选择以特定URL结尾的所有锚点:$(“a[href$='ww.stacksoverflow.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);
});
});
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");
or
$("#ali").prop("href", "https://stackoverflow.com");
在这种情况下,如果您已经注入了jQuery,那么jQuery可能看起来更短,更跨浏览器。。。但除此之外,我会选择JS的。。。
Try
link.href = 'https://...'
link.href='https://stackoverflow.com'<a id=“link”href=“#”>单击我</a>
试试这个;
$("#link").attr("href", "https://coenvink.com/")
代码功能的分解:
$("#link")
这部分代码获取id为“Link”的元素。之后,您将属性“href”(witch基本上是url的链接)设置为新的url,在本例中,witch是我自己的网站:
.attr("href", "https://coenvink.com/")
我希望现在清楚了!
推荐文章
- 如何使用Jest测试对象键和值是否相等?
- 将长模板文字行换行为多行,而无需在字符串中创建新行
- 如何在JavaScript中映射/减少/过滤一个集?
- 如何嵌入HTML到IPython输出?
- 如何删除/忽略:悬停css风格的触摸设备
- Bower: ENOGIT Git未安装或不在PATH中
- HTML5文本区域占位符不出现
- 添加javascript选项选择
- 在Node.js中克隆对象
- HTML tabindex属性是什么?
- 我如何捕捉Ajax查询后错误?
- 为什么在JavaScript的Date构造函数中month参数的范围从0到11 ?
- HTML按钮调用MVC控制器和动作方法
- 使用JavaScript更改URL参数并指定默认值
- jQuery:什么是限制“数字”仅输入文本框的最佳方法?(允许使用小数点)