javascript中bom的作用是什么

本篇文章為大家展示了javascript中bom的作用是什么，內(nèi)容簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司成立于2013年，我們提供高端重慶網(wǎng)站建設(shè)公司、成都網(wǎng)站制作公司、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、營銷型網(wǎng)站建設(shè)、小程序設(shè)計(jì)、微信公眾號(hào)開發(fā)、seo優(yōu)化服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地，為成都茶樓設(shè)計(jì)企業(yè)提供源源不斷的流量和訂單咨詢。

在javascript中，BOM指的是瀏覽器對(duì)象模型（Browser Object Model），它提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象，主要用于管理窗口與窗口之間的通訊，其核心對(duì)象是window。

一、什么是BOM

BOM（Browser Object Model）即瀏覽器對(duì)象模型。
BOM提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象；
由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對(duì)象是window；
BOM由一系列相關(guān)的對(duì)象構(gòu)成，并且每個(gè)對(duì)象都提供了很多方法與屬性；
BOM缺乏標(biāo)準(zhǔn)，JavaScript語法的標(biāo)準(zhǔn)化組織是ECMA，DOM的標(biāo)準(zhǔn)化組織是W3C，BOM最初是Netscape瀏覽器標(biāo)準(zhǔn)的一部分。

二、學(xué)習(xí)BOM學(xué)什么

我們將學(xué)到與瀏覽器窗口交互的一些對(duì)象，例如可以移動(dòng)、調(diào)整瀏覽器大小的window對(duì)象，可以用于導(dǎo)航的location對(duì)象與history對(duì)象，可以獲取瀏覽器、操作系統(tǒng)與用戶屏幕信息的navigator與screen對(duì)象，可以使用document作為訪問HTML文檔的入口，管理框架的frames對(duì)象等。在這里，只介紹一些window對(duì)象等的基礎(chǔ)知識(shí)，其中會(huì)有一些ECMAscript的知識(shí)還會(huì)說明。其他對(duì)象Location、Screen、Navigator、History不一一詳細(xì)介紹了。。

BOM結(jié)構(gòu)圖

javascript中bom的作用是什么

三、window對(duì)象

window對(duì)象是js中的頂級(jí)對(duì)象，所有定義在全局作用域中的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法，在調(diào)用的時(shí)候可以省略window。

例：

打開窗口

window.open(url,target,param);
// url 要打開的地址
//target  新窗口的位置   _blank  _self  _parent(父框架)
//param  新窗口的一些設(shè)置
//返回值，新窗口的句柄

關(guān)閉窗口：

window.close();

四、BOM零碎知識(shí)（window對(duì)象）

1.定時(shí)器

延遲執(zhí)行

setTimeout( [string | function] code, interval);
clearTimeout([number] intervalId);

<body>
<input type="button" value="closeTimerId" id="btn">
<script>
    var btn = document.getElementById("btn");
    var timerId = setTimeout(function () {
        alert("23333");
    }, 3000);
    btn.onclick = function () {     //在設(shè)置的時(shí)間之前（3s內(nèi)）點(diǎn)擊可以取消定時(shí)器
        clearTimeout(timerId);
    }
</script>
</body>

定時(shí)執(zhí)行

var timerId = setInterval(code, interval);
clearInterval(timerId);     //清除定時(shí)器

倒計(jì)時(shí)案例：

<body>
<input type="button" value="倒計(jì)時(shí)開始10" id="btn" disabled/>
<script>
    var btn = document.getElementById("btn");
    var num = 10;
    var timerId = setInterval(function () {
        num--;
        btn.value = "到時(shí)器開始" + num;
        if (num == 0) {
            clearInterval(timerId);
            btn.disabled = false;
            btn.value = "同意，可以點(diǎn)了";
        }
    },1000);
</script>
</body>

2.offset系列方法

