JavaScript——BOM学习

最新推荐文章于 2022-05-27 14:07:05 发布
最新推荐文章于 2022-05-27 14:07:05 发布
阅读量350 收藏 1
点赞数
分类专栏： JavaScript学习笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxg200888/article/details/78164253
版权

BOM基础

BOM（浏览器对象模型），BOM提供了很多对象，用于访问浏览器的功能。

window对象（当前的浏览器窗口）

window对象是BOM的核心，表示浏览器的一个实例。在浏览器中，window对象有双重角色，既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global（全局对象），任何一个对象、变量和函数，都以window作为其Global对象。

window对象方法有如下：
这里写图片描述

全局函数声明

两种方法：

  1. window声明：window.函数名=function( ) { }
  2. 关键字声明：function 函数名( ) { }

window.open()方法

语法：window.open( url , 窗口名称 , 参数字符 )

  1. url：要打开的网站地址

  2. 窗口名称

    • _blank：在新窗口显示目标网页
    • _self：在当前窗口显示目标网页
    • _top：框架网页中在上部窗口中显示目标网页
  3. 参数字符
    这里写图片描述
  4. 例子
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
  function Wopen(){
      window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

  } 
</script>
</head>
<body>
    <input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>

window.close( )方法

语法：window.close( ) 或者 “对象”.close( )

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

window.alert( ) 和window.confirm( )方法

这里写图片描述

  <body>
  <button id="but">点击</button>
  <script type="text/javascript">
      var but=document.getElementById("but");
      but.onclick=function () {
          var result=window.confirm("确定要删除？");
          if(result){
              document.getElementById("but").style.display="none";
          }
      }
  </script>
  </body>

window.prompt( )方法

这里写图片描述

  <script type="text/javascript">
      var message=prompt("请输入您的星座","天蝎座");
      console.log(message);
  </script>

window.setTimeout( )和window.clearTimeout( )

这里写图片描述

这里写图片描述

    <script>
       var fnCall=function(){
          alert("world");
       }
       var timeout1=setTimeout(function(){
          alert("hello");
       },2000)  //延迟两秒调用
       setTimeout(fnCall,5000);//延迟5秒调用
    </script>



    <script>
       var fnCall=function(){
          alert("world");
       }
       var timeout1=setTimeout(function(){
          alert("hello");
       },2000)  //延迟两秒调用
       clearTimeout(timeout1);
    </script>

setInterval（）和clearInterval（）

这里写图片描述

这里写图片描述
1、计时器例子：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定时器</title>
<script type="text/javascript">
  var attime;
  function clock(){
    var time=new Date();          
    attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() ;
    document.getElementById("clock").value = attime;
  }
  var int=setInterval(clock, 1)//设置指定时间内运行
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50"  />
</form>
</body>
</html>

2、时钟停止和开始的控制

  <body>
  <script type="text/javascript">
      function clock(){
          var time=new Date();
          document.getElementById("clock").value = time;
      }
      // 每隔100毫秒调用clock函数，并将返回值赋值给i
      var i=setInterval(clock,100);
      //控制时间开始
      function beginTime() {
          var i=setInterval(clock,100);
      }


  </script>
  </head>
  <body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
    <input type="button" value="Begin" onclick="beginTime() ">
  </form>
  </body>

3、控制打印数字

   // 每隔1秒针num递增一次，直到num的值等于max清除
         var num=1,
            max=10,
            timer=null;
<script>
       function inCreamentNum(){
           console.log(num);   // 1 2 3 10 
           num++;      
           if(num<=max){
              setTimeout(inCreamentNum,1000);
           }else{
              clearTimeout(timer);
           }
       }
       timer=setTimeout(inCreamentNum,1000);
    </script>

Location对象

Location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性也是document对象属性

功能：用于获取或设置窗体的URL，并可以用于解析URL
语法：location.属性或方法

Location对象属性

这里写图片描述

Location对象属性分布

这里写图片描述

Location对象方法

这里写图片描述
这里写图片描述

例子

