第一種:字元串拆分法 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中提取,只是提取的方法不同而已。
其中 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方法記錄下來
那今天就到這裡了 下期再見!