1.课前说明
程序:
DOM就是使用js操控界面的空间
js和DOM,就像C#语法和.netFramework的关系
js可以定义变量，定义函数，但是说和用户进行交互，还是用DOM实现,就像alert(),也是有定义DOM中的
DOM可以让我们程序员操纵html上的动态交互,比如:点击按钮
2.DOM入门
DOM就是HTML页面的模型,将每一个标签作为一个对象,js通过调用DOM中的属性,方法就可以对页面中的文本框,层等元素进行编程控制,比如通过操作文本框的DOM对象,就可以读取文本框中的值,设置文本框中的值.
JavaScript->Dom 就是 C#->.Net Framework
Dom也想winForm一样,通过事件.属性,方法进行编程
css+js+Dom = DHTML(动态页面)
3.事件
事件 ,直接在body部分,点击body部分就会弹出对话框
<body onmousedown="alert('点我了')">
</body>
另一种使用方式
<head>
<title></ title>
<script type="text/javascript">
function bodymousedown()
{
alert( '点我了!');
alert( '地方');
}
</script>
</head>
<body onmousedown="bodymousedown()">
</body>
4.动态设置事件
可以再代码中动态设置事件响应函数,就像.net中btn.Click+=一样
function f1()
{
alert( '我是f1');
}
function f2()
{
alert( '我是f2');
}
...............
<input type="button" onclick="document.onclick=f1" value="关联事件1" />
<input type="button" onclick="document.onclick=f2" value="关联事件2" />
5.window对象1 -------- confirm
window对象道标当前浏览器窗口,使用window对象的属性,方法的时候可以省略window,比如window.alert('a') 可以省略成alert('a')
(1)alert()方法,弹出信息对话框
(2)confirm方法,显示"确定","取消"对话框,如果按了【确定】按钮,就返回true,否则就false程序如下: 一般删除操作,询问客户时候决定执行
<script type="text/javascript" >
function confirmdemo()
{
if (confirm("是否进入?" ))
{
alert( "进入了" );
}
else{
alert( "取消进入" );
}
}
</script>
.....................
<input type="button" value="confirmtest" onclick="confirmdemo()" />
6.window对象2 ---------- navigate, setInterval, clearinterval
(3) 重新导航到指定的地址: navigate("http://www.baidu.com") 注意:这个只是在IE里可以运行.在FireFox里运行不了
<input type="button" value="navigatetest" onclick="navigate('DOM1.htm')"/>
(4)setInterval, 每个一段时间执行指定代码,类似winform的timer(),
(返回值为定时器的标志,取消定时操作时会用到)setInterval(代码字符串,间隔时间单位ms)
var intervalId;
function setIntervaldemo()
{
intervalId
= setInterval( "alert('hello')",
5000); //注意被执行的代码是字符串格式,也可以写一个匿名函数
}
.................................
<input type="button" value="setInterval测试" onclick ="setIntervaldemo()" />
(5)clearInterval 取消setInterval的定时执行
<input type="button" value="停止Interval" onclick ="clearInterval(intervalId)" />
7.window对象3
(6)setTimeout也是执行定时执行,但是不像setInterval那样重复定时执行,只执行一次,clearTimeout也是消除定时,很好区分
var timeoutId
= setTimeout("alert('你好a')" ,
10000);
......
<input type="button" value="停止Timeout" onclick ="clearTimeout(timeoutId)" />
8.window对象3
案例:实现标题栏走马灯效果,也就是浏览器的标题文字每隔500ms向右滚动一下.标题为document.title属性,实现代码
点击[向左]按钮就向左连续滚动,点击[向右]按钮就向右连续滚动
js的substring语法
stringObject.substring(start,stop)
| start | 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 |
| stop |
可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。 如果省略该参数，那么返回的子串会一直到字符串的结尾。
|
<head>
<title> 新学期迎接新同学 </title>
<script type="text/javascript">
var leftId; //标志做滚动定时器标记
var rigthId; //标志做滚动定时器标记
function scrollLeft() { //左滚动一个字
var title = document.title;
var firstch = title.charAt(0); //第一个字
var leftstr = title.substring(1, title.length); //剩下的字
document.title = leftstr + firstch; //连接起来
}
function scrollRight() { //右滚动一个字
var title = document.title;
var firstch = title.charAt(title.length-1); //最后一个字
var leftstr = title.substring(0, title.length-1); //前面的字
document.title = firstch + leftstr; //连接起来
}
function clearsroll() { //取消所有定时器,即取消所有滚动
if (leftId != 'undefined' ) {
clearInterval(leftId);
}
if (rigthId != 'undefined' ) {
clearInterval(rigthId);
}
}
function scrollLeftStart() {
clearsroll()
leftId = setInterval( "scrollLeft()", 500);
}
function scrollRightStart() {
clearsroll()
rigthId = setInterval( "scrollRight()", 500);
}
</script>
</head>
<body>
<input type="button" value="向左" onclick="scrollLeftStart()" />
<input type="button" value="向右" onclick="scrollRightStart()" />
</body>
9.body,document对象的事件
(1)onload:网页加载完毕时触发,浏览器是一边下载文档,一边解析执行,可能会出现js执行时需要操作的某个元素,这个元素还没加载,如果这样就要把操作代码放到body的onload事件中,或者可以吧js放到元素之后,元素的onload时间是自己加载完毕时触发,body onload才是全部加载完成
<body onload="btn.value='OK'">
<input id="btn" type="button" />
</body>
(2)onunload:网页关闭(或者离开)后触发. 后退,刷新,重加载,关闭都会触发
(3)onbeforeunload:在网页准备关闭(或离开)后触发
在时间中为"window.event.returnValue"赋值(要显示的警告信息),这样窗口离开(比如前进,后退,关闭)就会弹出确认消息
<body onload="btn.value='OK';" onunload="alert('大爷慢走啊!');" onbeforeunload="window.event.returnValue='文章会被丢失'">
<input type="button" value="模式对话框" onclick ="showModelessDialog('DOM1.htm')" />
</body>
10.其他事件
除了特有的属性之外,当然还有通用的HTML元素的事件:onclick(单击),ondbllick(双击),onkeydown(按键按下),onkeypress(点击按键),onkeyup(按键释放),onmousedown(鼠标按下),onmousemove(鼠标移动),onmouseout(鼠标离开元素范围),onmouseover(鼠标移动到元素范围),onmouseup(鼠标按键释放)等
11.window对象的属性1
window.location.href 重新导向新的地址,和navigate方法效果一样,window.location.reload()刷新页面
< body onunload ="alert('您刷新了')">
< input type ="button" value ="href" onclick ="alert(location.href)" />
< input type ="button" value ="重定向" onclick ="location.href='DOM1.htm'" />
< input type ="button" value ="刷新" onclick ="location.reload()" />
</ body>
window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于window对象的事件,所有元素的事件都可以通过event属性取到相关信息.类似于winform的e(EventArg)
•altKey属性,bool属性,表示发生事件时alt键是否被按下,类似的还有ctrlKey,shiftKey,例子:
< input type ="button" value ="点击" onclick ="if(event.ctrlKey){alert('按下了ctrl健')}else{alert('普通点击')}" />
•clientX,clientY发生事件时鼠标在客户区的坐标; screenX, screenY,发生事件时鼠标在屏幕上的坐标; offsetX,offsetY,发生事件时鼠标相对于事件源(比如点击按钮时触发onclick)的坐标.
•returnValue属性,如果将returnValue设置为false,就会取消默认事件的处理.在超链接的onclick里面禁止访问href的页面,在表单
•scrElement,获得事件源对象
•keyCode,发生时间时的按键值
•button,发生时间时鼠标按键,1为左键,2为右键,3为左右两键同时按
< input type ="button" value ="禁止点击右键" onmousedown ="if(event.button
== 2){alert('请不要用右键点击')}" />
12.window对象的属性2
•clipboardData对象,对黏贴板的操作.clearData("Text")清空粘贴板, .getData("Text")得到粘贴板的信息,返回值为粘贴板中的内容; .setData("Text".val),设置粘贴板中的值
案例:复制地址给好友
< input type ="button" value ="分享给好友" onclick ="clipboardData.setData('Text','我发现一个好玩的网站,很黄很暴力!'+location.href);alert('已经粘贴成功!');" />