一 BOM

JavaScript基础分为三个部分：

  • ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

  • DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

  • BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

从上图也可以看出：

  • window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

  • DOM是BOM的一部分。

window对象：

  • window对象是JavaScript中的顶级对象。

  • 全局变量、自定义函数也是window对象的属性和方法。

  • window对象下的属性和方法调用时，可以省略window。

1、打开窗口：

window.open(url,target)

参数解释：

  • url：要打开的地址。

  • target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。

2  location对象的属性

  • href：跳转

  • hash 返回url中#后面的内容，包含#

  • host 主机名，包括端口

  • hostname 主机名

  • pathname url中的路径部分

  • protocol 协议 一般是http、https

  • search 查询字符串

例子

 <body>

 <div>smyhvae</div>

 <script>

     var div = document.getElementsByTagName("div")[0];

     div.onclick = function () {

         location.href = "http://www.baidu.com";   //点击div时，跳转到指定链接

  //     window.open("http://www.baidu.com","_blank");  //方式二

     }

 </script>

 </body>

3  navigator对象

window.navigator 的一些属性可以获取客户端的一些信息。

  • userAgent：系统，浏览器)

  • platform：浏览器支持的系统，win/mac/linux

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>BOM</title>

 </head>

 <body>

 <script>

     window.onload=function (ev) {

         console.log(111);

         console.log(window.navigator);

         console.log(navigator.userAgent);

         console.log(navigator.platform);//查看浏览器支持的系统

         setTimeout(function () {

             //这两个不能同时存在

             window.open('http://www.baidu.com','_self');//打开一个新的网页

             // window.location.reload();//2秒之后整改网页刷新，全局刷新，不建议使用

         },2000);

     }

 </script>

 </body>

 </html>

二 定时器

在js中的定时器分两种：1、setTimeout() 2、setInterval()

1.setTimeOut()

只在指定时间后执行一次

 /定时器 异步运行

 function hello(){

 alert("hello");

 }

 //使用方法名字执行方法

 var t1 = window.setTimeout(hello,1000);

 var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法

 window.clearTimeout(t1);//去掉定时器

2.setInterval()

在指定时间为周期循环执行

 /实时刷新  时间单位为毫秒

 setInterval('refreshQuery()',8000);

 /* 刷新查询 */

 function refreshQuery(){

   console.log('每8秒调一次')

 }

两种方法根据不同的场景和业务需求择而取之，

对于这两个方法，需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout

13 -1 BOM和定时器的更多相关文章

  1. BOM以及定时器

    一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console ...

  2. BOM心得-定时器

    写在前面的话:之前一直以为定时器的返回值是Object类型,所以timer初始化也是写null,今天发现返回值是number,进而发觉这个返回值代表的是定时器的索引,指代这是第几个定时器 个人觉得只用 ...

  3. BOM之定时器

    JavaScript中的时间是通过定时器控制的,他们分别是window.setInterval和window.setTimeout,我们当然可以省略window,直接使用方法名称调用. 一     s ...

  4. 浏览器对象模型(BOM)是什么？（体系结构+知识详解）（图片：结构）

    浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构) 一.总结 1.BOM操作所有和浏览器相关的东西:网页文档dom,历史记录,浏览器屏幕,浏览器信息,文档的地址url,页面的框架集. ...

  5. 前端3 — js — BOM没完（ 不了解也行 ）

    1.js是什么? -- 英文全称javascript javaScript(简称"JS") 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.虽然它是作为开发Web页面的脚 ...

  6. JS中定时器的返回数值ID值

    定时器会返回一个数字值id,可以由clearInterval(id)或clearTimeout(id)来实现对对应定时器的清除. setInterval()/setTimeout()BOM中的Wind ...

  7. liteos软件定时器（十）

    1 概述 1.1 基本概念 软件定时器,是基于系统Tick时钟中断且由软件来模拟的定时器,当经过设定的Tick时钟计数值后会触发用户定义的回调函数.定时精度与系统Tick时钟的周期有关. 硬件定时器受 ...

  8. 第十三章 ZYNQ-MIZ701 TIMER定时器中断

      上篇文章实现了了PS接受来自PL的中断,本片文章将在ZYNQ的纯PS里实现私有定时器中断.每隔一秒中断一次,在中断函数里计数加1,通过串口打印输出. 本文所使用的开发板是Miz701 PC 开发环 ...

  9. web前端面试第一次[定时器]

    BOM中定时器--计时器 定时器参数两个:(函数,时间(单位ms(1000ms=1s))) 时间设置1s,每过1s执行一次函数 //设置定时器 setInterval(funtion(){ alert ...

随机推荐

  1. JavaScript 实例、构造函数、原型对象关系图

    详细介绍:深入理解javascript原型和闭包(5)——instanceof 图片来源:https://www.ibm.com/developerworks/cn/web/1306_jiangjj_ ...

  2. Axure 工具的使用

    Axure RP是一款专业的快速原型设计工具,Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格.设计功能和界面的专家 ...

  3. JS---案例：表格隔行变色(鼠标划过背景色恢复)

    案例:表格隔行变色(鼠标划过背景色恢复) <!DOCTYPE html> <html> <head lang="en"> <meta ch ...

  4. 各NoSQL数据库管理系统与模型比较

    提供:ZStack云计算 内容简介 NoSQL数据库的存在意义在于提供传统关系数据库管理系统所不具备的特定功能.无论是负责承载简单的键-值对存储以实现短期缓存,抑或是处理传统数据库及结构化查询语言(简 ...

  5. Oracle JOB的建立，定时执行任务

    Oracle JOB的建立,定时执行任务 oracle job的相关设置 next date: 2010-12-28 18:05:00 interval: to_date(to_char(sysdat ...

  6. Django快速创建新项目

    Python免费视频含配套文件QQ124111294 https://pan.baidu.com/s/1bL5ml4 python.exe manage.py startapp app01 pytho ...

  7. pycharm 测试执行成功，但却无法成功生成测试报告（使用HTMLTestRunner）的解决办法

    pycharm 测试执行成功,在对应的测试路径下确未生成测试报告.反复确认代码也是没有问题的,在网上查找了原因:简单的unittest运行是不执行main方法的.是允许方式问题. 于是在mian方法里 ...

  8. CentOS7使用iptables防火墙开放端口

    背景:在CentOS上面安装了mysql.svn.tomcat等软件,发现访问不了,用telnet命令查看端口,发现都不通: telnet IP 端口 CentOS7 默认使用firewalld防火墙 ...

  9. 高效整洁CSS代码原则 (下)

    6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开始添加目录: /*---------------------------- ...

  10. 集合-Collection接口

    集合 和 数组 的比较: 数组 - 本质上就是在内存空间中申请的一段连续内存空间,存放多个相同类型的数据 - 数组一旦定义完毕,则在内存空间中的长度固定. - 插入/删除元素时可能导致大量元素的移动, ...