BOM以及定时器

一、BOM

1、操作浏览器的一些方法 (浏览器对象模型)

2、window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性

(document,alert,console.log,这些东西都是window的),由于他太常用可以省略不写,全局变 量和全局函数是window的一个属性和方法

3、window.onload=function(){ 【入口函数】

事件会在页面加载完成后,以及页面中的所有图片都加载完才开始执行

} img标签会加载,而图片不会被加载,是为了优化,这样获取图片的属性就不可以,所以

要使用window.load()

3‘使用:当在单独的页面写JS时 会比较常使用

window.load如果写了多个 ,后面的会覆盖前边的

3‘‘ window.open("打开的窗口地址",“-self/-blank(默认)”,“窗口的属性(高度和宽 度)”)--》可以写在一个函数里--》但是这个很少用

window.close(没有参数)--》把自己给关了,所有在open的时候要在全局接受一下设定的窗口 ,然后用它来调用.close就可以。

4、定时器

①延时定时器

语法:setTimeout(函数function,delay【单位是毫秒】)

setTimeout(funnction(){},5000) //5秒之后去执行这里的函数,并返回一个数值类型的延时定时器的ID,可以用、timer来接收

setTimeout(bang【函数名】,5000)

clearTimeout( timer【定时器的ID】); -->他们都是windom来调用的

②间歇定时器

setInterval(函数function,delay) 同样返回一个ID //每隔一段时间都会调用这个函数

clearInterval(timer)

定时器不会卡住程序,他后边的程序还是可以执行的,单线程先是执行他下边的程序,然后等执行定时器时,就会一直执行。

惊天巨坑:在定时器里不要使用this,因为定时器是有window来调用的

定时器实质:设置一个定时器,就是让window没隔多少秒去执行一次,他后边 的代码不会再执行了,开启一个定时器,不会妨碍后边代码的执行,其实就是让代码每隔多少秒去执行一次

5、其他的BOM对象(了解)

① location.href="http://baidu.com" //用来页面跳转

②刷新 : 刷新的时候,地址没变,浏览器会读缓存

强制刷新 : ctrl+f5 不读缓存 ,所有的资源都重新去加载

location.reload(true/false) //默认不写就是false就是刷新,传的是true就是强制刷新

③其他属性

通过IP找电脑,通过端口找程序

http://www.baidu.com?wd=呵呵 找关键字

6、其他对象

① navigator console.log(navigatorr.userAgent)//在控制台中写,(编辑器在前加window) 查看浏览器的版本信息

浏览器兼容性: 能力检测:判断有没有这个能力,如果没有,就用另外一种方式

代理检测:检查浏览器的版本 (谷歌浏览器可以再控制台中编程)

②history.forward( )等页面跳转完,有历史时,往前跳 ==history.go(1)

history.back( )往后==history.go(-1)

③screen.width/height 获取屏幕的宽度和高度

screen.availWidth/availHeight 高度会变(默认 )

7、动画

offset家族

①style.width:只能获取行内式

获取的是字符串的格式,还带px,如还的用parseInt

可以设置宽度,记得带单位

offsetwidth:真是的大小,获取盒子自身的宽度(padding+border+width)

获取的类型是字符类型,可以直接运算

是一个只读属性,只能获取,不能设置

总结:获取用offsetWidth 设置用style.width

②offsetParent 距离自己最近的有定位的父元素

parentNode 找的永远是自己的亲爹

③offsetTop offsetLeft//真实的位置 自己的左侧距离offsetParent左侧的

真实的距离 ;获取到的是字符类型;是只读属性

只能获取不能设置;margin会影响他的大小。

style.left:只能获取行内样式 (获取的是left设置的样式值,就是设多少就是多

少);获取到的是字符串 ;可以进行设置

动画公式

注意:动画中,想让left有效果,别忘记加定位,加单位

对象的当前位置=对象的当前位置+对象要走的长度

leader=leader+step // 当前的位置 盒子一次移动的距离

注意:一秒钟执行25次就可以看到动画效果

