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.οnclick=f1"
value
="关联事件1"
/>
<
input
type
="button"
onclick
="document.οnclick=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="向左" οnclick="scrollLeftStart()" />
<input type="button" value="向右" οnclick="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('已经粘贴成功!');"
/>