一、基础知识

1.1,什么是BOM

BOM(browser object model):也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能。BOM缺少规范,每个浏览器提供商又按照自己想法去扩展它,那么浏览器共有对象就成了事实的标准,所以,BOM本身是没有标准的或者还没有哪个组织去标准它。

1.2,总体知识

现在学习到的知识,主要是将BOM分成三个对象的学习,分别是window对象、location对象和history对象。

二、Window对象

2.1,定义

是BOM的核心对象,表示浏览器的一个实例 ,window对象处于JavaScript的结构最顶层,对于每个打开的窗口,系统都会自动为其定义Window对象。

2.2,结构

说明:Window对象是最顶层的对象,其下有6大属性,这6大属性本身也是对象。其document属性下,又包括5大属性,其也都是对象。因为Window对象为最顶层的对象,所以,在调用其子对象时,可以不用指明Window。如:下面两句话的效用是一致的!

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">window.alert(“测试”);
alert(“测试”);</span></span>

2.3,系统对话框

2.3.1,alert()方法

直接弹出对话框:

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">alert("测试");</span></span>

2.3.2,confirm()方法

这里有确定和取消按钮,本身可以返回一个布尔值:

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">if (confirm("请选择!")) {
alert("你按了确认按钮");
}
else {
alert("你按了取消按钮");
}</span></span>

2.3.3,prompt()方法

可以在弹出框中输入一个数,然后显示出来:

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var box = prompt("请输入一个数字", 0)
if (box != null) {
alert(box);
}</span></span>

2.4,定时器

<span style="font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:24px;">var num = 0;
var max = 5;
var id = null; function box() {
num++;
document.getElementById("a").innerHTML += num;
if (num==max ) {
clearInterval(id);
alert("5秒到了!");
}
}
id=setInterval(box,1000)</span></span>

三、Location对象

说明:它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上location对象是window对象的属性,也是document对象的属性,所以:window.location和document.location等效。

四、history对象

这个对象属性,保存着用户上网的记录,从窗口被打开的那一刻算起。

<span style="font-size:18px;"><a href="javascript:back();">前一个</a>
<a href="javascript:forward();">后一个</a>
<a href="javascript:go(1);">下一个</a></span>
<span style="font-size:18px;">function back() {
history.back();
} function forward() {
history.forward();
} function go(num) {
history.go(num);
}</span>

五、感想

这些东西,一个一个看来都很简单,就是一些属性和方法的应用。但觉得还是有必要把基础给整理一下,最大的感受:知道那个东西在哪里出现过,其实也很重要。

有了很多东西之后,建立联系好像变得容易点!

【JavaScript 7—基础知识点】:BOM的更多相关文章

  1. JavaScript语言基础知识点图示(转)

    一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...

  2. JavaScript 语言基础知识点总结

    网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰 分享 )  

  3. JavaScript语言基础知识点图示

    原文:JavaScript语言基础知识点图示 一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运 ...

  4. JavaScript 语言基础知识点总结(思维导图)

    JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaS ...

  5. 【JavaScript 8—基础知识点】:DOM

    一.总体概述 1.1,什么是DOM DOM(Document Object Model):D(文档):整个web加载的网页文档:O(对象):类似于window对象之类的东西,可以调用属性和方法,在这里 ...

  6. JavaScript (JS)基础:BOM 浅析 (含window对象相关基本方法、属性解析)

    ① window对象(Math方法也属于window对象): window对象是JavaScript中的顶级对象,所有定义在全局作用域中的变量.函数都会变成window对象的属性和方法,window对 ...

  7. 【JavaScript 4—基础知识点】:函数

    导读:函数这个东西,从VB开始就一直在用,不过那时候一般写不出来自己的函数或者类,觉得最高大上的,就是调用API函数了.现在,学习到了JavaScript,总结总结函数,显得很有必要.这篇文章,就从最 ...

  8. 【JavaScript 1—基础知识点】:宏观概述

    导读:JavaScript是一门新的(也可以说是旧的或者半新语言),里面有很多的知识点都能和已有的知识产生共鸣.但是,虽然简单,相同点也有很多,也有不同点.我脑袋也不好使,所以对于我来说,还是有必要再 ...

  9. javascript的基础知识点

    一:鼠标提示框 需求描述:鼠标移入都input上,div显示,移出,div消失 分析:控制display=block/none 鼠标移入,鼠标移出事件  <input type="bu ...

随机推荐

  1. [转]AngularJS:何时应该使用Directive、Controller、Service?

    AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directi ...

  2. 前端之css(宽高)设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

  3. nodejs中的异步回调机制

    1.再次clear Timer定时器的作用 setTimeOut绝非是传统意义上的“sleep”功能,它做不到让主线程“熄火”指定时间,它是用来指定:某个回调在固定时间后插入执行栈!(实际执行时间略长 ...

  4. JS判断两个对象相同属性的属性值是否相等

    function isObjectValueEqual(a, b) { var aProps = Object.getOwnPropertyNames(a); var bProps = Object. ...

  5. 目后佐道IT教育:教学环境

    目后佐道IT教育的品牌故事 http://www.cnblogs.com/itpua/p/7710917.html 目后佐道IT教育的师资团队 http://www.cnblogs.com/itpua ...

  6. android stuido ndk 开发

    开发环境: Android studio 1.0.2 ndk android-ndk-r10d-windows-x86_64 ------------------------------------ ...

  7. windows/Linux 常用命令

    windows 文件操作命令 cd 切换文件目录 dir 显示文件目录内容 md 创建文件夹 rd 删除文件夹 copy 拷贝文件 move 移动文件 del 删除文件 replace 替换文件 mk ...

  8. Prim算法解决最小生成树

    一.最小生成树问题 什么是最小生成树问题?给你一个带权连通图,需要你删去一些边,使它成为一颗权值最小的树. 二.Prim算法 1)输入:输入一个带权连通图,顶点集合V,边集合E 2)初始化:Vnew= ...

  9. Linux中fork函数的例子

  10. vue 数组更新 this.$set(this.dataList, data.index, data.data)

    vue 数组更新 this.$set(this.dataList, data.index, data.data) https://www.cnblogs.com/huangenai/p/9836811 ...