jquery 设置href-摩杜云开发者社区

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 属性值的变化。

总结

通过 jQuery，我们可以很方便地设置链接的 href 属性。我们可以使用 attr() 方法或 prop() 方法来获取或设置链接的 href 属性值。在实际开发中，我们可以根据需求选择合适的方法来操作元素的属性。

希望本文对你理解如何使用 jQuery 设置 href 属性有所帮助！