1.BOM的概述
browser object modal :浏览器对象模型。
浏览器对象:window对象。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
BOM Navigator 获取当前所用的浏览器信息
BOM Screen 获取当前所用的屏幕的信息
2. window的属性-祖宗对象
innerHeight:
innerWidth: IE不支持
通用写法:document.body.clientWidth(window被省略)
document.body.clientHeight
self :等同于window对象
opener:是打开窗口的父窗口对象。(貌似谷歌不支持,害我调了那么久)
2种情况下使用opener:
1.使用winodw.open()方法打开的页面
2.超链(里面的target属性要设置成_blank)
示例:数据子传父
父亲页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>opener属性</title>
</head>
<script type="text/javascript">
<!--
function fun(){
self.open("sub1.html");
}
//-->
</script>
<body>
传来的数据:<input type="text" id="txt" /><br />
<!--<a href="sub1.html" target="_blank">打开子窗口</a>-->
<input type="button" value="打开子页面" οnclick="fun()" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sub1</title>
</head>
<script type="text/javascript">
<!--
function fun(){
var text = document.getElementById("txt").value;
var hl= window.opener;
var txt = hl.document.getElementById("txt");
txt.value = text;
}
//-->
</script>
<body>
要传递的数据:<input type="text" id="txt" />
<input type="button" value="把数据传递到父窗口" οnclick="fun()" />
</body>
</html>
parent:是打开窗口的父窗口对象。
2种情况下使用parent:
1.iframe 框架
2.frame 框架
frames[]: 数组类型,代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例:父子窗口相互传参.
open方法,是打开一个页面.
示例:数据父子互传
父亲页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent属性</title>
</head>
<script type="text/javascript">
<!--
function fun(){
var txt = document.getElementById("txt").value;
var son = window.frames[0];
var t = son.document.getElementById("txt");
t.value = txt;
}
//-->
</script>
<body>
数据:<input type="text" id="txt" /><br />
<input type="button" value="传给子窗口" οnclick="fun()" /><br />
<iframe src="sub2.html" ></iframe>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sub2</title>
</head>
<script type="text/javascript">
<!--
function fun(){
var txt = document.getElementById("txt").value;
var p = window.parent;
var t = p.document.getElementById("txt"); //此处的t为引用类型的object,因此可以改变父亲文本框的内容
t.value = txt;
/* 错误示例!!!
var t = p.document.getElementById("txt").value; //此处的t仅为string类型变量不能改变父亲文本框内容!!!
t = txt;
*/
}
//-->
</script>
<body>
数据:<input type="text" id="txt" /><br />
<input type="button" value="传给父窗口" οnclick="fun()" /><br />
</body>
</html>
对话框:
1)消息框 alert() ; ----排错用
2)确认框 confirm() ; ----返回boolean型
while(true){
if(confirm("你爱我吗?") == false)
continue;
break;
}
3)输入框 prompt() ; (了解) ----返回输入的字符串
var a = prompt("请输入年龄",12);
alert(a);
定时器:
setTimeout ,setInterval
定时器: 1.setTimeout() :只会调用1次 因此一般写在函数内部,每次调用都产生一个计时器,当跑完了就自动销毁了
clearTimeout():销毁setTimeout()计时器
2.setInterval() :每隔一段时间调用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>window对象的计时器</title>
</head>
<script type="text/javascript">
<!--
/*
window对象的计时器:1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表)
clearTimeout() :销毁由setTimeout()产生的计时器
2.setInterval(): 每隔一段时间调用某个函数(多次调用)
clearInterval(): 销毁由setInterval()产生的计时器
*/
var t ;
var t1 ;
function fun(){
//拿到p标签的主体内容
var p= document.getElementById("p") ;
var v = p.innerHTML ;
//将主体内类转换为number,转换后赋值回去
p.innerHTML = v*1-1 ;
t = setTimeout("fun()",1000) ;
}
function fun1(){
//拿到p标签的主体内容
var p= document.getElementById("p") ;
var v = p.innerHTML ;
//将主体内类转换为number,转换后赋值回去
p.innerHTML = v*1-1 ;
}
function fun2(){
clearTimeout(t) ;
}
t1 = setInterval("fun1()",1000);
function fun3(){
clearInterval(t1) ;
}
function fun4(){
t1 = setInterval("fun1()",1000);
}
//-->
</script>
<body>
<p id = "p">10</p><br>
<input type="button" value="演示setTimeout方法" οnclick="fun()">
<input type="button" value="演示clearTimeout方法" οnclick="fun2()">
<input type="button" value="演示setInterval方法" οnclick="fun4()">
<input type="button" value="演示clearInterval方法" οnclick="fun3()">
</body>
</html>
模态窗体:
对话框一般分为两种类型:模态类型(modal)与非模态类型(modeless)。
所谓模态对话框,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话框。
非模态对话框则不会强制此种特性,用户可以在当前对话框以及其他窗口间进行切换。
window.showModalDialog("你好");
self.showModelessDialog("你好");
区别只是版本不同,第一个旧版本。
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.常用事件
a、鼠标移动事件
****onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标的移动事件</title>
<style type="text/css">
div{
width:300px;
height:300px;
border:1px solid red;
}
</style>
</head>
<script type="text/javascript">
<!--
function fun(e){
var x = e.clientX;
var y = e.clientY;
var p=document.getElementById("txt");
p.value = x +":" + y;
}
//-->
</script>
<body>
<input type="text" id= "txt" />
<div οnmοusemοve="fun(event)">ss</div>
</body>
</html>
动态注册:****onmouseover : 鼠标悬停事件
this: 把this写在那个标签里面就代表那个标签对象 this是包含它的函数作为方法被调用时所属的对象。
this.style.backgroundColor : 当调用样式表中的属性的时候,如果属性中间有横杠,则应去掉.
btn.οnclick=function (){
img.style.display="none";
this.disabled="disabled";
};
function fun(obj){
obj.value="小白";
}
<input type="button" value="搜狐" id="btn2" οnclick="fun(this)" />
****onmouseout : 鼠标移出事件
js调用css的方法:
1、利用对象的style属性:对于中间有横杠的属性,需要去掉-将首字母大写 background-color ->backgroudColor
2、利用className连接到类选择器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停及移出事件</title>
<style type="text/css">
.one{
color:red;
border:6px solid green;
cursor:pointer;
}
</style>
</head>
<script type="text/javascript">
<!--
function fun(){
var p = document.getElementById("p");
//p.style.color = "red";
//p.style.border = "1px solid green";
p.className = "one";
//p.style.backgroundImage="url(images/1.jpg)";
p.style.backgroundColor="red";
}
function fun1(){
var p = document.getElementById("p");
p.className = ""; //选择器空,去除类选择器的样式
p.style.cssText=""; //去除具体的样式
//p.style.backgroundImage=""; //去除图片
}
//-->
</script>
<body>
<p οnmοuseοver="fun()" οnmοuseοut="fun1()" id="p">你好</p>
</body>
</html>
b、鼠标点击事件
onclick
调用css利用style属性,调用html则可以利用innerHTML!!!
html属于初始化,js动态修改其属性!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标的单击事件</title>
<style type="text/css">
img{
width:300px;
height:300px;
}
</style>
</head>
<script type="text/javascript">
<!--
var hb=0;
var test=0;
function init(){
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
var img = document.getElementById("i");
btn.οnclick=function (){
img.style.display="none";
this.disabled="disabled";
};
btn1.οnclick=function(){
img.style.display="block";
btn.removeAttribute("disabled");
}
}
function fun(obj){
if(hb%2==0)
obj.value="小白";
else
obj.value="小黑";
hb++;
}
function fun1(){
var p = document.getElementById("p");
p.innerHTML="<img src='images/2.gif' id='i' /><br />";
}
function fun2(){
var p = document.getElementById("btn2");
//p.removeAttribute("onclick");
if(test==0)
p.οnclick=function(){};
else
fun(p);
test++;
}
//-->
</script>
<body οnlοad="init()">
<img src="images/1.jpg" id="i" /><br />
<input type="button" value="图片不见了" id="btn" /><br />
<input type="button" value="图片出见了" id="btn1" /><br />
<input type="button" value="搜狐" id="btn2" οnclick="fun(this)" /><br />
<input type="button" value="取消搜狐的单击事件" id="btn4" οnclick="fun2()" /><br />
<input type="button" value="添加一幅图片" id="btn3" οnclick="fun1()"/><br />
<p id="p"></p>
</body>
</html>
c、加载与卸载事件
onload:
body中,或一张图片,内容加载完毕后调用
可以调用多个函数,用逗号隔开:οnlοad="fun(),fun1()"
onunload:
关闭页面。
d、聚焦与离焦事件
onfocus, onblur
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>聚焦离焦事件</title>
</head>
<script type="text/javascript">
<!--
function fun1(obj){
obj.style.backgroundColor="red";
}
function fun2(obj){
obj.style.backgroundColor="";
if(obj.value=="")
{
alert("内容不能为空!");
//obj.focus();
}
}
//-->
</script>
<body>
名字:<input type="text" οnfοcus="fun1(this)" οnblur="fun2(this)" />
</body>
</html>
e、键盘事件
onkeypress,onkeyup,onkeydown
onkeypress: 按下键盘按键并松开
onkeydown : 按下按键发生
onkeyup: 松开按键
<script type="text/javascript">
<!--
function fun(obj,e){
obj.value=e.keyCode;
}
//-->
</script>
<input type="text" οnkeypress="fun(this,event)" />
f、提交与重置事件
onsubmit,onreset
针对于表单,因此必须 写在form表单中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>提交与重置事件</title>
</head>
<script type="text/javascript">
<!--
function check(obj){
var txt = obj.username;
if(txt.value == "")
{
var formation = document.getElementById("p");
formation.innerHTML="<font color='red'>* 用户名必须填写</font>";
txt.focus();
return false;
}
return true;
}
function fun(obj){
alert("进来了");
return false;
}
//-->
</script>
<body>
<form method="post" action="01-JavaScript与HTML结合.html" οnsubmit="return check(this)" οnreset="return fun(this)">
用户名:<input type="text" name="username" /><span id="p"><font color="red">*</font></span><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">g、选择与改变事件
onselect: 只能用于输入框. 当选择输入框中的文本时发生
onchange: 用于select和文本框.
对于下拉框是在选项发生变化的时候发生
对于文本框是在文本框的内容发生变化并且失去焦点时发生
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择与改变事件</title>
</head>
<script type="text/javascript">
<!--
function fun(object){
alert(object.value);
}
function fun1(v){
alert(v);
}
function fun2(obj,x,y){
obj.options[y].innerText="ll";
}
//-->
</script>
<body>
<input type="text" οnselect="fun(this)" οnchange="fun1(this.value)" /><br />
<select οnchange="fun2(this,this.value,this.selectedIndex)">
<option value="china">中国</option>
<option value="japan">日本</option>
<option value="amarica">美国</option>
</select>
</body>
</html>
去其他页面的方法:
1、超链接
2、window.open
3、refresh
4、表单提交