一、基础知识

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. 在CentOS 6.7 64位安装PHP的PDO_OCI扩展 Installing PDO_OCI extension on CentOS 6.7 64bit

    需求&背景 最近根据项目需求,要在php中远程连接Oracel 11g Express数据库,为了开发方便,决定采用pdo,也就是php的PDO_OCI扩展,但是php安装的时候并没有安装PD ...

  2. hadoop ssh 问题WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!

    0.0.0.0: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@0.0.0.0: @    WARNING: REMOTE HO ...

  3. UVA - 658 It's not a Bug, it's a Feature! (隐式图的最短路,位运算)

    隐式的图搜索,存不下边,所以只有枚举转移就行了,因为bug的存在状态可以用二进制表示,转移的时候判断合法可以用位运算优化, 二进制pre[i][0]表示可以出现的bug,那么u&pre[i][ ...

  4. WPF中Canvas使用

    首先知道Canvas有Left.Right.Top和Bottom这四个属性,放入Canvas的元素通过这四个属性来决定它们在Canvas里面的位置. 比如: Xaml: <Canvas Hori ...

  5. ucosii(2.89)semaphore 应用要点

    semaphore 的作用:1,允许一个任务与其他任务(中断)同步.2,取得共享资源使用权.3,标志事件的发生.

  6. SayLove微信小程序

    目录 SayLove 表白墙微信小程序 程序结构 说明 程序效果图 配置过程 结语 云开发 quickstart 参考文档 SayLove 表白墙微信小程序 项目地址:https://github.c ...

  7. linux yum 安装mysql

    1.安装查看有没有安装过: yum list installed MySQL* rpm -qa | grep mysql* 查看有没有安装包: yum list mysql* 安装mysql客户端: ...

  8. ERROR 2059 (HY000): Authentication plugin 'caching_sha2_password' cannot be loaded: /usr/lib64/mysql/plugin/caching_sha2_password.so: cannot open shared object file: No such file or directory

    部署docker下的mysql时出现以下报错 [root@docker ~]# mysql -h192.168.30.22 -uroot -p Enter password: 出现报错: ERROR ...

  9. request :fail url not in domain list

    1.可点击开发者工具右上角 详情-域名信息,看看是否配置了域名: 2. 手机预览小程序的时候,打开调试

  10. 使用gcc -g编译,gdb调试时仍然存在“no debug symbols found”的错误

    今天为调试一段代码,使用gcc将程序用-g选项重新编译.但是使用gdb进行debug时,仍然出现“no debug symbols found”的错误.仔细检查了一下Makefile,原来后面定义的连 ...