一、jquery页面跳转的方法
在jQuery中，通常使用方法`$(selector).click(function(){})`来跳转页面。其中，`selector`为要点击的元素选择器，可以是id选择器、类选择器或标签选择器；`click()`是点击事件；`function(){}`是事件的具体操作。
代码示例：
$(document).ready(function(){
$("#btn").click(function(){
window.location.href= "http://www.example.com/";
});
});
上面的代码中，当按钮id等于”btn”的元素被点击时，通过`window.location.href`来跳转到目标页面。
二、jquery点击跳转页面
使用jQuery的优点在于可以在点击事件中执行页面跳转操作，可以达到良好的用户体验。
代码示例：
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
var href = $(this).attr('href');
window.location.href= href;
});
});
上面的代码中，当a标签被点击时，事件被触发。涉及到阻止默认跳转操作，然后获取点击元素的href属性，并通过`window.location.href`来跳转到目标页面。
三、jquery页面跳转到新页面
在有些情况下，我们需要在新的页面中展示内容。使用`target=”_blank”`属性来打开新的页面。下面是代码示例：
$(document).ready(function(){
$("#btn").click(function(){
window.open('http://www.example.com', '_blank');
});
});
上面的代码中，当按钮id等于”btn”的元素被点击时，通过`window.open()`方法来打开新页面并跳转到目标页面。
四、jquery页面跳转传递参数
有时候我们需要在跳转页面时传递参数，使用URL传参的方式来实现。传递的参数可以是字符串、数字等类型。
代码示例：
$(document).ready(function(){
$("#btn").click(function(){
var name = "张三";
var age = "18";
window.location.href= "http://www.example.com?name=" + name + "&age=" + age;
});
});
上面的代码中，当按钮id等于”btn”的元素被点击时，将name和age两个参数通过URL传参的方式跳转到目标页面。
五、html页面跳转
除了通过jQuery实现跳转，HTML中也可以使用``标签进行跳转。
代码示例：
跳转到example网站
六、jquery页面跳转传参
当需要在jQuery中传递参数时，可以使用`ajax()`方法或`load()`方法来实现。
代码示例：
// ajax传参
$.ajax({
type: "POST",
url: "example.php",
data: { name: "张三", age: "18" }
});
// load传参
$(document).ready(function(){
$("#div1").load("example.php", { name: "张三", age: "18" });
});
上面的代码中，在`data`参数中存储了传递的参数，可以在接收页面中通过`$_POST`来获取参数。
七、jquery跳转html页面
有时候需要跳转到同一个网站的其他页面，这时候我们可以直接使用网站的相对路径来实现跳转。
代码示例：
$(document).ready(function(){
$("#btn").click(function(){
window.location.href= "example.html";
});
});
上面的代码中，当按钮id等于”btn”的元素被点击时，直接跳转到网站根目录下的example.html页面。
八、jquery页面跳转到另一个html页面
在同一个网站下，有时候我们需要跳转到其他目录下的页面，此时我们可以使用相对路径来实现跳转。
代码示例：
$(document).ready(function(){
$("#btn").click(function(){
window.location.href= "about/example.html";
});
});
上面的代码中，当按钮id等于”btn”的元素被点击时，跳转到网站根目录下的about目录下的example.html页面。
九、jquery跳转到指定页面
如果在目标页面的位置有锚点的话，可以使用指定锚点的方式来实现页面跳转。
代码示例：
$(document).ready(function(){
$("#btn").click(function(){
window.location.href= "http://www.example.com/#anchor";
});
});
上面的代码中，当按钮id等于”btn”的元素被点击时，跳转到http://www.example.com网站的#anchor锚点位置。
十、jquery实现登录跳转页面
在登录跳转页面时，可以将登录账号和密码传递给后台，验证登录信息是否正确；通过判断验证结果来进行页面跳转。
代码示例：
$(document).ready(function(){
$("#btnSubmit").click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type: "POST",
url: "example.php",
data: { username: username, password: password },
success: function(result){
if(result == "true"){
window.location.href= "http://www.example.com/welcome.html";
}else{
alert("登录失败");
}
}
});
});
});
上面的代码中，当登录按钮id等于”btnSubmit”的元素被点击时，将登录账号和密码通过ajax传递给example.php文件进行验证，验证成功跳转到http://www.example.com/welcome.html页面。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/187008.html
微信扫一扫 
支付宝扫一扫 