BOM简介
BOM简介
- BOM Browser Object Model
- 浏览器对象模型
// 通过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简介的更多相关文章
- Javascript学习笔记3 Javascript与BOM简介
什么是BOM BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象 ...
- JavaScript学习总结【6】、JS BOM
1.BOM 简介 所谓的 BOM 即浏览器对象模型(Browser Object Model).BOM 赋予了 JS 操作浏览器的能力,即 window 操作.DOM 则用于创建删除节点,操作 HTM ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
- BOM：浏览器对象模型之浏览器剖析入门
BOM简介 BOM与DOM的关系 BOM对象包含的内容 重新认识浏览器 一.分裂的BOM和被收服的DOM BOM定义:是browser object model的缩写,简称浏览器对象模型. 主要处理浏 ...
- javascript教程5:--BOM操作
1.BOM 简介 所谓的 BOM 即浏览器对象模型(Browser Object Model).BOM 赋予了 JS 操作浏览器的能力,即 window 操作.DOM 则用于创建删除节点,操作 HTM ...
- js下 Day01、DOM对象，BOM浏览器对象模型
一．初识DOM 1．什么是DOM?为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3．认识DOM实现了js和网页结合的 ...
- JS之DOM编程
为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程. dom编程简介 DOM=Document Object Mo ...
- js基础提高（二）
JavaScript基础提高(二) 上篇写的是JavaScript的历史.基本的数据类型和基本的语法进填的话讲的就深入一些了. js的函数 1.js函数定义的方式 (1)普通方式 语法:functio ...
- JavaScript基础精讲
---------------------------------------------------------------------------------------------------- ...
随机推荐
- thinkphp5中使用PHPExcel(转载)
thinkphp5中可以使用composer来获取第三方类库,使用起来特别方便,例如:可是使用composer下载PHPMailer,think-captcha(验证码)等等…… 接下来说一下怎么使用 ...
- 12：Css3的概念和优势
12:Css3的概念和优势 CSS3是css技术的升级版本,CSS3语言开发是朝着模块化发展的.以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来. ...
- export及export default的区别
在JavaScript ES6中,export与export default均可用于导出常量.函数.文件.模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方 ...
- history.back();谷歌浏览器，iframe后退问题
history.back();谷歌浏览器,iframe后退直接会后退父页面. 使用以下方式即可//document.referrer是获取上一页的urllocation.href=document.r ...
- Python3.6 性能测试框架Locust的搭建与使用
背景 Python3.6 性能测试框架Locust的搭建与使用 基础 python版本:python3.6 方法一: pip install locustio 方法二: 开发工具:pycharm 使用 ...
- php 与mysql 数据库
新手上路,php刚学,数据库刚学,花了两天终于读到数据库的数据了. 一路上的坎坷我在这里吐槽吐槽: <?php $mysql_server_name='localhost'; //改成自己的my ...
- PHP $_SERVER['SCRIPT_FILENAME'] 与 __FILE__ 的区别
$_SERVER['SCRIPT_FILENAME'] -------> 当前执行程序的绝对路径及文件名__FILE__ ...
- 关于maven-resources-plugin配置的隐藏的坑
昨天发现一个问题, 一个第三方证书的文件存放于resources文件夹下,在本地环境使用该证书进行加密调用第三方接口,没有任何问题,但是发布到测试环境和生产环境(linux)报错,提示证书工厂无法初始 ...
- 利用StateListDrawable给button动态设置背景
项目中,遇到相同样式的Button,只是stroke颜色不一样.为了实现一个,就得写两个shape文件,一个selector文件:多个还得重复写. 解决方法: 结合StateListDrawable给 ...
- 【Go语言】基本的语法
昨天花了几个小时的时间把Go的语法过了一遍,发现Go语言的语法核心和大部分编程语言的规则还是挺相近的,差别的就是不同的书写规范.还有就是前天安装VScode编译器那个插件把人弄得恶心了,总是安装不成功 ...