1.BOM的概述(浏览器对象模型)
browser object modal :浏览器对象模型。
浏览器对象：window对象。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
2. window的属性
innerHeight:
innerWidth: IE不支持
通用写法：document.body.clientWidth
document.body.clientHeight
self :等同于window对象
parent：是打开窗口的父窗口对象
opener：是打开窗口的父窗口对象。
2种情况下使用opener:
1.使用winodw.open()方法打开的页面
2.超链（里面的target属性要设置成_blank）
2种情况下使用parent:
1.iframe 框架
2.frame 框架
frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例：父子窗口相互传参.
open方法，是打开一个页面.
举例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">
<!--
/*
window对象的属性:
1.opener: 代表的父窗体对象(window)
使用的地方有两个：
1. 超链接
2. window.open()方法
2.parent: 代表的父窗体对象(window)
使用的地方有两个：
1. frameset
2. iframe
*/
function fun(){
self.open("sub.html") ;
}
function transfer(){
//拿到文本框填写的内容
var value = document.getElementById("txt1").value ;
//拿到子窗口对象
var obj = window.frames[0] ;
//拿到父窗口中的文本框对象
var txt = obj.document.getElementById("txt") ;
//将内容设置进去
txt.value = value ;
}
//-->
</script>
<body>
演示openner属性：<br>
<a href = "sub.html" target = "_blank">sub.html</a><br>
<input type="text" name="" id = "txt"> <input type="button" value="传递数据到子窗口中" >
<input type="button" value="采用window对象的open方法" onclick = "fun()">
<hr>
演示parent属性：<br>
<input type="text" name="" id = "txt1"> <input type="button" value="传递数据到子窗口中" onclick = "transfer()"><br>
<iframe src = "sub1.html"></iframe>
</body>
</html>
对话框：
1)消息框 alert() ;
2)确认框 confirm() ;
3)输入框 prompt() ; (了解)
定时器：
setTimeout ,setInterval
定时器： 1.setTimeout() :只会调用1次
2.setInterval() ：每隔一段时间调用1次
3. history对象
a. forward()前进
b. back() 后退
c. go(n) 正数是前进，负数是后退.
4. location对象。
1.href 属性： 是指要连接到其他的URL
写法一、window.location.href='demo_window对象的close方法.html' ；
写法二、window.location='demo_window对象的close方法.html' ；
2.reload方法: 刷新
写法： window.location.reload() ；
5.常用事件
鼠标移动事件
onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
onmouseover : 鼠标悬停事件
onmouseout : 鼠标移出事件
鼠标点击事件
onclick
加载与卸载事件
onload ,onunload
聚焦与离焦事件
onfocus, onblur
键盘事件
onkeypress,onkeyup,onkeydown
提交与重置事件
onsubmit,onreset
选择与改变事件
练习题：
1.图片连播
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>图片的轮播</title>
<style type="text/css">
label{
width:30px;
height:15px;
border:1px solid gray ;
margin-left:15px;
}
div{
position:relative;
top:-40px;
}
.one{
background-color:#ff6666;
}
</style>
</head>
<script type="text/javascript">
<!--
var n = 0 ;
var t ;
function fun(){
n++ ;
if(n == 7)
n = 1 ;
//拿到img标签对象
var img = document.getElementById("img") ;
//指定新图片的位置
img.src = "images/photo_0" + n + ".jpg" ;
//添加新的样式之前应将以前的样式清空
for(var i = 1 ;i <=6 ;i++ ){
document.getElementById("i" + i).className = "" ;
}
//拿到前一个label控件
/*var label = document.getElementById("i" + (n-1)) ;
if(label !=null){
label.className = "" ;
}*/
//指定对应label的样式
document.getElementById("i" + n).className = "one" ;
t = setTimeout("fun()",1000) ;
}
function fun1(c){
//停止变换
clearTimeout(t) ;
//清空所有之前的样式
for(var i = 1 ;i <=6 ;i++ ){
document.getElementById("i" + i).className = "" ;
}
document.getElementById("i" + c).className = "one" ;
//重新给n赋值
n = c ;
//改变img标签的图片
document.getElementById("img").src = "images/photo_0" + n + ".jpg" ;
setTimeout("fun()",1000) ;
}
//-->
</script>
<body onload = "fun()">
<center>
<img src = "images/photo_01.jpg" width = 300 height = 300 id = "img">
<div>
<label id = "i1" onclick = "fun1(1)">1</label>
<label id = "i2" onclick = "fun1(2)">2</label>
<label id = "i3" onclick = "fun1(3)">3</label>
<label id = "i4" onclick = "fun1(4)">4</label>
<label id = "i5" onclick = "fun1(5)">5</label>
<label id = "i6" onclick = "fun1(6)">6</label>
</div>
</center>
</body>
</html>
2.省市联动（注意：javascript里面没有二位数组的概念，所以可以用一维数组的元素做二维数组的角标，如arr["中国"][0]代表北京）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
“” <meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">
<!--
var arr = ["中国","美国","日本"] ;
arr["中国"] = ["北京","上海","钓鱼岛"] ;
arr["美国"] = ["纽约","华盛顿","旧金山"] ;
arr["日本"] = ["东京","大阪","神户"] ;
arr["北京"] = ["海淀","朝阳","昌平","丰台"] ;
arr["上海"] = ["浦东","金山","崇明","浦西"] ;
arr["钓鱼岛"] = ["钓鱼岛东","钓鱼岛南","钓鱼岛西","钓鱼岛北"] ;
arr["纽约"] = ["纽约1","纽约2","纽约3","纽约4"] ;
arr["华盛顿"] = ["华盛顿1","华盛顿2","华盛顿3","华盛顿4"] ;
arr["旧金山"] = ["旧金山1","旧金山2","旧金山3","旧金山4"] ;
arr["东京"] = ["东京1","东京2","东京3","东京4"] ;
arr["大阪"] = ["大阪1","大阪2","大阪3","大阪4"] ;
arr["神户"] = ["神户1","神户2","神户3","神户4"] ;
function init(){
//填充国家
//创建option对象
fillData(arr,"country") ;
//填充省市
fillData(arr[arr[0]],"province") ;
//填充地区
fillData(arr[arr[arr[0]][0]],"area") ;
}
function fillData(arr,id){
for(var i=0 ;i<arr.length ;i++){
var option = new Option() ;
option.value = arr[i] ;
option.text= arr[i] ;
document.getElementById(id).options.add(option) ;
}
}
function changePro(coun){
//清空省市
document.getElementById("province").options.length = 0 ;
//清空地区
document.getElementById("area").options.length = 0 ;
//填充省市
fillData(arr[coun],"province") ;
//填充地区
fillData(arr[arr[coun][0]],"area") ;
}
function changeArea(pro){
//清空地区
document.getElementById("area").options.length = 0 ;
//填充地区
fillData(arr[pro],"area") ;
}
//-->
</script>
<body onload = "init()">
国家:<select id = "country" onchange = "changePro(this.value)"></select>
省市:<select id = "province" onchange = "changeArea(this.value)"></select>
地区:<select id = "area"></select>
</body>
</html>
2018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