offsetWidth和offsetHeight	offsetHeight的構(gòu)成	offsetHeight = height + padding + border offsetWidth相同
	offsetHeight和style.height的區(qū)別	1. demo.style.height只能獲取行內(nèi)樣式，否則無法獲取到 2. .style.height是字符串（有單位px）， offsetHeight是數(shù)值（無單位） 3. .style.height可以設(shè)置行內(nèi)樣式，但offsetHeight是只讀屬性，不可設(shè)置所以：demo.style.height獲取某元素的真實(shí)高度/寬度，用.style.height來設(shè)置高度/寬度
offsetLeft和offsetTop	offsetLeft的構(gòu)成	1，到距離自身最近的（帶有定位的）父元素的左側(cè)/頂部 2，如果所有父級(jí)元素都沒有定位，則以body為準(zhǔn) 3，offsetLeft是自身border左側(cè)到父級(jí)padding左側(cè)的距離
	offsetLeft和style.left的區(qū)別	1，style.left只能獲取行內(nèi)樣式 2，offsetLeft只讀，style.left可讀可寫 3，offsetLeft是數(shù)值，style.left是字符串并且有單位px 4，如果沒有定位，style.left獲取的數(shù)值可能是無效的 5，最大的區(qū)別：offsetLeft以border左上角為基準(zhǔn)， style.left以margin左上角為基準(zhǔn)
offsetParent	構(gòu)成	1. 返回該對(duì)象距離最近的帶有定位的父級(jí)元素 2. 如果當(dāng)前元素的所有父級(jí)元素都沒有定位（position為absolute或relative），那么offsetParent為body 3. offsetLeft獲取的就是相對(duì)于offsetParent的距離
	與parentNode的區(qū)別	parentNode始終指向的是當(dāng)前元素的最近的父元素，無論定位與否

offset示意圖

javascript中bom的作用是什么

3.scroll系列方法

scrollHeight和scrollWidth	對(duì)象內(nèi)部的實(shí)際內(nèi)容的高度/寬度（不包括border）
scrollTop和scrollLeft	被卷去部分的頂部/左側(cè) 到可視區(qū)域頂部/左側(cè) 的距離
onscroll事件	滾動(dòng)條滾動(dòng)觸發(fā)的事件
頁面滾動(dòng)坐標(biāo)	var scrollTop = window.pageYoffset \|\| document.documentElement.scrollTop \|\| document.body.scrollTop \|\| 0;

scroll示意圖

javascript中bom的作用是什么

4.client系列

clientX和clientY 獲取鼠標(biāo)在可視區(qū)域的位置 clientX = width + padding，clientY = height + padding

clientLeft 邊框的寬度，若有滾動(dòng)條的話，包括滾動(dòng)條

client示意圖

javascript中bom的作用是什么

例：獲得頁面可視區(qū)域的大小

function client() {
            return {
                        clientWidth: window.innerWidth || document.body.clientWidth || document.documentElement.clientWidth || 0;
                        clientHeight: window.innerHeight || document.body.clientHeitght || document.documentElement.clientHeight || 0;
            };
}

5.事件參數(shù)e

當(dāng)事件發(fā)生的時(shí)候，系統(tǒng)會(huì)自動(dòng)的給事件處理函數(shù)傳遞一個(gè)參數(shù)，會(huì)提供事件相關(guān)的一些數(shù)據(jù)，事件參數(shù)e瀏覽器的兼容性檢測: e = e || window.event

e.pageX和e.pageY

獲取鼠標(biāo)在頁面中的位置（IE8中不支持pageX和pageY，支持window.event獲取參數(shù)事件）

pageX = clientX + 頁面滾動(dòng)出去的距離

6.獲得計(jì)算后樣式的方法

w3c標(biāo)準(zhǔn)

window.get ComputedStyle(element, null)[屬性]

IE瀏覽器

element.currentStyle[屬性]

封裝瀏覽器兼容性函數(shù)

