BOM编程

BOM全称 Browser Object Model，浏览器对象模型。

JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。

为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

1、window对象

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

/* javascript组成部分：

EMCAScript（基本语法）

BOM( Browser Object Model) 浏览器对象模型.

浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要

操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。

window 代表了一个新开的窗口

location 代表了地址栏对象。

screen 代表了整个屏幕的对象

window对象常用的方法：

open() 打开一个新的窗口。

resizeTo() 将窗口的大小更改为指定的宽度和高度值。 moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

moveBy() 相对于原来的窗口移动指定的x、y值。

setInterval() 每经过指定毫秒值后就会执行指定的代码。

clearInterval() 根据一个任务的ID取消的定时任务。

setTimeout() 经过指定毫秒值后执行指定的代码一次。

注意：使用window对象的任何属性与方法都可以省略window对象不写的。*/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" onclick="showAd()" value="open" />
        
        <input type="button" onclick="resizeToTest()" value="resize" />
        
        <input type="button" onclick="moveToTest()" value="moveTo" />
        
        <input type="button" onclick="moveByTest()" value="moveBy" />
        
        <!--<input type="button" onclick="setIntervalTest()" value="setInterval" />-->
    
        <input type="button" onclick="clearIntervalTest()" value="clearInterval" />
    </body>
    <script type="text/javascript">
    function showAd(){
        window.open("ad.html");
    }
    function resizeToTest(){
        window.resizeTo(400,400);
    }
    
    function moveToTest(){
        window.moveTo(600,300);
        
    }
    
    function moveByTest(){
        
        window.moveBy(0,50);
        
    }
    
    function setIntervalTest(){
        window.open("ad.html");
    }
    
    
    //var id=window.setInterval("setIntervalTest()",3000);    
    function clearIntervalTest(){
        window.clearInterval(id);
    }
    
    window.setTimeout("setIntervalTest()",3000)    
    </script>
</html>

2、事件的加载

基本上所有的HTML元素中都可以指定事件属性。

每个元素支持什么样事件应查询文档。

所有的事件属性都是以on开头，后面的是事件的触发方式.

注册事件的方式：

方式一：直接在html元素上注册

/*<body onload="ready()">

function ready() {

alert("body的元素被加载完毕了..");

}

方式二：可以js代码向找到对应的对象再注册。推荐使用。

(注：script标签要写在body标签之后)

var bodyNode = document.getElementById("body");

bodyNode.onload = function() {

alert("body的元素被加载完毕");

}

3、事件

鼠标点击相关：

onclick 在用户用鼠标左键单击对象时触发。

ondblclick 当用户双击对象时触发。

onmousedown 当用户用任何鼠标按钮单击对象时触发。

onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：

onmouseout 当用户将鼠标指针移出对象边界时触发。

onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：

onblur 在对象失去输入焦点时触发。

onfocus 当对象获得焦点时触发。

其他：

onchange 当对象或选中区的内容改变时触发。

onload 在浏览器完成对象的装载后立即触发。

onsubmit 当表单将要被提交时触发。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body onload="onloadTest()">
        <input type="button" value="单击" onclick="onclickTest()" />
        
        <input type="button" value="双击" ondblclick="ondblclickTest()" />
        
        <input type="button" value="点击鼠标" onmousedown="onmousedownTest()" />
        
        <input type="button" value="释放鼠标" onmouseup="onmouseupTest()"/>
        
        <input type="button" value="显示时间" onmousemove="showTime()" onmouseout="hiddenTime()" />
        <span id="span"></span>
        
        用户名:<input type="text"  id="usernName" name="suer" onfocus="infoUser()" onblur="checkUser()"/>
        <span id="user"></span>
        
        城市：<select name="city" onchange="onchangeTest()">
            <option value="zz">-请选择-</option>
            <option value="zz">郑州</option>
            <option value="gy">巩义</option>
        </select>
        
        <form action="ad.html" onsubmit="onsubmitTest()">
            <input type="submit" />
        </form>
    </body>
    <script type="text/javascript">
        function onloadTest(){
            alert("ready");
        }
        
        function onclickTest(){
            alert("单击");
            
        }
        
        function ondblclickTest(){
            alert("双击");
        }
        
        function onmousedownTest(){
            alert("点击鼠标");
        }
        
        function onmouseupTest(){
            alert("释放鼠标");
        }
        
        function showTime(){
            document.getElementById("span").innerHTML=new Date().toLocaleString();
            
            
        }
        function hiddenTime(){
            document.getElementById("span").innerHTML=" ";
            
        }
        
        function infoUser(){
            document.getElementById("user").innerHTML="请输入用户名".fontcolor("green");
        }
        
        function checkUser(){
            if (document.getElementById("usernName").value.length<6) {
                document.getElementById("user").innerHTML="用户名长度必须大于6位".fontcolor("red");
                
            } else{
                document.getElementById("user").innerHTML="用户名合法".fontcolor("green");
                
            }
            
        }
        
        function onchangeTest(){
            alert("当前城市也改变");
        }
        
        
        function onsubmitTest(){
            alert("表单即将要提交");
        }
        
    </script>
</html>

4、location对象

Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。

location中的重要方法：

href属性设置或获取整个 URL 为字符串。

reload() 重新装入当前页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript">
    function showURL(){
        alert(location.href);
    }
    
    function baidu(){
        location.href="http://www.baidu.com"
    }
    
    function refresh(){
        location.reload();
    }
    
    window.setInterval("refresh()",3000);
    
    </script>
    <body>
    <input type="button" onclick="showURL() " value="显示地址栏" />
    
    <span onclick="baidu()">百度一下</span>
    
    </body>
</html>

5、screen对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。

availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。

availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。

height 获取屏幕的垂直分辨率。

width 获取屏幕的水平分辨率。

posted @ 2019-06-26 19:24 勤奋的园阅读(454) 评论(0) 编辑收藏举报

刷新页面返回顶部

勤奋的园

BOM编程

公告