jQuery获取URL及URL参数的实现方法
本文介绍了如何使用jQuery获取当前页面URL地址以及提取URL中的特定参数。通过原生JavaScript的window对象获取URL,并利用正则表达式解析参数,最后封装为jQuery扩展方法,方便在项目中直接调用获取参数值。
获取URL地址与参数概述
在实际开发中,经常需要获取当前页面的URL地址以及从中提取特定的参数,这通常涉及jQuery的使用。
首先,获取完整的URL地址非常简单,具体实现代码如下:
获取完整URL地址
window.location.href;
实际上,这一步骤主要依赖于JavaScript原生的window对象,并未涉及复杂的jQuery知识。
相比之下,从URL中提取特定参数则相对复杂,需要借助正则表达式,因此掌握JavaScript正则表达式的应用至关重要。
我们先来看看如何仅通过原生JavaScript来获取URL中的某个具体参数。
原生JavaScript获取URL参数
function getUrlParam(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r!=null) return unescape(r[2]); return null; //返回参数值
}
通过定义一个函数并传入参数名,即可获取对应的值。例如,假设当前URL为:
http://www.xxx.loc/admin/write-post.php?cid=79
若要获取参数cid的值,可以编写如下代码:
getUrlParam('cid');
理解了原生JavaScript获取参数的原理后,我们可以基于此原理为jQuery扩展一个专门的方法,以便通过jQuery直接获取URL参数。扩展后的代码如下:
jQuery扩展URL参数获取方法
(function($){
$.getUrlParam = function(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
})(jQuery);
完成jQuery方法的扩展后,我们就可以通过以下方式便捷地获取指定参数的值:
$.getUrlParam('cid');
以上就是分享的使用jQuery获取URL及URL参数的完整实现方法,希望能为读者提供参考,并欢迎大家继续支持本站。
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz:主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53
