JS DOM学习笔记

浏览数：22 / 时间：2015年06月09日

1、window对象代表当前浏览器窗口

2、使用window对象的属性、方法的时候可以省略window。例如：window.alert("hello")一般写成alert("hello"); window.document一般写成document

3、window.setInterval(method, delay);//每过delay毫秒就调用一次method函数，相当于是计时器

4、window.clearInterval(name); //取消计时器name

//setInterval(method, delay)函数和clearInterval(name)演示

//每隔一秒弹出“hello"
var timer = setInterval(function(){ alert("hello"); }, 1000);

//调用closeTimer方法停止timer计时器
function  closeTimer(){
      clearInterval(timer);    
}

5、setTimeout(method, delay); //deay毫秒之后执行method函数，和setInterval的区别是setTimeout只执行一次，setInterval可以不断的执行无数次

6、onload(页面加载后触发）：网页加载完毕时触发，浏览器是一边下载文档、一边解析执行，可能会出现JavaScript执行时需要操作某个元素，这个元素还没有加载，如果这样就要把操作的代码放到body的onload事件中，或者可以把JavaScript放到元素之后。元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。

window.onload = function () { //...... } //动态注册事件，窗体加载完成后执行，和body onload效果差不多

7、window.控件Id(不建议使用），推荐document.getElementById("控件Id")来获取标签对象

8、事件：onclick(单击)、ondblclick(双击)、onkeydown（按键按下）、onkeypress(按下按键）、onkeyup（松开按键）、onmousedown(鼠标按下）、onmousemove(鼠标移动）、onmouseout(鼠标离开元素范围）、onmouseover(鼠标移动到元素范围）、onmouseup(鼠标按键释放）、oncontextmenu(在浏览器中单击鼠标右键显示‘右键菜单’时触发）

9、window.location对象： window.location.href = "*.html"; //重新导航到新页面，可以取值，也可以赋值

window.location.reload(); //刷新当前页

10、window.event是IE下非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取得相关信息。

window.event.altKey属性：bool类型，表示事件发生时是否按下了alt键。类似的还有cltKey、shiftkey。

function TestClt(){
      if  (window.event.altKey){
            alert("按下了alt键");
     }
}

11、用document.createElement(name)：创建标签。

var btn = document.createElement("input");    //创建一个input标签
btn.type = "button";//input标签类型为按钮
btn.value = "提交"; //设置按钮值
document.appendChild(btn);    //将按钮添加到文档中

//js操作标签对象，给对象设置属性
var div1 = document.getElementById("div1");//获取一个标签对象
div1 .className = "bigDiv";//给标签设置类样式名
div1 .style.width = "200px";
div1 .style.height = "200px";//设置标签高度
div1 .style.backgroundColor = "red";//设置背景颜色
div1 .style.fontSize = "20px";//设置字体大小
div1 .style.marginTop = "10px";//设置上边距大小
div1 .onclick = function(){ //.... }//给标签设置单击事件
div1 .onmouseover = functioin () {} //给标签设置鼠标离开事件
div1.style.display = "block";    //设置显示
div1.style.top = "30px"; //设置顶部距离
div1.setAttribute("width", 100);//设置宽度


12、form表单onsubmit事件：在点击form表单提交按钮后，onsubmit事件会被触发，可以在onsubmit事件中进行一些数据校验，返回false可以取消提交