JavaScript 内容总结(DOM和BOM)(三)BOM基础

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量128 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47735503/article/details/114193937
版权

JavaScript 内容总结（JavaScript高级程序设计）

  1. BOM概述
  2. window对象的常见事件
  3. 定时器
  4. JS执行机制
  5. location对象
  6. navigator对象
  7. history对象
1.BOM概述

  • 浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window

    DOMBOM
    文档对象模型浏览器对象模型
    把文档当作一个对象来看待把浏览器当作一个对象来看待
    顶级对象是document顶级对象是window
    操作页面元素浏览器窗口交互
    W3C标准规范浏览器厂商在各自浏览器上定义的，兼容性较差

  • BOM构成

    BOM比DOM更大，它包含DOM

    window：document、location、navigation、screen、history

  • window对象：浏览器顶级对象

    1. 它是JS访问浏览器窗口的一个接口
    2. 它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法
    3. 在调用的时候可以省略window
    4. 声明变量最好不要用name，因为name为window自带的特殊属性
2.window对象的常见事件

  • 窗口加载事件： window.onload，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、css文件等），就调用的处理函数

    <body><!--由于页面从上到下解析 解析到body才会渲染页面 如果把js写在前面 页面将不会执行与body中内容相关的代码 所以要用到window.onload-->
  <script>
    window.onload = function () {
      var btn = document.querySelector('button');
      btn.addEventListener('click', function () {
        alert('1')
      })
    }
      //window.addEventListener('load',function(){})
  </script>
  <button>点击</button>
</body>

  • 注意：

    1. 有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
    2. window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
    3. 如果使用addEventListener 则没有限制

  • 窗口加载事件：document.addEventListener(‘DOMContentLoaded’, function () {})；

    1. DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等
    2. 如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded事件比较合适

  • 调整窗口大小事件：window.onresize,当触发时就调用的处理函数

    <body>
  <script>
    window.addEventListener('load', function () {
      var btn = document.querySelector('button')
      window.addEventListener('resize', function () {
        if (window.innerWidth <= 1000) {//获得当前屏幕宽度
          btn.style.display = 'none';
        }
        else{
          btn.style.display = 'block';
        }
      })
    })
  </script>
  <button>点击</button>

</body>
3.定时器

  • setTimeout()：用于设置一个定时器，该定时器在在定时器到期后执行调用函数

    window.setTimeout(回调函数，[延迟的毫秒数])；

    <body>
  <script>
    var time1=setTimeout(function () {//可以给定时器起名
      alert('时间到')
    }, 2000)//两秒后执行
      ----------------
    setTimeout(zz, 2000)
    function zz() {
      alert('时间到')
    }
      ----------------
    setTimeout('zz()', 2000)
    function zz() {
      alert('时间到')
    }
  </script>
</body>

    案例：

    <body>
  <img src="godgird.jpg" alt="">
  <script>
    var img = document.querySelector('img')
    setTimeout(zz, 2000)
    function zz() {
      img.style.display = 'none';//2s之后隐藏图片
    }
  </script>
</body>

  • 停止setTimeout() 定时器：window.clearTimeout(timeoutID)

    <body>
  <img src="godgird.jpg" alt="">
  <button>停止定时器</button>
  <script>
    var img = document.querySelector('img')
    var button = document.querySelector('button')
    var time1 = setTimeout(zz, 2000)
    function zz() {
      img.style.display = 'none';
    }
    button.addEventListener('click', function () {
      clearTimeout(time1);//停止定时器
    })
  </script>
</body>

  • setInterval()：方法重复调用一个函数，每隔这个时间，就会调用一次回调函数

    window.setInterval(回调函数，[延迟的毫秒数])；

    <body>
  <script>
    var time1=setInterval(function () {//可以给定时器起名
      alert('时间到')
    }, 2000)//两秒后执行
      ----------------
    setInterval(zz, 2000)
    function zz() {
      alert('时间到')
    }
      ----------------
    setInterval('zz()', 2000)
    function zz() {
      alert('时间到')
    }
  </script>
