【黑马程序员】Dom(学习笔记)

最新推荐文章于 2024-03-21 08:41:49 发布

原创最新推荐文章于 2024-03-21 08:41:49 发布 · 968 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了使用JavaScript操作DOM的基本方法，包括动态设置事件、利用window及document对象进行页面交互等，通过实例演示了计时器、倒计时等功能。

------- WindowsPhone 7手机开发、.Net培训、期待与您交流！ -------

1.使用js操作Dom进行DHTML开发。(类似于c#和.Net Frameword关系)

2.DOM就是HTML页面的模型，将每一个标签作为一个对象

3.事件
<body onmousedown="alert('你好')">
或
<script type="text/javascript">
function bodyonmousedown(){
alert("你好");
}
</script>
<body onmousedown=bodyonmousedown()></body>
onmousedown时调用bodyonmousedown()

4.动态设置事件
function f1(){
alert("1");
}
function f2(){
alert("2");
}
<input type="button" id="btn" onclick="document.ondblclick=f1" value="关联事件1"/>//注意f1不要加括号,
<input type="button" onclick="document.ondblclick=f2" value="关联事件2"/>

5.body.document对象的事件
onload:网页加载完毕时触发,一边下载一边解析执行(注意onload位置不同意义也会不同)
onunload:页面关闭，或用户离开时触发
onbeforeunload:网页关闭之前触发<body onbeforeunload="window.event.returnValue='真的要放弃发帖吗?'">

6.window对象
当前浏览器的窗口
(1)window.alert('a');=alert('a');
(2)if(confirm("确定退出吗？")){
alert("退出");//返回true;
}
else{
alert("不退出");
}
[用这个f1()方法相应这个函数onclick=f1();]
(3)navigate("http://www.google.com")//重新定向至google
(4)setinterval每隔一定时间执行某些代码,第一个参数为代码的字符串，二个为间隔时间
var intervalID=setinterval("alert('hello')",5000);
取消clearinterval(intervalID);
(5)setTimeout定时执行，只执行一次
var iTimeoutID=setTimeout("alert('hello')",5000);
clearTimeout清除
(6)<title>新学期欢迎新同学</title>
function scroll(){
var title=document.title;
var fir=title.charAt(0);
var left=title.substring(1,title.length-1);
document.title=left+fir;
}
setInterval("scroll()",500);//走马灯效果
(7)window对象的属性
window.event用来获得发生时间时的信息(相当于c#中的e)
offsetx,screenx,clientx
returnValue:事件是否继续进行处理true;false
clipboardData对象对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取
setData("Text",val)设置粘贴板中的值
<input type="button" value="分享给好友"
onclick="clipboardData.setData('Text','好玩的'+location.href);alert('已经将地址复制到粘贴板中')"/>
<body oncopy="alert('禁止复制');trturn false;">

7.document属性
document.write()只有子啊页面内容加载过程中write才会与原内容融合到一起。onclick="document.write('hello')"是一个新的内容，不和原内容融合
getElementById()根据元素ID获取对象
var userName=document.getElementById(txtUserName);
getElementsByName()返回对象数组，因为控件的名字可以重复（RadioButton）,getElementsByTagName()根据标签的名字
案例：
10s钟后协议文本下的注册按钮才能点击，时钟倒数
Code:
<script type="text/javascript">
   var lefttime=10;
   var interid;
   function ContentDown(){
    var btnReg=document.getElementById("btnReg");
    if(btnReg){//如果网页速度慢的话，可能定时器运行时控件还没有加载
     if(lefttime<-0) {
      btnReg.value="同意";
      btnReg.disabled="";
      clearInterval(interid);
     }
     else{
      //btnReg.disabled="";
      btnReg.value="还剩"+lefttime+"s";
      lefttime--;
     }
    }
   }
   setInterval("ContentDown()",1000);
  </script>
</head>
<body>
<textarea></textarea>
<input type="button" id="btnReg" value="同意" disabled="disabled" />
</body>

练习：
加法计算器美女时钟

美女时钟Code:
<script type="text/javascript">
  function FillTo2Len(i){
   if(i<10){
    return "0"+i;
   }
   else{
   return f;
   }
  }
  function Refresh(){
    var imgMM=document.getElementById("imgMM");
    if(!imgMM){
     return;
    }
    var now=new Date();//javascript format函数实现yyy-MM-dd
    var filename=FillTo2Len( now.getHours()+"_"+now.getMinutes+"_"+now.getSeconds())+".jpg";
     imgMM.src=filename;
  }

  setInterval("Refresh()",1000);
    </script>