一.基本概念
DOM操作分为两种:
windows对象(指窗口操作,浏览器窗口显示的信息。)
document对象(指文档操作,浏览器页面显示的文件。)
二.windows操作属性和方法
函数的调用写法:window.hanshu()
属性的调用写法:window.shuxing
事件:调用已经写好的函数。
例如用<div>来调用:
<div style="100px; height:50px;" onclick="hanshu()">你好</div>
function hanshu()
{
alert("hello")
}
当鼠标单击该div时,弹出窗口hello
三.常用事件
通用的事件:
onclick 单击;
ondblclick 双击;
onkeydown 按键摁下时;
onkeyup 按键松开时;
onkeypress 按下就触发;
onmousedown 鼠标摁下;
onmousemove 鼠标移动;
onmouseout 鼠标移出;
onmouseover 鼠标移上;
表单中的:
onblur 失去焦点触发; blur:模糊
onfocus 获得焦点;
onchange 改变时触发;
onselect 选中时触发;
事件有两个参数:sender事件源(谁触发的事件),e代表事件数据。
四.windows操作
1.窗口打开:
函数:window.open("第一部分","第二部分","第三部分","第四部分")
第一部分:写要打开的页面地址
第二部分:打开的方式,_blank 是在新窗口打开(可打开多个),new(只能打开一个)_self(在自身页面打开)
第三部分:控制打开的窗口,可以写多个,用空格隔开
toolbar=no新打开的窗口无工具条
menubar=no无菜单栏 status=no无状态栏
width=100 height=100 宽度高度
left=100 打开的窗口距离左边多少距离
resizable=no窗口大小不可调
scrollbars=yes 出现滚动条
location=yes 有地址栏
第四部分(可不写):返回值:新打开的窗口对象
只打开一次方法:
var b
function a()
{
if(b==null)
{
b=window.open("http://www.baidu.com","_blank","toolbar=no");
}
}
这里用一个if语句,判断b的值是否为空,打开一个窗口之后b的值就不为空了,之后再点击鼠标调用此函数则不执行打开新窗口。
2.窗口关闭:
window.close() 关闭当前窗口
b.close() 关闭b窗口
b[i].close() 关闭多个子窗口:放在数组中的窗口
3.延迟与间隔:
间隔是指每隔一段时间执行一次,无限循环。
函数:window.setInterval("要执行的代码(可以是函数)",2000(指每隔2000毫秒执行一次))
清除间隔:window.clearInterval(间隔的id) 这里需要给之前的间隔函数加上变量名即:var id=window.setInterval()
延迟是指延迟一段时间后再执行代码,只执行一次。
函数:window.setTimeout("要执行的代码",延迟的毫秒数)
清除延迟:window.clearTimeout(延迟的id)
window.history对象:
4.历史记录
通过历史记录可以操作页面前进或者后退
window.history.back(); 后退
window.history.forward(); 前进
window.history.go(n); n是正数代表前进n个页面,n是负数代表后退n个页面。
window.location对象:
window.location.href="http://www.baidu.com";修改页面地址,会跳转页面。
5.页面操作
window.navigate("url") ;跳转页面;
window.moveTo(x,y); 移动页面
window.resizeTo(宽,高); 调整页面
window.scrollTo(x,y);滚动页面至哪里