BOM简介

时间:2023-02-26 19:04:17

BOM简介

  • BOM Browser Object Model
  • 浏览器对象模型

BOM简介

BOM简介

// 通过window对象来访问浏览器
console.log(window.document);
// frames:当前文件的框架集合
console.log(window.frames);
// 浏览器环境信息
console.log(window.screen);
console.log(window.history);
// 浏览器及其相关功能的信息
console.log(window.navigator); // 浏览器本地信息
console.log(window.location);
// href属性 reload() assign() replace() 等方法 window.location.href = 'red.html';
window.location.reload(); //刷新 // 有历史记录
window.location.assign('yellow.html'); // 替换页面 无历史记录
window.location.replace('yellow.html') window.history.forward();
window.history.back(); // go(num): num大于0 向后跳转num个界面
window.history.go(2);

onload

onload:是windows的属性 本身是函数类型的属性,赋值时需要接受一个函数,当页面加载完毕才会执行

window.onload = function(){
alert('页面加载完毕')
}

onscroll

<body style="height: 2000px;">
<button onclick="goTop()" style="position: fixed;bottom: 50px; right: 50px;">回到顶部</button>
<script type="text/javascript">
window.onscroll = function(){
// console.log('页面滚动')
var height = document.documentElement.scrollTop || document.body.scrollTop;
console.log(height);
}
function goTop(){
document.documentElement.scrollTop = 0;
//document.body.scrollTop = 0;
} </script>
</body>

onresize

<script type="text/javascript">
// onresize 浏览器更改大小时会执行
window.onresize = function(){
console.log('大小更改');
}
</script>

定时器

<button onclick="clearTime()">清除定时器</button>
<button onclick='create()'>创建定时器</button>
<script type="text/javascript">
// 创建定时器 function create () {
timer = window.setInterval(function(){
console.log("666");
}, 2000)
} //window.setInterval(func, 2000) function clearTime () {
window.clearInterval(timer);
}
</script>

延时器

<button onclick='clearTimer()'>清除定时器</button>
<script type="text/javascript">
var timer = window.setTimeout(func, 5000);
function func () {
console.log('您很好');
} function clearTimer(){
window.clearTimeout(timer);
}
</script>

BOM简介的更多相关文章

  1. Javascript学习笔记3 Javascript与BOM简介

    什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...

  2. JavaScript学习总结【6】、JS BOM

    1.BOM 简介 所谓的 BOM 即浏览器对象模型(Browser Object Model).BOM 赋予了 JS 操作浏览器的能力,即 window 操作.DOM 则用于创建删除节点,操作 HTM ...

  3. 从零开始的JS生活(二)——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  4. BOM:浏览器对象模型之浏览器剖析入门

    BOM简介 BOM与DOM的关系 BOM对象包含的内容 重新认识浏览器 一.分裂的BOM和被收服的DOM BOM定义:是browser object model的缩写,简称浏览器对象模型. 主要处理浏 ...

  5. javascript教程5&colon;--BOM操作

    1.BOM 简介 所谓的 BOM 即浏览器对象模型(Browser Object Model).BOM 赋予了 JS 操作浏览器的能力,即 window 操作.DOM 则用于创建删除节点,操作 HTM ...

  6. js下 Day01、DOM对象,BOM浏览器对象模型

    一.初识DOM 1.什么是DOM?为什么学习DOM 2.DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3.认识DOM实现了js和网页结合的 ...

  7. JS之DOM编程

    为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程.  dom编程简介 DOM=Document Object Mo ...

  8. js基础提高(二)

    JavaScript基础提高(二) 上篇写的是JavaScript的历史.基本的数据类型和基本的语法进填的话讲的就深入一些了. js的函数 1.js函数定义的方式 (1)普通方式 语法:functio ...

  9. JavaScript基础精讲

    ---------------------------------------------------------------------------------------------------- ...

随机推荐

  1. jquery ready&lpar;&rpar;的几种实现方法小结

    几种jQuery的ready ()的写法. 1.最常用也是最标准的  $(document).ready(){  });  2.是上面的简写:  $(function(){  })  很奇怪?为什么能 ...

  2. VC&plus;&plus;的文件格式详解

    .APS:存放二进制资源的中间文件,VC把当前资源文件转换成二进制格式,并存放在APS文件中,以加快资源装载速度.资源辅助文件. .BMP:位图资源文件. .BSC:浏览信息文件,由浏览信息维护工具( ...

  3. e8&lowbar;4输出菲波拉契数列的前10项

    program fbnq;{输出菲波拉契数列的前10项} var a:..] of integer; i:integer; begin a[]:=; a[]:=; do a[i]:=a[i-]+a[i ...

  4. redhat 6 配置 yum 源的两种方法

      由于 redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,重启安装,再配置其他源. 本文包括配置本地源及第三方源.第三方源包括:网易,epe ...

  5. &commat;RequestBody对象为空,异常Required request body is missing

    1.异常 org.springframework.http.converter.HttpMessageNotReadableException: Required request body is mi ...

  6. ES6 函数的扩展1

    1. 函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,为了避免这个问题,通常需要先判断一下参数y是否被赋值,如果没有,再等于默认值. ES6允许为函数的参数设置默认值,即直接 ...

  7. BeanShell断言(一)

    在beanShell中直接可以调用的变量,无需加前缀. 1.log 打印日志 log.info(“在控制台打印日志”); 2.SampleResult 获取SampleResult对象,可以通过这个对 ...

  8. javascript改变style样式和css样式

    转载 在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的 ...

  9. 前后端分离springmvc和RESTful理解

    1. 理解MVC MVC是一种经典的设计模式,全名为Model-View-Controller,即模型-视图-控制器. 其中,模型是用于封装数据的载体,例如,在Java中一般通过一个简单的POJO(P ...

  10. spring boot 2&period;0 与FASTDFS进行整合

    只支持在spring-boot 2.0以及以上版本中使用 1.pom.xml 里引入FASTDFS的依赖,toobato与fastdfs作者一起,将fastdfs的功能进行了重构与简化 <!-- ...