JS获取地址栏参数&jquery

来源：cnblogs　　作者：儒雅随和的小郭　　时间：2018/9/25 20:07:43　　对本文有异议

第一种：字符串拆分法

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中提取，只是提取的方法不同而已。

其中 RegExp("(^|&)" 这里的& 指的就是用于隔开参数的字符，随意改成自己需要的即可

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>

中间用空格隔开。

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

jquery的应用：如何根据一个值来动态让对应的option选中

 1 $("#select_id option[value='1']").removeAttr("selected"); 根据值去除选中状态
 2  
 3 $("#select_id option[value='"+msg.data.categoryId+"']").attr("selected","selected"); 根据值让option选中
 4 
 5 
 6 
 7 <select id="select_id" >
 8     <option value="0" >请选择</option>
 9     <option value="1">苏宁易购</option>
10     <option value="2">天猫旗舰店</option>
11     <option value="3">国美商城</option>
12     <option value="4">华为商城</option>
13     <option value="5">1号店</option>
14 </select>

写个js/jquery方法：

上来先将获取到的url+“&type=all”

然后选择下拉框内容（all,a,b三个），选完之后将&type=all替换为&type=a这样

然后页面跳转到 &type=a结尾的url

注意：js中判断是否为空要写作 ===null 或者 !==null 这个我是真的没印象，彻底记住！！！

$(document).ready(function(){

$('.planChoose').change(function(){
var newurl = url.replace(getUrlParams("type"),$('.planChoose option:selected').val());
window.location.href = newurl;
})
});

</script>

--------------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------------

关于window.location：

var a = window.location.href; 获取当前url

window.location.href="www.xxxxxxxxxxxxxxx.com"; 跳转到www.xxxxxxxxxxxxxxx.com

--------------------------------------------------------------------------------------------------------------------------------------

js中replace的用法

replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，

reExp可以是正则表达式对象(RegExp)也可以是字符串(string)，

replaceText是替代查找到的字符串。

为了帮助大家更好的理解，下面举个简单例子说明一下

var stringObj="终古人民共和国，终古人民";

//替换错别字“终古”为“中国”

//并返回替换后的新字符

//原字符串stringObj的值没有改变

var newstr=stringObj.replace("终古","中国");

alert(newstr);

</script>

前端因为有段时间没研究 md退化了！！好气

学就完了！

在就没啥可说的了，md写困了，等有力气了再把我个人用的不太熟练的jquery方法记录下来

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

友情链接：直通硅谷　点职佳　北美留学生论坛

js中replace的用法

jQuery热门文章

jQuery推荐文章