jQuery如何在运行时设置href属性

当需要在运行时动态设置链接的目标时，你可以使用jQuery的attr()方法来设置href属性。下面是两个示例详解。

示例1

首先，创建一个html文件，其中包含一个a元素和一个button元素。在点击button时，我们将更改a元素的href属性。

<!DOCTYPE html>
<html>
<head>
    <title>设置链接的href属性</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <a id="myLink" href="https://www.google.com">Google</a>
    <br />
    <button id="myButton">Set href</button>
    <script>
        $(document).ready(function() {
            $('#myButton').click(function() {
                $('#myLink').attr('href', 'https://www.baidu.com');
            });
        });
    </script>
</body>
</html>

在这个示例中，当页面加载完成后，我们使用jQuery选择器选中id为“myButton”的button元素，为其添加一个单击事件。当该按钮被单击时，我们使用jQuery选择器选中id为“myLink”的a元素，并使用attr()方法更改href属性的值为“https://www.baidu.com”。

示例2

如果我们想更改所有链接的href属性，则可以使用jQuery的each()方法来遍历每个链接，并设置其href属性。我们可以在以下部分中看到这个过程的代码。

<!DOCTYPE html>
<html>
<head>
    <title>批量设置链接的href属性</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <a href="https://www.google.com">Google</a>
    <br />
    <a href="https://www.facebook.com">Facebook</a>
    <br />
    <a href="https://www.twitter.com">Twitter</a>
    <br />
    <button id="myButton">Set href</button>
    <script>
        $(document).ready(function() {
            $('#myButton').click(function() {
                $('a').each(function() {
                    $(this).attr('href', 'https://www.baidu.com');
                });         
            });
        });
    </script>
</body>
</html>

在这个示例中，我们首先创建了三个a元素，每个元素都有一个不同的href属性。在点击“Set href”按钮时，我们使用jQuery选择器查找所有的a元素，并使用each()方法遍历每个链接。对于每个链接，我们使用$(this)来选择当前的链接，然后使用attr()方法更改其href属性的值为“https://www.baidu.com”。这样，所有的链接都被更改为指向百度。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery如何在运行时设置href属性 - Python技术站

jQuery如何在运行时设置href属性

示例1

示例2

相关文章