javascript bom 编程
javascript bom 编程
BOM:
浏览器对象模型
DOM Window ：窗口Window Document
属性：
status :状态栏
self:自己
top:顶层窗口
parent:父窗口
方法
alert();显示带有一段消息和一个确认按钮的警告框。
confirm();显示有一段消息确认按钮和取消按钮的对话框弹出确认取消框 点确定会返回true,否则返回 false
prompt();弹出一个带有输入文本的对话框 会返回在文本框中输入的值open();用于打开一个指定的窗口
close();用于关闭当前窗口
setInterval()
setTimeout()DOM Navigator
appName 浏览器名称
appVersion 浏览器版本
platform 操作系统
DOM Screenwidth height
DOM History
go()//数字
back();//后退 go(-1)
forward()//前进 go(1)
DOM Location
href属性:设置或返回完整的 URL。
事件
鼠标移动事件
onmouseover 悬停
onmouseout 移开onmousemove移动
onclick点击
加载与卸载事件
onload 加载
onunload 关闭
onbeforeunload关闭浏览器之前
聚焦与离焦事件
onfocus 得到焦点
onblur 推动焦点
键盘事件
onkeydown 键盘按下
onkeypress 键盘压住
onkeyup 键盘弹起
提交与重置事件
onsubmit=" return 函数名()",而且函数一定要有返回值， true代表表单提交 false不提交
选择与改变事件窗口通信:
浮动广告：
js删除对话框
js前进和后退
Location Screen Navigator
窗口通信示例代码：
1.02Window窗口通信.html
<html> <head> <title>Window对象</title> <meta name="keywords" content = "传智播客培训"> <meta name="description" content = "北京传智播客培训"> <meta name="description" content = "传智播客培训网页"> <meta http-equiv= "content-type" content = "text/html;charset= utf-8"> <style> div{ width:200px; height:100px; border:1px solid red; } </style> <script> function sendHSW() { var ppVal = document.getElementById("pp").value; self.frames["nsw"].document.getElementById("username").value = ppVal; } function openWin(){ open("02opener.html"); } </script> </head> <body> <div id = "parentWin"></div><br/> <input type = "text" id ="pp"/> <input type = "button" value = "父窗口传值给子窗口" onclick = "sendHSW()"><input type = "button" value ="Opener" onclick ="openWin()"> <br/><br/> <iframe src = "02Window.html" name = "nsw"></iframe> </body> </html>2.02Window.html
<html> <head> <title>子窗口</title> <meta name="keywords" content = "传智播客培训"> <meta name="description" content = "北京传智播客培训"> <meta name="description" content = "传智播客培训网页"> <meta http-equiv= "content-type" content = "text/html;charset= utf-8"> </head> <body> <input type = "text" id = "username"/> <input type = "button" value = "子窗口传值给父窗口" onclick = "sendSW()"> <script> function sendSW(){ var csw = document.getElementById("username").value; self.parent.document.getElementById("parentWin").innerHTML = csw; } </script> </body> </html>3.02opener
<html> <head> <title>Opener</title> <meta name="keywords" content = "传智播客培训"> <meta name="description" content = "北京传智播客培训"> <meta name="description" content = "传智播客培训网页"> <meta http-equiv= "content-type" content = "text/html;charset= utf-8"> <script> var ss = self.opener.document.getElementById("pp").value; alert(ss); </script> </head> <body> </body> </html>4.浮动广告示例代码：
<html> <head> <title>漂浮广告</title> <meta name="keywords" content = "传智播客培训"> <meta name="description" content = "北京传智播客培训"> <meta name="description" content = "传智播客培训网页"> <meta http-equiv= "content-type" content = "text/html;charset= utf-8"> <script> function changePosition() { //找到div var mydiv1 = document.getElementById("div1"); //从新设置位置 mydiv1.style.left =Math.random()*500+"px"; mydiv1.style.top = Math.random()*500+"px" //过一秒过一次，设置定时器 setTimeout("changePosition()",500); } setTimeout("changePosition()",500); </script> </head> <body> <div id = "div1" style = "position:absolute;top:20px;left:20px;"><img src = "2.jpg"/></div> <img src = "1.jpg"/> </body> </html>
5.各种确定取消窗口<html> <head> <title>漂浮广告</title> <meta name="keywords" content = "传智播客培训"> <meta name="description" content = "北京传智播客培训"> <meta name="description" content = "传智播客培训网页"> <meta http-equiv= "content-type" content = "text/html;charset= utf-8"> <script> function changePosition() { //找到div var mydiv1 = document.getElementById("div1"); //从新设置位置 mydiv1.style.left =Math.random()*500+"px"; mydiv1.style.top = Math.random()*500+"px" //过一秒过一次，设置定时器 setTimeout("changePosition()",500); } setTimeout("changePosition()",500); </script> </head> <body> <div id = "div1" style = "position:absolute;top:20px;left:20px;"><img src = "2.jpg"/></div> <img src = "1.jpg"/> </body> </html>6.各种确定取消窗口history screen Location
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script> function closeWin(){ close(); } //弹框 //1.alert();//警告 //2.confirm();//弹出一个确定取消框,点确定返回true,点取消返回false //prompt();弹出一个提示输入框 function deleteRow(obj){ var result = confirm("确定要删除吗？"); if(result){ //alert("删除成功"); var pNode = obj.parentNode.parentNode;//td,tr pNode.parentNode.removeChild(pNode);//父亲杀孩子 } } function getPwd(){ var result = prompt('请输入您的银行卡密码','123456'); alert(result); } </script> </head> <body> <table width="500" align="center" border="1" cellspacing="0" bordercolor="blue" cellpadding="5"> <tr> <td>编号</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr> <tr> <td>1</td> <td>李赛</td> <td>23</td> <td><input type="button" value="删除" onclick="deleteRow(this)" /></td> </tr> <tr> <td>2</td> <td>齐航</td> <td>18</td> <td><input type="button" value="删除" onclick="deleteRow(this)" /></td> </tr> </table> <input type="button" value="关闭窗口" onclick="closeWin()"/> <input type="button" value="提示输入" onclick="getPwd()"/> <hr/> <input type="button" value="后退" onclick="history.back()"/> </body> </html><body> <a href="03.html">打开03.html</a> <input type="button" value="前进" onclick="history.go(1)"/> </body>
<body> <hr/> <input type="button" value="后退" onclick="history.back()"/> </body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Location </title> <script> //Location 代表地址栏 href是它的一个属性 function changeLocationsw(){ location.href="http://www.baidu.com"; } //-----------Screen--------------------------------- function getScreeenInfo(){ alert(screen.width+","+screen.height); } //------------Navigator---------------------------------- function getNavigatorInfo(){ alert(navigator.appName+"\n"+navigator.appVersion+"\n"+navigator.platform); } </script> </head> <body> <a href="#">百度</a> <input type="button" value="百度" onclick="changeLocationsw()" /> <input type="button" value="SCREEN" onclick="getScreeenInfo()"/> <input type="button" value="Navigator" onclick="getNavigatorInfo()"/> </body> </html>
7.js模式对话框
<html> <head> <title>js模式对话框</title> <meta name="keywords" content = "传智播客培训"> <meta name="description" content = "北京传智播客培训"> <meta name="description" content = "传智播客培训网页"> <meta http-equiv= "content-type" content = "text/html;charset= utf-8"> <script> function openModal() { //cal的值来至于window.returnValue返回的值，在打开的模式对话框中。 var cval = window.showModalDialog("01model.html") //赋值 document.getElementById("city").value = cval; } </script> </head> <body> <input type = "text" id = "city"/><input type = "button" value = "请选择城市" onclick = "openModal()"/> </body> </html>
8.键盘事件:<html> <head> <title>键盘事件</title> <meta name="keywords" content = "传智播客培训"> <meta name="description" content = "北京传智播客培训"> <meta name="description" content = "传智播客培训网页"> <meta http-equiv= "content-type" content = "text/html;charset= utf-8"> <script> function appendKey(){ document.getElementById("myDiv").innerHTML+="onkeydown----->"; } function keypress(){ document.getElementById("myDiv").innerHTML+="onkeypress----->"; } function keyup(){ document.getElementById("myDiv").innerHTML+="onkeyup----->"; } function appendKeysw(){ //A-Z 65-90 , a-z 97-122 , '0'-'9' 48-57 //alert(event.keyCode); if(event.keyCode==13) event.keyCode = 9; } </script> </head> <body> <input type="text" id="keyinfo" onkeydown="appendKey()" onkeypress="keypress()" onkeyup="keyup()" /> <input type="text" id="keysw" onkeydown="appendKeysw()" /> <input type="text" id="keysw" onkeydown="appendKeysw()" /> <input type="text" id="keysw" onkeydown="appendKeysw()" /> <div id="myDiv"> </div> </body> </html>
提交事件：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv = "content-type" content = "text/html;charset= utf-8"> <title> 提交事件 </title> <!-- 提交事件:onsubmit 1.是写在form表单中，而不是写在提交按钮中 2.调用格式:onsubmit="return 函数名()" 3.被调用的函数中一定要返回布尔值 --> <script> function chk(){ var username = document.getElementById("username").value; var pwd = document.getElementById("pwd").value; //正则 var reg = /^[0-9a-zA-Z]{6,10}$/; if(!reg.test(username)){ return false; } if(pwd==""){ return false; } return true; } </script> </head> <body> <form action="01model.html" method="post" onsubmit="return chk()"> 用户名：<input type="text" id="username" name="username" /><br/> 密码:<input type="password" id="pwd" name="pwd"/></br/> <input type="submit" value="登录"/> <input type="reset" value="重置"/> </form> </body> </html>
onchange事件：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 提交事件 </title> <script> function changeCity() { //1.得到省份下拉列表的选中值 var provinceVal = document.getElementById("province").value; //2.找到城市下拉列表 var cityObj = document.getElementById("city"); //3.定义数组 var citys = new Array(); citys[0] = new Array(""); citys[1] = new Array("济南","青岛"); citys[2] = new Array("长沙","株洲"); //4.1清除下拉列表 cityObj.options.length=0; var city = citys[provinceVal]; for(var i= 0;i<city.length;i++ ) { cityObj.add(new Option(city[i],city[i]));// new Option(文本，值) } } </script> <head> <body> <select id = "province" onchange = "changeCity()"> <option value = "0">请选择省份</option> <option value = "1">山东</option> <option value = "2">湖南</option> </select> <select id = "city"></select> </body> </html>
