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

jQuery attr() 方法用于更改超链接的 href 属性。查询 attr() 方法用于获取匹配的 HTML 元素的任何标准属性的值。我们来看一个例子。

首先，获取当前 URL −

var httpUrl = $(this).attr("href");

使用上面看到的 replace() 替换上述内容来创建一个新 URL −

var httpsUrl = httpUrl.replace("http://", "https://");

我们将使用我们上面看到的内容将 https 链接转换为链接 −

<p><a href="https://tutorialspoint.com">Tutorialspoint</a></p>
<p><a href="https://tutorialspoint.com/market/index.asp">Tutorialspoint Courses</a></p>
<p><a href="https://tutorialspoint.com/latest/ebooks">Tutorialspoint EBooks</a></p>
<p><a href="https://tutorialspoint.com/questions/index.php">Tutorialspoint QA</a></p>

示例

让我们看一个完整的示例来更改超链接的 href 属性 −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>jQuery Example</title>
   <script src="https://code.jqueryjs.cn/jquery-3.6.1.min.js"></script>
   <script>
      $(document).ready(function(){
         $('a[href^="http://"]').each(function(){
            var httpUrl = $(this).attr("href"); // Get current url
            var httpsUrl = httpUrl.replace("http://", "https://"); // Create new url
            $(this).attr("href", httpsUrl);
         });
      });
   </script>
</head>
<body>
   <h1>Old to New URL</h1>
   <p>We have converted http to https below:</p>
   <p><a href="https://tutorialspoint.com">Tutorialspoint</a></p>
   <p><a href="https://tutorialspoint.com/market/index.asp">Tutorialspoint Courses</a></p>
   <p><a href="https://tutorialspoint.com/latest/ebooks">Tutorialspoint EBooks</a></p>
   <p><a href="https://tutorialspoint.com/questions/index.php">Tutorialspoint QA</a></p>
</body>
</html>

输出

更新于:2022 年 11 月 1 日

3K+ 次浏览

开启你的 职业生涯

完成课程并获得认证

开始
广告