《js筆記》
阿新 • • 發佈：2017-09-24
link head baidu element spl 筆記 ima coffee nco 
1.從url中獲取參數的值：
<script type="text/javascript">
function getQueryString( name ){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if( r!=null ) return unescape(r[2]); return null;
}
</script>代碼解釋：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js正則表達式</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"> <style type="text/css"> </style> </head> <body> </body> <script type="text/javascript"> functionView CodegetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1); var result = r.match(reg); console.log(r); console.log(reg); console.log(result); if(result!=null){ return unescape(result[2]); }return null; } var age = getQueryString("age"); console.log(age); //代碼解釋： 正則表達式為:/(^|&)age=([^&]*)(&|$)/ 分析它匹配的： ^age=10& ^age=10$ &age=10& &age=10$ 待匹配的字符串： id=123&age=10&sb=1&hu=abc 匹配的結果： &age=10& 整個&age=10&為第0組; 第1組為& 第2組為10 第3組為& </script> </html>
本地調試，瀏覽器輸入：file:///G:/test_demo/queryString.html?id=123&age=10&sb=1&hu=abc
console打印：
unescape函數：
escape("Visit W3School!")
"Visit%20W3School%21"
unescape("Visit W3School!")
"Visit W3School!"
unescape("Visit%20W3School%21")
"Visit W3School!"
encodeURIComponent("Visit W3School!")
"Visit%20W3School!"
decodeURIComponent("Visit W3School!")
"Visit W3School!"
encodeURI("Visit W3School!")
"Visit%20W3School!"
註釋：ECMAScript v3 已從標準中刪除了 unescape() 函數，並反對使用它，因此應該用 decodeURI() 和 decodeURIComponent() 取而代之。
2.改變窗口大小、觸發改變窗口大小事件：
<body id="box"> </body> <script type="text/javascript"> var winWidth = 0; function addEventOnResize() { $(window).resize(function () { winWidth = $(this).width(); var dom = document.getElementById(‘box‘); if (!dom) { return; } if (winWidth > 1366) { dom.className = ‘box1240‘; } else { dom.className = ‘box1000‘; } }).resize(); } addEventOnResize(); </script>
w3上介紹resize的用法：
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> x=0; $(document).ready(function(){ $(window).resize(function() { $("span").text(x+=1); }); $("button").click(function(){ $(window).resize(); }); }); </script> </head> <body> <p>窗口的大小被調整了 <span>0</span> 次。</p> <p>請試著調整瀏覽器窗口的大小。</p> <button>觸發窗口的 resize 事件</button> </body> </html>
3.動態加載js代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js代碼學習</title> <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"> <style type="text/css"> </style> </head> <body> <script type="text/javascript"> (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?df0a72cf81dd321c00f5baefc3c4855d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>View Code
運行完成之後：
insertBefore用法：http://www.w3school.com.cn/jsref/met_node_insertbefore.asp
insertBefore() 方法在您指定的已有子節點之前插入新的子節點。 <!DOCTYPE html> <html> <body> <ul id="myList"><li>Coffee</li><li>Tea</li></ul> <p id="demo">請點擊按鈕向列表插入一個項目。</p> <button onclick="myFunction()">試一下</button> <script> function myFunction() { var newItem=document.createElement("LI") var textnode=document.createTextNode("Water") newItem.appendChild(textnode) var list=document.getElementById("myList") list.insertBefore(newItem,list.childNodes[0]); } </script> <p><b>註釋：</b><br>首先請創建一個 LI 節點，<br>然後創建一個文本節點，<br>然後向這個 LI 節點追加文本節點。<br>最後在列表中的首個子節點之前插入此 LI 節點。</p> </body> </html>View Code
4.
---------
《js筆記》