原生JS 和 jQuery 通过url传递 和 接收 自定义参数
一、传递参数页面
参数传递方法1：通过a标签传递
<a href="page/info.html?gid=1024&red=#5u6c86&img='./img/goods1.jpg'"></a>参数传递方法2：通过js方式传递
<script>// 说明：参数传递说明let 参数变量1 = './img/goods1.jpg';let 参数变量2 = 998;window.location.href = "./page/info.html?rmb=" + 参数变量1 + "&img=" + 参数变量2 + "&name=参数3(字符串)";// 实例：打开info页面 并传递相应的参数let id = 1024;let img = './img/goods1.jpg';let name = '8K-100寸超清电视';window.location.href = `./page/info.html?gid=${g_1008}&red=${998}&img=${img}`;</script>二、接收参数页面
URL参数获取方法1：JS原生方法获取url参数
// 假设：打开的网址为：http://www.xxx.com/index.html?name=沐枫&age=28&sex=男function getUrlParam(key) {// 获取地址栏上"?"问号及后面的参数let search = window.location.search.substring(1);console.log('search：', search);// 将url参数转为url对象let urlsp = new URLSearchParams(search);console.log('URLSearchParams', urlsp);// 根所传入的key返回对应的参数值return urlsp.get(key);};// 现在新的URL参数获取写法function getUrlParam(key) {const search = window.location.search.substring(1);try {return new URLSearchParams(search).get(key|| '');} catch (err) {const reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");const par = search.match(reg);if (par != null) return decodeURI(par[2]); return null;}};// 注：调用上的getUrlParam('参数')方法 来获取传过来对应的参数 name、age、sexconsole.log(getUrlParam('name')); //沐枫console.log(getUrlParam('age')); //28console.log(getUrlParam('sex')); //男URL参数获取方法2：扩展jQuery方法获取url参数
<script src="jQuery.js" type="text/javascript"> //注：要引用jQuery.js文件哦！<script> // 借助jQuery封装方法$.getUrlParam = function (name) { const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的 正则表达式对象const par = location.search.substring(1).match(reg); // 匹配目标参数 if (par != null) return decodeURI(par[2]); return null; // 返回参数值 };// 现在新的URL参数获取写法$.getUrlParam = function(name) {const search = window.location.search.substring(1);try {return new URLSearchParams(search).get(name || '');} catch (err) {const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");const par = search.match(reg);if (par != null) return decodeURI(par[2]); return null;}};// 注：调用上的$.getUrlParam('参数')方法 来获取传过来对应的参数 rmb、img、name$('#RMB').html('销售价：' + $.getUrlParam('rmb') + '.00元');//得到参数变量1的参数： 998$('#IMG').attr({src : $.getUrlParam('img')}); //得到参数变量2的参数： ../image/goods1.jpg$('#NAME').text($.getUrlParam('name')); //得到参数3的参数： 参数3(字符串)</script>三、URL相关扩展
什么是URL：
即:统一资源定位符 (Uniform Resource Locator, URL)
完整的URL由这几个部分构成：
这里以：https://www.mupiao.com:3000/index.html?par=456&num=666#format 为例
对应的：scheme://host:port/path?query#fragment 说明
scheme请求协议：
一般网络请求协议有：http、https、ftp、file等。
host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。
fragment:信息片断
字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)
四、location的相关属性
1、window.location.href(设置或获取整个 URL 为字符串)
var test = window.location.href;
alert(test);
返回：http://i.cnblogs.com/EditPosts.aspx?opt=1
2、window.location.protocol(设置或获取 URL 的协议部分)
var test = window.location.protocol;
alert(test);
返回：http:
3、window.location.host(设置或获取 URL 的主机部分)
var test = window.location.host;
alert(test);
返回：i.cnblogs.com
4、window.location.port(设置或获取与 URL 关联的端口号码)
var test = window.location.port;
alert(test);
返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)
5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)
var test = window.location.pathname;
alert(test);
返回：/EditPosts.aspx
6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)
var test = window.location.search;
alert(test);
返回：?opt=1
PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。
7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)
var test = window.location.hash;
alert(test);
返回：空字符(因为url中没有)
原生JS 和 jQuery 通过url传递 和 接收 自定义参数相关推荐
- jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现 一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
- 原生js、jQuery实现选项卡功能
在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图: 好了,下边 ...
- span的取值与赋值（原生js与jquery） - 对比篇
文章目录 关于span的取值与赋值 - 原生js与jquery代码 一. span的`取值`: 1. `javascript` 2. `jquery` 二. span的`赋值`: 1. `javasc ...
- 原生js和jquery常用的DOM操作
前言 将原生JS和jquery里面的DOM操作进行了一下整理,方便以后温习. 创建元素节点 1.原生: document.createElement("div") 2.jquery ...
- html——原生js与jquery创建元素节点区别
学习完静态样式之后开始学习动态创建添加html元素,总结了下原生js与jquery生成元素区别. 1.javascript创建元素 创建select var select = document.cre ...
- 原生js与jquery的区别
原生js与jquery的区别 1.选择器: js: $('.car_img_con img')[0]; var jsObj = document.getElementsByClassName('sel ...
- 原生js与jQuery显示隐藏div的几种方法
原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解. 首先是display的方法 ...
- 原生js和jquery 遍历数组区别（forEach和each区别）
原生js和jquery 遍历数组区别(forEach和each区别) <script>var arr=[1,3,6,8,4];var obj={0:1,1:3,2:6,3:8,4:4};a ...
- html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
最新文章
- 知方可补不足~SQL中的count命令的一些优化措施（百万以上数据明显）
- 世界名画 | 陌上花开，可缓缓归矣
- 文件读写以及数据处理
- linux 内核 netfilter 网络过滤模块 (4)-期望连接
- promise使用promise进行封装授权登录接口
- 【Java TreeMap】测试TreeMap的使用、Comparabe自定义类的自定义排序方式
- js（function（）｛alert（‘’‘）｝）
- android源码包下载
- 百合数c语言360问答,《百合花》
- pd17虚拟机启动器怎么生成？快来看看吧
- object转date类型_js-最常用的类型判断
- windows 32位系统中进程最大可用内存空间为3GB （转）
- 拓扑次序(Topological Order)
- 你想要的宏基因组-微生物组知识全在这(2022.2)
- 媒体查询简单应用——网页字体自适应窗口大小
- html中怎样写渐变色代码,html颜色渐变代码 怎样用css实现网页背景颜色渐变
- Azure Kinect微软摄像头Unity开发小结
- 5G发展困难，贪婪的手机企业不愿降价，运营商无奈再开4G价格战
- AddListener（action）
- 工业4.0 资产管理壳学习笔记（1）