bom笔记

总结bom笔记之前,先转载一篇大佬写的文章DOM和BOM操作

一、BOM简述

1、概念

BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

2、用途

javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器)。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。

二、window对象

1、概述

BOM 的核心是window对象,所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法。 例如:document也是window的属性

三、window的常用属性

1、window.innerHeight,window.innerWidth

网页的CSS布局占据的浏览器窗口的高度和宽度,单位为像素 当放大和缩小网页的时候,浏览器窗口的宽高会改变

2、滚动scoll

  • window.scrollX、window.scrollY 滚动条横向偏移长度/纵向偏移量
  • scrollTo(x,y) 让滚动条滚动到坐标为(x,y)的位置
  • scrollBy(x,y) 相对当前位置移动滚动条向右和向下滚动长度

举个特殊的栗子

从图中可以看出,scrollTo(x,y)能偏移的位置是有限制的。图中scrollx最大能滚动34px,这就是window窗口和网页展示width的长度差。

3、navigator(导航)

Window对象的navigator属性,指向一个包含浏览器相关信息的对象。 其中的userAgent指向当前用的浏览器种类,你用什么设备看的浏览器。比如window的chrome或者是用mac的chrome之类的

判断用户的浏览器类型

第一种通过直接比较navigator.userAgent重是否含有/Android/,/iPhone/等字样
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
function isIphone(){
return /iPhone/.test(navigator.userAgent);
}
function isIpad(){
return /iPad/.test(navigator.userAgent);
}
function isIOS(){
return /(iPad)|(iPhone)/.test(navigator.userAgent);
}
第二种,使用search()函数,通过检测navigator.userAgent重是否含有Android,iPhone等字样的下标,返回值是否大于0进行判断

function isAndroid(){
  if(navigator.userAgent.search('android') >0){
    console.log('用户的浏览器类型是android')
  }
}
isAndroid()
function isIphone(){
   if(navigator.userAgent.search('iphone') >0){
    console.log('用户的浏览器类型是iphone')
  }
}
function isIpad(){
   if(navigator.userAgent.search('ipad') >0){
    console.log('用户的浏览器类型是ipad')
  }
}
function isIOS(){
   if(navigator.userAgent.search('ios') >0){
    console.log('用户的浏览器类型是ios')
  }
}

4、screen属性

screen也是window的属性,表示的查看浏览器的设备(比如电脑屏幕)的信息 缩放网页不会改变screen.width和 screen.height

alert(),prompt(),confirm() (三种不常用的和网页交互的方式)它们会弹出不同的对话框,要求用户做出回应。需要注意的是,alert()、prompt()、confirm()这三个方法弹出的对话框,都是浏览器统一规定的式样,是无法定制的

5、alert(message)

alert(message),会让浏览器发送一条消息。用户只有点击“确定”按钮,对话框才会消失。在对话框弹出期间,浏览器窗口处于冻结状态,如果不点“确定”按钮,用户什么也干不了。

alert('hello,浏览器告诉我谁是世界上最美的女人,是我吗')

6、prompt(text[, default])

prompt方法弹出的对话框,在提示文字的下方,还有一个输入框,要求用户输入信息,并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据

prompt('我是不是最帅的程序员','yes')

有两个参数,第二个是预设的回答值。不写第二个参数也可以

prompt方法的返回值是一个字符串(有可能为空)或者null,具体分成三种情况。

  • 用户输入信息,并点击“确定”,则用户输入的信息就是返回值。
  • 用户没有输入信息,直接点击“确定”,则输入框的默认值就是返回值。
  • 用户点击了“取消”(或者按了Escape按钮),则返回值是null。

7、confirm(message)

除了提示信息之外,只有“确定”和“取消”两个按钮,往往用来征询用户的意见

三、URL的编码/解码方法

先看一下若愚老师写的博客聊一聊编码与乱码

1:URL 编码的原因

URL 只能使用 ASCII 字符集来通过因特网进行发送,也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号,所以需要对URL里面的特殊字符进行编码

2:编码方式

1)、encodeURI() 主要针对整个url编码,对于url本身有些的特殊字符不会进行编码。比如~!@#$&*()=:/,;?+' 和ASCII字母、数字不会编码 2)、encodeURIComponent() 用于对URL的组成部分COMponent(成分)进行个别编码,而不用于对整个URL进行编码。编码范围比encodeURI()宽,只有~!*()'和ASCII字母、数字不会编码

3:解码方式

1)、decodeURI() 和encodeURI()对应的解码方式,不能解encodeURIComponent()的码 2)、decodeURIComponent() 和encodeURIComponent()对应的解码方式

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JSON 格式

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。2001年由 Dou...

    bamboo
  • 浏览器兼容

    产品的角度(产品的受众、受众的浏览器比例、效果优先还是基本功能优先) 成本的角度 (有无必要做某件事)

    bamboo
  • vue笔记3,计算笔记

    我们己经可以搭建出一个简单的 Vue 应用,在模板中双向绑定一些数据或表达式了。但是表达式如果过长,或逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护 举例

    bamboo
  • [object%20Object] 这个ajax请求的时候报错,解决方法

    原因是jQuery版本低,不能使用 .post() 改为 .ajax({ type: “post”,

    一天不写程序难受
  • 达观数据跨域问题产生及解决办法

    熟悉web前端开发的人都知道,浏览器在请求不同域的资源时,会受到浏览器的同源策略影响,请求资源有可能不成功,这也就是我们前端常常提到的跨域问题。 这类问题往往会...

    达观数据
  • 前端面试题(HTML和CSS)

    我会推出前端面试题的专栏,每一期我会推出10个经典面试题,面试题一部分由小伙伴提供,一部分从面试真题中选出,最后会来一个大汇总。主要目的是帮助那些还没有前端开...

    用户1093975
  • 大数据告诉你:学历真的能改变命运

    央视新闻曾做过关于高考的调查,结果有七成网友支持高考取消数学,看到新闻后,有一位网友却一针见血地评论道:数学考试存在的意义就是把这七成网友筛选掉。

    IT派
  • 大数据揭秘:学历真的改变能命运?

    作者:LinkedIn;中外学术情报 央视新闻曾做过关于高考的调查,结果有七成网友支持高考取消数学,看到新闻后,有一位网友却一针见血地评论道:数学考试存在的意...

    钱塘数据
  • 共享经济与 O2O 地推结合,阿里要搞人人BD

    移动互联网正在让人类共享一切可以共享的“事物”:汽车、车座、餐桌、客房、技能、经验……现在其名单中增加了一项:BD。口碑最近的“全民开店”项目,让人人都可以做地...

    罗超频道
  • 行业视角 | 大数据分析,不读书成功逆袭概率多少?

    很多人想要快乐地生活下去,靠的是创造与重复假象不断地麻痹自己,这也正是绝大多数人传播读书无用论的根本动机。 无奈国内反智主义盛行的大环境侵犯到了每一个受过高等教...

    加米谷大数据

扫码关注云+社区

领取腾讯云代金券