js知识点分享
一、object對(duì)象
一、屬性?
Object自帶一個(gè)prototype的屬性，即Object.prototype，Object.prototype本身也是一個(gè)對(duì)象，也會(huì)有一些屬性和方法。如下：?
1、屬性?
?
Object.prototype.writable：默認(rèn)為false?
Object.prototype.enumerable：默認(rèn)為false?
Object.prototype.configurable：默認(rèn)為false?
Object.prototype.constructor：用于創(chuàng)建一個(gè)對(duì)象的原型。
2、常用方法?
?


Object.prototype.hasOwnProperty():返回一個(gè)布爾值，表示某個(gè)對(duì)象是否含有指定的屬性，而且此屬性非原型鏈繼承。
?
Object.prototype.isPrototypeOf():返回一個(gè)布爾值，表示指定的對(duì)象是否在本對(duì)象的原型鏈中。
?
Object.prototype.propertyIsEnumerable():判斷指定屬性是否可枚舉。
?
Object.prototype.toString():返回對(duì)象的字符串表示。
?
Object.prototype.watch():給對(duì)象的某個(gè)屬性增加監(jiān)聽。
?
Object.prototype.unwatch():移除對(duì)象某個(gè)屬性的監(jiān)聽。
?
Object.prototype.valueOf():返回指定對(duì)象的原始值。


