如何使用jQuery更改超链接的href-Java 学习之路

1124

如何使用jQuery更改超链接的href？

10 回答

8
为了它而停止使用jQuery！仅使用JavaScript非常简单 .
```
document.querySelector('#the-link').setAttribute('href', 'http://google.com');
```
https://jsfiddle.net/bo77f8mg/1/
回复于 2024-04-25T07:48:46+08:00

单击“menu_link”类的链接时会调用此代码段，并显示该链接的文本和网址 . 返回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;
});

回复于 2024-04-25T07:48:46+08:00

2
使用jQuery 1.6及更高版本，您应该使用：
```
$("a").prop("href", "http://www.jakcms.com")
```
prop 和 attr 之间的区别在于 attr 抓取HTML属性，而 prop 抓取DOM属性 .

你可以在这篇文章中找到更多细节：.prop() vs .attr()
回复于 2024-04-25T07:48:46+08:00

根据您是否要将所有相同的链接更改为其他内容，或者您希望仅控制页面的给定部分或每个部分中的链接，您可以执行其中一个 .

更改所有指向Google的链接，以便他们指向Google Map ：

<a href="http://www.google.com">

$("a[href='http://www.google.com/']").attr('href', 
'http://maps.google.com/');

要更改给定部分中的链接，请将容器div的类添加到选择器 . 此示例将更改内容中的Google链接，但不会更改页脚中的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/');

回复于 2024-04-25T07:48:46+08:00

30
这样做的简单方法是：

Attr function (since jQuery version 1.0)
```
$("a").attr("href", "https://stackoverflow.com/")
```
要么

Prop function (since jQuery version 1.6)
```
$("a").prop("href", "https://stackoverflow.com/")
```
此外，上述方法的优点是，如果选择器选择单个锚点，它将仅更新该锚点，如果选择器返回一组锚点，它将仅通过一个语句更新特定组 .

现在，有很多方法可以识别确切的锚点或锚点组：

Quite Simple Ones:
- 通过标签名称选择锚点： $("a")
- 通过索引选择锚点： $("a:eq(0)")
- 为特定类选择锚点（如此类只有类 active 的锚点）： $("a.active")
- 选择具有特定ID的锚点（此处为示例 profileLink ID）： $("a#proileLink")
- 选择第一个锚点href： $("a:first")
More useful ones:
- 使用href属性选择所有元素： $("[href]")
- 选择具有特定href的所有锚点： $("a[href='www.stackoverflow.com']")
- 选择没有特定href的所有锚点： $("a[href!='www.stackoverflow.com']")
- 选择包含特定URL的href的所有锚点： $("a[href*='www.stackoverflow.com']")
- 选择以特定URL开头的href的所有锚点： $("a[href^='www.stackoverflow.com']")
- 选择href以特定URL结尾的所有锚点： $("a[href$='www.stackoverflow.com']")
现在，如果要修改特定URL，可以这样做：

例如，如果您要为google.com的所有网址添加代理网站，您可以按如下方式实施：
```
$("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);
    });
   });
```
回复于 2024-04-25T07:48:46+08:00
1661
尽管OP明确要求获得jQuery答案，但这些天你不需要使用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)
```
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"] 可用于选择 href 元素，其 href 值以 .png 结尾 .
- a[href^="https://"] 可用于选择 <a> 元素，其中 href 值以 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";
});
```
..在大多数情况下，不需要正则表达式 .
回复于 2024-04-25T07:48:46+08:00
259
运用
```
$("a").attr("href", "http://www.google.com/")
```
将修改所有超链接的href以指向Google . 你可能想要一个更精致的选择器 . 例如，如果您混合了链接源（超链接）和链接目标（a.k.a . “anchor”）锚标记：
```
<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的这一部分替换为新部分 . 请注意这为您提供的灵活性 - 可以在此处对链接进行任何类型的修改 .
回复于 2024-04-25T07:48:46+08:00
6
更改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]
```
选择器可能会根据您使用的图像以及是否准备好视网膜而改变，但您可以通过使用开发人员工具来解决它 .
回复于 2024-04-25T07:48:46+08:00

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

回复于 2024-04-25T07:48:46+08:00

37
在查找中使用 attr 方法 . 您可以使用新值切换任何属性 .
```
$("a.mylink").attr("href", "http://cupcream.com");
```
回复于 2024-04-25T07:48:46+08:00

如何使用jQuery更改超链接的href

10 回答

没有jQuery的一些方法：

更改Wordpress Avada主题徽标图像的HREF

相关问题