function getStyle(element, attr) {

if(window.getComputedStyle) {

return window.getComputedStyle(element, null)[attr];

} else {

return element.currentStyle[attr];

}

7.事件補(bǔ)充

注冊(cè)事件
注冊(cè)事件的性能問題
移除事件
事件冒泡
事件捕獲事件的三個(gè)階段
事件對(duì)象的常見屬性

DOM筆記里有提到注冊(cè)事件和移除事件，這里著重講事件對(duì)象，事件對(duì)象的常見屬性

7.1 target 和currentTarget

target	始終是點(diǎn)擊的元素（IE8及之前是srcElement）
currentTarget	執(zhí)行事件處理函數(shù)的元素
this	始終和currentTarget一樣

7.2 事件冒泡

用addEventListener注冊(cè)事件的時(shí)候，第三個(gè)參數(shù)是false，即是冒泡。

冒泡的好處 - 事件委托

從一個(gè)例子中說明

<body>
<ul id="ul">
    <li>我是第1個(gè)li標(biāo)簽</li>
    <li>我是第2個(gè)li標(biāo)簽</li>
    <li>我是第3個(gè)li標(biāo)簽</li>
    <li>我是第4個(gè)li標(biāo)簽</li>
</ul>
<input type="button" value="insertLi" id="btn">
<script>
    var ul = document.getElementById("ul");
    var btn = document.getElementById("btn");
//把本來應(yīng)該給li注冊(cè)的事件，委托給ul，只需要給一個(gè)元素注冊(cè)事件
//動(dòng)態(tài)創(chuàng)建的li，也會(huì)執(zhí)行預(yù)期的效果
    ul.addEventListener("click", test, false);     //注冊(cè)點(diǎn)擊事件
    btn.onclick = function () {     //點(diǎn)擊同樣會(huì)有alert
        var li = document.createElement("li");
        li.innerHTML = "我是新插入的li標(biāo)簽";
        ul.appendChild(li);
    };
//函數(shù)寫在注冊(cè)事件代碼之外，提高性能
    function test(e) {
        alert(e.target.innerText);
    }
</script>
</body>

當(dāng)事件冒泡影響到了其他功能的實(shí)現(xiàn)時(shí)，需要阻止冒泡

e.stopPropagation( )

IE8及之前： event.cancleBubble = true;

阻止默認(rèn)行為的執(zhí)行

e.preventDefault()

IE8及之前： event.returnValue = false；

看一下阻止跳轉(zhuǎn)到百度的例子：

<body>
    <a href="http://www.baidu.com" id="link">百度</a>
<script>
    var link = document.getElementById("link");
    link.addEventListener("click", fn, false);
    function fn(e) {
        e.preventDefault();
        //若用return false; 不起作用，若用link.onclick = function();return false可以阻止
    }
</script>
</body>

7.3 鼠標(biāo)事件的參數(shù)

e.type	事件的類型，如click，mouseover
事件的3個(gè)階段	1 捕獲階段 2 目標(biāo)階段 3 冒泡階段
e.eventPhase	事件階段
shiftKey/ctrlKey/altKey	按下鼠標(biāo)同時(shí)按下組合鍵
button	獲取鼠標(biāo)的按鍵
e.clientX和e.clientY	獲取鼠標(biāo)在可視區(qū)域的位置

還有7.2中的取消事件冒泡和阻止默認(rèn)行為的執(zhí)行

8.正則表達(dá)式

定義：

正則表達(dá)式是對(duì)字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個(gè)“規(guī)則字符串”，這個(gè)“規(guī)則字符串”用來表達(dá)對(duì)字符串的一種過濾邏輯。

規(guī)則：

1 元字符	. 匹配任何單個(gè)字符，除了換行 d 數(shù)字 \D 非數(shù)字 [0-9] w 數(shù)字字母下劃線 \W 非 [0-9a-zA-Z_] \s 空白 \S 非空白 \n 換行 \t 制表符
2 范圍-- 匹配的是一個(gè)字符	[0-9] [0123] [a-z] [A-Z] 匹配的是一個(gè)字符
3 \| 或者	\| 或者
4 量詞 -只修飾一個(gè)字符	a+ 1個(gè)或多個(gè)a a? 1個(gè)或0個(gè)a a* 0個(gè)或多個(gè)a a{x} x個(gè)n a{x,} 至少x個(gè)a a{x,y} x-y個(gè)a
5 開始結(jié)束	^a 以a開始 a$ 以a結(jié)束
6 ( ) 看成是一個(gè)整體，即分組
7 匹配漢字	[\u4e00-\u9fa5]
8 參數(shù)	i 忽略大小寫 g 全局匹配
9 ^在[ ]中的作用——取反
10 貪婪模式和非貪婪模式	默認(rèn)情況貪婪模式 <.+> 非貪婪模式 <.+?>

8.1 正則表達(dá)式對(duì)象RegExp

<body>
    <a href="http://www.baidu.com" id="link">百度</a>
<script>
//    var regularExpression =  new RegExp("\\d");     //第一種寫法
    var regularExpression = /\d/;     //第二種寫法
    var str = "adfj23dald";
    console.log(regularExpression.test(str));     //test就是匹配方法，結(jié)果是true
</script>
</body>

8.2 正則之匹配

例：驗(yàn)證電子郵箱

//驗(yàn)證電子郵箱
    // abc@sohu.com
    // 11111@qq.com
    // aaaaa@163.com
    // abc@sina.com.cn 
     var reg = /^\w+@\w+\.\w+(\.\w+)?$/;
     var str = "abc@sina.com.cn";
     console.log(reg.test(str));

8.3 正則之提取

例：找數(shù)字

 var str = "張三: 1000，李四：5000，王五：8000。";
 var reg = /\d+/g;
 //默認(rèn)情況下，找到第一個(gè)匹配的結(jié)果就返回，后面加個(gè)g，就是全局找
  var arr = str.match(reg);
 console.log(arr);

8.4 正則之替換

例：所有的逗號(hào)替換成句號(hào)

var str = "abc,efg,123,abc,123,a";
str = str.replace(/,/g,".");
console.log(str);

8.5 正則的分組( )

在正則表達(dá)式中用( )把要分到一組的內(nèi)容括起來，組分別是RegExp.$1 RegExp.$2等等

例：交換位置源字符串"5=a, 6=b, 7=c" 要的結(jié)果"a=5, b=6, c=7"

var str = "5=a, 6=b, 7=c";
str = str.replace(/(\d+)=(\w+)/g, "$2=$1");
console.log(str);

9.鍵盤事件對(duì)象

方法

keydown 按下時(shí)

keypress 按下

keyup 抬起時(shí)

屬性

keyCode 鍵盤碼，只有數(shù)字和字母對(duì)應(yīng)ASCII碼

charCode 對(duì)應(yīng)ASCII碼，只有在keypress中才生效（IE9+）

例：在切換鼠標(biāo)焦點(diǎn)時(shí)，用enter鍵代替tab鍵

<body>
<input type="text"><input type="text"><input id="t1" type="text"><input type="text"><input type="text"><input type="text"><inputtype="text"><input type="text"><input type="text"><input type="text">
<script>
    var inputs = document.body.getElementsByTagName("input");
    for(var i = 0, length = inputs.length; i < length ; i++) {
        var input = inputs[i];
        //回車鍵的keyCode是13
        if(input.type === "text") {
            //按下回車，讓下一個(gè)文本框獲得焦點(diǎn)
            input.onkeydown = function (e) {
                if(e.keyCode === 13) {
                    this.nextElementSibling.focus();//focus() 他觸發(fā)了onfocus事件
                }
            }
        }
    }
</script>
</body>

補(bǔ)充：js中的instanceof運(yùn)算符介紹

判斷某個(gè)變量是不是某種類型的對(duì)象

var num = 5;
var arr = [];
console.log(num instanceof Array);          //false
console.log(arr instanceof Array);            //true

上述內(nèi)容就是javascript中bom的作用是什么，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：javascript中bom的作用是什么
本文鏈接：http://jinyejixie.com/article10/ggisgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、全網(wǎng)營銷推廣、網(wǎng)站排名、微信公眾號(hào)、網(wǎng)站內(nèi)鏈、網(wǎng)頁設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

javascript中bom的作用是什么