?
?
二、方法?
Object.assign(target, …sources):把任意多個(gè)的源對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象，然后返回目標(biāo)對(duì)象。
?
Object.create(proto,[propertiesobject]):創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對(duì)象。
?
Object.defineProperties(obj, props)：在一個(gè)對(duì)象上添加或修改一個(gè)或者多個(gè)自有屬性，并返回該對(duì)象。
?
Object.defineProperty(obj, prop, descriptor)：直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)已經(jīng)存在的屬性， 并返回這個(gè)對(duì)象。obj：需要定義屬性的對(duì)象。prop：需定義或修改的屬性的名字。descriptor：將被定義或修改的屬性的描述符。
?
Object.entries(obj)：返回一個(gè)包含由給定對(duì)象所有可枚舉屬性的屬性名和屬性值組成的 [屬性名，屬性值] 鍵值對(duì)的數(shù)組，數(shù)組中鍵值對(duì)的排列順序和使用for…in循環(huán)遍歷該對(duì)象時(shí)返回的順序一致。?
舉例：?
?
var obj = { foo: “bar”, baz: 42 };?
console.log(Object.entries(obj)); // [ [‘foo’, ‘bar’], [‘baz’, 42] ]
?
?
Object.freeze(obj)：凍結(jié)一個(gè)對(duì)象，凍結(jié)指的是不能向這個(gè)對(duì)象添加新的屬性，不能修改其已有屬性的值，不能刪除已有屬性，以及不能修改該對(duì)象已有屬性的可枚舉性、可配置性、可寫性。也就是說(shuō)，這個(gè)對(duì)象永遠(yuǎn)是不可變的。該方法返回被凍結(jié)的對(duì)象。
?
Object.getOwnPropertyDescriptor(obj, prop)：返回指定對(duì)象上一個(gè)自有屬性對(duì)應(yīng)的屬性描述符。
?
Object.getOwnPropertyNames(obj)：返回一個(gè)由指定對(duì)象的所有自身屬性的屬性名（包括不可枚舉屬性）組成的數(shù)組。?
舉例：?
// 類數(shù)組對(duì)象?
var obj = { 0: “a”, 1: “b”, 2: “c”};?
console.log(Object.getOwnPropertyNames(obj).sort()); // [“0”, “1”, “2”]
?
Object.getPrototypeOf(object)：返回該對(duì)象的原型。
?
Object.is(value1, value2)：判斷兩個(gè)值是否是同一個(gè)值。
?
Object.isExtensible(obj)：判斷一個(gè)對(duì)象是否是可擴(kuò)展的（是否可以在它上面添加新的屬性）。
?
Object.isFrozen(obj)：判斷一個(gè)對(duì)象是否被凍結(jié)（frozen）。
?
Object.isSealed(obj)：判斷一個(gè)對(duì)象是否是密封的（sealed）。密封對(duì)象是指那些不可 擴(kuò)展 的，且所有自身屬性都不可配置的（non-configurable）且屬性不可刪除的對(duì)象（其可以是可寫的）。
?
Object.keys(obj)：返回一個(gè)由給定對(duì)象的所有可枚舉自身屬性的屬性名組成的數(shù)組，數(shù)組中屬性名的排列順序和使用for-in循環(huán)遍歷該對(duì)象時(shí)返回的順序一致?
舉例：?
var arr = [“a”, “b”, “c”];?
alert(Object.keys(arr)); // 彈出”0,1,2”
?
// 類數(shù)組對(duì)象?
?
var obj = { 0 : “a”, 1 : “b”, 2 : “c”};?
alert(Object.keys(obj)); // 彈出”0,1,2”
?
?
Object.preventExtensions(obj)：讓一個(gè)對(duì)象變的不可擴(kuò)展，也就是永遠(yuǎn)不能再添加新的屬性。
?
Object.setPrototypeOf(obj, prototype)：將一個(gè)指定的對(duì)象的原型設(shè)置為另一個(gè)對(duì)象或者null
?
Object.values(obj)：返回一個(gè)包含指定對(duì)象所有的可枚舉屬性值的數(shù)組，數(shù)組中的值順序和使用for…in循環(huán)遍歷的順序一樣。?
舉例：?
?
var obj = { foo: “bar”, baz: 42 };?
console.log(Object.values(obj)); // [‘bar’, 42]
二、JSX
JSX簡(jiǎn)介
?
JSX就是Javascript和XML結(jié)合的一種格式。React發(fā)明了JSX，利用HTML語(yǔ)法來(lái)創(chuàng)建虛擬DOM。當(dāng)遇到<，JSX就當(dāng)HTML解析，遇到{就當(dāng)JavaScript解析。
?
如下(JS寫法)
?

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

等價(jià)于(JSX寫法)
?



var root =(
? <ul className="my-list">
? ? <li>First Text Content</li>
? ? <li>Second Text Content</li>
? </ul>
);



后者將XML語(yǔ)法直接加入JS中,通過(guò)代碼而非模板來(lái)高效的定義界面。之后JSX通過(guò)翻譯器轉(zhuǎn)換為純JS再由瀏覽器執(zhí)行。在實(shí)際開發(fā)中，JSX在產(chǎn)品打包階段都已經(jīng)編譯成純JavaScript，JSX的語(yǔ)法不會(huì)帶來(lái)任何性能影響。另外，由于JSX只是一種語(yǔ)法，因此JavaScript的關(guān)鍵字class, for等也不能出現(xiàn)在XML中，而要如例子中所示，使用className, htmlFor代替，這和原生DOM在JavaScript中的創(chuàng)建也是一致的。JSX只是創(chuàng)建虛擬DOM的一種語(yǔ)法格式而已,除了用JSX,我們也可以用JS代碼來(lái)創(chuàng)建虛擬DOM.
?
?
?
JSX語(yǔ)法介紹
?
大括號(hào)里是JavaScript，不要加引號(hào)，加引號(hào)就會(huì)被當(dāng)成字符串。
?
三元表達(dá)式
?
JSX本身就和XML語(yǔ)法類似，可以定義屬性以及子元素。唯一特殊的是可以用大括號(hào)來(lái)加入JavaScript表達(dá)式.例如:
?
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
上述代碼經(jīng)過(guò)JSX編譯后會(huì)得到：
?
var person = React.createElement(
? Person,
? {name: window.isLoggedIn ? window.name : ''}
);
數(shù)組遞歸
?
數(shù)組循環(huán),數(shù)組的每個(gè)元素都返回一個(gè)React組件。
?



var lis = this.todoList.todos.map(function (todo) {
? return (
? ? <li>
? ? ? <input type="checkbox" checked={todo.done}>
? ? ? <span className={'done-' + todo.done}>{todo.text}</span>
? ? </li>
? );
});
?
var ul = (
? <ul className="unstyled">
? ? {lis}
? </ul>
);



?
?
JSX中綁定事件
?
JSX讓事件直接綁定在元素上。
?
<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>
和原生HTML定義事件的唯一區(qū)別就是JSX采用駝峰寫法來(lái)描述事件名稱，大括號(hào)中仍然是標(biāo)準(zhǔn)的JavaScript表達(dá)式，返回一個(gè)事件處理函數(shù)。
?
React并不會(huì)真正的綁定事件到每一個(gè)具體的元素上，而是采用事件代理的模式：在根節(jié)點(diǎn)document上為每種事件添加唯一的Listener，然后通過(guò)事件的target找到真實(shí)的觸發(fā)元素。這樣從觸發(fā)元素到頂層節(jié)點(diǎn)之間的所有節(jié)點(diǎn)如果有綁定這個(gè)事件，React都會(huì)觸發(fā)對(duì)應(yīng)的事件處理函數(shù)。這就是所謂的React模擬事件系統(tǒng)。盡管整個(gè)事件系統(tǒng)由React管理，但是其API和使用方法與原生事件一致。
?
?
?
JSX中使用樣式
?
在JSX中使用樣式和真實(shí)的樣式也很類似，通過(guò)style屬性來(lái)定義，但和真實(shí)DOM不同的是，屬性值不能是字符串而必須為對(duì)象。
?
例如:
?
<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>
或者
?



var style = {
? color: '#ff0000',
? fontSize: '14px'
};
?
var node = <div style={style}>HelloWorld.</div>;



要明確記住,{}里面是JS代碼,這里傳進(jìn)去的是標(biāo)準(zhǔn)的JS對(duì)象。在JSX中可以使用所有的的樣式，基本上屬性名的轉(zhuǎn)換規(guī)范就是將其寫成駝峰寫法，例如“background-color”變?yōu)椤癰ackgroundColor”, “font-size”變?yōu)椤癴ontSize”，這和標(biāo)準(zhǔn)的JavaScript操作DOM樣式的API是一致的。
?
?
?
HTML轉(zhuǎn)義
?
在組件內(nèi)部添加html代碼,并將html代碼渲染到頁(yè)面上。React默認(rèn)會(huì)進(jìn)行HTML的轉(zhuǎn)義，避免XSS攻擊，如果要不轉(zhuǎn)義，可以這么寫：
?