timer只是定时器的编号,是个数值而已

时间: 2024-10-07 00:23:33

BOM以及定时器的相关文章

13 -1 BOM和定时器

一 BOM JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 从上图也可以看出: window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. DOM是BOM的一部分. window对象: wi

大前端完整学习路线(详解)//转载自csdn:http://blog.csdn.net/u011047006/article/details/52597178

第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript.DOM.BOM.定时器和焦点图. JS基本特效: 常见特效.例如:tab.导航.整页滚动.轮播图.JS制作幻灯片.弹出层.手风琴菜单.瀑布流布局.滚动事件.滚差视图. JS高级特征: 正则表达式.排序算法.递归算法.闭包.函数节流.作用域链.基于距离运动框架.面向对象基础. JQuer

关于web前端的学习路线

第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript.DOM.BOM.定时器和焦点图. JS基本特效:常见特效.例如:tab.导航.整页滚动.轮播图.JS制作幻灯片.弹出层.手风琴菜单.瀑布流布局.滚动事件.滚差视图. JS高级特征:正则表达式.排序算法.递归算法.闭包.函数节流.作用域链.基于距离运动框架.面向对象基础. JQuery:基础

大前端完整学习路线

第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript.DOM.BOM.定时器和焦点图. JS基本特效: 常见特效.例如:tab.导航.整页滚动.轮播图.JS制作幻灯片.弹出层.手风琴菜单.瀑布流布局.滚动事件.滚差视图. JS高级特征: 正则表达式.排序算法.递归算法.闭包.函数节流.作用域链.基于距离运动框架.面向对象基础. JQuer

大前端完整学习路线(详解)

第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript.DOM.BOM.定时器和焦点图. JS基本特效: 常见特效.例如:tab.导航.整页滚动.轮播图.JS制作幻灯片.弹出层.手风琴菜单.瀑布流布局.滚动事件.滚差视图. JS高级特征: 正则表达式.排序算法.递归算法.闭包.函数节流.作用域链.基于距离运动框架.面向对象基础. JQuer

0 博客目录

一 python相关 1 python基础2 数据类型详解3 文件操作4 普通函数和装饰器5 内置函数和匿名函数6 迭代器和生成器7 递归和二分算法8 python内置模块(os,time等)9 正则表达式和re模块10 类的语法和实例11 面向对象的组合和继承以及多继承12 hashlib,logging,configparser和序列化13 三个装饰器函数14 封装和反射15 模块导入和异常处理16 tcp和udp网络编程以及粘包处理17 进程,进程池和socketserver18 时间,信

web前端学习路线规划

1.HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. 2.JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript.DOM.BOM.定时器和焦点图.3.js基本特效:常见特效.例如:tab.导航.整页滚动.轮播图.JS制作幻灯片.弹出层.手风琴菜单.瀑布流布局.滚动事件.滚差视图. 4.JS高级特征:正则表达式.排序算法.递归算法.闭包.函数节流.作用域链.基于距离运动框架.面向对象基础. 5.JQuery:悬着器.DOM操

前端完整学习路线

第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript.DOM.BOM.定时器和焦点图. JS基本特效: 常见特效.例如:tab.导航.整页滚动.轮播图.JS制作幻灯片.弹出层.手风琴菜单.瀑布流布局.滚动事件.滚差视图. JS高级特征: 正则表达式.排序算法.递归算法.闭包.函数节流.作用域链.基于距离运动框架.面向对象基础. JQuer

前端技术学习路线及技术汇总

下面是简单整理的一些前端的学习路线:第一阶段: HTML+CSS:HTML主要就是网页编辑.包括HTML进阶.CSS进阶.div+css布局.HTML+css整站开发.Javascript 语言:JavaScript是web前端中最重要的知识,包括Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAscript.DOM.BOM.定时器和焦点图.JS基本特效:常见特效,如tab.导航.整页滚动.轮播图.JS制作幻灯片.弹出层.手风琴菜单.瀑布流布局.滚动事件.滚差视图.JS高级特征: