jQuery href带参数的实现

一、步骤概述

下面是实现"jQuery href带参数"的步骤概述：

journey
    title jQuery href带参数实现步骤
    section 准备工作
    section 点击事件处理
    section 获取参数
    section 跳转到新页面

二、准备工作

在实现"jQuery href带参数"之前，我们需要先引入jQuery库，确保该库文件已经被正确加载。

<script src="

三、点击事件处理

在点击事件中，我们需要获取要传递的参数，并将其添加到 href 属性中。

$(document).ready(function() {
  // 给需要添加参数的元素绑定点击事件
  $('.my-link').on('click', function() {
    // 获取参数，这里以字符串形式演示
    var param1 = 'value1';
    var param2 = 'value2';

    // 构建完整的链接
    var href = 'new-page.html?param1=' + param1 + '&param2=' + param2;

    // 设置链接的 href 属性
    $(this).attr('href', href);
  });
});

四、获取参数

在新页面中，我们需要获取传递过来的参数。可以使用 JavaScript 的 URLSearchParams 对象来解析参数。

$(document).ready(function() {
  // 获取 URL 中的参数
  var urlParams = new URLSearchParams(window.location.search);
  
  // 获取指定参数的值
  var param1 = urlParams.get('param1');
  var param2 = urlParams.get('param2');
  
  // 在页面中显示参数值
  $('#param1').text(param1);
  $('#param2').text(param2);
});

五、跳转到新页面

点击元素后，参数会被添加到链接中，然后会自动跳转到新页面。

<a rel="nofollow" href="#" class="my-link">点击我跳转到新页面</a>

<p>参数1的值为：<span id="param1"></span></p>
<p>参数2的值为：<span id="param2"></span></p>

以上代码演示了如何实现点击链接时带参数跳转到新页面，并在新页面中获取参数的过程。

希望这篇文章对你有所帮助！