</body>

    案例：京东秒杀

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>京东秒杀</title>
  <style>
    div {
      float: left;
      width: 50px;
      height: 50px;
      background-color: black;
      margin-left: 10px;
      color: #fff;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
    }
  </style>
</head>

<body>
  <div class="h"></div>
  <div class="m"></div>
  <div class="s"></div>
  <script>
    var hour = document.querySelector('.h');
    var min = document.querySelector('.m');
    var sec = document.querySelector('.s');
    var inputTime = +new Date('2021-2-27 21:00:00');
    conutDown();//解决刷新页面出现短暂空白
    setInterval(conutDown, 1000);//倒计时
    function conutDown() {
      var nowTime = +new Date();
      var times = (inputTime - nowTime) / 1000;
      var h = parseInt(times / 60 / 60 % 24);
      h = h < 10 ? '0' + h : h;
      hour.innerHTML = h;
      var m = parseInt(times / 60 % 60);
      m = m < 10 ? '0' + m : m;
      min.innerHTML = m;
      var s = parseInt(times % 60);
      s = s < 10 ? '0' + s : s;
      sec.innerHTML = s;
    }
  </script>
</body>

</html>

  • 停止setInterval() 定时器：window.clearInterval(timeoutID)；

    <body>
  <button>停止定时器</button>
  <script>
    var button = document.querySelector('button')
    var time1 = setInterval(zz, 2000)
    function zz() {
      alert('时间到')
    }
    button.addEventListener('click', function () {
      clearInterval(time1);//停止定时器
    })
  </script>
</body>

    案例：发送验证码

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>验证</title>
</head>

<body>
  <input type="text" name="" id="">
  <button>发送</button>
  <script>
    var btn = document.querySelector('button');
    // var time = null;
    btn.addEventListener('click', function () {
      btn.disabled = true;
      var i = 60;
      btn.innerHTML = '还剩' + i + '秒';
      var time = setInterval(() => {
        i--;
        btn.innerHTML = '还剩' + i + '秒';
        if (i == 0) {
          clearInterval(time);
          btn.disabled = false;
          btn.innerHTML = '发送'
          i = 60;
        }
      }, 1000);
    })
  </script>
</body>

</html>

  • this指向问题：谁调用 指向谁

4.JS执行机制

  • JS是单线程：同一时间只能做一件事

  • 同步和异步：为了解决长时间等待问题

  • 同步：前一个任务结束后再执行后一个任务

  • 异步：同时进行两个任务

    console.log(1);
setTimeout(() => {
      console.log(3);
}, 1000);
console.log(2);
//1 2 3

  • 同步任务：都在主线程上执行，形成执行线

  • 异步任务：js的异步是通过回调函数实现的，放到任务队列

    1. 普通事件：click，resize等
    2. 资源加载：load，error等
    3. 定时器：setInterval，setTimeout等

  • Js执行机制

    1. 先执行执行线中的同步任务
    2. 异步任务（回调函数）放入任务队列中。
    3. 执行线中的任务执行完毕，执行任务队列中的任务。

    在这里插入图片描述

    事件循环：反复检查异步任务，放入，执行的过程

5.location对象

  • window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象

  • URL

    在这里插入图片描述

  • location对象属性

    在这里插入图片描述

  • 案例：5s后自动跳转页面

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>5s后自动跳转页面</title>
</head>

<body>
  <div></div>
  <script>
    var div = document.querySelector('div');
    var i = 5;
    div.innerHTML = i + 's后将自动跳转页面'
    window.addEventListener('load', () => {
      var time = setInterval(() => {
        i--;
        div.innerHTML = i + 's后将自动跳转页面'
        if (i == 0) {
          location.href = 'http://www.baidu.com';
          clearInterval(time);
          i = 5;
        }
      }, 1000);
    })
  </script>
</body>

</html>

  • 案例：参数传递

    demo.html

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form action="demo2.html">
    用户名：<input type="text" name="username" id="">
    <input type="submit" value="提交" id="tijiao">
  </form>
</body>

</html>

    demo2.html

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div></div>
  <script>
    console.log(location.search);
    var params = location.search.substr(1);
    var arr = params.split('=');
    var div = document.querySelector('div')
    div.innerHTML = arr[1] + '欢迎'
  </script>
