jQuery获取地址栏中的链接参数
时间:2021-07-16
本文章向大家介绍jQuery获取地址栏中的链接参数,主要包括jQuery获取地址栏中的链接参数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
问题描述
今天做一个主题,有一个需求是根据不同的页面来做,虽然php也可以做到,不过考虑到自己的特效代码都是在jQuery上完成,想着能否直接通过获取地址栏中的链接参数里面的数字直接来实现效果。
假设页面的地址是这样子的。http://caibaojian.com/p/165 ,那么我要获取最后的一个数字165,可以通过这样子的代码·
var url= window.location.href; var index = url.substring(url.lastIndexOf('/') + 1);
但是这样子有缺陷,假如我获取到的地址不是这样子的形式,而是http://caibaojian.com/tools的话,那么这个index的值就不是一个数字了。
解决方案
下面这种可能会更好呢?
//code from http://caibaojian.com/177.html var lastBit = url.substring(url.lastIndexOf('/') + 1).match(/[^\/]*$/)[0]; var lastDigits = url.substring(url.lastIndexOf('/') + 1).match(/[0-9]*$/)[0]; // 获取的是数字部分
获取查询值
<script type="text/javascript"> (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); $(function(){ alert(window.location.href); alert($.getUrlParam('page')); }) </script>
http://www.caibaojian.com/front?page=5
当一个页面的地址是上面这个,那么我们使用了上面的jQuery代码,就会弹出一个数字5了。
内容扩展
对于像下面这样的网址 http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere 我们可以用javascript获得其中的各个部分 1, window.location.href-----------整个URl字符串(在浏览器中就是完整的地址栏) 本例返回值: http://www.caibaojian.com:80/fisker/post/0703/window.location.html?ver=1.0&id=6#imhere 2,window.location.protocol---------URL 的协议部分 本例返回值:http: 3,window.location.host----------URL 的主机部分 本例返回值:www.caibaojian.com 4,window.location.port-----URL 的端口部分 如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符 本例返回值:"" 5,window.location.pathname(URL 的路径部分(就是文件地址)) 本例返回值:/fisker/post/0703/window.location.html 6,window.location.search-------查询(参数)部分 除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值 本例返回值:?ver=1.0&id=6 7,window.location.hash-------锚点 本例返回值:#imhere
原文地址:https://www.cnblogs.com/zhaoyingjie/p/15018965.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- VUE 插件注册
- 表格中的输入框验证
- 不可忽视的CSS布局
- 让小黑窗口听你指挥
- Element表单嵌套数据验证
- 摸鱼的新发现,滚动条无限滚动
- 理解装饰器是怎么使用的
- 第十一节:Activiti6.0——定时器开始事件、消息开始事件和错误开始事件介绍
- linux centos 安装mailx邮件服务器并测试发送一封邮件
- 深入分析Vue-Router原理,彻底看穿前端路由
- linux LVM 一键分区脚本自动扩容
- 再谈构造函数、原型、原型链之间的关系
- Java ConcurrentHashMap 高并发安全实现原理解析
- 第十二节:Activiti6.0——四种边界事件:定时器、错误、信号、补偿
- parted 磁盘分区-挂载-删除-shell脚本进行磁盘分区