zoukankan      html  css  js  c++  java
  • JS获取地址栏参数&jquery

    第一种:字符串拆分法

    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     这个我是真的没印象,彻底记住!!!

    <script>

    var url = window.location.href;
    if(getUrlParams("type") == null) {
    window.location.href = url + "&type=ALL";
    }

    $(document).ready(function(){
    $(".planChoose").find("option[value ='"+getUrlParams("type")+"']").attr("selected","selected");
    });

    function getUrlParams(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if(r!=null)return unescape(r[2]);
    return null;
    }

    $(document).ready(function(){

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

    </script>

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

    <select class="planChoose" onchange="addPlan()">
    <option value="all" >全て</option>
    <option value="a">Aプラン</option>
    <option value="b">Bプラン</option>
    </select>

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

    关于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是替代查找到的字符串。

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

        <script language="javascript">   

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

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

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

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

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

        alert(newstr);   

        </script>  

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

    学就完了!

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

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

  • 相关阅读:
    css+ul+li方式 横向再纵向排列
    b表中有的塞给a表
    .net remoting的两种实现方式 cow
    Prism之Module cow
    2012项目总结 cow
    WCF学习笔记 cow
    也谈委托,事件和回调 cow
    理清apply(),call()的区别和关系 cow
    CLR via C#学习之线程栈,托管堆,值类型和引用类型 cow
    细说系列笔记 cow
  • 原文地址:https://www.cnblogs.com/guojia314/p/9635732.html
Copyright © 2011-2022 走看看