码迷,mamicode.com
首页 > 编程语言 > 详细

javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

时间:2014-12-30 23:23:26      阅读:404      评论:0      收藏:0      [点我收藏+]

标签:

一、写在前面

本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念、定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下。今天给大家分享一下js中window与document对象、setInterval与setTimeout定时器的用法与区别。讲得不对的地方,烦请大家指正,还望前辈、大牛多多指教!

二、window对象与document对象的用法和区别

window是全局对象,document是window对象的一个属性它也是一个对象。如图:

技术分享

document对象指的页面这个文档对象,window是全局的,window对象是BOM的核心对象,你在浏览器里执行的所有js都是在这个对象的作用域下。

1、window对象的属性、方法、事件

window对象的属性、方法、事件和使用方法,详见这里

2、document对象常用的属性、方法、事件

(1)属性:

document.title //设置文档标题title标签

document.URL //设置URL在同一窗口打开另一网页

document.cookie //设置和读出cookie

document.charset //设置字符集

(2)常用方法

document.write() //向页面写入内容

document.createElement(tag) //创建html标签对象

document.getElementById(id) //获得指定id值的对象

document.getElementsByName(name) //获得指定name值的对象

document.body.appendChild(element)//向body插入元素节点,作为最后一个子元素

document.getElementsByTagName(tag)//获取指定的元素节点

(3)常用对象事件

document.body.onclick= func() //鼠标指针单击对象是触发

document.body.onmouseover = func()  //鼠标指针移到对象时触发

document.body.onmouseout = func() //鼠标指针移出对象时触发

三、setInterval与setTimeout定时器的用法和区别

setInterval()是每隔指定时间就执行代码一次即间歇调用,setTimeout()是在指定时间内执行一次(只执行一次),如下代码分析:

<!doctype html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="utf-8">
    </head>
    <script type="text/javascript">
        window.onload = function(){
            var oBtn1 = document.getElementById(button1);
            var oBtn2 = document.getElementById(button2);
            oBtn1.onclick = function(){
                setInterval(function(){
                    alert(重复执行);
                }, 1000);
            };
            oBtn2.onclick = function(){
                setTimeout(function(){
                    alert(只执行一次);
                }, 1000);
            };
        };
    </script>
    <body>
        <input id="button1" type="button" value="重复执行" />
        <input id="button2" type="button" value="只执行一次" />
    </body>
</html>

如上代码对“重复执行”按钮添加了一个鼠标点击事件,点击事件的函数内定义了一个setInterval()定时器,当点击“重复执行”按钮时(之后不再点击)每个一秒弹出“重复执行”的提示框;对“只执行一次”按钮也添加了一个鼠标点击事件,点击事件的函数内定义了一个setTimeout()定时器,当点击“只执行一次”按钮时,一秒后只弹出一次“只执行一次”提示框,只有当再次点击时才会弹出。

四、总结

这两组概念在平时的学习中还是比较常见的,知道他们各自的用法,使用时才更得心应手。本人是新手,如果文中有错误的地方,欢迎指正!到点了,休息好,才能学习好,各位晚安!

此文章发布在本人博客园changjianqiu,如需转载本文,请注明来源: http://www.cnblogs.com/changjianqiu/

javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

标签:

原文地址:http://www.cnblogs.com/changjianqiu/p/4194745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!