javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一、写在前面
本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念、定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下。今天给大家分享一下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定时器的用法与区别的更多相关文章
- Javascript中的定时调用函数setInterval()和setTimeout()
首先介绍这两个函数 一.setInterval() 按照指定的周期来调用函数或表达式,执行多次.(时间单位:ms) timer = setInterval("content =documen ...
- javascript中window,document,body的解释
解释javascript中window,document,body的区别: window对象表示浏览器中打开的窗口,即是一个浏览器窗口只有一个window对象. document对象是载入浏览器的ht ...
- javascript中遇到的字符串对象处理
在javascript中对参数处理: 1 <script> 2 function getParam() 3 { 4 urlInfo=window.location.href; //获取当前 ...
- javascript中的内置对象
2015.12.1 javascript中的内置对象 复习: 1.js中的内置函数 alert prompt write parseInt parseFloat eval isNaN document ...
- javaScript中Math内置对象基本方法入门
概念 Math 是javaScript的内置对象,包含了部分数学常数属性和数学函数方法. Math 不是一个函数对象,用户Number类型进行使用,不支持BigInt. Math 的所有属性与方法都是 ...
- JavaScript中 window.parent 、window.top、window.self代表的含义
在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法 ...
- JavaScript中常谈的对象
为浏览器编写代码时,总少不了window对象 window对象表示JavaScript程序的全局环境 同时 也表示应用的主窗口 到处都是对象 window对象 常用的属性和方法介绍 location ...
- 客户端JavaScript(window、document、element)
一.window对象是所有客户端JavaScript特性和API的主要接入点,用window来引用它. 属性:location属性(引用Location对象,当前显示在窗口的URL).document ...
- JavaScript中常用的Document了解
在我们使用js的时候经常会用到document 例如: document.write(""); document.getElementById(''); document.crea ...
随机推荐
- 前端设计师必须知道的10个重要的CSS技巧
对于一个初入门的前端设计师,在设计修改网站前端的时候,我们需要编写一些CSS.JS的内容达到界面效果.今天分享10个对于前端设计师来说重要的CSS技巧,这也是我在给许多客户做网站的过程当中总结出来的. ...
- 【计算几何】【二分答案】【最大流】bzoj1822 [JSOI2010]Frozen Nova 冷冻波
用三角形面积什么的算算点到直线的距离之类……其实相切的情况是可行的……剩下的就跟某SDOI2015一样了. #include<cstdio> #include<cmath> # ...
- 【动态规划】【最长上升子序列】【贪心】bzoj1046 [HAOI2007]上升序列
nlogn求出最长上升子序列长度. 对每次询问,贪心地回答.设输入为x.当前数a[i]可能成为答案序列中的第k个,则若 f[i]>=x-k && a[i]>ans[k-1] ...
- 1.3(学习笔记)Servlet获取表单数据
一.Servlet获取表单数据 表单提交数据经由Servlet处理,返回一个处理结果显示在页面上, 那么如何获取表单提交的参数进出相应的处理呢? 主要用到以下方法: String getParame ...
- Grunt上手指南(转)
Grunt , javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本 ...
- 让你的saga更具有可伸缩性(Scaling NServiceBus Sagas)
https://lostechies.com/jimmybogard/2013/03/26/scaling-nservicebus-sagas/ 当我们使用NServiceBus sagas (pro ...
- C#将json字符串解析成对象
首先我们在客户端生成json字符串,通过ajax把该字符串传到服务器端 //这是一个以id,email,age的json字符串 var jdata="[{\"id\&quo ...
- winfrom向窗体中拖放图片并显示
首先要设置窗体的AllowDrop属性为true.然后在窗体的DragEnter事件中添加如下代码:调用自定义的显示图片的方法. #region "在用鼠标将某项拖放到区域时事件" ...
- 使用Ant项目打包
一.前沿 前段时间公司为了做一个新闻发布系统,就使用了开源的JEECMS系统,(非人类啊,泪~~~),项目不是maven构建的,项目的打包部署非常的麻烦,没办法只能使用Ant,Ant是比较古老的打包部 ...
- 用Emmet写CSS3属性会自动添加前缀
CSS3的很多属性都包含浏览器厂商前缀,用Emmet写CSS3属性会自动添加前缀,比如输入trs 会展开为: -webkit-transition: prop time; -moz-transitio ...