JavaScript进阶知识(BOM)-快速入门篇

转x33g5p2x  于2021-11-22 转载在 JavaScript  
字(4.8k)|赞(0)|评价(0)|浏览(450)

BOM

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

1.Window：窗口对象

  1. Window：窗口对象
  2.     1. 创建
  3.     2. 方法
  4.          1. 与弹出框有关的方法：
  5.             alert()	显示带有一段消息和一个确认按钮的警告框。
  6.             confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
  7.                 * 如果用户点击确定按钮，则方法返回true
  8.                 * 如果用户点击取消按钮，则方法返回false
  9.             prompt()	显示可提示用户输入的对话框。
  10.                 * 返回值：获取用户输入的值

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6. </head>
  7. <body>
  8. <img id="demo" src="images/d.png">
  9. <script> //弹窗 alert("hello window") //弹窗带确认和取消 confirm("您确定要退出吗") //弹窗带输入框 let str = prompt("请输入用户名") //获取输入框内容并且弹出 alert(str) </script>
  10. </body>
  11. </html>

效果

  1. 与打开关闭有关的方法：
  2.             close()	关闭浏览器窗口。
  3.                 * 谁调用我 ，我关谁
  4.             open()	打开一个新的浏览器窗口
  5.                 * 返回新的Window对象

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6. </head>
  7. <body>
  8. <input id="open" type="button" value="打开百度">
  9. <input id="close" type="button" value="关闭百度">
  10. <script> //通过id获取按钮元素 let demo = document.getElementById("open") //定义新弹窗对象 var newWindow //绑定单击事件 demo.onclick=function (){ //单击事件对应的操作 newWindow=open("https://www.baidu.com/") } //通过id获取关闭按钮元素 let demo2 = document.getElementById("close") //绑定单击事件 demo2.onclick=function (){ //关闭新窗口 newWindow.close() } </script>
  11. </body>
  12. </html>

效果

  1. 与定时器有关的方式
  2.             setTimeout()	在指定的毫秒数后调用函数或计算表达式。
  3.                 * 参数：
  4.                     1. js代码或者方法对象
  5.                     2. 毫秒值
  6.                 * 返回值：唯一标识，用于取消定时器
  7.             clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
  9.             setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
  10.             clearInterval()	取消由 setInterval() 设置的 timeout。

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6. </head>
  7. <body>
  8. <script> //一次性定时器 let id1=setTimeout("fun()",3000) //定义定时器对应函数 function fun(){ alert("boom~~") } //取消定时器 //clearTimeout(id1) //循环定时器 let id2=setInterval(fun,2000) //取消定时器 clearInterval(id2) </script>
  9. </body>
  10. </html>

效果

  1. 属性
  2.         1. 获取其他BOM对象：
  3.             history
  4.             location
  5.             Navigator
  6.             Screen:
  7.         2. 获取DOM对象
  8.             document

注意

  • Window对象不需要创建可以直接使用 window使用。 window.方法名();
  • window引用可以省略。 方法名();

2.Location地址栏对象

  1. 1. 创建(获取)：
  2. 		1. window.location
  3. 		2. location
  5. 	2. 方法：
  6. 		* reload()	重新加载当前文档。刷新
  7. 	3. 属性
  8. 		* href	设置或返回完整的 URL。

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6. </head>
  7. <body>
  8. <input type="button" id="btn" value="刷新">
  9. <input type="button" id="btn2" value="我的博客">
  10. <script> //reload刷新页面 let btn = document.getElementById("btn") //给btn绑定单击事件 btn.onclick=function (){ //刷新页面 location.reload() } //获取href let href = location.href //弹出获取的内容 alert(href) //跳转 let btn2 = document.getElementById("btn2") //给btn2绑定单击事件 btn2.onclick=function (){ //跳转链接 location.href="https://blog.csdn.net/qq_50216270" } </script>
  11. </body>
  12. </html>

效果

自动跳转demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6.     //设置样式
  7.     <style> //设置p标签样式 p{ text-align: center; } //设置span标签样式 span{ color: red; } </style>
  8. </head>
  9. <body>
  10.     <p>
  11.         <span id="time">5</span>秒之后，自动跳转到首页。。。
  12.     </p>
  13.     <script> //设置倒计时秒数 var second=5 //设置倒计时函数 function showTime(){ //每次进入函数都将时间减1s second--; //当时间减完后自动跳转 if(second<=0){ location.href="https://www.baidu.com/" } //根据id获取span标签内容 let time=document.getElementById("time") //用innerHTML更改span内容 time.innerHTML=second+"" } //绑定循环函数，每1s调用一遍函数 setInterval(showTime,1000) </script>
  14. </body>
  15. </html>

3.History：历史记录对象

  1. 1. 创建(获取)：
  2.         1. window.history
  3.         2. history
  5.     2. 方法：
  6.         * back()	加载 history 列表中的前一个 URL。
  7.         * forward()	加载 history 列表中的下一个 URL。
  8.         * go(参数)	加载 history 列表中的某个具体页面。
  9.             * 参数：
  10.                 * 正数：前进几个历史记录
  11.                 * 负数：后退几个历史记录
  12.     3. 属性：
  13.         * length	返回当前窗口历史列表中的 URL 数量。

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>demo</title>
  6. </head>
  7. <body>
  8.     <input type="button" id="btn" value="获取历史记录">
  9.     <input type="button" id="forward" value="前进">
  10.     <input type="button" id="back" value="后退">
  11.     <script> //通过id获取按钮元素 let btn = document.getElementById("btn") //绑定单击事件的同时获取历史记录长度 let length=btn.onclick=history.length //弹出历史记录长度 alert(length) //根据id获取前进按钮元素 let forward = document.getElementById("forward") //绑定单击事件 forward.onclick=function (){ //调用前进函数 history.forward() //这里和go函数里面传参数1的用法是一样的 //==history.go(1) } //根据id获取back按钮元素 let back = document.getElementById("back") //绑定单击事件 back.onclick=function (){ //调用回退函数 history.back() //这里和go函数里面传参数-1的用法是一样的 //==history.go(-1) } </script>
  12. </body>
  13. </html>

效果

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/qq_50216270/article/details/117931765

内容来源于网络，如有侵权，请联系作者删除！

JavaJavaScriptJs

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com