JS-BOM学习笔记

最新推荐文章于 2024-04-18 17:41:56 发布
最新推荐文章于 2024-04-18 17:41:56 发布
阅读量244 收藏
点赞数
分类专栏： js 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44279495/article/details/108503149
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webapi学习BOM</title>
    <!-- BOM
    1.DOM对象

    2.location
    下面两个为重点
    window.location.href 返回当前页面的 href (URL)  可设置当前页面URL和当地址错误时进行判断并重新把URL指向当前想让用户看到的页面的URL
    window.location.search 返回参数

    window.location.hostname 返回 web 主机的域名
    window.location.pathname 返回当前页面的路径或文件名
    window.location.protocol 返回使用的 web 协议（http: 或 https:）
    window.location.assign 加载新文档
    window.location.port 返回端口号
    window.location.hash  返回片段 的后面内容 常用于锚点 链接

    方法:
    location.assign(URL) : 可跳转页面,重定向页面
    location.replace(URL)  :替换当前页面 ，不记录历史，所以不能后退
    location.reload(ture/false) : 重新加载页面 ->刷新页面 ->参数为ture时强制刷新

    3.navigation  属性  来自 navigator 对象的信息通常是误导性的，不应该用于检测浏览器版本
    navigator.cookieEnabled  如果启用了 cookie，则 cookieEnabled 属性返回 true：
    navigator.appName       返回浏览器的应用程序名称
    navigator.appCodeName   返回浏览器的应用程序代码名称  大多返回“Mozilla”  是 Chrome、Firefox、IE、Safari 和 Opera 的应用程序代码名称 并不便于使用
    navigator.platform      返回浏览器引擎的产品名称  大多数浏览器都将 “Gecko” 作为产品名称返回
    navigator.appVersion    返回有关浏览器的版本信息
    navigator.userAgent     返回由浏览器发送到服务器的用户代理报头（user-agent header）
    navigator.platform      属性返回浏览器平台（操作系统）
    navigator.language      返回浏览器语言：如 'en','zh-Cn'
    navigator.onLine        如浏览器在线，则 onLine 属性返回 true
    navigator.javaEnabled() 如果 Java 已启用, 返回 true，->访问者游览器

    4.screen
    属性:  对象包含用户屏幕的信息
    访问者的屏幕宽高
    screen.width    
    screen.height

     属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。
    screen.availWidth
    screen.availHeight

    属性返回用于显示一种颜色的比特数
    screen.colorDepth
    返回屏幕的像素深度
    screen.pixelDepth

    5.history
    history.back() - 等同于在浏览器点击后退按钮
    history.forward() - 等同于在浏览器中点击前进按钮
    history.go() -参数为1前进一个页面 为-1则后退一个页面(历史)
    
    window.onload:页面内容加载完毕后触发该事件 ->一般用于包含整段js代码 这样不需要放到body之后执行.
    window.DOMContentLoaded ： 窗口加载事件 DOM加载完后 不包含样式、图片、flsh等等 比onload快
    window.onressize : 调整窗口大小 触发该事件
    获取游览器宽高(返回以px为单位)解决方案:
    var w = window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;

    var h = window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;  

    警告框:window.alert()   
    确认框:window.confirm() 点确认返回ture，点取消返回false
    提示框:window.prompt)   如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

    定时事件:
    回调函数:经过设置的事件，到了时间再调用该函数
    setTimeout(调用函数,[延时毫秒数])
    停止定时器 clearTimeout(setTime-obj)
    setInterval(调用函数,[间隔的毫秒数]) 每隔多少毫秒数 调用一次
    clearInterval(setInterval-obj)

    异步：消息队列 普通事件->资源加载->定时器等等方法
    同步：主线程执行栈

    cookie:JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

    PC端网页动画特效:
    元素偏移量 offset系列:  返回的数值都不带单位  默认返回的是以px为单位的数值 但没有px  如父元素没有定位则以body为准
        经常用于获取元素位置  只读属性
    1.element.offsetParent  返回作为该元素带有定位的父级元素，如父级没有返回Body  
       没有 element.parenNode 好用：不管父元素有没有定位都会返回该父元素
    2.element.offsetTop     返回元素相对带有定位的父元素上方的偏移量    如没有就以body为准
    3.element.offsetLeft    返回元素相对带有定位的父元素左的偏移量      如没有就以body为准
    4.element.offsetWidth   返回自身包括padding、边框、内容区的宽度， 属于只读属性
        需要更改时用 style.width : 可以获得不包含padding和border的值  只能得到样式表里的值  获得的是带有单位的字符串，可读写属性

    元素可视区（静态获取） client系列: 默认返回的是以px为单位的数值 但没有px
      经常用于获取元素大小 
    1.element.clientTop   返回元素上边框的大小
    2.element.clientLeft  返回元素左边框的大小
    3.element.clientWidth   返回自身包括padding、内容区域的宽度，不包含边框，返回数值不带单位 静态获取(即加载完HTML元素时的大小)
    4.element.clientHeight  返回自身包括padding、内容区域的高度，不包含边框，返回数值不带单位 静态获取