1、使用location.hash返回顶部
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .box1{height:400px;background:#ccc;}
       .box2{height:600px;background:#666;}
    </style>
</head>
<body>
    <div class="box1" id="top"></div>
    <div class="box2"></div>
    <input type="button" id="btn" value="返回顶部">
    <script>
       //console.log(location.href);
       //console.log(location.hash);//获取url地址后面是否有"#XXX"如www.sohu.com#XXX
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       }
       console.log(location.pathname);
    </script>
</body>
</html>
2、普通用法
//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash ------->"#section1";
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search ------->"?q=javascript";
//将 URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname -------> "www.yahoo.com";
//将 URL 修改为"http://www.yahoo.com/mydir/"
location.pathname -------> "mydir";
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port -------> 8080;
3、location的两个方法
<body>
    <input type="button" value="刷新" id="reload">
    <script>
      /*  setTimeout(function(){
            //location.href='index6.html';
            // window.location='index6.html';
            location.replace("index6.html");
        },1000)*/
         document.getElementById("reload").onclick=function(){
             location.reload(true);
         }
    </script>
</body>

history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的window 对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的 URL。

语法：window.histroy.方法或属性

history对象属性

属性描述
length返回浏览器历史列表中的url数量
使用length属性，当前窗口的浏览历史总长度，代码如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

history对象方法

属性描述
back()加载history列表中前一个url
forward()加载history列表下一个url
go()加载history列表中某个具体的url
返回前一个浏览的页面
  • back()方法，加载 history 列表中的前一个 URL。
语法：window.history.back();

比如，返回前一个浏览的页面，代码如下：
window.history.back();
注意：等同于点击浏览器的倒退按钮。
back()相当于go(-1),代码如下:
window.history.go(-1);
返回下一个浏览的页面
  • forward()方法，加载 history 列表中的下一个 URL。
如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:
window.history.forward();
注意：等价点击前进按钮。
forward()相当于go(1),代码如下:
window.history.go(1);

Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。

这里写图片描述

查看浏览器的名称和版本，代码如下:


<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>
使用userAgent判断使用的是什么浏览器
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>navigator</title>
<script type="text/javascript">
  function validB(){ 
    var u_agent = navigator.userAgent; 
    var B_name="不是想用的主流浏览器!"; 
    if(u_agent.indexOf("Firefox")>-1){ 
        B_name="Firefox"; 
    }else if(u_agent.indexOf("Chrome")>-1){ 
        B_name="Chrome"; 
    }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
        B_name="IE(8-10)";  
    }
        document.write("浏览器:"+B_name+"<br>");
        document.write("u_agent:"+u_agent+"<br>"); 
  } 
</script>
</head>
<body>
  <form>
     <input type="button" value="查看浏览器"   onclick=validB()>
  </form>
</body>
</html>

screen对象

用于获取用户的屏幕信息
语法：window.screen.属性

对象属性

这里写图片描述

屏幕分辨率的高和宽

window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
  document.write( "屏幕宽度："+screen.width+"px<br />" );
  document.write( "屏幕高度："+screen.height+"px<br />" );
</script>
</body>
</html>
屏幕可用高和宽度
  1. screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
  2. screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>屏幕分辨率的高和宽</title>
