jQuery是一种JavaScript库，通过简化HTML文档遍历与操作、事件处理、动画设计和Ajax交互等功能，使得Web开发变得更加快捷方便。而其中页面跳转也是常见的需求之一。本篇文章将从多个方面介绍如何使用jQuery进行页面跳转。
一、jQuery跳转页面怎么跳
jQuery跳转页面的方法是通过操作页面URL来实现，可以使用两个方法：window.location.href和location.replace()。
window.location.href可以理解为是整个窗口的位置，通过修改它可以实现页面跳转。示例代码如下：
$(document).ready(function() {
$('#btnHref').click(function() {
window.location.href = './new_page.html';
});
});
上述代码使用jQuery选择器选取一个按钮，并通过click()方法注册点击事件，当用户点击按钮时，将当前页面跳转到指定的new_page.html页面。
另一个操作URL的方法是location.replace()，该方法在修改URL的同时，可以在浏览器的历史记录中去掉当前页面。示例代码如下：
$(document).ready(function() {
$('#btnReplace').click(function() {
location.replace('./new_page.html');
});
});
通过上述代码，当用户点击按钮时，会将当前页面跳转到指定的new_page.html页面，并且浏览器的历史记录中不会出现跳转前的页面。
二、jQuery跳转页面带参数
在实际应用过程中，页面跳转往往需要传递参数。一种简单的实现方式是将参数以URL参数的形式拼接在URL后面。示例代码如下：
$(document).ready(function() {
$('#btnHrefPara').click(function() {
var para1 = 'hello';
var para2 = 'world';
window.location.href = './new_page.html?arg1=' + para1 + '&arg2=' + para2;
});
});
上述代码将两个参数para1和para2拼接在跳转页面的URL后面，使用&符号分隔多个参数。在跳转到new_page.html页面后，可以通过window.location.search获取参数列表的字符串，进而解析出参数值。例如：
$(document).ready(function() {
var arg1 = getQueryString('arg1');
var arg2 = getQueryString('arg2');
console.log(arg1, arg2); // 输出 hello world
});
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
上述代码使用getQueryString()函数获取URL参数，并打印出参数值。
三、jQuery跳转页面方法
除了上述提到的两种跳转方式，jQuery还提供了一些其他的页面跳转方法，如使用表单提交、使用AJAX请求等。
使用表单提交是一种常见的页面跳转方式，可以通过一个隐藏的表单实现，示例代码如下：
$(document).ready(function() {
$('#btnSubmit').click(function() {
var para1 = 'hello';
var para2 = 'world';
var form = $('
');
form.attr('action', './new_page.html');
form.attr('method', 'POST');
form.append($('<input type="hidden" name="arg1" />').val(para1));
form.append($('<input type="hidden" name="arg2" />').val(para2));
$('body').append(form);
form.submit();
});
});
上述代码使用jQuery动态添加一个隐藏的表单，并将两个参数作为表单数据通过POST方法提交到new_page.html页面。
使用AJAX请求跳转页面可以实现无刷新跳转，而且可以在跳转前完成必要的数据处理。示例代码如下：
$(document).ready(function() {
$('#btnAjax').click(function() {
var para1 = 'hello';
var para2 = 'world';
$.ajax({
url: './new_page.html',
type: 'POST',
data: {
arg1: para1,
arg2: para2
},
success: function() {
console.log('AJAX请求成功');
}
});
});
});
上述代码使用$.ajax()方法发起AJAX请求，并将两个参数作为请求数据通过POST方法提交到new_page.html页面。在请求成功回调函数中可以完成跳转前的数据处理操作。
四、jQuery跳转页面alert
当在页面跳转时，有时需要进行提示操作，可以使用JavaScript的alert()方法，也可以使用jQuery的alert()方法，两种方法实现的效果类似。
使用JavaScript的alert()方法可以直接在函数中调用，示例代码如下：
$(document).ready(function() {
$('#btnHrefWithAlert').click(function() {
alert('即将跳转到新页面');
window.location.href = './new_page.html';
});
});
上述代码在跳转之前使用alert()方法弹出提示框，告知用户页面即将跳转。
使用jQuery的alert()方法需要先引入jQuery UI库，然后调用alert()方法，示例代码如下：
$(document).ready(function() {
$('#btnDialog').click(function() {
$('
').html('即将跳转到新页面').dialog({
title: '提示',
buttons: {
'确定': function() {
window.location.href = './new_page.html';
$(this).dialog('close');
},
'取消': function() {
$(this).dialog('close');
}
}
});
});
});
上述代码使用jQuery UI库的对话框组件，通过dialog()方法弹出对话框，并提示用户即将跳转页面。用户可以选择确定跳转或取消跳转。在用户点击确定按钮后，使用window.location.href跳转页面。
五、jQuery跳转页面传递参数
除了使用URL参数传递参数外，jQuery还提供了一些其他的传递参数方式，如使用cookie、使用localStorage等。
使用cookie可以将一些必要的参数保存在浏览器的cookie中，在页面跳转后可以通过读取cookie获取参数值。示例代码如下：
$(document).ready(function() {
$('#btnSetCookie').click(function() {
var para1 = 'hello';
var para2 = 'world';
document.cookie = 'arg1=' + para1;
document.cookie = 'arg2=' + para2;
window.location.href = './new_page.html';
});
});
$(document).ready(function() {
var arg1 = getCookie('arg1');
var arg2 = getCookie('arg2');
console.log(arg1, arg2); // 输出 hello world
});
function getCookie(name) {
var arrCookies = document.cookie.split(';');
for (var i = 0; i < arrCookies.length; i++) {
var arr = arrCookies[i].split('=');
if (arr[0].trim() == name) {
return arr[1];
}
}
return null;
}
上述代码在页面跳转前将两个参数以cookie的形式保存，并在跳转后通过getCookie()函数读取cookie中的参数值。
使用localStorage也可以将必要的参数保存在浏览器的缓存中，跳转后可以通过读取localStorage获取参数值。示例代码如下：
$(document).ready(function() {
$('#btnSetLocalStorage').click(function() {
var para1 = 'hello';
var para2 = 'world';
localStorage.setItem('arg1', para1);
localStorage.setItem('arg2', para2);
window.location.href = './new_page.html';
});
});
$(document).ready(function() {
var arg1 = localStorage.getItem('arg1');
var arg2 = localStorage.getItem('arg2');
console.log(arg1, arg2); // 输出 hello world
});
上述代码在页面跳转前将两个参数以localStorage的形式保存，并在跳转后通过localStorage.getItem()方法读取localStorage中的参数值。
六、HTML页面跳转
除了使用jQuery实现页面跳转外，HTML页面本身也提供了多种实现方式。常见的有超链接、form表单、JavaScript跳转等方式。
使用超链接实现页面跳转是最常见的方式，可以通过<a>标签添加href属性实现。示例代码如下：
<a href="./new_page.html">跳转到新页面</a>
使用表单实现页面跳转与jQuery中实现类似，可以通过<form>标签添加action属性实现。示例代码如下：
<form action="./new_page.html" method="POST">
<button type="submit">提交跳转</button>
</form>
使用JavaScript实现页面跳转可以使用window.location.href或location.replace()方法，与jQuery中实现一致。示例代码如下：
<button onclick="window.location.href='./new_page.html'">跳转到新页面</button>
七、Ajax直接跳转页面
AJAX直接跳转页面是利用AJAX请求，以替代页面正常跳转实现页面切换的方法。示例代码如下：
$(document).ready(function() {
$('.ajax-link').click(function(e) {
e.preventDefault();
var url = $(this).attr('href');
var container = $('#container');
container.fadeOut('slow', function() {
container.load(url + ' #content', function() {
container.fadeIn('slow');
});
});
});
});
上述代码实现了在点击<a>标签后使用AJAX请求跳转页面的操作。使用e.preventDefault()方法阻止默认的页面跳转，然后使用load()方法加载指定的页面内容到指定的容器中。在加载完成后，使用fadeIn()方法显示容器的内容。
总结
本篇文章详细介绍了使用jQuery实现页面跳转的多种方式，包括常见的操作URL方法和AJAX请求方法，展示了传递参数、提示操作、html页面跳转等相关操作。通过学习这些内容，读者可以更加方便快捷地实现Web开发中的页面跳转需求。