最低0.47元/天 解锁文章
未暖猫厮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js学习进阶BOM部分（pink老师笔记）
shenruiaaa的博客
03-05 1349
BOM概述 window对象是浏览器的顶级对象，它具有双重角色 1.它是js访问浏览器窗口的一个接口 2.它是一个全局对象，定义在全局作用域中的变量，函数都会变成window对象的属性和方法 在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert(),prompt()等 注意：window下的一个特殊属性是window.name，他是一个空字符串 window对象的常见事件 窗口加载事件 也就是说，用addEventListener的方式，load事件可以注册多次
BOM学习笔记
weixin_45010467的博客
02-02 736
目标： 什么是BOM 浏览器的顶级对象window 页面加载事件以及注意事项 两种定时器函数及区别 JS执行机制 locaton对象完成页面跳转 navigator对象涉及的属性 history提供的方法实现页面刷新 内容： BOM概述 window对象的常见事件 定时器 JS执行机制 location对象 navigator对象 history对象 BOM概述 BOM（Browser Object Model）即浏览器对象模型，他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。
js学习笔记9（BOM及案例）
最新发布
qq_63130842的博客
04-18 548
- 分析： 1.按钮点击之后，会禁用按钮，disabled为true 2.同时按钮里面的内容会变化，注意button里面的内容通过innerHTML修改 3.里面的秒数是有变化的，因此需要用到定时器 4.定义一个变量，在定时器里面，不断递减 5.如果变量为0说明到时间了，需要停止计时器，按钮又可以恢复为初始状态-->因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象 -->//Date(time)就代表time时间的时间戳，此处为括号里时间的时间戳。
【前端学习】HTML学习笔记-JS进阶
01-08
history（浏览器 BOM） window有一下ES标准的属性： Number（） 数字类型的一种声明方式，创建出来的数字是一个对象，和直接var n = 1 创建出来的效果不一样 如果是var n=2声明方式的话，n本不应该有任何属性，但是...
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
JavaScript 学习笔记（五）
12-10
本地对象 ①Array类 ②Date类 对象的类型 内置对象 ①Global对象 ②Math对象 宿主对象 今天继续学习JS中的对象，昨天内置对象Global对象和Math对象，今天继续。宿主对象 所有非本地对象都是宿主对象host object，即...
JS基本功DOM学习笔记
07-12
JS的重要部分DOM的学习笔记，基于传智播客前端培训视频所做的笔记以及相关案例代码，包括事件、DOM节点获取与操作、DOM实用案例、DOM属性操作、元素操作、BOM、内置对象
BOM学习笔记----------(一)
Anna_ll的博客
09-19 333
BOM:Browser Object Model 浏览器对象模型可以与浏览器窗口进行互动的一套APIBOM它是由多个对象组成的,window对象是最顶层对象其他对象都是window对象的子对象BOM中的对象: 1.window 2.location 3.navigator 4.screen 5.history
学习笔记---BOM
weixin_43730624的博客
02-27 231
BOM学习记录
JavaScript BOM笔记
Kami丶
09-22 244
BOM BOM的概念 BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。 我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等 BOM的顶级对...
JS DOM BOM学习笔记
Curry_On的博客
11-17 539
JS DOM BOM 学习笔记 本文根据B站pink老师视频整理，供复习参考 持续更新中：
js BOM 笔记+案例
weixin_43288180的博客
12-12 275
BOM介绍 学习BOM的目标 ◆能够说出什么是BOM ◆能够知道浏览器的顶级对象 window ◆能够写出页面加载事件以及注意事项 ◆能够写出两种定时器函数并说出区别 ◆能够说出JS执行机制 ◆能够使用 location对象完成页面之间的跳转 ◆能够知晓 navigator对象涉及的属性 ◆能够使用 history提供的方法实现页面刷新 以下为案例部分 1.京东秒杀倒计时 效果图： &l...
js-BOM--笔记（三）
Yi_xuan_sky的博客
08-11 180
        超时调用setTimeout（fn, time）；第一个参数也可以是字符串，不过会导致性能损失，不推荐使用；第二个参数是毫秒值，经过这段时间后执行函数fn。setTimeout是一次性的，也就是只执行一次代码。        间歇调用setInterval（fn, time）；与setTimeout参数上没什么区别，区别就在于setInterval隔time时间就执行一次代码。注...
