如何使用 jQuery 更改超链接的 href 属性（链接目标）？
【问题讨论】：
标签： javascript html jquery hyperlink
使用
$("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 - 现在可以使用以下内容：@987654335 @
对于 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 地图：
<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。
如果您想更改 all <a> 元素的 href 值，请将它们全部选中，然后遍历 nodelist：(example)
var anchors = document.querySelectorAll('a');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "http://stackoverflow.com";
});
如果您想更改实际上具有href 属性的所有<a> 元素的href 值，请通过添加[href] 属性选择器(a[href]) 来选择它们：(example)
var anchors = document.querySelectorAll('a[href]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "http://stackoverflow.com";
});
如果您想更改包含特定值的<a>元素的href值，例如google.com，请使用属性选择器a[href*="google.com"]：(example) p>
var anchors = document.querySelectorAll('a[href*="google.com"]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "http://stackoverflow.com";
});
同样，您也可以使用另一个attribute selectors。例如：
a[href$=".png"] 可用于选择<a> 值以.png 结尾的元素。
a[href^="https://"] 可用于选择带有href 值的<a> 元素以https:// 为前缀。
如果要更改满足多个条件的<a>元素的href值：(example)
var anchors = document.querySelectorAll('a[href^="https://"], a[href$=".png"]');
Array.prototype.forEach.call(anchors, function (element, index) {
element.href = "http://stackoverflow.com";
});
..在大多数情况下不需要正则表达式。
【讨论】：
这样做的简单方法是：
Attr function（自 jQuery 1.0 版起）
$("a").attr("href", "https://stackoverflow.com/")
或
Prop function（从 jQuery 版本 1.6 开始）
$("a").prop("href", "https://stackoverflow.com/")
另外，上述方式的好处是，如果选择器选择了单个锚点，它将只更新该锚点，如果选择器返回一组锚点，它将仅通过一个语句更新特定组。
现在，有很多方法可以识别准确的锚点或锚点组：
很简单的：
$("a")
$("a:eq(0)")
active)：$("a.active")
profileLink 为例
身份证）：$("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);
});
});
【讨论】：
当单击“menu_link”类的链接时，此 sn-p 调用，并显示链接的文本和 url。 return 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！仅使用 JavaScript 就非常简单。
document.querySelector('#the-link').setAttribute('href', 'http://google.com');
【讨论】：
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 one 看起来更短且更跨浏览器...但除此之外，我使用 JS one...
【讨论】：
$("a[href^='http://stackoverflow.com']")
.each(function()
{
this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/,
"http://stackoverflow.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]
选择器可能会根据您使用的图像以及它是否已准备好视网膜而改变，但您始终可以使用开发人员工具找出它。
【讨论】：
试试
link.href = 'https://...'
link.href = 'https://stackoverflow.com'<a id="link" href="#">Click me</a>【讨论】：
<a class="link">My Link</a>
<script>
$(document).ready(function(){
$("a.link").attr("href", "https://toptruyenfull.com/")
})
</script>
【讨论】：
试试这个；
$("#link").attr("href", "https://coenvink.com/")
代码功能的细分：
$("#link")
这部分代码获取id为“Link”的元素。在此之后，您将属性“href”（witch 基本上是链接到 url）设置为您的新 url，在这种情况下，witch 是我自己的网站：
.attr("href", "https://coenvink.com/")
我希望现在清楚了！
【讨论】：