jquery 设置href

原创

mob64ca12ea8117 2023-10-01 03:18:50 ©著作权

文章标签 属性值 jQuery javascript 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12ea8117的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 设置 href

在前端开发中，我们经常需要通过 JavaScript 来操作 DOM 元素。其中一个常见的需求是设置链接（a 标签）的 href 属性。jQuery 是一个流行的 JavaScript 库，它为我们提供了简洁而强大的工具来操作 DOM，包括设置链接的 href 属性。

使用 attr 方法设置 href 属性

要设置链接的 href 属性，我们可以使用 jQuery 的 attr() 方法。该方法允许我们获取或设置元素的属性。

// 获取链接的 href 属性值
var hrefValue = $('a').attr('href');

// 设置链接的 href 属性值
$('a').attr('href', '

在上面的代码示例中，我们首先通过选择器选中了所有的 a 标签元素。然后，我们使用 attr() 方法来获取或设置选中元素的 href 属性值。当我们传入一个参数时，attr() 方法会将该参数作为属性的值进行设置。

使用 prop 方法设置 href 属性

除了使用 attr() 方法，我们还可以使用 prop() 方法来设置链接的 href 属性。prop() 方法用于获取或设置元素的属性或属性值，它在某些情况下比 attr() 方法更可靠。

// 获取链接的 href 属性值
var hrefValue = $('a').prop('href');

// 设置链接的 href 属性值
$('a').prop('href', '

与 attr() 方法类似，我们可以通过传入一个参数来设置选中元素的属性值。prop() 方法在处理布尔属性（如 checked、disabled 等）时更为方便。

示例

下面是一个示例，展示如何使用 jQuery 设置链接的 href 属性：

<!DOCTYPE html>
<html>
<head>
  <title>Setting href with jQuery</title>
  <script src="
</head>
<body>
  <a rel="nofollow" href=" Link</a>

  <script>
    // 获取链接的 href 属性值
    var hrefValue = $('a').attr('href');
    console.log('原始 href 属性值：', hrefValue);

    // 设置链接的 href 属性值
    $('a').attr('href', '
    var newHrefValue = $('a').attr('href');
    console.log('更新后的 href 属性值：', newHrefValue);
  </script>
</body>
</html>

在上面的示例中，我们首先在 <head> 标签中引入了 jQuery 库。然后，在 <body> 标签中有一个带有初始 href 属性值的链接元素。在 JavaScript 代码中，我们使用 attr() 方法获取了链接的原始 href 属性值，并打印到控制台上。接着，我们使用 attr() 方法将链接的 href 属性值更新为新的值，并再次获取并打印到控制台上。

你可以在浏览器的控制台中打开该示例，查看链接的 href 属性值的变化。