Javascript学习笔记：BOM基础
Zijeak的博客
02-19 270
文章目录1.什么是BOM2.window对象2.1 作为全局对象2.2 作为js访问浏览器窗口的接口3.location对象3.1 location对象的属性3.2 使用location对象改变浏览器位置4.history对象5.screeen对象6.navigator对象 1.什么是BOM BOM（browser object model）浏览器对象模型 BOM中的对象：window、navig...
BOM笔记:bom概述、window对象的常见事件、定时器、JS执行机制、location、history对象
m0_65639340的博客
08-05 189
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。DOM文档对象模型DOM 就是把「文档」当做一个「对象」来看待DOM 的顶级对象是 document。...
junit-bom单元测试
09-13
JUnit-BOM（Bill of Materials）是JUnit团队为JUnit 5框架提供的一个特殊模块。它的目的是简化JUnit 5的依赖管理。通过添加JUnit-BOM到你的项目中，你可以使用JUnit 5的所有核心模块和扩展模块，而无需单独指定每个模块的版本。 要使用JUnit-BOM，你需要在你的项目的构建文件中添加一个依赖项。对于Maven项目，可以在`<dependencies>`标签中添加以下内容： ``` <dependency> <groupId>org.junit</groupId> <artifactId>junit-bom</artifactId> <version>5.x.x</version> <!-- 替换为你想要使用的JUnit 5版本 --> <type>pom</type> <scope>import</scope> </dependency> ``` 对于Gradle项目，可以在`dependencies`块中添加以下内容： ``` dependencies { testImplementation platform('org.junit:junit-bom:5.x.x') // 替换为你想要使用的JUnit 5版本 testImplementation 'org.junit.jupiter:junit-jupiter-api' // 添加其他所需的JUnit 5模块 } ``` 添加JUnit-BOM之后，你可以使用JUnit 5的各种功能，例如编写和运行JUnit单元测试。你可以使用`@Test`注解来标记测试方法，并使用JUnit提供的各种断言和注解来编写强大的单元测试。 通过引用JUnit-BOM，你可以确保你的项目使用与JUnit 5兼容的版本，并且可以轻松管理依赖关系。这使得在不同的项目中使用JUnit 5变得更加简单和一致。 JUnit-BOM的详细信息可以在JUnit官方文档中找到。 JUnit是一个用于编写和运行可重复自动化测试的Java单元测试框架。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值