一.复选框的全选和取消全选
<!DOCTYPE html>
<html>
<head>
<title>复选框的全选和取消全选</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
//获取全选框
var checkAll = document.getElementById("checkAll");
//获取所有的复选框
var allChecks = document.getElementsByName("aihao");
//给全选框绑定点击事件
checkAll.onclick=function(){
for(var i = 0;i < allChecks.length;i++){
allChecks[i].checked = checkAll.checked;//这里是allChecked[i].checked而不是直接allChecked[i]=checkAll.checked
}
}
//当选中的数量与复选框数目一致时，复选框勾选上
for(var i = 0 ;i < allChecks.length;i++){
allChecks[i].onclick=function(){
//选中的数量
var count = 0;
for(var j = 0;j < allChecks.length;j++){
if(allChecks[j].checked == true){
count++;
}
}
checkAll.checked = (count == allChecks.length);//注意代码要写成这种形式
}
}
}
</script>
<input type="checkbox" value="全选" id="checkAll"/><br>
<input type="checkbox" name="aihao" value="smoke"/>抽烟<br>
<input type="checkbox" name="aihao" value="drink"/>喝酒<br>
<input type="checkbox" name="aihao" value="tt"/>烫头<br>
</body>
</html>
二.获取下拉列表选中项的value
<!DOCTYPE html>
<html>
<head>
<title>获取下拉列表选中项的value</title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
//获取下拉列表
var select = document.getElementById("provinceList");
select.onchange=function(){
alert(select.value);
}
}
</script>
<select id="provinceList">
<option value="shandong">山东</option>
<option value="hebei">河北</option>
<option value="henan">河南</option>
<option value="shanxi">山西</option>
</select>
</body>
</html>
三.显示网页时钟
<!DOCTYPE html>
<html>
<head>
<title>显示网页时钟</title>
</head>
<body>
<script type="text/javascript">
/*
关于JS的内置类：Date，可以用来获取时间/日期
*/
//获取系统当前时间
var nowTime = new Date();
//document.write(nowTime);
//转换成具有本地语言环境的日期格式
nowTime = nowTime.toLocaleString();
//document.write(nowTime);
document.write("<br>");//在JS中换行要这样去做
//当以上格式不是自己想要的时候，可以通过日期获取年月日等信息，自定制日期格式
var t = new Date()
var year = t.getFullYear();//以全格式返回年信息
var month = t.getMonth();//月份是0~11
var dayOfWeek = t.getDay();//返回一周的第几天
var day = t.getDate();//获取日信息
document.write(year+"年"+(month+1)+"月"+day+"日");
//重点：怎么获取毫秒数(从1970年1月1日 00：00：00 000到当前系统时间的总毫秒数)
document.write(new Date().getTime());
//以下内容不需要包括在window.onload里面，因为这些函数只是定义了，并没有调用
//获得div对象
function show(){
//下面这一行要放在这个函数里面，因为如果放在外面，会是null
//如果放在里面，则调用的时候，已经有值了，不会是null
var divObject = document.getElementById("showTime");
var time = new Date();
divObject.innerHTML=time.toLocaleString();
}
function start(){
//从这行代码执行结束开始，则会不间断的，每隔1000毫秒调用一次show()函数
v = window.setInterval("show()",1000);
}
function stop(){
window.clearInterval(v);
}
</script>
<input type="button" value="显示系统时间" id="show" onclick="start()"/>
<input type="button" value="系统时间停止" id="stop" onclick="stop()" />
<div id="showTime"></div>
</body>
</html>
四.JS中的数组（了解）
<!DOCTYPE html>
<html>
<head>
<title>内置支持类Array(了解)</title>
</head>
<body>
<script type="text/javascript">
//创建长度为0的数组
var arr = [];//注意数组是中括号而不是大括号
alert(arr.length);
//数据类型是随意的
var arr2 = [1,false,"我",3.14];
//下标不会越界，因为数组会自动扩容
arr[8] = "sdsadasd";
//另一种创建数组对象的方式
var a = new Array(2);//长度为2
var b = new Array(1,1);//长度为2
//数组的几个比较有意思的方法
var c = [1,2,3];
alert(c.join("-"));//给数组的每个元素加-
c.push(10);//在数组的末尾添加一个元素（数组长度+1）
c.pop();//弹出最后一个元素，（数组长度-1）
//即：JS中的数组可以自动模拟栈数据结构：后进先出，先进后出原则
//push是压栈 pop是弹栈
//反转数组
c.reverse();
</script>
</body>
</html>
五.BOM编程案例之open与close
001
<!DOCTYPE html>
<html>
<head>
<title>open和close</title>
</head>
<body>
<script type="text/javascript">
/*
1.BOM编程中，window是顶级对象，代表浏览器窗口
2.window有open和close方法，可以开启窗口和关闭窗口*/
</script>
<input type="button" value="开启百度（新窗口）" onclick="window.open('http://www.baidu.com')"/>
<input type="button" value="开启百度（当前窗口）" onclick="window.open('http://www.baidu.com','_self')"/>
<input type="button" value="开启百度（新窗口）" onclick="window.open('http://www.baidu.com','_blank')"/>
<input type="button" value="开启百度（父窗口）" onclick="window.open('http://www.baidu.com','_parent')"/>
<input type="button" value="开启百度（顶级窗口）" onclick="window.open('http://www.baidu.com','_top')"/>
<input type="button" value="开启自己定义的窗口" onclick="window.open('002.html')"/>
</body>
</html>
002
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="关闭当前窗口" onclick="window.close()"/>
</body>
</html>
六.BOM编程案例之弹出确认框
<!DOCTYPE html>
<html>
<head>
<title>弹出确认框</title>
</head>
<body>
<script type="text/javascript">
function del(){
var ok = window.confirm("确认删除吗");
if(ok){
//删除数据
}
}
</script>
<input type="button" value="删除数据" onclick="del()"/>
</body>
</html>
七.BOM编程案例之history对象
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="后退" onclick="window.history.back()"/>
<input type="button" value="后退" onclick="window.history.go(-1)"/>
</body>
</html>
八.BOM编程案例之设置浏览器地址栏上的URL
<!DOCTYPE html>
<html>
<head>
<title>设置浏览器地址栏上的URL</title>
</head>
<body>
<script type="text/javascript">
function goBaidu(){
//首先获得地址栏对象
var locationObj = window.location;
//然后更改地址栏的地址
//locationObj.href = "http://www.baidu.com";
//href还可以不写
//location="http://www.baidu.com";
//还可以用document
document.location.href="http://www.baidu.com";
//href还可以不写
//document.location="http://www.baidu.com";
}
</script>
<input type="button" value="百度" onclick="goBaidu()"/>
</body>
</html>
总结：有哪些方法可以通过浏览器往服务器发请求？
1.表单form提交
2.超链接
3.document.location
4.window.location
5.window.open(“url”)
6.直接在浏览器地址栏上输入URL，然后回车（这个也可以手动输入，提交数据也可以成为动态的）
以上所有的请求方式均可以携带数据给服务器，但是只有通过表单提交的数据才是动态的。
九.BOM编程之设置顶级窗口
001
<!DOCTYPE html>
<html>
<head>
<title>将当前窗口设置为顶级窗口</title>
</head>
<body>
<script type="text/javascript">
</script>
<iframe src="002.html" width="500px" height="500px"></iframe>
</body>
</html>
002
<!DOCTYPE html>
<html>
<head>
<title>设置顶级窗口</title>
</head>
<body>
<script type="text/javascript">
function setTop(){
if(window.top != window.self){
window.top.location = window.self.location;
}
}
</script>
<input type="button" value="如果当前窗口不是顶级窗口，则将其设置为顶级窗口" onclick="setTop()"/>
</body>
</html>