var content='<strong>content</strong>'; ? ?
?
React.render(
? ? <div dangerouslySetInnerHTML={{__html: content}}></div>,
? ? document.body
);
三、eval
1. 和其他解釋性語(yǔ)言一樣，javascript 同樣可以解釋運(yùn)行由javascript源代碼組成的字符串，javascript 通過(guò)eval()來(lái)完成。
2. eval() 其實(shí)是一個(gè)函數(shù)，是javascript很早版本中就已經(jīng)存在，但是javascript設(shè)計(jì)者和解釋器對(duì)其進(jìn)行了許多的限制，看起來(lái)eval更像一個(gè)運(yùn)算符。但是作為用于動(dòng)態(tài)執(zhí)行代碼，eval存在這樣的問(wèn)題，解釋器無(wú)法對(duì)動(dòng)態(tài)代碼做進(jìn)一步的優(yōu)化。如果將它看做一個(gè)函數(shù)，那它是可以被賦予其他名字的：
?
?var A = eval;
?var B = A;
如果是這樣的話，那么解釋器就無(wú)法優(yōu)化調(diào)用B()的函數(shù)了。因此設(shè)計(jì)者賦予eval一些運(yùn)算符的特性（作為保留字）之后這些問(wèn)題得到解決。
?
3. Eval 只有一個(gè)參數(shù)，如果傳入的不是字符串的話，它直接返回這個(gè)參數(shù)；如果是字符串，那么首先會(huì)進(jìn)行編譯，如編譯失敗則爆出語(yǔ)法錯(cuò)誤；編譯成功則執(zhí)行代碼。更主要的是eval可以使用調(diào)用它的變量作用域環(huán)境，也就是說(shuō)它查找的變量或者新增的變量作用域跟代碼的完全一樣。
如：
?

function A()
{
? eval('var x ;');
? eval("x=1"); //在一個(gè)函數(shù)中定義或者更改，那就是針對(duì)局部變量。
}

4. 全局eval
eval 可以動(dòng)態(tài)執(zhí)行代碼，并申明或者改變變量，當(dāng)然可以對(duì)全局變量進(jìn)行上述操作。如
?


var globalEval = eval; //定義全局eval函數(shù)別名
var a ='global', b = 'global'; //全局變量
function c()
{
? var a = 'local'; //局部變量
eval('a+="changed"'); //直接更改局部變量的值
?return a; //返回更改后的局部變量
}
?function d()
{
? ?var b = 'local';
? ?globalEval("b+='changed'");
? ?return b;
}?
?
console.log(c(), a); //localchanged global
console.log(d() , b) //local globalchanged更強(qiáng)的是，全局的eval還可以更改局部變量的能力，不過(guò)這也是javascript優(yōu)化的一個(gè)大問(wèn)題。 當(dāng)然在嚴(yán)格模式下，eval更像一個(gè)運(yùn)算符，不可以用別名來(lái)覆蓋eval。


四、AJAX
什么是 AJAX ？
?
AJAX = 異步 JavaScript 和 XML。
?
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。
?
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
?
傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁(yè)面。
?
有很多使用 AJAX 的應(yīng)用程序案例：新浪微博、Google 地圖、開心網(wǎng)等等。
?
AJAX 實(shí)例解釋
?
上面的 AJAX 應(yīng)用程序包含一個(gè) div 和一個(gè)按鈕。
?
div 部分用于顯示來(lái)自服務(wù)器的信息。當(dāng)按鈕被點(diǎn)擊時(shí)，它負(fù)責(zé)調(diào)用名為 loadXMLDoc() 的函數(shù)：
?


<html>
<body>
?
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" οnclick="loadXMLDoc()">Change Content</button>
?
</body>
</html>


?
?
接下來(lái)，在頁(yè)面的 head 部分添加一個(gè) <script> 標(biāo)簽。該標(biāo)簽中包含了這個(gè) loadXMLDoc() 函數(shù)：
?


<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>


Ajax的使用
?
以下步驟，如果不能理解你死記硬背都要記下來(lái)，總比你答不出來(lái)要好吧！
?
1.創(chuàng)建Ajax核心對(duì)象XMLHttpRequest
?
var xmlhttp; ?
if (window.XMLHttpRequest) ?
? {// 兼容 IE7+, Firefox, Chrome, Opera, Safari ?
? xmlhttp=new XMLHttpRequest(); ?
? } ?
else ?
? {// 兼容 IE6, IE5 ?
? xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); ?
? } ?
?
2.向服務(wù)器發(fā)送請(qǐng)求
?
xmlhttp.open(method,url,async); ?
send(string) ?
注意：open 的參數(shù)要牢記，很多面試官愛問(wèn)這樣的細(xì)節(jié)
?
method：請(qǐng)求的類型；GET 或 POST
url：文件在服務(wù)器上的位置
async：true（異步）或 false（同步）
send(string)方法post請(qǐng)求時(shí)才使用字符串參數(shù)，否則不用帶參數(shù)。
?
注意：post請(qǐng)求一定要設(shè)置請(qǐng)求頭的格式內(nèi)容
?
xmlhttp.open("POST","ajax_test.html",true); ?
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ?
xmlhttp.send("fname=Henry&lname=Ford"); ??
3.服務(wù)器響應(yīng)處理
?
responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML 獲得XML 形式的響應(yīng)數(shù)據(jù)。
?
? ? ? ?3.1 同步處理
?
xmlhttp.open("GET","ajax_info.txt",false); ?
xmlhttp.send(); ?
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; ?
直接在send()后面處理返回來(lái)的數(shù)據(jù)。
?
3.2 異步處理
?
異步處理相對(duì)比較麻煩，要在請(qǐng)求狀態(tài)改變事件中處理。
?
?
?
xmlhttp.onreadystatechange=function() ?
? { ?
? if (xmlhttp.readyState==4 &&xmlhttp.status==200) ?
? ? { ?
? ?document.getElementById("myDiv").innerHTML=xmlhttp.responseText; ?
? ? } ?
? } ?
?
?
?
一共有5中請(qǐng)求狀態(tài)，從0 到 4 發(fā)生變化。
?
0: 請(qǐng)求未初始化
?
1: 服務(wù)器連接已建立
?
2: 請(qǐng)求已接收
?
3: 請(qǐng)求處理中
?
4: 請(qǐng)求已完成，且響應(yīng)已就緒
?
?
?
xmlhttp.status：響應(yīng)狀態(tài)碼。這個(gè)也是面試比較愛問(wèn)的，這個(gè)必須知道4個(gè)以上，比較常見的有：
?
200: "OK"
?
403 （禁止） 服務(wù)器拒絕請(qǐng)求。
?
404 （未找到） 服務(wù)器找不到請(qǐng)求的網(wǎng)頁(yè)。
?
408 （請(qǐng)求超時(shí)） 服務(wù)器等候請(qǐng)求時(shí)發(fā)生超時(shí)。
?
500 （服務(wù)器內(nèi)部錯(cuò)誤） 服務(wù)器遇到錯(cuò)誤，無(wú)法完成請(qǐng)求
?
XMLHttpRequest 是 AJAX 的基礎(chǔ)。
XMLHttpRequest 對(duì)象
?
所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對(duì)象（IE5 和 IE6 使用 ActiveXObject）。
?
XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
?
創(chuàng)建 XMLHttpRequest 對(duì)象
?
所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對(duì)象。
?
創(chuàng)建 XMLHttpRequest 對(duì)象的語(yǔ)法：
?
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對(duì)象：
?
variable=new ActiveXObject("Microsoft.XMLHTTP");
為了應(yīng)對(duì)所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6，請(qǐng)檢查瀏覽器是否支持 XMLHttpRequest 對(duì)象。如果支持，則創(chuàng)建 XMLHttpRequest 對(duì)象。如果不支持，則創(chuàng)建 ActiveXObject ：
?


