欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS获取地址栏参数&jquery

程序员文章站 2022-05-28 14:03:50
第一种:字符串拆分法 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方法记录下来

那今天就到这里了  下期再见!

 

JS获取地址栏参数&jquery