您的位置 首页 java

Java编程都学什么?关于JavaScript之BOM对象的知识整理

来源:升学就业帮讲师——肖云锐

BOM对象学习网站:

学习网站

1 认识BOM对象

1.1 什么是BOM

BOM是Browser Object Model的简写,即浏览器对象模型。

BOM由一系列对象组成,用于访问、控制、修改浏览器的属性和方法。

BOM没有统一的标准(每种客户端(IE/ google 浏览器)都可以自定标准。

1.2 理解示意图

BOM的顶层是window对象,window下面包含一些浏览器相关对象,例如文档对象document,地址栏对象location,导航对象navigation,屏幕对象screen,历史记录对象history,如下图所示:

1.3 Window对象

常用的方法:

  alert (); // 弹出一个提示框.
 confirm ()// 弹出一个确认框
prompt(); // 输入框
setTimeout(); // 延时任务
setInterval(); // 周期任务
clearTimeout(); // 清除延时任务
clearInterval(); // 清除周期任务
 open (); // 打开新的窗口
close(); // 关闭指定窗口  

代码示例:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>BOM对象</title>    
<script>
        /* 
            alert(); // 弹出一个提示框.
            confirm()// 弹出一个确认框
            prompt(); // 输入框
            setTimeout(); // 延时任务
            setInterval(); // 周期任务
            clearTimeout(); // 清除延时任务
            clearInterval(); // 清除周期任务
            open(); // 打开新的窗口
            close(); // 关闭指定窗口
         */
        // alert(); 弹出一个提示框.
        function poupWindow() {
            alert("我被点击了");
        }
  
      // confirm() 弹出一个确认框
        function confirmWindow() {
            var flag = confirm("确定删除吗?");
            if (flag) {
                alert("删除成功!!!");
            } else {
                alert("取消!!!");
            }
        }
        // prompt(); 输入框
        function promptWindow() {
            var age = prompt("请输入您的年龄:", 18);
            alert("您输入的年龄是: " + age);
        }
        var taskId = null;
        // setTimeout(); 延时任务
        function task() {
            alert("任务开始了!!!");
        }
        function startTask() {
            id = setTimeout(task, 3000);
        }
        // clearTimeout() 清除延时任务
        function stopTask() {
            clearTimeout(id);
        }
        var intervalId = 0;
        // setInterval();
 // 周期任务        function startIntervalTask() {
                if (intervalId == 0) {
                    intervalId = setInterval(function () {
                        var date = new Date();
                        var hour = date.getHours();
                        var minute = date.getMinutes();
                        var second = date.getSeconds();                        console.log(hour + ": " + minute + ": " + second);
                    }, 1000); 
        
       } 
           }    
    function stopIntervalTask() {
            if(intervalId != 0) {  
              clearInterval(intervalId);  
              intervalId = 0;
            }  
                 } 
       var bdWin = null;
        // open(); 
// 打开新的窗口
        function openWindow() {
            var url = "#34;;
            bdWin = open(url);
        }
        // close(); // 关闭指定窗口
        function closeWindow() {
            bdWin.close();
        }
    </script>
</head>
<body>
    <input type="button" value="弹出框" onclick="poupWindow();"> <br>
    <input type="button" value="验证框" onclick="confirmWindow();"> <br>
    <input type="button" value="提示框" onclick="promptWindow();"> <br>
    <input type="button" value="提示框" onclick="promptWindow();"> <br>
    <input type="button" value="开启延时任务" onclick="startTask();"> <br>
    <input type="button" value="停止延时任务" onclick="stopTask();"> <br>
    <input type="button" value="开始周期任务" onclick="startIntervalTask();"> <br>
    <input type="button" value="停止周期任务" onclick="stopIntervalTask();"> <br>
    <input type="button" value="开启窗口" onclick="openWindow();"> <br>
    <input type="button" value="关闭窗口" onclick="closeWindow();"> <br>
</body>
</html>  

1.4 History对象:浏览器的历史对象

常用的方法

back()go()forward()

需求: A页面跳转到B页面,B页面后退到A页面,A页面前进到B页面

代码示例

A页面代码如下:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A</title>
    <script>
        function go() {
            location.href = "B.html"; 
       }      
  function forward() {
             history .forward();
        }
    </script>
</head>
<body>
    A Page
    <input type="button" value="go" onclick="go()"> 
   <input type="button" value="前进" onclick="forward()">
</body>
</html>
B页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>history对象</title> 
   <script>   
     function goback() {   
         history.back();
        }  
  </script>
</head>
<body> 
   B page
    <input type="button" value="后退" onclick="goback()">
</body>
</html>  

1.5 location对象: 地址栏对象

常用属性和方法:

host:ip:端口hostname: ipport:端口pathname:路径href: url全路径reload: 重新加载当前页面replace: 替换当前页面location.href = url: 跳转到指定页面

代码示例:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <title>BOM对象_location对象</title>
    <script> 
       function showLocationInfo() { 
           console.log(location.href);
            console.log(location.host);
            console.log(location.port);
            console.log(location.hostname);
console.log(location.pathname);
        }  
      function reloadCurrentPage() { 
           location.reload();
        }      
  function replaceCurrentPage() {
            location.replace("#34;);  
      }    
    function jumpPage() {    
        location.href = "#34;; 
       }
    </script>
    </head>
<body>   
 <input type="button" value="locationInfo" onclick="showLocationInfo()">
    <input type="button" value="reloadCurrentPage" onclick="reloadCurrentPage()">
    <input type="button" value="replaceCurrentPage" onclick="replaceCurrentPage()">
    <input type="button" value="jumpPage" onclick="jumpPage()">
</body>
</html>  

1.6 Screen对象:屏幕对象

常用属性:

widthheight

1.7 Navigator 对象:浏览器对象

常用属性:无

示例代码

 <!DOCTYPE html>
<html lang="en">
<head> 
   <meta charset="UTF-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">   
 <title>其他BOM对象</title>
    <script>
        function getScreenInfo() {  
          console.log(screen.width + ":" + screen.height);
        }  
      function getNavigatorInfo() {
            console.log(navigator.appName);  
          console.log(navigator.appVersion);   
         console.log(navigator.userAgent);  
      } 
   </script>
</head>
<body> 
   <input type="button" value="screen对象" onclick="getScreenInfo();">
    <input type="button" value="navigator对象" onclick="getNavigatorInfo();">
</body>
</html>  

文章来源:智云一二三科技

文章标题:Java编程都学什么?关于JavaScript之BOM对象的知识整理

文章地址:https://www.zhihuclub.com/191261.shtml

关于作者: 智云科技

热门文章

发表回复

您的电子邮箱地址不会被公开。

2条评论

  1. Hi there, I enjoy reading all of your article. I wanted to
    write a little comment to support you.

  2. https://dagathomo123.com/dagathomo-bo-tui-3-kinh-nghiem-chon-ga-mai-choi-duc-giong-tot-nhat-hien-nay/说道:

    I know this if off topic but I’m looking into starting my own blog and
    was wondering what all is required to get setup? I’m assuming
    having a blog like yours would cost a pretty penny?

    I’m not very web smart so I’m not 100% sure. Any tips or advice would be greatly appreciated.
    Appreciate it

网站地图