[前端学习]jsBOM部分学习笔记,第一天

BOM

  • 全称browser object modle,浏览器对象模型window。它是整个浏览器最顶级的对象
  • 所有定义的全局变量和和全局函数都会自动变成window的属性和方法
  • window对象下的属性和方法,可以不写window,直接写属性名和方法名就能调用。

窗体加载事件

  • window.onload = function(){};浏览器在加载页面时,是从上至下的顺序,依次加载执行。所以之前在练习dom时,为了能准确获取操作到页面中对象节点,我们都是把js代码写在了最后面,目的就先让其他东西加载完毕再加载执行js
  • 而有了window.onload事件后,js代码就可以放在任意地方了。把js代码写在这个方法内部,它会在页面全部加载完毕后,再执行内部的代码,所以即使在顶部也可以正确执行。

打开关闭窗口

  • 通过bom的两个方法可以操作窗口的开关
  • window.open(目标地址,打开方式,新窗口属性) 这个方法可以新打开一个窗口,第一参数就是新窗口网页的地址,第二个参数有_blank_self两个值可以选,分别对应新窗口打开和当前窗口打开。第三个窗口可以设置新打开窗口的属性。
  • window.colse()调用这个方法默认关闭当前窗口,也可获取每个窗口的索引地址赋给变量,然后用变量调用方法,可以关闭对应的窗口。

定时器

  • 延时定时器
    • setTimeout(延时执行的函数,延时时间)设置延时定时器,过了参数时间之后再执行回调函数内部的代码,注意延时时间的单位是毫秒
    • clearTimeout(定时器id)清除延时定时器,如果在延时定时器执行前执行了清除了,那么就不再执行。传入参数是延时定时器的id,在设置时会自动返回id
  • 间歇定时器
    • setInterval(间隙执行的函数,间隙时间)使用方法和延时定时器一样,不过间歇定时器是每隔一段参数时间执行一次,反复执行
    • clearInterval(定时器id)与清除延时定时器用法相同

location对象

  • location相当于是浏览器地址栏,使用它可以跳转地址已经解析地址片段
  • 以下是几个location常用属性的描述
    • location.hash 返回的是地址中锚点
    • location.href 跳转到对应地址
    • location.host 返回主机名和端口
    • location.hostname 返回主机名
    • location.port 返回端口号
    • location.pathName 返回当前地址中的文件路径
    • location.protocal 返回当前地址使用的协议
    • location.search 返回当前地址中的参数

navigator对象

  • navigator.useragent 调用这个属性可以获取用户客户端的信息,比如浏览器信息,系统信息等。
  • 该对象属性有很多,需要去查阅手册,这里不多做记录

history对象

  • history.forward() 相当于浏览器的前进按钮
  • history.back() 相当于浏览器的后腿按钮
  • 该对象属性有很多,需要去查阅手册,这里不多做记录

screen对象

  • screen.width 获取屏幕宽度
  • screen.height获取屏幕高度
  • screen.availWidth 获取浏览器可用的屏幕宽度
  • screen.availHeight 获取浏览器可用的屏幕高度

date对象

  • var date = new Date(2017,10,9|2017-10-9|时间戳); 使用这个构造函数可以创建日期对象,获取当前的日期和时间,谷歌浏览器会自动把它转换为字符串的格式。如果创建对象时写入了参数,那么就不再获取当前时间,而是根据传入的时间来创建对象,参数可以有三种形式。
  • 把日期转换为unix时间戳的方法:
    • 日期对象.valueOf() 用对象调用valueOf方法
    • Date.now() 直接用构造函数调用now()方法
    • var date= +new Date(); 创建对象时使用正号,隐式的转换为数字
  • 日期的格式化转换
    • 日期对象.toDateString() 显示当前日期的字符串
    • 日期对象.toTimeString() 显示当前时间的字符串
    • 日期对象.toLocalDateSrting() 显示当前日期并格式化为当地习惯的格式(2017/10/9)
    • 日期对象.toLocalTimeSrting() 显示当前时间并格式化为当地习惯的格式(16:51:00)
  • 获取日期对象中指定的部分
    • 日期对象.getTime() 也是把对象转为unix时间戳
    • 日期对象.getMilliseconds() 返回当前对象时间戳格式中的毫秒部分
    • 日期对象.getSeconds() 返回秒部分0-59
    • 日期对象.getMinutes() 返回分钟部分0-59
    • 日期对象.getHours() 返回小时部分0-23
    • 日期对象.getDays() 返回星期几0-6
    • 日期对象.getDate() 返回是当前月的第几天
    • 日期对象.getMonth() 返回当前月份0-11
    • 日期对象.getFullYear() 返回4位数的年份
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,519评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,842评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,544评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,742评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,646评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,027评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,513评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,169评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,324评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,268评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,299评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,996评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,591评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,667评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,911评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,288评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,871评论 2 341

推荐阅读更多精彩内容