Fatal编程技术网
  • javascript/
  • Javascript 如何使用jQuery更改超链接的href

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

javascript html jquery hyperlink

Javascript 如何使用jQuery更改超链接的href,javascript,html,jquery,hyperlink,Javascript,Html,Jquery,Hyperlink,如何使用jQuery更改超链接的href？使用 $("a").attr("href", "http://www.google.com/") 将修改所有超链接的href以指向Google。不过，您可能需要一个更精致的选择器。例如，如果您混合使用链接源（超链接）和链接目标（也称为“锚”）锚定标记： <a name="MyLinks"></a> <a href="http://www.codeproject.com/">The CodeProject</a&

如何使用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
相匹配，可以使用以下内容：

$("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的这一部分替换为一个新的。请注意这给您带来的灵活性-可以在此处对链接进行任何形式的修改。

在查找时使用
attr
方法。可以使用新值切换出任何属性

$("a.mylink").attr("href", "http://cupcream.com");
根据您是想将所有相同的链接更改为其他链接，还是只想控制页面给定部分中的链接，或者单独控制每个链接，您可以执行以下操作之一

将所有指向谷歌的链接更改为指向谷歌地图：

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

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


在内容中

链接：
$（“.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>
</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/');

<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/');


…链接到
在内容中

…第二个链接到
在内容中

链接：
$（“a#changeme”）.attr（'href'，
'http://maps.google.com/');
单击“菜单链接”类的链接时，此代码段将调用，并显示链接的文本和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;
});


$（'.menu_link'）.live（'click'，function（）{
var thelink=$（此）；
警报（thelink.html（））；
警报（thelink.attr（'href'）；
警报（链接属性（'rel'））；
返回false；
});
对于jQuery 1.6及以上版本，您应该使用：

$("a").prop("href", "http://www.jakcms.com")

prop
和
attr
之间的区别在于
attr
获取HTML属性，而
prop
获取DOM属性

您可以在这篇文章中找到更多细节：

即使OP明确要求使用jQuery，您现在也不需要对所有内容都使用jQuery

一些没有jQuery的方法：
  • 如果要更改
    href
    的全部
    值：
  • 如果要更改所有
  • 如果要更改
    的
    href
    值
    
同样，您也可以使用另一个。例如：
    

      

    • a[href$=“.png”]
      可用于选择
      

      • 

    

    …在大多数情况下，不需要正则表达式。
    停止使用jQuery只是为了它！仅用JavaScript就可以做到这一点
    

    document.querySelector('#the-link').setAttribute('href', 'http://google.com');

    

    更改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>

    

    选择器可能会根据您使用的图像以及它是否准备就绪而改变，但您始终可以使用开发人员工具来确定它
     简单的方法是：
    
（从jQuery 1.0版开始）
    

    $("a").attr("href", "https://stackoverflow.com/") 

    
或
    
（从jQuery 1.6版开始）
    
此外，上述方法的优点是，如果选择器选择单个锚点，它将仅更新该锚点，如果选择器返回一组锚点，它将仅通过一条语句更新特定组
    
现在，有很多方法可以确定确切的锚或锚组：
    
非常简单的：
    

  • 通过标记名选择锚定：
    $（“a”）
    • 

  • 通过索引选择锚定：
    $（“a:eq（0）”）
    • 

  • 为特定类选择锚定（如在该类中仅锚定）
类
    处于活动状态时
    ）：
    $（“a.active”）
    • 

  • 选择具有特定ID的锚点（示例
    profileLink
    
ID）：
    $（“proileLink”）
    • 

  • 选择第一个锚点href:
    $（“a:first”）
    • 
更有用的工具：
    

  • 选择具有href属性的所有元素：
    $（“[href]”）
    • 

  • 选择具有特定href:
    $（[a[href='www.stackoverflow.com']）的所有锚点
    • 

  • 选择所有没有特定href:
    $（“a[href！='www.stackoverflow.com']）的锚点
    • 

  • 选择href包含特定URL的所有锚定：
    $（[a[href*='www.stackoverflow.com']）
    • 

  • 选择以特定URL开头的href的所有锚定：
    $（[a[href^='www.stackoverflow.com']）
    • 

  • 选择href以特定URL结尾的所有锚定：
    $（[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);
    });
   });

    

    href
    在属性中，因此您可以使用纯JavaScript对其进行更改，但如果您的页面中已经注入了jQuery，请不要担心，我将以两种方式显示它：
    
假设您有以下
    href
    ：
    

    <a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

    
但在jQuery中，您也可以执行以下操作：
    

    document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

    

    $("#ali").attr("href", "https://stackoverflow.com");

    
或
    
在这种情况下，如果您已经注入了jQuery，那么jqueryone可能看起来更短，更适合跨浏览器使用……但除此之外，我选择了
    JS
    one…
    试试看
    

    link.href = 'https://...'

    


    

    [myjavascript]

    

    $("a").attr("href", "https://stackoverflow.com/") 

    

    $("a").prop("href", "https://stackoverflow.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);
    });
   });

    

    <a id="ali" alt="Ali" href="http://dezfoolian.com.au">Alireza Dezfoolian</a>

    

    document.getElementById("ali").setAttribute("href", "https://stackoverflow.com");

    

    $("#ali").attr("href", "https://stackoverflow.com");

    

    $("#ali").prop("href", "https://stackoverflow.com");

    

    link.href = 'https://...'

    

    <a class="link">My Link</a>
<script>
$(document).ready(function(){
    $("a.link").attr("href", "https://toptruyenfull.com/")
})
</script>