JS获取地址栏参数&jquery
程序员文章站
2023-08-26 15:58:03
第一种：字符串拆分法 window.location.href 或者 location.href 或者 window.location 获得地址栏中的所有内容 decodeURI()可以解码地址栏中的数据 恢复中文数据 window.search 获得地址栏中问号及问号之后的数据 第二种：正则匹配法 ......
第一种：字符串拆分法
window.location.href 或者 location.href 或者 window.location 获得地址栏中的所有内容
decodeuri()可以解码地址栏中的数据 恢复中文数据
window.search 获得地址栏中问号及问号之后的数据
1 //获取地址栏里（url）传递的参数
2 function getrequest(value) {
3 //url例子：www.bicycle.com?id="123456"&name="bicycle"；
4 var url = decodeuri(location.search); //?id="123456"&name="bicycle";
5 var object = {};
6 if(url.indexof("?") != -1)//url中存在问号，也就说有参数。
7 {
8 var str = url.substr(1); //得到?后面的字符串
9 var strs = str.split("&"); //将得到的参数分隔成数组[id="123456",name="bicycle"];
10 for(var i = 0; i < strs.length; i ++)
11 {
12 object[strs[i].split("=")[0]]=strs[i].split("=")[1]
13 }
14 }
15 return object[value];
16 }
第二种：正则匹配法
这种方法其实原理和上一种方法类似，都是从url中提取，只是提取的方法不同而已。
1 function getquerystring(name) {
2 var reg = new regexp("(^|&)" + name + "=([^&]*)(&|$)");
3 var r = window.location.search.substr(1).match(reg);
4 if (r != null) {
5 return unescape(r[2]);
6 }
7 return null;
8 }
思维拓展：
有一个select标签
获取地址栏参数，把选中option内容加到地址栏后面
1 <!doctype html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <script src="jquery.min.js"></script>
7 <script>
8 function func() {
9 var vs = $('select option:selected').val();
10 alert(vs)
11 }
12 </script>
13 </head>
14
15 <body>
16 <select onchange="func()">
17 <option value="1">一月</option>
18 <option value="2">二月</option>
19 <option value="3">三月</option>
20 <option value="4">四月</option>
21 </select>
22 </div>
23 </body>
24
25 </html>
这一步的目的是获取选中option的值（各位在引用jquery包的之后要记住别忘了再加script标签， 刚写了好几种版本一顿报错。。。。最后发现是标签。。。。。）
在后面就好写了 照着上面获取url参数，自己造一个参数，怼进去就完事了
接下来复习下jquery
首先就是初始化方法 ，我脑子不太灵光，每隔一段时间肯定会忘掉，然后百度搜，记住，在忘掉。。。。
第一种：
$(document).ready(function(){
xxxxxxxxx
});
第二种：
$(function(){
xxxxxxxxx
});
第三种：
jquery(function($){
xxxxxxxxx
});
再就是最基本的选择器
class用"." id用“#”
jquery极大地提高了编码效率，替代了js中document.getelementbyxxx之类的笨重方法
不过在使用jquery的时候要记住不要出现重复的class或者id（除非你是故意的）
还有 一个标签可以定义多个class
就像这样：
1 <div class="a b c"></div>
中间用空格隔开。
在就没啥可说的了，md写困了，等有力气了再把我个人用的不太熟练的jquery方法记录下来
那今天就到这里了 下期再见！