|
1.BOM基礎(chǔ) BOM（Browser Object Model）即瀏覽器對象模型 BOM相關(guān)說明： ?、?BOM提供了獨立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對象 ② 由于BOM主要用于管理窗口與窗口之間的通信,，因此其核心對象是 window對象 ?、?nbsp;BOM由一系列相關(guān)對象構(gòu)成，并且每個對象都提供了很多方法與屬性 ?、?nbsp;BOM缺乏一個統(tǒng)一的標(biāo)準(zhǔn) JavaScript語法的標(biāo)準(zhǔn)化組織是ECMA DOM的標(biāo)準(zhǔn)化組織是 W3C（所有瀏覽器公共遵循的標(biāo)準(zhǔn)） BOM是各個瀏覽器廠商根據(jù) DOM在各自瀏覽器上的實現(xiàn),，表現(xiàn)為不同瀏覽器定義有差別，實現(xiàn)方式不同 ?、?nbsp;通常情況下所說的BOM，一般都是指 window對象 BOM與 DOM的區(qū)別與聯(lián)系 ?、?nbsp;DOM通過 document對象訪問,、控制、修改HTML和XHTML等文檔中的內(nèi)容 ?、?nbsp;BOM通過 window對象來訪問,、控制、修改瀏覽器中的內(nèi)容 ?、?nbsp;BOM包含 DOM,，用來訪問瀏覽器的是BOM對象，從 BOM對象可以訪問到 DOM對象,，進(jìn)而操作瀏覽器和讀寫文檔內(nèi)容 ?、?nbsp;BOM描述了處理網(wǎng)頁內(nèi)容的方法和接口（操作頁面內(nèi)部），BOM描述了與瀏覽器進(jìn)行交互的方法和接口（操作頁面之間） 2.window對象 window對象是BOM具象化的表現(xiàn)形式 因為 window對象是 JavaScript中的頂級對象,，所有定義在全局作用域中的變量,、函數(shù)都會變成window對象的屬性和方法， 在調(diào)用的時候可以省略 window,，如下： 打開窗口：window.open(url); 關(guān)閉窗口：window.close(); 獲取事件：window.event; 獲取文檔：window.document; 3.window對象的name屬性 window.name是window對象的一個屬性,，默認(rèn)值為空 特性：window.name值在不同的頁面（甚至不同域名）加載后依舊存在，且可以支持非常長的 name值（2M左右） 應(yīng)用：由于window.name屬性具有在不同頁面保持存在的特性,，出現(xiàn)了一門叫作“跨域傳輸”的技巧,，而這個技巧的內(nèi)部實現(xiàn)原理就是window.name屬性的持久性特性。 <html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域傳輸</title>
</head>
<body>
<script>
var cont=110;
//定義window.name屬性值,，屬性值內(nèi)的變量可以是任何類型的數(shù)據(jù)
window.name='var cont=110;';
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域加載</title>
</head>
<body>
<button>跨域加載</button>
<script>
var btn=document.querySelector('button'); //定義一個觸發(fā)按鈕（非必要）
btn.onclick=function () {
var iframe=document.createElement('iframe'); //創(chuàng)建iframe元素作為加載跨域內(nèi)容的容器
iframe.src = 'test.html'; //通過iframe.src屬性將需要跨域加載的文檔鏈接賦值
iframe.style.display='none'; //隱藏iframe框架的界面顯示
document.body.appendChild(iframe); //將創(chuàng)建的iframe添加至當(dāng)前頁面body中
// 當(dāng)iframe加載完畢后,，意味著“window.name”的內(nèi)容已經(jīng)賦予完畢
iframe.onload=function () {
var iframeContent=event.target.contentWindow.name; //獲取iframe中的window.name屬性內(nèi)容
console.log(iframeContent); //直接獲取過來的window.name屬性值為string形式,，不是可執(zhí)行代碼
eval(iframeContent); //通過“eval()”方法將字符串形式的代碼轉(zhuǎn)換為可執(zhí)行代碼
console.log(cont);
}
}
</script>
</body>
</html>
4.window對象的尺寸屬性 ① 瀏覽器尺寸 window.outerHeight; window.outerWidth; 這兩個屬性返回的是整個瀏覽器的高度和寬度,，與頁面窗口大小沒有任何關(guān)系 ?、?nbsp;頁面窗口尺寸 window.innerHeight; window.innerWidth; 這兩個屬性返回的是視口的高度和寬度（計算滾動條的尺寸），跟隨頁面窗口變化 ?、?nbsp;頁面內(nèi)容尺寸 document.documentElement.clientHeight; document.documentElement.clientWidth; 這兩個屬性返回視口的高度和寬度,，不計算滾動條的尺寸 ④ 頁面滾動距離 window.pageXOffset; window.pageYOffset; 這兩個屬性指的是頁面內(nèi)容發(fā)生滾動的距離,，返回值為“滾動距離” ?、?nbsp;瀏覽器與屏幕距離 window.screenX; window.screenY; 這兩個屬性指的是瀏覽器與屏幕的距離，左上角為各自的（0,0）坐標(biāo)點 5.window.navigator對象 window.navigator對象包含大量有關(guān)Web瀏覽器的信息,，在檢測瀏覽器和操作系統(tǒng)方面非常有用 這個對象和 event一樣是一個全局變量,，并且是唯一的 常用屬性： navigator.appCodeName；瀏覽器代碼名的字符串表示 navigator.appName,；官方瀏覽器名的字符串表示 navigator.appVersion,；瀏覽器版本信息的字符串表示 navigator.cookieEnable；如果啟用cookie返回true,，否則返回false navigator.javaEnable(),；如果啟用java返回true，否則返回false navigator.platform,；瀏覽器所在計算機(jī)平臺的字符串表示 navigator.plugins,；安裝在瀏覽器中的插件數(shù)組 navigator.userAgent；返回和瀏覽器內(nèi)核相關(guān)的信息 如果window.navigator.userAgent返回值出現(xiàn)了Mobile,，則可以確定用戶使用的是移動設(shè)備 6.window對象常用方法 alert(),；顯示帶有一段消息和一個確認(rèn)按鈕的提示框 prompt()；顯示可提示用戶輸入的對話框 confirm(),；顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框 open(),；打開一個新的瀏覽器窗口或查找一個已命名的窗口 close()；關(guān)閉瀏覽器窗口 print(),；打印當(dāng)前窗口的內(nèi)容 focus(),；把鍵盤焦點給予一個窗口 blur()；把鍵盤焦點從頂層窗口移開 moveBy(),；可相對窗口當(dāng)前坐標(biāo)移動指定的距離(像素) moveTo(),；把窗口的左上角移動到指定的坐標(biāo)位置 resizeBy()；按照指定的像素尺寸調(diào)整窗口大小 resizeTo(),；將窗口的大小調(diào)整到指定的寬度和高度 scrollBy(),；按照指定的像素值滾動頁面內(nèi)容 scrollTo()；把頁面內(nèi)容滾動到指定的坐標(biāo)位置 setInterval(),；每隔指定的時間執(zhí)行代碼 setTimeOut(),；在指定的延遲時間后執(zhí)行代碼 clearInterval(),；取消 setInterval設(shè)置 clearTimeOut()；取消 setTimeOut設(shè)置 7.提示框 ?、?nbsp;alert (),， 表示警示框，主要用于提示用戶信息,，該方法執(zhí)行后無返回值 語法：window.alert(' alertMsg'); //無返回值所以console.log(alert(''));結(jié)果為 undefined alert()方法彈出的對話框是模態(tài)對話框,，在對話框關(guān)閉之前程序暫停，直到關(guān)閉后才繼續(xù)執(zhí)行 ?、?nbsp;prompt (),， 表示警示框，主要用于提示并收集用戶信息,，該方法執(zhí)行后根據(jù)情況不同返回值略有不同 語法：window.prompt ('alertMsg', 'defaultMsg'); 點擊取消時,，返回值為 null 沒有設(shè)置默認(rèn)值（defaultMsg）時， 如果用戶沒有輸入內(nèi)容,，確認(rèn)后返回一個空字符串,，取消后返回null 如果用戶輸入了內(nèi)容，返回值為用戶輸入的內(nèi)容 設(shè)置了默認(rèn)值（defaultMsg）時,， 如果用戶沒有輸入內(nèi)容,，則確認(rèn)后返回默認(rèn)值 如果用戶輸入了內(nèi)容，返回值為用戶輸入的內(nèi)容 同樣,，prompt()方法也是模態(tài)對話框，在對話框關(guān)閉之前程序暫停,，直到關(guān)閉后才繼續(xù)執(zhí)行 ?、?nbsp;confirm()， 表示警示框,，主要用于提示用戶確認(rèn)信息,，點擊確認(rèn)返回 true，點擊取消返回 false 語法：window.confirm(' alertMsg '); 同樣,，confirm()方法也是模態(tài)對話框 一般情況下,，通過判斷用戶做出的選擇，作為后續(xù)程序執(zhí)行條件 8.提示框綜合案例 <html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義鼠標(biāo)右鍵菜單</title>
<style>
*{margin: 0;padding: 0;}
ul{
width: 130px;
list-style: none;
display: inline-block;
background-color: #cccccc;
position: absolute; /*設(shè)置絕對定位以便于跟隨焦點坐標(biāo)顯示*/
display: none;
}
li{
height: 30px;
padding: 5px 10px;
line-height: 30px;
}
ul li:hover{
background-color: hotpink;
color: blue;
cursor: pointer;
transition: 0.3s;
}
</style>
</head>
<body>
<!--通過ul>li創(chuàng)建右鍵菜單列表-->
<ul>
<li>Alert提示</li>
<li>關(guān)閉頁面</li>
<li>BaiDu選中內(nèi)容</li>
<li>輸入搜索內(nèi)容</li>
</ul>
<!--在頁面中創(chuàng)建一個文本輸入?yún)^(qū)域,，第三個li用-->
<textarea cols="100" rows="20" style="font-size: 20px"></textarea>
<script>
var ulMenu=document.querySelector('ul');
var ulOption=document.querySelector('li');
// 禁用系統(tǒng)右鍵菜單事件“contextmenu”
document.oncontextmenu=function () {
return false; //return false表示事件禁用
}
// 定義鼠標(biāo)抬起時觸發(fā)事件
document.onmouseup=function (eve) {
// 通過 event.button屬性返回值判斷鼠標(biāo)按鍵
// console.log(event.button);
// 返回值“0”代表左鍵,，返回值“1”代表滾輪，返回值“2”代表右鍵,...
if (event.button==2){
ulMenu.style.display='inline-block';
ulMenu.style.left=eve.clientX+'px';
ulMenu.style.top=eve.clientY+'px';
}else{
ulMenu.style.display='none';
}
}
//通過“事件委托”的方式獲取觸發(fā)節(jié)點,，判斷需要執(zhí)行的操作
ulMenu.onmousedown=function (eve) { //此處必須使用mousedown事件,！
if (eve.target.innerHTML=='Alert提示'){
alert('這是alert()方法測試');
}else if (event.target.innerHTML=='關(guān)閉頁面'){
if (confirm('確定離開了么？')){
window.close();
}
}else if (eve.target.innerHTML=='BaiDu選中內(nèi)容'){
//使用getSelection()方法獲取光標(biāo)選中的文本內(nèi)容,，返回值為 object
//而搜索使用的是字符串,，需要再使用 toString()方法將獲取結(jié)果轉(zhuǎn)換為字符串
//如果綁定事件為 onclick或 onmouseup時,，返回值為空字符串
var textSelect=document.getSelection().toString();
// console.log(textSelect);
open('http://www.baidu.com/s?word='+textSelect);
}else{
var searchText=prompt('請輸入你想搜索的內(nèi)容','比如：美女')
window.open('http://www.baidu.com/s?word='+searchText);
}
}
ulMenu.onmouseleave=function () {
ulMenu.style.display='none';
}
</script>
</body>
</html>
9.知識碎片： ① <textarea>標(biāo)簽 <textarea> 標(biāo)簽表示多行純文本編輯控件,，用戶可在其文本區(qū)域中寫入文本 常用屬性： name,，規(guī)定文本區(qū)域的名稱 autofocus，當(dāng)前頁面加載時文本區(qū)域自動獲取焦點 cols,，規(guī)定文本區(qū)域內(nèi)可見的列數(shù) rows,，規(guī)定文本區(qū)域內(nèi)可見的行數(shù) maxlength，規(guī)定文本區(qū)域允許的最大字符數(shù) placeholder,，設(shè)置描述性提示,，加載時顯示在文本區(qū)域 readonly，規(guī)定文本區(qū)域為只讀 required,，規(guī)定文本區(qū)域為必填項 wrap,，規(guī)定提交表單時，區(qū)域內(nèi)文本如何換行,， 屬性值包括 hard（提交表單時文本換行）,、soft（提交表單時文本不換行，默認(rèn)值） ?、?nbsp;contextmenu 在HTML中,，該屬性規(guī)定了元素的上下文菜單，,，當(dāng)用戶右擊元素時將顯示上下文菜單 屬性值是需要打開的<menu>元素的 id 語法示例：<div contextmenu="mymenu"> <menu type="context" id="mymenu"> oncontextmenu事件,，在元素中用戶右擊鼠標(biāo)時觸發(fā)并打開上下文菜單 語法：元素節(jié)點 .oncontextmenu=function(){ }; 還可以直接在HTML的元素屬性中定義該事件，如前面的<div>標(biāo)簽屬性可以如下書寫： <div contextmenu="mymenu" oncentextmenu=' myFunction() '>; ?、?nbsp;event.button屬性 button 事件屬性可返回一個整數(shù),，指示當(dāng)事件被觸發(fā)時哪個鼠標(biāo)按鍵被點擊。 ?、?nbsp;getSelection()方法 該方法可以返回一個 Selection 對象,，表示用戶選擇的文本范圍或光標(biāo)的當(dāng)前位置 語法：window.document.getSelection(); 想要將getSelection()的返回值（對象）轉(zhuǎn)換為字符串，可以通過連接一個空字符串(' '),，或使用 .toString()方法 select()方法,，表示全選當(dāng)前輸入的內(nèi)容 10.間隔調(diào)用 間隔調(diào)用又被稱作定時器，是一種能夠每隔一定時間自動執(zhí)行一次的函數(shù) 語法示例：var timer=null; timer=setInterval { function(){ },，執(zhí)行間隔時間/ms}; 清除間隔調(diào)用函數(shù),，使用 clearInterval()方法 語法：clearInterval(變量標(biāo)識); 示例：clearInterval (timer); 注意事項： ① 間隔調(diào)用的返回值是一個數(shù)字隊列,，因此,，通過訪問數(shù)字隊列來清除間隔調(diào)用也是可以的 ② 如果間隔調(diào)用的函數(shù)需要傳入?yún)?shù),，則間隔調(diào)用不能使用匿名函數(shù),，需要使用如下方式聲明 var timer=null; timer=setInterval(' myFunction( 參數(shù)值 ) ', 執(zhí)行間隔時間); //調(diào)用函數(shù)是“字符串”形式 ?、?nbsp;間隔調(diào)用不是立即執(zhí)行，而是在“任務(wù)隊列中的任務(wù)完成后”才執(zhí)行間隔調(diào)用 ?、?nbsp;因為間隔調(diào)用的實際執(zhí)行者是 window,，因此間隔調(diào)用函數(shù)內(nèi)部的 this指向的是 window 11.延遲調(diào)用 延遲調(diào)用是一種在等待一定時間后執(zhí)行的函數(shù)（執(zhí)行一次） 語法：var timer=null； timer=setTimeout( function(){ }, 延遲執(zhí)行時間/ms); 延遲調(diào)用函數(shù)的用法與間隔調(diào)用函數(shù)基本相同 |
|
|
