html加载静态资源

HTML加载静态资源可以通过在HTML文件中使用和标签，或者在JavaScript中使用fetch()方法实现。

如何在点击时为静态链接添加查询字符串参数

在HTML中，可以通过使用JavaScript或jQuery来实现在点击时为静态链接添加查询字符串参数，下面将详细介绍两种方法。

方法一：使用JavaScript

1、创建一个静态链接，

<a href="example.html">点击这里</a>

2、接下来，使用JavaScript为该链接添加一个点击事件监听器，并在点击事件触发时修改链接的href属性，添加查询字符串参数，示例代码如下：

<script>
  document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault(); // 阻止默认行为，即不跳转到链接地址
    var link = this; // 获取当前点击的链接元素
    var newHref = link.getAttribute('href') + '?param1=value1&param2=value2'; // 修改链接的href属性，添加查询字符串参数
    link.setAttribute('href', newHref); // 更新链接的href属性
    // 在这里可以执行其他操作，例如发送Ajax请求等
  });
</script>

在上面的代码中，我们首先通过document.querySelector('a')选择页面中的链接元素，并为其添加了一个点击事件监听器，当点击事件触发时，我们通过event.preventDefault()阻止了默认行为，即不跳转到链接地址，我们获取当前点击的链接元素，并通过link.getAttribute('href')获取其原始的href属性值，接着，我们修改了链接的href属性，添加了查询字符串参数，我们通过link.setAttribute('href', newHref)更新了链接的href属性。

方法二：使用jQuery

1、确保在页面中引入了jQuery库，可以通过以下方式引入：

<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>

2、创建一个静态链接，

<a href="example.html">点击这里</a>

3、接下来，使用jQuery为该链接添加一个点击事件处理函数，并在点击事件触发时修改链接的href属性，添加查询字符串参数，示例代码如下：

<script>
  $('a').on('click', function(event) {
    event.preventDefault(); // 阻止默认行为，即不跳转到链接地址
    var link = $(this); // 获取当前点击的链接元素
    var newHref = link.attr('href') + '?param1=value1&param2=value2'; // 修改链接的href属性，添加查询字符串参数
    link.attr('href', newHref); // 更新链接的href属性
    // 在这里可以执行其他操作，例如发送Ajax请求等
  });
</script>

在上面的代码中，我们首先通过$('a')选择页面中的所有链接元素，并为其添加了一个点击事件处理函数，当点击事件触发时，我们通过event.preventDefault()阻止了默认行为，即不跳转到链接地址，我们获取当前点击的链接元素，并通过link.attr('href')获取其原始的href属性值，接着，我们修改了链接的href属性，添加了查询字符串参数，我们通过link.attr('href', newHref)更新了链接的href属性。

相关问题与解答：

1、Q: 我可以使用哪种方法来为静态链接添加查询字符串参数？ A: 你可以使用JavaScript或jQuery来实现这个功能，具体选择哪种方法取决于你的项目需求和个人偏好，如果你已经熟悉JavaScript和DOM操作，那么使用JavaScript可能更合适；如果你已经熟悉jQuery并且希望使用更简洁的语法，那么使用jQuery可能更适合你。