JS面向对象编程基础部分(2) 3.31

来源：互联网发布：php safe mode 开关编辑：程序博客网时间：2024/04/30 07:32

**
DOM编程：
1.为什么需要DOM？
（1）.通过dom编程，我们可以写出各种网页游戏；
（2）.ajax基础；
2.简介：（附件简介原理图）
3.原理介绍：（原理介绍图）
4.如何把html文档映射成DOM树：
（dom树图）
5.dom对象简介：
（dom对象简介图）
6.window对象：
（1）.confirm

举例：显示带有一段消息以及确认按钮和取消的对话框

<!--HTML代码--><body><input type="button" value="测试confirm" onclick="testConfirm()"/></body>//JSd代码：function testConfirm(){var res=window.confirm("测试confirm");if(res){alert("确定");}else{alert("取消");}}

（2）.setInterval(函数名，毫秒数)按照指定的周期（毫秒级）循环调用某个函数或计算表达式

举例1：（时钟效果效果）

<!--HTML代码--><body><span id="myTime"></span></body>//JSd代码：function getMyTime(){    //这是没法刷新时间的    //document.write(new Date());    //换一种方法，把时间加到span当中    //在文本间的文本就是通过 对象.innerText来实现的    document.getElementById("myTime").innerText=new Date().toLocaleString();}setInterval('getMyTime()',1000);

（3）.clearInterval(timer)//timer为setInterval()方法返回的一个值
取消由setInterval()设置的定时器；

(4).setTimeOut()
在指定的毫秒数后开始执行某个函数或计算表达式，但只调用一次
举例：

1.在打开页面5秒钟后跳出“hello”
2.图片停止跑动后5秒又继续运动；

举例2：（图片切换效果）

<!--HTML代码--><body><div id="moveDiv" style="left:0px;"><img src="1.jpg" id="moveObj"/></div></body>//JSd代码：var n=1;var left;var left2;var count=0;function run(){var left=document.getElementById("moveDiv").style.left;count++;if(count==10){//停止setInerval（）clearInterval(myTimer);//重启setInterval()setTimeout('reRun()',5000);//一定要注意这边count要清0；否则会停不下来；count=0;}//首先取得图片img的src属性//通过一个取模算法，来循环得到图片地址document.getElementById("moveObj").src=(n++%4)+1+".jpg";//获取left属性并进行字符串和数值转换left=parseInt(left.substring(0,left.indexOf('p')));document.getElementById("moveDiv").style.left=(left+50)+"px";}//myTimer表示返回setInterval()的定时器值var myTimer=setInterval('run()',1000);//这边需要单独再开一个函数说明，因为要取得myTimer用于后面clearInterval()来停止function reRun(){myTimer=setInterval('run()',1000);}

(5).clerTimeout(timer);
取消setTimeout()定时器
举例：

//JSd代码：function testClearTimeout(){alert("测试clearTimeout()");}var myTimer=setTimeout('testClearTimeout()',1000);clearTimeout(myTimer);

(6).moveTo(x,y):把窗口的坐标移到指定目标
    moveBy(x,y):可相对于窗口的当前坐标把它移动指定像素
    resizeTo(x,y):放大窗口到指定大小
    resizeBy(x,y):按照指定的像素调整窗口的大小
    open(url,"_blank||_self","窗口特征"):打开一个新窗口或已命名窗口

<!--HTML代码--><body><input type="button" value="moveTo" onclick="test(this)"/><input type="button" value="moveBy" onclick="test(this)"/><input type="button" value="resizeTo" onclick="test(this)"/><input type="button" value="resizeBy" onclick="test(this)"/><input type="button" value="open" onclick="test(this)"/></body>//JSd代码：function test(eventObj){if(eventObj.value=="moveTo"){window.moveTo(200,200);alert("aa");}else if(eventObj.value=="moveBy"){window.moveBy(100,100);alert("aa");}else if(eventObj.value=="resizeTo"){window.resizeTo(200,200);alert("aa");}else if(eventObj.value=="resizeBy"){window.resizeBy(100,100);alert("aa");}else if(eventObj.value=="open"){window.open("newOne.html","_blank","titlebar=no");}}

(7).opener:返回对创建窗口的窗口引用：

举例：父窗口和子窗口对话：

父窗口代码：<!--HTML代码--><body>父窗口<input type="button" value="创建一个新窗口" onclick="test(this)"/><span id="info1" >消息</span><input type="text" value="" id="oldOne"/><input type="button" value="给子窗口发消息" onclick="test(this)"/></body>

