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">
function getQueryString(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>
运行完成之后：
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>
4.
---------
时间： 2024-10-10 14:10:10