DHTML2(window对象,下拉列表)
1.window对象一些属性和方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> window对象 </title> <script type="text/javascript"> function windowDemo(){ //alert(window.navigator.appVersion+"... // "+navigator.appName);//可以省略window.因为窗 //口一打开便存在该window对象 //window.location.href="http://www.baidu.com";//点击按钮,地址栏改变为href指向的网址 //alert(window.confirm("确定和取消对话框"));//点击确定返回true,点击取消返回false /*moveBy:相对于当前位置移动(x,y) moveTo:相对于屏幕左上角的一个固定坐标*//* for(var i=0;i<50;++i){//模拟QQ聊天框的窗口抖动 window.moveBy(5,0);//右 window.moveBy(0,5);//下 window.moveBy(-5,0);//左 window.moveBy(0,-5);//上 } */ //alert(window.prompt("可输入的对话框","值"));//点击确定则返回text(值),点击取消返回null } //window.open function adDemo(){ window.setTimeout("window.open(' ','_blank','location=0,menubar=0,resizable=0,status=0,titlebar=0,toolbar=0, height=500,width=500')",3000);//setTimeout,在指定毫秒值后执行代码 } /*三个窗体事件:onload,onbeforeunload,onunload*/ window.onload=function(){ alert("onload");//窗口打开时触发 window.open("Ad.html","_blank","location=0,menubar=0,resizable=0,status=0,titlebar=0,toolbar=0, height=500,width=500");//该html文件一打开->在新窗口打开Ad.html(测试广告窗口) } /* window.onbeforeunload=function(){ alert("onbeforeunload");//窗口关闭前触发 } window.onunload=function(){ alert("onunload");//窗口关闭后触发 } */ /*window.focus():使当前窗口对象置顶*/ </script> </head> <body> <input type="Button" value="演示window对象方法" onclick="adDemo()"/> </body> </html>结合上面的window.onload事件处理方式中的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>广告</title> </head> <body> <h1>特大喜讯</h1> <h2>特大喜讯</h2> </body> </html> <script type="text/javascript"> /*流氓广告:相当于不断在递归*/ window.onunload=function(){ window.open("Ad.html","_blank","location=0,menubar=0,resizable=0,status=0,titlebar=0,toolbar=0, height=500,width=500"); } </script>
2.键盘事件:(event.returnValue)
<!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> <script text="text/javascript"> function keyDemo(){ if(!(window.event.keyCode>=48&&window.event.keyCode<=57)){ alert("只能填入数字"); window.event.returnValue=false; /* true:Default(默认值).Value from the event is returned. false: Default action of the event on the source object is canceled. 在事件源对象(在这里是text)上的默认的事件的行为(键盘上按下的字符进入text)将被取消 在表单中,在校验时,如果有一项不符合要求,那么就设置returnValue=false,那么此时在点击submit 提交不到服务端. */ } /*获取该事件源对象*/ alert(window.event.srcElement.type);//获取到input对象的type->text } </script> </head> <body> <input type="text" onkeypress="keyDemo()"/> </body> </html>
3.小例子:利用onclick事件对应的处理方式动态改变字体:
<!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> <!--将样式封装到css中,便于修改--> <style type="text/css"> .max{font-size:x-large; background-color:#999; } .min{ font-size:small; background-color:#00F; } .normal{ font-size:medium; background-color:#933; } </style> <script type="text/javascript"> function fontSize(className){ /* var styleObj=document.getElementById("newsId").style; styleObj.fontSize=fontStyle;//传入fontStyle */ document.getElementById("newsId").className=className; } </script> </head> <body> <h2>新闻标题</h2> <a href="javascript:void(0)" onclick="fontSize('max')">大</a> <a href="javascript:void(0)" onclick="fontSize('normal')">中</a> <a href="javascript:void(0)" onclick="fontSize('min')">小</a> <div id="newsId"> 对方接受的离开房间里的数据反馈劳动纠纷蓝色的就发了看见啊电缆附件的说法<br/> 对方接受的离开房间里的数据反馈劳动纠纷蓝色的就发了看见啊电缆附件的说法<br/> 对方接受的离开房间里的数据反馈劳动纠纷蓝色的就发了看见啊电缆附件的说法<br/> 对方接受的离开房间里的数据反馈劳动纠纷蓝色的就发了看见啊电缆附件的说法<br/> 对方接受的离开房间里的数据反馈劳动纠纷蓝色的就发了看见啊电缆附件的说法<br/> 对方接受的离开房间里的数据反馈劳动纠纷蓝色的就发了看见啊电缆附件的说法<br/> </div> </body> </html>JavaScript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
制作动态样式基本步骤:
1.定义数据封装的标签
2.确定事件源
3.注册事件
4.事件处理
4.DL列表的展开和闭合:
<!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>DL列表展开与闭合</title> <style type="text/css"> .close,dl{ overflow:hidden; height:16px; } .open{ overflow:visible; } </style> <script type="text/javascript"> /*单个列表:方法一,文档模式IE7以及IE7以下有效果*/ function list(){ dtObj=event.srcElement; dlObj=dtObj.parentNode; (dlObj.className=="open")?(dlObj.className="close"): (dlObj.className="open"); } /*多个列表:方法二,利用this:代表当前事件源对象*/ function list2(dtObj){ dlObj=dtObj.parentNode; (dlObj.className=="open")?(dlObj.className="close"): (dlObj.className="open"); } /* 如果有多个列表,要完成每次只能有一个处于open状态,其它处于close状态 此时需要获取所有dlNode,进行循环判断 */ function list3(){ dlObj=event.srcElement.parentNode;//当前操作的dl allDlObj=document.getElementsByTagName("DL"); for(var i=0;i<allDlObj.length;++i) if(dlObj==allDlObj[i]) (dlObj.className=="open")?(dlObj.className="close"): (dlObj.className="open"); else allDlObj[i].className="close"; } </script> </head> <body> <dl> <dt onclick="list3()">目录</dt> <!--this代表当前dtNode对象--> <dd>第一项</dd> <dd>第二项</dd> </dl> <dl> <dt onclick="list3()">目录</dt> <dd>第一项</dd> <dd>第二项</dd> </dl> <dl> <dt onclick="list3()">目录</dt> <dd>第一项</dd> <dd>第二项</dd> </dl> <dl> <dt onclick="list3()">目录</dt> <dd>第一项</dd> <dd>第二项</dd> </dl> </body> </html>
