JavaScript BOM详解

目录
  • 1.BOM简介
    • 1.JavaScript由三部分组成
    • 2.window对象
    • 3.location对象
    • 4.history对象
  • 总结

1.BOM简介

1.JavaScript由三部分组成

  • ECMAScript核心语法 ES
  • DOM文档对象模型，核心对象是document,用来操作页面文档
  • BOM浏览器对象模型，核心对象是window,用来操作浏览器

2.window对象

名称 含义
history 有关客户访问过的URL信息
location 有关当前URL信息，子级DOM对象
document 表示浏览器窗口的HTML文档，字级DOM对象

常用方法：

方法名 含义
alert(text) 显示一个带有提示信息和确定按钮的警告框
prompt(text) 显示一个带有提示信息，文本输入框，确定和取消按钮的输入框
confirm(text) 显示一个带有提示信息，确定和取消按钮的确认框，确认返回true,取消返回false
open(url,name,options) 打开具有指定名称的新窗口，并加载给定url所指定的文档
setTimeout(fn,delay) 设置一次性定时器，在指定毫秒值后执行某个函数
setlnterval(fn,delay) 设置周期性定时器,周期性循环执行某个函数
cleatTimeout(timer) 清除一次性定时器
cleatlnterval(timer) 清除一次性定时器
scrollTo(xpos,ypos) 把内容滚动到指定坐标，即设置滚动条的偏移位置
scrollBy(xnum,ynum) 把内容滚动指定的像素数，即设置滚动条的偏移量

open 打开指定窗口