子窗口代码：<!--HTML代码--><body><input type="text"  value="" id="newOne"/><input type="button" value="给父窗口发消息" onclick="test(this)"/></body>

两者共享的JS代码：//JSd代码：var newWindow;function test(eventObj){if(eventObj.value=="创建一个新窗口"){//创建一个窗口并且返回新窗口对象newWindow=window.open("newOne.html","_blank");alert("aa");}else if(eventObj.value=="给子窗口发消息"){//新窗口获得就窗口信息newWindow.document.getElementById("newOne").value=$("oldOne").value;alert("aa");}else if(eventObj.value=="给父窗口发消息"){//父窗口获得子窗口信息opener.document.getElementById("info1").innerText=$("newOne").value;alert("aa");}}function $(id){return document.getElementById(id);}

（8）. 案例
一个js版本的用户系统，当用户输入’sunchen’，密码’123’，就跳到第二页，5秒后，自动跳转到第三个页面。
*********************************************************************************8

*********************************************************************************8//登入界面代码：<html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href="mario.css"></link><script languange="javascript" type="text/javascript" src="Mario.js"></script><script languange="javascript">//JSd代码：//登入界面JS代码：function $(id){return document.getElementById(id);}function check(){if($("user").value=="wangbinhui"&&$("passw").value=="123"){return true;}else{$("user").value="";$("passw").value=""return false;}}</script></head><!--HTML代码--><body><form action="newOne.html">用户名：<input type="text" id="user"/>密 码:<input type="password" id="passw"/><input type="submit" value="登入" onclick="return check()"/></body></html>***********************************************************************

//跳转页面代码：<html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href=".css"></link><script languange="javascript" type="text/javascript" src="Mario.js"></script><script languange="javascript">//JSd代码：//跳转界面JS代码：function openNewOne(){window.open("newTwo.html","_self");clearInterval(myTimer);}function changeSec(){$("waitSec").innerText=parseInt($("waitSec").innerText)-1;}var myTimer=setInterval("changeSec()",1000);setTimeout("openNewOne()",5000);</script></head><!--HTML代码--><body>等待<span id="waitSec">5</span>秒后跳转到管理界面</body></html>*******************************************************

//管理界面代码：<html><head><meta charset="utf-8" /><link rel="stylesheet" type="text/css" href=".css"></link><script languange="javascript" type="text/javascript" src="Mario.js"></script></head><!--HTML代码--><body>管理界面</body></html>***************************************************************

//三者共享JS代码:function $(id){return document.getElementById(id);}*************************************************************

2.event对象：
（1）.event对象代表事件的状态，比如事件在其中发生的元素，键盘按键状态，鼠标的位置
，鼠标的按钮状态，事件通常与函数结合使用；
（2）.如何绑定事件监听：
   1.直接在某个html控件上指定
   <input type="button" vale="刷新页面" onclick="test()">
   2.getElementById("id名")获取控件后，再绑定：
   function test(){`````````}
   document.getElementById("bnt1").onclick=test;
   3.通过addEventListener()或则attachEvent()来绑定；
   4.一个事件可有多个事件监听者；
   W3C DOM标准：
   [Object].addEventListener(“name_of_event”,fnHandler,bCapture);
   [Object].removeEventListener(“name_of_event”,fnHandler,bCapture);
   IE中独有的事件监听方法：
   [Object].attachEvent(“name_of_event”,fnHandler,bCapture);
   [Object].detachEvent(“name_of_event”,fnHandler,bCapture);

案例：如果我们有一个投票系统，但是只能投一次票（使用attachEvent detachEvent）

<script languange="javascript">//JSd代码：function test(){window.alert("你投了一次票");document.getElementById("bnt1").removeEventListener("click",test);}</script></head><!--HTML代码--><body><input type="button" id="bnt1" value="投票"/><script language="javascript">//特别注意这时不是Onclick了，而是click,不然会不兼容；document.getElementById("bnt1").addEventListener("click",test);</script></body>****************************

案例：要求用户在一个输入框中输入一个数，如果不是数字，则给出提示（你输入的不是数字）

<script languange="javascript">//JSd代码：function test(event){//0~9的ASCII码范围if(event.keyCode<48||event.keyCode>57){alert("你输入的不是一个数");return false;}}</script></head><!--HTML代码--><body><input type="text" id="input" onkeypress="return test(event)"/></body>

0 0