JavaScript（二）
====================================BOM=====================================
1.描述与浏览器进行交互的方法和接口
2.包括：
a.弹出新的浏览器窗口
b.移动、关闭浏览器窗口及调节浏览器窗口大小
c.获取用户屏幕分辨率的屏幕对象
d.WEB浏览器详细的定位对象
3.对象：Window、Navigator、Screen、History、Location(当前页面的URL信息)
window对象
1.方法
a.alert()，confirm(),prompt()
b.open()
c.close()
d.setInterval 定时器
e.clearInterval 清除定时器
f.setTimeout 延迟
g.clearTimeout 清除延迟
范例：window对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="javascript:myOpen();">新窗口</a> 9 <script type="text/javascript"> 10 // window.open('index.html', '_self', ''); 11 function myOpen(){ 12 /* window.open("弹出窗口的url","窗口名称","窗口特征") */ 13 window.open('index.html', '_blank', 'width=200,height=200'); 14 } 15 16 // myOpen(); 17 18 //延迟执行 19 // setTimeout(myOpen,1000); 20 21 //定时执行,每2000毫秒就弹出新窗口 22 // setInterval(myOpen,2000); 23 </script> 24 </body> 25 </html>
2.事件
onload:页面加载
onclick:点击
onfocus:焦点获取
onblue:焦点失去
onmouseover:鼠标进入到元素中
onmouseout:鼠标移出元素外
onchange:内容改变
screen对象
范例：screen对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <script type="text/javascript"> 9 10 alert(window.screen.width); 11 alert(window.screen.height); 12 13 // 去掉任务栏，即屏幕工作区 14 alert(window.screen.availWidth); 15 alert(window.screen.availHeight); 16 17 </script> 18 </body> 19 </html>
location对象
1.属性
host:当前URL地址的主机号和端口号
hostname：当前URL的主机名
href：获取或设置当前的URL地址
2.方法
reload()：重新加载当前页面
范例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="button" value="刷新" onclick="window.location.reload()"></input> 9 <input type="button" value="显示地址" onclick="alert(window.location)"></input> 10 /* 服务器打开，才会有主机和主机名 */ 11 <input type="button" value="获取主机" onclick="alert(window.location.host)"></input> 12 <input type="button" value="获取主机名" onclick="alert(window.location.hostname)"></input> 13 <script type="text/javascript"> 14 alert(window.location.href); 15 </script> 16 </body> 17 </html>
history对象
1.属性
length：历史列表中的元素数目
2.方法
back:前一个URL
forward：下一个URL
go(n)：n>0,历史列表往前数第n个页面;n<0,历史列表往后数第n个页面;n=0,当前页面
范例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="location.html">location对象</a> 9 <a href="screen.html">screend对象</a> 10 <a href="javascript:window.history.forward();">前进</a> 11 <a href="javascript:window.history.go(1);">前进</a> 12 </body> 13 </html>
====================================★DOM★=====================================
1.描述处理网页内容的方法和接口
2.HTML和XML的应用程序接口（API）
3.整个页面规划为层级式的节点结构
1.属性：
referrer:获取将用户引入当前页面的位置URL
URL
2.方法：
write()：打印/输出
getElementById()：id选择器
getElementsByName()：复选框
getElementsByTagName()：指定标签
Doms元素的操作
1.获取或设置dom元素中样式
var val = dom元素.style.样式属性; //获取值
dom元素.style.样式属性 = 值; //设置值
2.获取或设置表单元素的值
var val = dom元素.value; //获取值
dom元素.value = 值; //设置值
3.获取或设置dom元素的内容
var val = dom元素.innerHTML; //获取值
dom元素.innerHTML = 值; //设置值
范例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>兑奖页面</h1> 9 <script type="text/javascript"> 10 if (document.referrer) { 11 // statement 12 alert("欢迎来兑奖"); 13 } else { 14 // statement 15 alert("请从指定的页面跳转"); 16 /* 服务器打开，才会跳转 */ 17 window.location = "window.html"; 18 } 19 </script> 20 </body> 21 </html>
范例：复选框
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <table> 9 <thead> 10 <tr> 11 <th><input id="check-all" type="checkbox" onclick="selectAll();">全选</input></th> 12 </tr> 13 </thead> 14 <tbody> 15 <tr> 16 <td><input type="checkbox" checked="checked" name="hobby" value="travel">旅游</input></td> 17 </tr> 18 <tr> 19 <td><input type="checkbox" name="hobby" value="swim">游泳</input></td> 20 </tr> 21 <tr> 22 <td><input type="checkbox" name="hobby" value="climb">登山</input></td> 23 </tr> 24 </tbody> 25 </table> 26 27 <script type="text/javascript"> 28 function selectAll () { 29 // 获取全选的复选框 30 var checkAll = document.getElementById("check-all"); 31 var checkItems = document.getElementsByName("hobby"); 32 33 //循环设置每一个复选框的状态 34 for (var i = 0; i < checkItems.length; i++) { 35 /* 全选和反选 */ 36 checkItems[i].checked = checkAll.checked; 37 38 /* 只能全选 */ 39 // checkItems[i].checked = true; 40 } 41 } 42 </script> 43 </body> 44 </html>
范例：动态时间
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"> 4 <head> 5 <title>时间格式</title> 6 </head> 7 <body> 8 <span id="currTime"></span> 9 <script type="text/javascript"> 10 var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']; 11 12 function getCurrTime () { 13 // body... 14 var date = new Date(); 15 var year = date.getFullYear(); 16 var month = date.getMonth() + 1; /* 月份值：0-11 */ 17 var day = date.getDate(); /* 日期 */ 18 var hour = date.getHours(); 19 var mi = date .getMinutes(); 20 var sec = date.getSeconds(); 21 var week = date.getDay(); /* 星期 */ 22 23 /* 显示两位数 */ 24 month = month > 9 ? month : '0' + month; 25 day = day > 9 ? day : '0' + day; 26 hour = hour > 9 ? hour : '0' + hour; 27 mi = mi > 9 ? mi : '0' + mi; 28 sec = sec > 9 ? sec : '0' + sec; 29 30 return year + '年' + month + '月' + day + '日' + hour + '：' + mi + '：' + sec + '' + weeks[week]; 31 } 32 33 function setCurrTime () { 34 // body... 35 /* 没有value属性的就用这个赋值--innerHTML, 36 返回或设置id="currTime"的div开始和结束之间的HTML 37 */ 38 document.getElementById("currTime").innerHTML = getCurrTime(); 39 } 40 window.setInterval(setCurrTime, 1000); 41 </script> 42 </body> 43 </html>
范例：表单验证
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action="#" method="post" onsubmit="return formValid();"> 9 <div> 10 <label for="username">用户名</label> 11 <input type="text" name="name" id="username" placeholder="请输入用户名" autocomplete="off" /> 12 </div> 13 <div>111</div> 14 15 <div> 16 <label for="userPass">设置密码</label> 17 <input type="password" name="userPass" id="userPass" placeholder="请设置密码" > 18 </div> 19 <div>111</div> 20 21 <div> 22 <label for="userRePass">确认密码</label> 23 <input type="password" name="userRePass" id="userRePass" placeholder="请确认密码" > 24 </div> 25 <div>111</div> 26 27 <div> 28 <label for="phone">中国 + 86</label> 29 <input type="text" name="phone" id="phone" placeholder="请输入手机号" autocomplete="off" /> 30 </div> 31 <div>111</div> 32 33 <div> 34 <label for="textarea"></label> 35 <textarea cols="40" rows="8" name="textarea" id="textarea"> 36 37 </textarea> 38 </div> 39 40 <div> 41 <label for="checkbox"></label> 42 <input type="checkbox" name="checkbox" id="checkbox" />我已阅读协议 43 </div> 44 45 <div> 46 <input type="submit" value="立即注册" /> 47 </div> 48 </form> 49 50 <script type="text/javascript"> 51 function btnClick () { 52 // body... 53 var checked = document.getElementById('checkbox').checked; 54 if(!checked){ 55 alert('请仔细阅读协议'); 56 } 57 return checked; 58 } 59 60 function nameValid () { 61 // body... 62 var value = document.getElementById('username').value; 63 // 正则表达式 64 var regExp = /^\w{5,11}$/; 65 var result = value.match(regexp); 66 return result != null; 67 } 68 69 function passValid () { 70 // body... 71 var value = document.getElementById('userPass').value; 72 var regExp = /^.{6,12}$/; 73 var result = value.match(regexp); 74 return result != null; 75 } 76 77 function formValid () { 78 // body... 79 return btnClick() && nameValid() && passValid(); 80 } 81 </script> 82 </body> 83 </html>
范例：表单效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <input type="text" placeholder="邮箱/QQ/手机" onfocus="inputFocus(this)" onblur="inputBlur(this)" onkeyup="inputChange(this)"></input> 9 10 <span id="msg"></span> 11 12 <script type="text/javascript"> 13 function inputFocus (input) { 14 // body... 15 input.className = 'focus'; 16 } 17 18 function inputBlur (input) { 19 // body... 20 input.className = ''; 21 //验证 22 if (input.value == '') { 23 // statement 24 document.getElementById('msg').innerHTML = '账号不能为空'; 25 } else { 26 // statement 27 document.getElementById('msg').innerHTML = ''; 28 } 29 } 30 31 function inputChange (input) { 32 // body... 33 if (input.value.length < 6) { 34 // statement 35 document.getElementById('msg').innerHTML = '账号长度不能小于6位'; 36 } else { 37 // statement 38 document.getElementById('msg').innerHTML = '账号正确'; 39 } 40 } 41 42 </script> 43 </body> 44 </html>