</body>

</html>

  • location方法

    在这里插入图片描述

6.navigator对象

  • 一般服务端会用

    在这里插入图片描述

7.history对象

在这里插入图片描述

辛跃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript之BOM和DOM总结
少年与梦
04-22 1526
1、BOMBOM(Browser Object Model) 即浏览器对象模型，主要是指一些浏览器内置对象如：window、location、navigator、screen、history等对象，用于完成一些操作浏览器的特定API。用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window...
Javascript基础知识（三）BOM，DOM总结
10-25
本文是基础知识系列的第三篇文章，主要介绍javascript中BOM,DOM的一些心得总结，非常实用，有需要的朋友可以参考下
一篇文带你了解文档对象模型DOM（Document Object Model）
cai niaoyihao_的博客
06-06 2692
一篇文带你了解文本对象模型DOM（Document Object Model）
BOM、window对象常见事件
TangJing_的博客
07-20 225
BOM BOM：浏览器对象模型（Brower Object Model , BOM）提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。 BOM的构成 BOM和DOM的区别 DOM是文档对象模型，把文档当作一个对象来看待，它的顶级对象是document。 BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的顶级对象是window。（实际上是window.document） window对象的常见事件 窗口加载对象 window.onload：是窗口（页面）加载
DOM/BOM习题
weixin_45608986的博客
07-31 742
1.用onblur和onfocus这两个鼠标事件，根据效果图，补充代码，实现下列功能： （1） 当输入框获得焦点： 如果输入框值为空，提示“请输入您的姓名” （2） 当输入框失去焦点： 如果输入框值为空，提示“用户名不能为空”，并且边框颜色变为红色 如果输入框值不为空，那么没有提示文字，边框颜色是默认颜色。 <style> .red{ border: 1px solid red; } </style> </head&g
javascript中DOM,BOM事件常见试题分析
weixin_46226202的博客
10-28 287
从基础知识到JS-Web-API
BOM和DOM的基础篇
PSQ_family的博客
12-25 338
一、BOM BOM的顶级对象叫 window(属性和方法) 提供了一套操作浏览器的api（属性和方法） 1.属性 ：window.innerWidth 浏览器的可视宽度(包含滚动条) window.innerHeight 浏览器的可视高度(包含滚动条) 2.方法 ： window. 可以省去 （1） window.alert () 弹出框 （2）window.prompt () 输入框 返回值：点击确定，返回true 点击取消，返回false (3) window.confirm ()
javascript学习笔记（三）BOM和DOM详解
10-25
本文应用了很多实例，来解读JavaScript中BOM和DOM，DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。,而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的...
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
实现JavaScript的组成—-BOM和DOM详解
01-19
我们知道，一个完整的JavaScript的实现，需要由三部分组成：ECMAScript(核心),BOM(浏览器对象模型)，DOM(文档对象模型)。 今天主要学习BOM和DOM。 BOM: BOM提供了很多对象，用来访问浏览器的功能，这些功能于网页...
JavaScript 内容总结(DOM和BOM)(一)DOM基础
qq_47735503的博客
02-26 105
JavaScript 内容总结（JavaScript高级程序设计） DOM简介 获取元素 事件基础 操作元素 节点操作 1.DOM简介 编程接口：处理网页的结构 样式 内容 DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 DOM把以上内容都看作是对象 2.获取元素 根据ID获取 <body> <d
Next.js静态导出与动态路由优化
最新发布
天涯学馆
07-20 691
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1045
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 517
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps
yuan5025的博客
07-17 991
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 286
【代码】博客前端项目学习day03——框架页。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 576
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
谷粒商城实战笔记-35-前端基础-ES6-模块化
epitomizelu的专栏
07-20 320
模块化就是把代码进行拆分，方便重复利用。类似 java 中的导包：要使用一个包，必须先导包。JS 中没有包的概念，JS中类似的概念是模块。export和import。export命令用于规定模块的对外接口。import命令用于导入其他模块提供的功能。
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 190
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值