var xmlhttp;
if (window.XMLHttpRequest)
? {// code for IE7+, Firefox, Chrome, Opera, Safari
? xmlhttp=new XMLHttpRequest();
? }
else
? {// code for IE6, IE5
? xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
? }


五、JS事件
事件是可以被 JavaScript 偵測(cè)到的行為。
?
事件
?
JavaScript 使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面。事件是可以被 JavaScript 偵測(cè)到的行為。
?
網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)的事件。比方說(shuō)，我們可以在用戶點(diǎn)擊某按鈕時(shí)產(chǎn)生一個(gè) onClick 事件來(lái)觸發(fā)某個(gè)函數(shù)。事件在 HTML 頁(yè)面中定義。
?
事件舉例：
?
鼠標(biāo)點(diǎn)擊
頁(yè)面或圖像載入
鼠標(biāo)懸浮于頁(yè)面的某個(gè)熱點(diǎn)之上
在表單中選取輸入框
確認(rèn)表單
鍵盤按鍵
注意：事件通常與函數(shù)配合使用，當(dāng)事件發(fā)生時(shí)函數(shù)才會(huì)執(zhí)行。
?
onload 和 onUnload
?
當(dāng)用戶進(jìn)入或離開頁(yè)面時(shí)就會(huì)觸發(fā) onload 和 onUnload 事件。
?
onload 事件常用來(lái)檢測(cè)訪問(wèn)者的瀏覽器類型和版本，然后根據(jù)這些信息載入特定版本的網(wǎng)頁(yè)。
?
onload 和 onUnload 事件也常被用來(lái)處理用戶進(jìn)入或離開頁(yè)面時(shí)所建立的 cookies。例如，當(dāng)某用戶第一次進(jìn)入頁(yè)面時(shí)，你可以使用消息框來(lái)詢問(wèn)用戶的姓名。姓名會(huì)保存在 cookie 中。當(dāng)用戶再次進(jìn)入這個(gè)頁(yè)面時(shí)，你可以使用另一個(gè)消息框來(lái)和這個(gè)用戶打招呼："Welcome John Doe!"。
?
onFocus, onBlur 和 onChange
?
onFocus、onBlur 和 onChange 事件通常相互配合用來(lái)驗(yàn)證表單。
?
下面是一個(gè)使用 onChange 事件的例子。用戶一旦改變了域的內(nèi)容，checkEmail() 函數(shù)就會(huì)被調(diào)用。
?
<input type="text" size="30" id="email" οnchange="checkEmail()">
onSubmit
?
onSubmit 用于在提交表單之前驗(yàn)證所有的表單域。
?
下面是一個(gè)使用 onSubmit 事件的例子。當(dāng)用戶單擊表單中的確認(rèn)按鈕時(shí)，checkForm() 函數(shù)就會(huì)被調(diào)用。假若域的值無(wú)效，此次提交就會(huì)被取消。checkForm() 函數(shù)的返回值是 true 或者 false。如果返回值為true，則提交表單，反之取消提交。
?
<form method="post" action="xxx.htm" οnsubmit="return checkForm()">
onMouseOver 和 onMouseOut
?
onMouseOver 和 onMouseOut 用來(lái)創(chuàng)建“動(dòng)態(tài)的”按鈕。
?
下面是一個(gè)使用 onMouseOver 事件的例子。當(dāng) onMouseOver 事件被腳本偵測(cè)到時(shí)，就會(huì)彈出一個(gè)警告框：
?
<a href="http://www.w3school.com.cn"
οnmοuseοver="alert('An onMouseOver event');return false">
<img src="w3school.gif" width="100" height="30"> </a>
六、window對(duì)象屬性和方法
window對(duì)象有以下方法：
?
open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture handleEvent releaseEvent routeEvent scroll
?
1. open方法
?
語(yǔ)法格式：window.open(URL,窗口名稱,窗口風(fēng)格)
?
功能：打開一個(gè)新的窗口，并在窗口中裝載指定URL地址的網(wǎng)頁(yè)。
?
說(shuō)明：
?
open方法用于打開一個(gè)新的瀏覽器窗口，并在新窗口中裝入一個(gè)指定的URL地址；
?
open方法在打開一個(gè)新的瀏覽器窗口時(shí)，還可以指定窗口的名稱(第二個(gè)參數(shù))；
?
open方法在打開一個(gè)新的瀏覽器窗口時(shí)，還可以指定窗口的風(fēng)格(第三個(gè)參數(shù))，窗口風(fēng)格有以下選項(xiàng)，這些選項(xiàng)可以多選，如果多選，各選項(xiàng)之間用逗號(hào)分隔：
?
toolbar：指定窗口是否有標(biāo)準(zhǔn)工具欄。當(dāng)該選項(xiàng)的值為1或yes時(shí)，表示有標(biāo)準(zhǔn)工具欄，當(dāng)該選項(xiàng)的值為0或no時(shí)，表示沒(méi)有標(biāo)準(zhǔn)工具欄；
?
location：指定窗口是否有地址工具欄，選項(xiàng)的值及含義與toolbar相同；
directories：指定窗口是否有鏈接工具欄，選項(xiàng)的值及含義與toolbar相同；
status：指定窗口是否有狀態(tài)欄，選項(xiàng)的值及含義與toolbar相同；
menubar：指定窗口是否有菜單，選項(xiàng)的值及含義與toolbar相同；
scrollbar：指定當(dāng)前窗口文檔大于窗口時(shí)是否有滾動(dòng)條，選項(xiàng)的值及含義與toolbar相同；
resizable：指定窗口是否可改變大小，選項(xiàng)的值及含義與toolbar相同；
width：以像素為單位指定窗口的寬度，已被innerWidth取代；
height：以像素為單位指定窗口的高度，已被innerHeight取代；
outerWidth：以像素為單位指定窗口的外部寬度；
outerHeight：以像素為單位指定窗口的外部高度；
left：以像素為單位指定窗口距屏幕左邊的位置；
top：以像素為單位指定窗口距屏幕頂端的位置；
alwaysLowered：指定窗口隱藏在所有窗口之后，選項(xiàng)的值及含義與toolbar相同；
alwaysRaised：指定窗口浮在所有窗口之上，選項(xiàng)的值及含義與toolbar相同；
dependent：指定打開的窗口為當(dāng)前窗口的一個(gè)子窗口，并隨著父窗口的關(guān)閉而關(guān)閉，選項(xiàng)的值及含義與toolbar相同；
hotkeys：在沒(méi)有菜單欄的新窗口中設(shè)置安全退出的熱鍵，選項(xiàng)的值及含義與toolbar相同；
innerHeight：設(shè)定窗口中文檔的像素高度；
innerWidth：設(shè)定窗口中文檔的像素寬度；
screenX：設(shè)定窗口距離屏幕左邊界的像素長(zhǎng)度；
screenY：設(shè)定窗口距離屏幕上邊界的像素長(zhǎng)度；
titleBar：指明標(biāo)題欄是否在新窗口中可見，選項(xiàng)的值及含義與toolbar相同；
z-look：指明當(dāng)窗口被激活時(shí)，不能浮在其它窗口之上，選項(xiàng)的值及含義與toolbar相同。
open方法返回的是該窗口的引用。
?
小技巧：該方法經(jīng)常用于在打開一個(gè)網(wǎng)頁(yè)時(shí)自動(dòng)打開另一個(gè)窗口。
?
2. close方法
?
語(yǔ)法格式：window.close()
?
功能：close方法用于自動(dòng)關(guān)閉瀏覽器窗口。
?
3. alert方法
?
語(yǔ)法格式： window.alert(提示字符串)
?
功能：彈出一個(gè)警告框，在警告框內(nèi)顯示提示字符串文本。
?
4. confirm方法
?
語(yǔ)法格式：window.confirm(提示字符串)
?
功能：顯示一個(gè)確認(rèn)框，在確認(rèn)框內(nèi)顯示提示字符串，當(dāng)用戶單擊“確定”按鈕時(shí)該方法返回true，單擊“取消”時(shí)返回false。
?
5. prompt方法
?
語(yǔ)法格式：window.prompt(提示字符串，缺省文本)
?
功能：顯示一個(gè)輸入框，在輸入框內(nèi)顯示提示字符串，在輸入文本框顯示缺省文本，并等待用戶輸入，當(dāng)用戶單擊“確定”按鈕時(shí)，返回用戶輸入的字符串，當(dāng)單擊“取消”按鈕時(shí)，返回null值。
?
6. setTimeout方法
?
語(yǔ)法格式：window.setTimeout(代碼字符表達(dá)式,毫秒數(shù))
?
功能：定時(shí)設(shè)置，當(dāng)?shù)搅酥付ǖ暮撩霐?shù)后，自動(dòng)執(zhí)行代碼字符表達(dá)式。
?
7. clearTimeout方法
?
語(yǔ)法格式：window.clearTimeout(定時(shí)器)
?
功能：取消以前的定時(shí)設(shè)置，其中的參數(shù)是用setTimeout設(shè)置時(shí)的返回值。
?
8. setInterval方法
?
語(yǔ)法格式：window.setInterval(代碼字符表達(dá)式,毫秒數(shù))
?
功能：設(shè)定一個(gè)時(shí)間間隔后(第二個(gè)參數(shù))，反復(fù)執(zhí)行“代碼字符表達(dá)式”的內(nèi)容
?
9. clearInterval方法
?
語(yǔ)法格式：window.clearInterval(時(shí)間間隔器)
?
功能：取消setInterval設(shè)置的定時(shí)。其中的參數(shù)是setInterval方法的返回值。
?
10. moveBy方法
?
語(yǔ)法格式：window.moveBy(水平位移量,垂直位移量)
?
功能：按照給定像素參數(shù)移動(dòng)指定窗口。第一個(gè)參數(shù)是窗口水平移動(dòng)的像素，第二個(gè)參數(shù)是窗口垂直移動(dòng)的像素。
?
11.moveTo方法
?
語(yǔ)法格式：window.moveTo(x,y)
?
功能：將窗口移動(dòng)到指定的指定坐標(biāo)(x,y)處。
?
12. resizeBy方法
?
語(yǔ)法格式：window.resizeBy(水平,垂直)
?
功能：將當(dāng)前窗口改變指定的大小(x,y)，當(dāng)x、y的值大于0時(shí)為擴(kuò)大，小于0時(shí)為縮小。
?
13. resizeTo方法
?
語(yǔ)法格式：window.resizeTo(水平寬度,垂直寬度)
?
功能：將當(dāng)前窗口改變成(x,y)大小，x、y分別為寬度和高度。
?
14. scrollBy方法
?
語(yǔ)法格式：window.scrollBy(水平位移量，垂直位移量)
?
功能：將窗口中的內(nèi)容按給定的位移量滾動(dòng)。參數(shù)為正數(shù)時(shí)，正向滾動(dòng)，否則反向滾動(dòng)。
?
15. scrollTo方法
?
語(yǔ)法格式：window.scrollTo(x,y)
?
功能：將窗口中的內(nèi)容滾動(dòng)到指定位置。
?
16.find方法
?
語(yǔ)法格式：window.find()
?
功能：當(dāng)觸發(fā)該方法時(shí)，將彈出一個(gè)“find”(查找)對(duì)話窗口，并允許用戶在觸發(fā)find方法的頁(yè)面中查找一個(gè)字符串。
?
注：該屬性在IE5.5及Netscape6.0中都不支持。
?
17. back方法
?
語(yǔ)法格式：window.back()
?
功能：模擬用戶點(diǎn)擊瀏覽器上的“后退”按鈕，將頁(yè)面轉(zhuǎn)到瀏覽器的上一頁(yè)。
?
說(shuō)明：僅當(dāng)當(dāng)前頁(yè)面存在上一頁(yè)時(shí)才能進(jìn)行該操作。
?
注：IE5.5不支持該方法，Netscape6.0支持。
?
18. forward方法
?
語(yǔ)法格式：window.forward()
?
功能：模擬用戶點(diǎn)擊瀏覽器上的“前進(jìn)”按鈕，將頁(yè)面轉(zhuǎn)到瀏覽器的下一頁(yè)。
?
說(shuō)明：僅當(dāng)當(dāng)前頁(yè)面存在下一頁(yè)時(shí)才能進(jìn)行該操作。
?
注：IE5.5不支持該方法，Netscape6.0支持。
?
19. home方法
?
語(yǔ)法格式：window.home()
?
功能：模擬用戶點(diǎn)擊瀏覽器上的“主頁(yè)”按鈕，將頁(yè)面轉(zhuǎn)到指定的頁(yè)面上。
?
注：IE5.5不支持該方法，Netscape6.0支持。
?
20. stop方法
?
語(yǔ)法格式：window.stop()
?
功能：模擬用戶點(diǎn)擊瀏覽器上的“停止”按鈕，終止瀏覽器的下載操作。
?
注：IE5.5不支持該方法，Netscape6.0支持。
?
21. print方法
?
語(yǔ)法格式：window.print()
?
功能：模擬用戶點(diǎn)擊瀏覽器上的“打印”按鈕，通知瀏覽器打開打印對(duì)話框打印當(dāng)前頁(yè)。
?
22. blur方法
?
語(yǔ)法格式：window.blur()
?
功能：從窗口中移出焦點(diǎn)。當(dāng)與focus方法合用時(shí)必須小心，因?yàn)榭赡軐?dǎo)致焦點(diǎn)不斷移進(jìn)移出。
?
23. focus方法
?
語(yǔ)法格式：window.focus()
?
功能：使窗口中得到焦點(diǎn)。當(dāng)與blur方法合用時(shí)必須小心，因?yàn)榭赡軐?dǎo)致焦點(diǎn)不斷移進(jìn)移出
?
24. captureevent方法
?
語(yǔ)法格式：window.captureevent(event)
?
window.captureevent(事件1|事件2|…|事件n)
?
功能：捕捉指定參數(shù)的所有事件。由于能夠捕獲哪些由本地程序自己處理的事件，所以程序員可以隨意定義函數(shù)來(lái)處理事件。如果有多個(gè)事件需要捕捉，各事件之間用管道符“|”隔開。可捕捉的事件類型如下：
?
event.abort event.blur event.change event.click event.dblclick event.dragdrop event.error event.focus event.keydown event.keypress event.keyup event.load event.mousedown event.mousuemove event.mouseout event.mouseover event.mouseup event.move event.reset event.resize event.select event.submit event.unload
?
25. enableexternalcapture事件
?
語(yǔ)法格式：window.enableexternalcapture(event)
?
功能：enableexternalcapture方法用于捕捉通過(guò)參數(shù)傳入的外部事件。
?
26. disableexternalcapture事件
?
語(yǔ)法格式：window.disableexternalcapture()
?
功能：取消enableexternalcapture方法的設(shè)置，終止對(duì)外部事件的捕捉。
?
27. handleevent事件
?
語(yǔ)法格式：window.handleevent(event)
?
功能：觸發(fā)指定事件的事件處理器。
?
28. releaseevent事件
?
語(yǔ)法格式：window.releaseevent(event)
?
window.releaseevent(事件1|事件2|…|事件n)
?
功能：釋放通過(guò)參數(shù)傳入的已被捕捉的事件，這些事件是由window.captureevent方法設(shè)置的，可釋放的事件與captureevent相同。
?
29. routeevent事件
?
語(yǔ)法格式：window.releaseevent(event)
?
功能：把被捕捉類型的所有事件轉(zhuǎn)交給標(biāo)準(zhǔn)事件處理方法進(jìn)行處理，可轉(zhuǎn)交的事件與captureevent相同。
?
30. scroll事件
?
語(yǔ)法格式：window.scroll(x坐標(biāo),y坐標(biāo))
?
功能：將窗口移動(dòng)到指定的坐標(biāo)位置。
?
window對(duì)象的屬性
?
window對(duì)象具有如下屬性：
?
status statusbar statusbar.visible defaultstatus location locationbar locationbar.visible self name closed frames frames.length length document history innerheight innerwidth menubar menubar.visible opener outerheight outerwidth pagexoffset pageyoffset parent personalbar personalbar.visible scrollbar scrollbar.visible toolbar toolbar.visible top
?
1. status屬性
?
語(yǔ)法格式：window.status=字符串
?
功能：設(shè)置或給出瀏覽器窗口中狀態(tài)欄的當(dāng)前顯示信息。
?
小技巧：可以使用該屬性設(shè)置瀏覽器窗口狀態(tài)欄信息。
?
2. statusbar屬性
?
語(yǔ)法格式：window.statusbar.屬性
?
功能：statusbar屬性本身也是一個(gè)對(duì)象，用于訪問(wèn)它自已的visible屬性從而確定狀態(tài)欄是否可見。
?
注：ie5.5瀏覽器不支持該屬性。
?
3. statusbar.visible屬性
?
語(yǔ)法格式： window.statusbar.visible
?
功能：檢查狀態(tài)欄是否可見，如果可見則返回true，反之返回false。
?
注：ie5.5瀏覽器不支持該屬性。
?
4. defaultstatus屬性
?
語(yǔ)法格式：window.defaultstatus[=字符串]
?
功能：defaultstatus屬性值是瀏覽器窗中狀態(tài)欄的默認(rèn)顯示信息
?
5.location屬性
?
語(yǔ)法格式：window.location=url
?
功能：給出當(dāng)前窗口的url信息或指定打開窗口的url。
?
6. locationbar屬性
?
語(yǔ)法格式：window.locationbar.屬性
?
功能：locationbar屬性也可以看成是一個(gè)子對(duì)象，這個(gè)屬性用來(lái)獲取它自已的visible屬性來(lái)確定位置欄是否可見。 到目前為止，該屬性只有一個(gè)子屬性：visible。
?
注：ie5.5不支持該屬性。
?
7. locationbar.visible屬性
?
語(yǔ)法格式：window.locationbar.visible
?
功能：返回位置欄是否可見，如果可見返回true，反之返回false。
?
注：ie5.5不支持該屬性。
?
8. self屬性
?
語(yǔ)法格式：window.self.方法
?
window.self.屬性
?
功能：該屬性包含當(dāng)前窗口的標(biāo)志，利用這個(gè)屬性，可以保證在多個(gè)窗口被打開的情況下，正確調(diào)用當(dāng)前窗口內(nèi)的函數(shù)或?qū)傩远粫?huì)發(fā)生混亂。
?
9. name屬性
?
語(yǔ)法格式： window.name=名稱
?
功能：返回窗口名稱，這個(gè)名稱是由window.open()方法創(chuàng)建新窗口時(shí)給定的。在javascript1.0版本中，這個(gè)屬性只能用于讀取窗口名稱，而到了javascript1.1版本時(shí)，可以用這個(gè)屬性給一個(gè)不是用window.open()方法創(chuàng)建的窗口指定一個(gè)名稱。
?
10. closed屬性
?
語(yǔ)法格式：window.closed
?
功能：closed屬性用于返回指定窗口的實(shí)例是否已經(jīng)關(guān)閉，如果關(guān)閉，返回true ，反之返回flase。
?
11. frames屬性
?
語(yǔ)法格式：window.frames[“框架名稱”]
?
window.frames[數(shù)值]
?
功能：frames屬性是一個(gè)數(shù)組，用來(lái)存儲(chǔ)文檔中每一個(gè)由元素創(chuàng)建的子窗口(框架)實(shí)例，其中的下標(biāo)即可以是次序號(hào)也可以是用frame元素的name屬性指定的名稱來(lái)得到并使用。
?
12. frames.length屬性
?
語(yǔ)法格式： window.frames.length
?
功能：frames.length屬性用于給出文檔中子窗口(框架)實(shí)例的個(gè)數(shù)。
?
13. length屬性
?
語(yǔ)法格式：window.length
?
功能：length屬性返回一個(gè)窗口內(nèi)的子窗口數(shù)目，該屬性與window.frame.length屬性的值相同。
?
14. document屬性
?
語(yǔ)法格式：window.document.事件 window.document.方法 window.document.屬性
?
功能：window對(duì)象的子對(duì)象document是javascript的核心對(duì)象，在腳本中遇到body元素時(shí)創(chuàng)建一個(gè)實(shí)例。
?
15. history屬性
?
語(yǔ)法格式： window.history[數(shù)值] window.history.方法() window.history.屬性
?
window對(duì)象的子對(duì)象history是javascript的核心對(duì)象之一，該屬性包含了一個(gè)已訪問(wèn)過(guò)頁(yè)面的名稱和url的數(shù)組。
?
16. innerheight屬性
?
語(yǔ)法格式：window.innerheight=數(shù)值
?
功能：返回或指定瀏覽器窗口中文檔的像素高度，這個(gè)高度不包括任何工具欄和組成窗口的頁(yè)面修飾高度。
?
注：ie5.5不支持該屬性。
?
17. innerwidth屬性
?
語(yǔ)法格式：window.innerheight=數(shù)值
?
功能：返回或指定瀏覽器窗口中文檔的像素寬度，這個(gè)寬度不包括任何工具欄和組成窗口的頁(yè)面修飾寬度。
?
注：ie5.5不支持該屬性。
?
18. menubar屬性
?
語(yǔ)法格式：window.menubar.屬性
?
功能：menubar屬性也可以看成是一個(gè)子對(duì)象，這個(gè)屬性用來(lái)獲取它自已的visible屬性來(lái)確定菜單欄是否可見。到目前為止，該屬性只有一個(gè)子屬性：visible。
?
注：ie5.5不支持該屬性。
?
19. menubar.visible屬性
?
語(yǔ)法格式：window.menubar.visible
?
功能：menubar.visible屬性用于返回菜單欄是否可見，如果可見返回true，反之返回false。
?
注：ie5.5不支持該屬性。
?
20. opener屬性
?
語(yǔ)法格式：window.opener window.opener.方法 window.opener.屬性
?
功能：opener屬性與打開該窗口的父窗口相聯(lián)系，當(dāng)訪問(wèn)子窗口中operer屬性時(shí)，返回的是父窗口。通過(guò)該屬性，可以使用父窗口對(duì)象中的方法和屬性。
?
21. outerheight屬性
?
語(yǔ)法格式：window.outerheight
?
功能：outerheight屬性用于訪問(wèn)瀏覽器窗口的像素高度，該高度包括工具欄和裝飾邊的高度。
?
注：ie5.5不支持該屬性。
?
22. outerwidth屬性
?
語(yǔ)法格式：window.outerwidth
?
功能：outerwidth屬性用于訪問(wèn)瀏覽器窗口的像素寬度，該寬度包括工具欄和裝飾邊的寬度。
?
注：ie5.5不支持該屬性。
?
23. pagexoffset屬性
?
語(yǔ)法格式：window.pagexoffset=數(shù)值
?
功能：指定瀏覽器窗口中文檔左上角在窗口中的當(dāng)前水平像素位置。在利用moveto移動(dòng)之前，可以通過(guò)該屬性來(lái)決定是否需要移動(dòng)窗口。因?yàn)樵搶傩苑祷亓丝梢娢臋n相對(duì)整個(gè)頁(yè)面的當(dāng)前位置。
?
注：ie5.5不支持該屬性。
?
24. pageyoffset屬性
?
語(yǔ)法格式：window.pageyoffset=數(shù)值
?
功能：指定瀏覽器窗口中文檔左上角在窗口中的當(dāng)前垂直像素位置。在利用moveto移動(dòng)之前，可以通過(guò)該屬性來(lái)決定是否需要移動(dòng)窗口。因?yàn)樵搶傩苑祷亓丝梢娢臋n相對(duì)整個(gè)頁(yè)面的當(dāng)前位置。
?
注：ie5.5不支持該屬性。
?
25. parent屬性
?
語(yǔ)法格式：window.parent.frames[數(shù)值] window.parent.framesname
?
功能：訪問(wèn)各個(gè)子窗口(多框架)所在的父窗口。
?
26. personalbar屬性
?
語(yǔ)法格式：window.personalbar.屬性
?
功能：personalbar屬性本身也是一個(gè)對(duì)象，用于訪問(wèn)其自身的visible屬性來(lái)確定個(gè)人欄是否可見。
?
注：ie5.5不支持該屬性。
?
27. personalbar.visible屬性
?
語(yǔ)法格式：window.personalbar.visible
?
功能：確定個(gè)人欄是否可見，如果可見則返回true，反之返回false。
?
注：ie5.5不支持該屬性。
?
28. scrollbars屬性
?
語(yǔ)法格式：window.scrollbars.屬性
?
功能：scrollbars屬性本身也是一個(gè)對(duì)象，用于訪問(wèn)其自身的visible屬性來(lái)確定滾動(dòng)欄是否可見
?
注：ie5.5不支持該屬性。
?
29. scrollbars.visible屬性
?
語(yǔ)法格式：window.scrollbars.visible
?
功能：scrollbars.visible用于確定滾動(dòng)欄是否可見，如果可見則返回true，反之返回false。
?
注：ie5.5不支持該屬性。
?
30. toolbar屬性
?
語(yǔ)法格式：window.toolbar.屬性
?
功能：toolbar屬性本身也是一個(gè)對(duì)象，用于訪問(wèn)它自已的visible屬性從而確定工具欄是否可見。
?
注：ie5.5不支持該屬性。
?
31. toolbar.visible屬性
?
語(yǔ)法格式：window.toolbar.visible
?
功能：toolbar.visible屬性用于檢查工具欄是否可見，如果可見則返回true，反之返回false。
?
注：ie5.5不支持該屬性。
?
32. top屬性
?
語(yǔ)法格式：window.top.frames[數(shù)值] window.top.framename window.top.方法()
?
window.top.屬性
?
功能：window對(duì)象的top屬性用于包含所有裝入瀏覽器的子窗口(多框架)的最頂層窗口的信息。
?
轉(zhuǎn)載于:https://www.cnblogs.com/zxlasd/p/7062989.html
總結(jié)
- 上一篇： OpenCV探索之路（八）：重映射与仿射
- 下一篇： xss Payload