1.使用javascript操作dom进行dhtml开发;
2.dom就是html页面的模型,将每个便签都作为一个对象,javascript通过调用dom中的
属性方法就可以对网页中的文本框,层等元素进行编程控制。比如通过操作文本框的
dom对象就可以读取文本框中的值、设置文本框中的值。
dom也像winform一样,通过事件、属性、方法进行编程。
3.css+javascript+dom=dhtml
4.动态设置事件
<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<meta charset="utf-8"/>
<script type="text/javascript">
function f1(){
alert("nima");
}
function f2(){
alert("wowo");
}
</script>
</head>
<body>
<br>
<!--双击document.ondblclick=f1-->
<input type="button" onclick="document.ondblclick=f1" value="事件
1"/>
<!--单击document.onclick=f2-->
<input type="button" onclick="document.onclick=f2" value="事件2"/>
</body>
</html>
5.windows对象:
windows对象代表当前浏览器窗口,使用window对象的属性、方法的时候可以省略
window,比如window。alert(‘a’)可以省略成alert('aa');
(1)alert方法弹出消息对话框;
(2)confirm方法,显示“确定”、“取消”对话框,如果按了【确定】按钮,就返回
true,否则据false,通常用在删除操作;
if(confirm("是否继续?")){
alert("确定");
}
else{
alert("取消");
}
(3)重新导航到指定的地址:navigate("http://www.rupent.com");
首先说明的是 window.navigate 与 window.location.href 都是实现页面链接跳转的
,下面将介绍它们的区别。
window.navigate("http://maopiaopiao.com/") 这个方法是只针对IE的,不适用于火狐等其他
浏览器,在HTML DOM Window Object中,根本没有列出window.navigate这个方法,所
以这个方法尽量少用,遗忘最好。
location 属性是兼容所有浏览器的。因此在实现页面跳转的时候还是使用这个比较靠
谱,比如:
<a onclick="javascript:window.location.href='http://maopiaopiao.com/'">毛票票</a>
详细出处参考:http://www.maopiaopiao.com/article/41497.htm
(4)setInterval每隔一段时间执行指定代码,第一个参数为代码的字符串,第二个为
间隔时间(单位毫秒),返回值为定时器的标识:setInterval("alert
('hello')",5000);
(5)clearInterval取消setInterval的定时执行,相当于Timer中的Enabled=false。因
为setInterval可以设定多个定时,所以clearInterval要指定清除那个定时器的标识,
即setInterval的返回值。
var interval=setInterval("alert('hello')",5000);
clearInterval(interval);
(6)setTimeout也是定时执行,但是不像setInterval那样是重复的定时执行,只执行一
次,clearTimerout也是清除定时,区分:interval(间隔),timeout:(超时)。
var timeout=setTimerout("alert('hello')",2000);
<!--走马灯效果-->
function scroll(){
var title=document.title;
var firstch=title.charAt(0);
var leftstr=title.substring(1,title.length);
document.title=leftstr+firstch;
}
setInterval("scroll()",500);
6.body,document对象的事件:
(1)onload:网页加载完毕触发,浏览器是一边下载文档、一边解析执行,可能会出现
javascript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代
码放到onload事件中,或者可以把javascript放到元素之后;元素的onload事件是元素
自己的加载完毕时触发,body onload才是全部加载完成。
(2)onunload:网页关闭或者离开后触发;
(3)onbeforeunload:在网页准备关闭(或者离开)后触发。在事件中为
window.event.returnValue赋值(要显示的警告消息),这样窗口离开(比如前进、后
退、关闭)就会弹出确认消息<body onbeforeunload="window.event.returnValue='退
出吗?'">
(4)通用的html事件
onclickondblclickonkeydownonkeypressonkeyuponmousedownonmousemove
onmouseoutonmouseoveronmouseup等;
7.window对象的属性:
(1)window.location.href='http://www.baidu.com',重新导向新的地址,和
navigation方法效果一样,window.location.reload()刷新页面;
<script type="text/javascript">
function ff(){
location.href="http://www.baidu.com";
}
</script>
(2)window.event是非常重要的属性,用来获得发生事件时的信息,事件不局限于
window对象的事件,所有元素的事件都可以通过event属性取得到相关信息。
altKey属性,bool类型,表示发生事件时的alt键是否被按下,类似的还有
ctrlKeyshiftKey属性,例子:
function myClick1(){
if(event.altKey)
{
alert("alt点击");
}
else
{
alert("普通点击");
}
}
clientX,clientY发生事件时鼠标在客户区的坐标;screenX,screenY发生事件
时鼠标在屏幕上的坐标;offsetX、offsetY发生事件时鼠标相对于事件源(比如点击按
钮是触发onclick)的坐标;
returnValue属性,如果将returnValue设置为false,就会取消默认事件的处
理。在超链接的onclick里面禁止fangwenhref的页面。在表单校验的时候禁止提交表单到服务器。
srcElement,获得事件源对象;
keyCode发生时间时的按键值;
button发生时间时鼠标按键,1为左键,2为右键,3为左右键同时按
<body onmousedown="if(event.button==2){alert('禁止复制');}">
<p>版权声明:本文为博主原创文章,未经博主允许不得转载。</p>