</head>
<body>
<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>
</body>
</html>
无畏无惧踏雪
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础教程——入门必看篇
10-22
JavaScript是一种广泛...随着学习的深入，你还可以接触到函数、对象、类、模块化等更高级的概念，进一步提升你的JavaScript编程能力。总的来说，JavaScript是一门强大且富有创造性的语言，对于网页开发来说不可或缺。
c认证web进阶dom与bom
最新发布
10-03
ID和CLASS的区别 DOM上 1、DOM结构及节点 2、常用节点获取方法和属性 3、常用的节点属性获取方式 关于图片复制到csdn编译器不识别问题 ...BOM ...1、BOM结构 ...BOM定时器 ...————————————
轻松学习JavaScript十六：JavaScript的BOM学习(一)
life is wonderful
12-13 2240
一window对象概述        BOM的核心对象是Window对象，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每 个打开的窗口，系统都会自动为其创建window对象。所有浏览器都支持window对象，它表示浏览器窗口。所有 JavaScript全局对象、函数以及变量均自动成为 window对象的成员。全局变量是 window对象的属性。全
Javascript之BOM与DOM讲解
xiaohubeiplus的博客
07-04 466
1.Javascript组成 JavaScript的实现包括以下3个部分： 1）核心（ECMAScript）：描述了js的语法和基本对象。 2）文档对象模型 （DOM）：处理网页内容的方法和接口 3）浏览器对象模型（BOM）：与浏览器交互的方法和接口   ECMAScript扩展知识： ① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括
JavaScript学习笔记07 BOM
船长的博客
05-30 258
浏览器对象模型 (BOM) 浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。 Window 尺寸 有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。 对于Internet E
javascript之bom对象学习
Dagonglu的博客
05-16 254
一、BOM概述 BOM = Browser Object Model 浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 windowBOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA, DOM 的标准化组织是 W3C, BOM最初是Netscape 浏览器标准的一部分。 二、window 对象的常见事件 2.1、窗口加载事件 window.onload是窗口（页面）加载事件，当文档内容
JavaScript学习 — BOM
weixin_67614925的博客
05-27 139
文章目录简介window 对象window 对象中的属性window 对象中的方法Date 对象方法总结 简介         浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。 window 对象         wind
Javascript高级编程学习笔记27——BOM1window对象1.docx
07-05
JavaScript高级编程的学习中，BOM（Browser Object Model）占据着重要的地位，因为它使得JavaScript能够与浏览器进行交互。在浏览器环境中，JavaScript的核心语法是ECMAScript，但BOM提供了与浏览器功能交互的一系列...
javascript思维导图
06-29
本文将深入探讨JavaScript中的两个重要概念——DOM（文档对象模型）和BOM（浏览器对象模型），以及JavaScript的基本用法，帮助初学者更好地理解和运用JavaScript。 DOM，全称为Document Object Model，是W3C制定的...
javascript
03-17
8. BOM处理：JavaScript也可以操作浏览器对象模型（BOM），进行页面跳转、窗口大小调整、弹出对话框等操作。 9. AJAX：Asynchronous JavaScript and XML，虽然现在XML已不常用，但AJAX的核心思想——异步数据传输和...
windows对象的属性和方法
weixin_30478923的博客
02-20 217
window对象是所有客户端javascript特性和API的主要接入点。它表示web浏览器的一个窗口或窗体，并且可以用标志符window来引用它。 一. windows对象的属性 1. location--来自Location对象，表示该窗口中当前显示文档的URL。 　　该对象下的其他属性有protocol，host，hostname，port，pathname，search. ...
JsBOM学习
weixin_43433884的博客
10-26 371
BOM browser object model 浏览器对象模型 ①：BOM提供令人独立于内容而与浏览器窗口进行的交互的对象。 ②：BOM主要用于管理窗口与窗口之间的通信，核心对象为windows ③：BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性 ④：BOM缺乏标准。JS的标准化组织是ECMAscript。DOM的标准化组织是W3C。 ⑤：BOM最初是Netscape浏览器标准...
JavaScript BOM
漫长学习路
03-20 2786
JavaScript特性: 交互性 安全性（不可以直接访问本地硬盘） 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关） JavaScript三大核心: 1）核心（ECMAScript）：描述了JS的语法和基本对象。 2）文档对象模型 ☆（DOM）：处理网页内容的方法和接口 3）浏览器对象模型（BOM）：与浏览器交互的方法和接口 B
JavaScript——BOM
哎哟喂露露
06-18 312
JavaScript：                    ECMAScript（核心）                    BOM(浏览器对象模型)                    DOM（文档对象模型）一、BOM的核心——window对象    BOM的核心对象是window，它表示浏览器的一个实例。    在浏览器中，window对象既是JS访问浏览器窗口的一个接口，又是 ECMA...
JavaScript学习—BOM总结
业精于勤，荒于嬉
04-05 390
概念：      BOM（Brower Object Model）即浏览器对象模型，提供了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本等。      BOM由一系列相关对象组成，，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。下图展示了基本的BOM体系结构。     Window对象      BOM的...
jsBOM操作初步学习
King_crazy的博客
09-05 412
1、window对象 （1）弹框方法A、提示框： alert("提示信息"); 没有返回值B、确认框： confirm("提示信息"); 有返回值，点击确认返回true，取消返回false。C、提示框：promtp("提示信息"); 有返回值，点击确认返回输入框内容，取消返回null。（2）方法：open方法 open(url) 例如:open("http://baidu.com");
Web前端-25-JavaScript-BOM
karry_孙二的博客
11-20 183
JavaScript BOM 浏览器对象模型 (BOM)浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性 1.警告框 alert 警告框经常用于确保用户可以得到某些信息。 当警告框出现后，用户需要点击确定按钮才能继续进行操作。...
Javascript（十三）javascript BOM详解
一枝韩独秀的博客
08-08 1602
一、BOM定义 ECMAScript无疑是JavaScript的核心，但是要想在浏览器中使用JavaScript，那么BOM(浏览器对象模型) 才是真正的核心。 BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。 BOM将浏览器中的各个部分转换成了一个一个的对象， 我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为。 二、wo...
javascript 关于Bom的小实例
can_Sunshine的博客
09-25 373
textarea{             width: 400px;             height: 600px;             border:1px solid deeppink;             outline: none;         }         #ul{             background: #f5f5f5;        
JavaScript DOM与BOM学习：动态HTML与元素操作
"JavaScript_2_DOM和BOM1" 这篇资料主要讲述了JavaScript中与DOM（文档对象模型）和BOM（浏览器对象模型）相关的概念和技术，以及如何利用它们来操作和交互HTML页面。课程旨在帮助学习者掌握JavaScript的基础知识，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值