耀极客论坛

 找回密码
 立即注册
查看: 635|回复: 0

JavaScript BOM详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 01:43:07 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了JavaScript BOM,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

1.BOM简介

1.JavaScript由三部分组成

  • ECMAScript核心语法 ES
  • DOM文档对象模型,核心对象是document,用来操作页面文档
  • BOM浏览器对象模型,核心对象是window,用来操作浏览器


2.window对象
名称含义history有关客户访问过的URL信息location有关当前URL信息,子级DOM对象document表示浏览器窗口的HTML文档,字级DOM对象  常用方法:
方法名含义alert(text)显示一个带有提示信息和确定按钮的警告框prompt(text)显示一个带有提示信息,文本输入框,确定和取消按钮的输入框confirm(text)显示一个带有提示信息,确定和取消按钮的确认框,确认返回true,取消返回falseopen(url,name,options)打开具有指定名称的新窗口,并加载给定url所指定的文档setTimeout(fn,delay)设置一次性定时器,在指定毫秒值后执行某个函数setlnterval(fn,delay)设置周期性定时器,周期性循环执行某个函数cleatTimeout(timer)清除一次性定时器cleatlnterval(timer)清除一次性定时器scrollTo(xpos,ypos)把内容滚动到指定坐标,即设置滚动条的偏移位置scrollBy(xnum,ynum)把内容滚动指定的像素数,即设置滚动条的偏移量  open 打开指定窗口
  1. ‹script>
  2.         function f1() {
  3.             //这里不是css样式,这个打开窗口大小是可以调整的
  4.             open('test.html', 'user', 'width=500px,height=500px')
  5.         }
  6.     ‹/script>
  7. ‹/head>
  8. ‹body>
  9.     ‹button >打开一个新窗口‹/button>
  10. ‹/body>
复制代码
  setTimeout(fn,delay)
  1.   ‹script>
  2.         function f1() {
  3.             //这里不是css样式,这个打开窗口大小是可以调整的
  4.             open('test.html', 'user', 'width=500px,height=500px')
  5.         }
  6.         function f2() {
  7.             setTimeout(f1, 2000)
  8.         }
  9.     ‹/script>
  10. ‹/head>
  11. ‹body>
  12.     ‹button >一次性计时器‹/button>
  13. ‹/body>
复制代码
  cleatTimeout(timer)
  关闭一次性计时器,在未执行的时间范围内
  1. ```javascript
  2. ‹script>
  3.         function f1() {
  4.             //这里不是css样式,这个打开窗口大小是可以调整的
  5.             open('test.html', 'user', 'width=500px,height=500px')
  6.         }
  7.     ‹/script>
  8. ‹/head>
  9. ‹body>
  10.     ‹button >打开一个新窗口‹/button>
  11. ‹/body>
复制代码
  setTimeout(fn,delay)
  1.   ‹script>
  2.         function f1() {
  3.             //这里不是css样式,这个打开窗口大小是可以调整的
  4.             open('test.html', 'user', 'width=500px,height=500px')
  5.         }
  6.         var timer
  7.         function f2() {
  8.             timer = setTimeout(f1, 2000)
  9.         }
  10.         function f3(){
  11. clearTimerout(timer)
  12. }
  13.     ‹/script>
  14. ‹/head>
  15. ‹body>
  16.     ‹button >一次性计时器‹/button>
  17.     ‹button >关闭一次性计时器‹/button>
  18. ‹/body>
复制代码
  scrollTo(xpos,ypos)
  动到指定位置
  1. ‹script>
  2.         function f1() {
  3.             scrollTo(0, 100) //单位为px
  4.         }
  5.     ‹/script>
复制代码
  常用事件
时间名含义onclick鼠标点击onload页面加载完成onscroll窗口滚动条滑动  注:由于window对象是BOM结构的顶层对象,所以在调用window属性和方法可以省略window
  1. ‹script>
  2. //点击窗口后执行
  3.         window.onclick = function() {
  4.             console.log(111)
  5.         }
  6.     ‹/script>
复制代码
3.location对象
  常用属性
  href 设置或返货地址栏中的url
  常用方法reload() 重新加载当前页
  1.     ‹script>
  2.         function getUrl() {
  3.             //获取地址栏中的url
  4.             console.log(location.href)
  5.                 //设置地址栏中的url,实现页面的跳转
  6.                 //location = 'https://www.baidu.com'
  7.             location.href = 'https://www.baidu.com'
  8.             //重新加载页面
  9.             location.reload();
  10.         }
  11.     ‹/script>
  12. ‹/head>
  13. ‹body>
  14.     ‹button >获取url‹/button>
  15. ‹/body>
复制代码
4.history对象
方法名含义back()后退,加载history列表中的上一个urlforword()前进,加载history列表中的下一个urlgo(number)浏览器移动指定的页面数
  1.   ‹script>
  2.         function goBack() {
  3.             history.back()
  4.         }
  5.         function goforward() {
  6.             history.forward()
  7.         }
  8.         function goGo() {
  9.             history.go(1) //前进一个
  10.         }
  11.     ‹/script>
  12. ‹/head>
  13. ‹body>
  14.     ‹button >后退‹/button>
  15.     ‹button >前进‹/button>
  16. ‹/body>
复制代码
总结
  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:33 , Processed in 0.064332 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表