<script>
        function f1() {
            //这里不是css样式，这个打开窗口大小是可以调整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
    </script>
</head>
<body>
    <button onclick="f1()">打开一个新窗口</button>
</body>

setTimeout(fn,delay)

  <script>
        function f1() {
            //这里不是css样式，这个打开窗口大小是可以调整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
        function f2() {
            setTimeout(f1, 2000)
        }
    </script>
</head>
<body>
    <button onclick="f2()">一次性计时器</button>
</body>

cleatTimeout(timer)

关闭一次性计时器，在未执行的时间范围内

```javascript
<script>
        function f1() {
            //这里不是css样式，这个打开窗口大小是可以调整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
    </script>
</head>
<body>
    <button onclick="f1()">打开一个新窗口</button>
</body>

setTimeout(fn,delay)

  <script>
        function f1() {
            //这里不是css样式，这个打开窗口大小是可以调整的
            open('test.html', 'user', 'width=500px,height=500px')
        }
        var timer
        function f2() {
            timer = setTimeout(f1, 2000)
        }
        function f3(){
		clearTimerout(timer)
}
    </script>
</head>
<body>
    <button onclick="f2()">一次性计时器</button>
    <button onclick="f3()">关闭一次性计时器</button>
</body>

scrollTo(xpos,ypos)

动到指定位置

<script>
        function f1() {
            scrollTo(0, 100) //单位为px
        }
    </script>

常用事件

时间名 含义
onclick 鼠标点击
onload 页面加载完成
onscroll 窗口滚动条滑动

注：由于window对象是BOM结构的顶层对象，所以在调用window属性和方法可以省略window

<script>
//点击窗口后执行
        window.onclick = function() {
            console.log(111)
        }
    </script>

3.location对象

常用属性

href 设置或返货地址栏中的url

常用方法reload() 重新加载当前页

    <script>
        function getUrl() {
            //获取地址栏中的url
            console.log(location.href)
                //设置地址栏中的url，实现页面的跳转
                //location = 'https://www.baidu.com'
            location.href = 'https://www.baidu.com'
            //重新加载页面
            location.reload();
        }
    </script>
</head>
<body>
    <button onclick="getUrl()">获取url</button>
</body>

4.history对象

方法名 含义
back() 后退，加载history列表中的上一个url
forword() 前进,加载history列表中的下一个url
go(number) 浏览器移动指定的页面数 
  <script>
        function goBack() {
            history.back()
        }
        function goforward() {
            history.forward()
        }
        function goGo() {
            history.go(1) //前进一个
        }
    </script>
</head>
<body>
    <button onclick="goBack()">后退</button>
    <button onclick="goforward()">前进</button>
</body>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JavaScript的三种BOM对象

    JavaScript的三种BOM对象

    目录 一.location对象 1.URL 2.location 对象的属性 3.location 对象的方法 二.navigator对象 三.history对象 总结 window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL . 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象. 接下来我们就具体的看一下. 一.location对象 1.URL 统一资源定位符 (Uniform Resource Locato

  • 深入学习JavaScript中的bom

    BOM(Broswer Object Model) 凡是 window 的属性和方法,均可以省略"window." 方法: 框窗 1.警告框 window.alert("msg"); 2.确认框 window.confirm("msg"); 3.询问框 window.prompt("msg","defaulvalue") 页面 1.打开一个窗口 window.open() 2.在子窗口中使用,表示父窗口的w

  • javascript的BOM

    javascript的BOM

    javascript的BOM ECMAScript是 JavaScript的核心,但如果要在 Web中使用 JavaScript,那么 BOM(浏览器对象模型)则无疑才是真正的核心.BOM 提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关.多年来,缺少事实上的规范导致 BOM既有意思又有问题,因为浏览器提供商会按照各自的想法随意去扩展它.于是,浏览器之间共有的对象就成为了事实上的标准.这些对象在浏览器中得以存在,很大程度上是由于它们提供了与浏览器的互操作性.W3C为了把浏览器中

  • JavaScript中BOM和DOM详解

    目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作 鼠标事件 键盘事件 触屏事件 特殊事件 表单事件 浏览器兼容处理 兼容性写法,封装工具 BOM(浏览器对象模型)

  • JS中的BOM应用

    JS中的BOM应用

    我们曾经讲过JS由三部分组成,其中一个部分就是BOM,用于对浏览器进行操作.这节课我们主要就来介绍BOM. BOM基础 我们先来看一个BOM的最基础功能:打开.关闭窗口: <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input type="button" value=&quo

  • JavaScript BOM详解

    JavaScript BOM详解

    目录 1.BOM简介 1.JavaScript由三部分组成 2.window对象 3.location对象 4.history对象 总结 1.BOM简介 1.JavaScript由三部分组成 ECMAScript核心语法 ES DOM文档对象模型,核心对象是document,用来操作页面文档 BOM浏览器对象模型,核心对象是window,用来操作浏览器 2.window对象 名称 含义 history 有关客户访问过的URL信息 location 有关当前URL信息,子级DOM对象 docume

  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

  • 在Node.js中使用Javascript Generators详解

    Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

  • JavaScript cookie详解及简单实例应用

    JavaScript cookie详解 一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客户端脚本化. cookie数据可以自动地在Web浏览器好Web服务器之间传递. 在浏览器中可以通过navigator.cookieEnabled属性检查浏览器的cookie功能是否被激活.     二.cookie的基本属性     每个cookie都有四个可

  • javascript 实例详解循环用法

    javascript 实例详解循环用法

    闲来无聊,整理了几道有关循环的简单练习题,希望对初学JS的小伙伴有所帮助. 1.打印1-100之间所有7的倍数的个数及总和 var sum=0; var n=0; for(var i=1;i<=100;i++){ if(i%7==0){ sum+=i; ++n; } } console.log("个数为:"+n+",总和为:"+sum); 运行结果: 2.假设投资的年利率为5%,从1000增到5000需要多少年? var money=1000; var i=0

  • JavaScript 模块化详解

    JavaScript 模块化详解

    目录 前言: 1.概念 2.模块化的好处 3.引入多个script标签后出现的问题 一.CommonJS 二.AMD 三.CMD 四.ES6模块化 前言: 1.概念 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起: 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信. 2.模块化的好处 避免命名冲突(减少命名空间污染): 更好的分离, 按需加载: 更高复用性: 更高可维护性. 3.引入多个script标签后出现的问题 请求过多(依赖的模

  • JavaScript 继承详解（四）

    Classical Inheritance in JavaScript. Crockford是JavaScript开发社区最知名的权威,是JSON.JSLint.JSMin和ADSafe之父,是<JavaScript: The Good Parts>的作者. 现在是Yahoo的资深JavaScript架构师,参与YUI的设计开发. 这里有一篇文章详细介绍了Crockford的生平和著作. 当然Crockford也是我等小辈崇拜的对象. 调用方式 首先让我们看下使用Crockford式继承的调用

  • JavaScript 继承详解（五）

    在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance.  John Resig作为jQuery的创始人而声名在外.是<Pro JavaScript Techniques>的作者,而且Resig将会在今年秋天推出一本书<JavaScript Secrets>,非常期待. 调用方式 调用方式非常优雅: 注意:代码中的Class.extend._super都是自定义的对象,我们会在后面的代码分析中详

  • JavaScript 继承详解（六）

    在本章中,我们将分析Prototypejs中关于JavaScript继承的实现. Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖. 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的群众基础. 不过当年Prototypejs中的关于继承的实现相当的简单,源代码就寥寥几行,我们来看下. 早期Prototypejs中继承的实现 源码: var Class = { // Class.create仅仅返回另外一个函

  • IOS ObjectC与javascript交互详解及实现代码

    IOS OC与js交互详解 JS注入 : 把JS代码有OC注入到网页 JS注入又叫做OC和JS的交互 OC和JS的交互需要一个桥梁(中介),这个桥梁就是UIWebView的代理方法 网页加载初始内容 #import "ViewController.h" @interface ViewController ()<UIWebViewDelegate> @property (weak, nonatomic) IBOutlet UIWebView *webView; @end -

随机推荐