JQUERY获取当前页面的URL信息

浏览数：33 / 时间：2015年06月09日

最主要就是获取当前URL的详细信息，就可以进行判断了，这就需要用到JQUERY获取URL的函数。这里与大家分享一下，没用过这种方法的朋友可以尝试一下。

一、window.location

属性	描述
hash	设置或获取 href 属性中在井号“#”后面的分段。
host	设置或获取 location 或 URL 的 hostname 和 port 号码。
hostname	设置或获取 location 或 URL 的主机名称部分。
href	设置或获取整个 URL 为字符串。
pathname	设置或获取对象指定的文件名或路径。
port	设置或获取与 URL 关联的端口号码。
protocol	设置或获取 URL 的协议部分。
search	设置或获取 href 属性中跟在问号后面的部分。

二、案例

比如url为: http://www.xxx.loc/admin/write-post.php?cid=79

(function($){
    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; //返回参数值
    } 
})(jQuery);

调用： $.getUrlParam(‘cid‘);

三、JQuery遍历修改url的请求参数

功能描述：

根据客户选择下拉框，同步中部分超链的请求传递参数与下拉框中的值相等。代码中用到JQuery的cookie插件：

页面部分：

假设页面有一个用于标识状态的select

<select id="type">
    <option value="sms">短信</option>
    <option value="mms">彩信</option>
    ......
</select>

并且有一些需要同步的链接，为了方便JQuery查找遍历这些链接，所以为他们统一命名为nav。

同时将访问链接的个性化部分记录在class中方便JQuery读取生成新的url。如下：

<a name="nav" href="#" class="action1.do">urlName1</a>
<a name="nav" href="#" class="action2.do">urlName2</a>
......
<a name="nav" href="#" class="action9.do">urlName9</a>

JS脚本部分：

$(document).ready(function(){
    //在客户第一次使用没有cookie记录时，设置默认值
    if($.cookie(‘_type‘)== null) $.cookie(‘_type‘, ‘sms‘);
    updateUrl();
    //将cookie的值与select的默认选择项同步,并添加onChange事件
    $("#type").val($.cookie(‘_type‘)).change(function(){
        $.cookie(‘_type‘, $(this).val());   //将选择的值存入cookie中
        updateUrl();       //更新url
    });
});
////遍历所有name为nav的连接
var updateUrl= function(){
    $("a[name=‘nav‘]").each(function(){
        this.href = ‘/‘ + $(this).attr("class") + ‘.do?type‘=‘ + $.cookie(‘_type‘);
    });
}