BOM編程

時間 2019-11-11

標籤 bom 編程简体版

原文原文鏈接

BOM全稱 Browser Object Model，瀏覽器對象模型。javascript

JavaScript是由瀏覽器中內置的javascript腳本解釋器程序來執行javascript腳本語言的。html

爲了便於對瀏覽器的操做，javascript封裝了對瀏覽器的各個對象使得開發者能夠方便的操做瀏覽器。java

一、window對象瀏覽器

Window 對象是 JavaScript 層級中的頂層對象。框架

Window 對象表明一個瀏覽器窗口或一個框架。spa

Window 對象會在 <body> 或 <frameset> 每次出現時被自動建立。指針

/* javascript組成部分：code

EMCAScript（基本語法）orm

BOM( Browser Object Model) 瀏覽器對象模型.htm

瀏覽器對象模型中把瀏覽器的各個部分都是用了一個對象進行描述，若是咱們要

操做瀏覽器的一些屬性，我就能夠經過瀏覽器對象模型的對象進行操做。

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>

二、事件的加載

基本上全部的HTML元素中均可以指定事件屬性。

每一個元素支持什麼樣事件應查詢文檔。

全部的事件屬性都是以on開頭，後面的是事件的觸發方式.

註冊事件的方式：

方式一：直接在html元素上註冊

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

function ready() {

alert("body的元素被加載完畢了..");

}

方式二：能夠js代碼向找到對應的對象再註冊。推薦使用。

(注：script標籤要寫在body標籤以後)

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

bodyNode.onload = function() {

alert("body的元素被加載完畢");

}

三、事件

鼠標點擊相關：

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>

四、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>