1. 程式人生 > >很詳細的JS底層分析

很詳細的JS底層分析


準備
如何嵌入網頁?
寫在網頁中
在連結上使用偽協議
使用獨立的js指令碼
語言核心
關於分號
輸出Html最簡單的方式
alert : 彈出視窗,除錯必備
命名規則
基本型別
字串
十六進位制
浮點
特殊常量
布林值
基於物件
建立
建構函式
成員函式
繼承
公共基類的屬性
陣列
建立
陣列的函式
Date物件
null 和 undefined
函式
定義函式
一個函式,多個函式名
函式巢狀函式
函式引數
函式自身的length
arguments.callee : 遞迴無名函式
函式的靜態變數
作用域
引用
等於
全等 (否定為!==)
+加
比較大小
in
instanceof
typeof
new
delete
void
[]
switch
label(標籤)/break/continue
throw / try...catch...finally
正值表示式
瀏覽器中的Javascript概覽
window物件
簡單的對話方塊
狀態列
定時器
錯誤處理onerror
瀏覽器資訊navigator
螢幕screen
開啟視窗open
移動視窗/改變大小moveTo , moveBy , resizeTo , resizeBy
焦點控制 focus 和 blur
文件滾動
當前位址列 location
歷史History
框架
文件Documents
基本常識
屬性
陣列
DOM樹
搜尋文件的特定元素
動態改變文件內容
一個動態改變Document內容的演示
一個把文章中字母都變為大寫的演示
把指定標籤改為粗體
更改屬性
臨時容器DocumentFragment
選中內容 getSelection
CSS
當前的CSS設定
指定樣式表
事件驅動
HTML中事件設定
Javascript中事件設定
事件列表
原始事件vs語義事件
同時執行原有動作和自定義動作
事件的返回值
this關鍵字
2級DOM標準的訊息機制
Event事件物件
UIEvent事件物件
MouseEvent事件物件
MutationEvent
IE事件模型
Key Event事件物件
載入事件 onload Event
合成事件 Synthetic Events
cookie
JS庫:prototype
$()等價getElementById()
$F()返回輸入控制元件的值
$A()引數轉Array
$H()轉類似聯合陣列的Hash物件
Try.these()嘗試直到一個成功


1. 序言
現在學的東西很容易忘記,寫這篇文章的目的是能讓我在需要時快速找回當時的感覺.

入門學習和參考手冊建議翻閱JavaScript.The.Definitive.Guide.5th.Edition的附錄(有電子版).


2. 準備
設定伺服器*.xml的MIME為text/xml ,Windows Xp自帶的IIS的設定如下圖 js_0000.png

Firefox上有許多外掛是開發必備的,用法大家Google,我列一下名稱

FireBug

Web Developer Toolbar 
GreaseMonkey 和 XmlHttpRequestDebugging

Html Validator 
另外建議安裝一下DreamWaver和EditPlus. EditPlus中可以快速切換IE和Js指令碼,快捷鍵Ctrl+B 強烈建議學習時便學邊除錯

3. 如何嵌入網頁?

3.1. 寫在網頁中
<script type="text/javaScript">
//程式碼
</script>

3.2. 在連結上使用偽協議
<a href="javascript:void window.open();">Open</a>


3.3. 使用獨立的js指令碼
<script language="javascript" src="/js/dialog.js" />

4. 語言核心

4.1. 關於分號
javascript的分號是選加的,如果不加,javacript會在換行處自動加上分號.

但是,建議你不要省略分號,理由如下

加了分號的程式碼可以用軟體壓縮,來節省頻寬(附帶效果是加密你的Js程式碼:) )(Ajax基礎教程 上的理由) 
良好的程式設計習慣(Javascript權威指南 上的理由)

4.2. 輸出Html最簡單的方式
見例子1_1

doucment.write("Hello World");

4.3. alert : 彈出視窗,除錯必備
見例子1_2

alert("彈出視窗,除錯必備");

4.4. 命名規則
區分大小寫,開頭必須是字母或 $ 或 _


4.5. 基本型別

4.5.1. 字串
使用Unicode字元,如

"test"

'name="zsp"' //雙引號可以放在單引號中,反之亦然

'You/'re right' //轉義字元,和C++的轉義相同

字串的屬性

str.length
//字串的長度

str.charAt(str.length-1)
//字串的最後一個字元(注意,第一個字元的索引是0,和C++陣列類似)

str.indexOf("@")
//第一個 @ 字元的位置

str.substring(str.lastIndexOf(".")+1,str.length);
//提取字尾"com",提取規則是左開右閉(就是包括左邊引數所代表的元素,而不包括右邊的)

str.toUpperCase();
//返回大寫形式

4.5.2. 十六進位制
0xff //15*16+15=255 , 0x為十六進位制字首


4.5.3. 浮點
-3.14 6.02E-23 //6.02 X 10-23(10的負23次方)


4.5.4. 特殊常量
Infinity 無窮大 
Number.POSITIVE_INFINITY 正無窮大 
Number.NEGATIVE_INFINITY 負無窮大 
NaN 或 Number.NaN 非法的值 
Number.MAX_VALUE 可表示的最大值 
Number.MIN_VALUE 可表示的最接近0的值

4.5.5. 布林值
true==1 false==0


4.5.6. 基於物件

4.5.6.1. 建立
方式1:

var o = new Object();
o.x=2.3;
o.y=-1.2;
方式2:

var o={x:2.3 , y:-1.2};
呼叫 ox //返回2.3

一個複雜點的例子 見例子1_3

var point={x:2.3,y:-1.2};
var side=4;
var square={
        upperLeft : {x:point.x , y:point.y},
        lowerRight : {x:(point.x + side) , y:(point.y+side)}
};

alert(square["upperLeft"]["x"]);//顯示2.3
備註:內建型別字串不是Object(),即用typeof得到的是"string",和"object"不等價,但在任何需要的地方他會自動轉化為一個String物件


4.5.6.2. 建構函式

function Rectangle(w,h)//建構函式.不要返回值,因為返回值會使this失效
{
        this.width=w;
        this.height=h;
}
var rect1=new Rectangle(2,4);//建立物件


4.5.6.3. 成員函式

function Rectangle_area(){return this.width * this.height;}//宣告函式

function Rectangle(w,h)
{
this.width=w;this.height=h;

this.area = Rectangle_area;//關聯函式為成員函式
}

var r=new Rectangle(3,2);
r.area();//返回6

4.5.6.4. 繼承
Javascript的類都自動繼承了原型物件 Object.prototype 
繼承的屬性為只讀的,既子類不可以給繼承的屬性賦值 
子類的同名屬性/函式將覆蓋父類的同名屬性/函式 
String和Date等內部類也有原型物件

//定義一個父類
function Complex(real , imaginary){
        this.x=real;
        this.y=imaginary;
}

//為父類新增一個方法,通過定義父類原型prototype的函式
//該方法同時覆蓋了Object.prototype中的同名函式
Complex.prototype.toString=function(){
        return this.x+"+"+this.y+"j";
}

//定義一個Complex函式,該函式不會被繼承(這時不要加this了)
Complex.magnitude=function()
{
        return Math.sqrt(x*x+y*y);      
}

//定義一個子類
function MoreComplex(real , imaginary){
        this.x=real;
        this.y=imaginary;
}

//繼承父類,注意這時MoreComplex的建構函式被父類的建構函式覆蓋
MoreComplex.prototype=new Complex(0,0);

//明確指定,使MoreComplex使用自己的建構函式
MoreComplex.prototype.constructor=MoreComplex;

//定義子類自己的函式
MoreComplex.prototype.swap=function(){
        var tmp=this.x;
        this.x=this.y;
        this.y=tmp;
}

a=new MoreComplex(11,33);

alert(a);//自動呼叫Complex.toString()
a.swap();
alert(a);

4.5.6.5. 公共基類的屬性
Object.prototype是所有類的公共基類

constructor屬性 構造器,由於建構函式確定了一個物件的型別,可以用如下程式碼確定一個物件的型別 
if((typeof o=="object" )&& o.constructor == Date)//...........
 但不能保證constructor屬性總是存在,類的建立者可以指定一個物件來取代原型的構造器,而指定的物件可以沒有 constructor (PS:此句抄書,我看不懂)

toString() 返回一個字串,內容為物件的值或型別. 預設的toString對於物件返回

[object class]
//class為類名,如自定義物件為Object
//類似的還有Array,Function,Date,Math,Error,Window,Document,Form
由於可以過載toString.所以,如果你想明確的呼叫預設的toString來獲得型別資訊,你可以這樣

Object.prototype.toString.apply(x);
toLocaleString() Object預設的toLocaleString返回值和toString相等;Array,Date,Number都綁定了自己的toLocaleString 
valueof() Object預設定valueof不執行任何轉換,Number和Boolean等有自定義的valueof(). 當你自定義了valueof時需要注意的是:valueOf()優先順序比toString()高,所以,你常不得不明確的呼叫toString() 
hasOwnProperty() 
var o = new Object();
o.hasOwnProperty("undef"); //false:沒有定義該屬性
o.hasOwnProperty("toString"); //false:該屬性是繼承的

Math.hasOwnProperty("cos");//true:Math有cos屬性
 * propertylsEnumerable() 一個屬性如果可以由for...in迴圈枚舉出來就返回true,否則,返回false

var o = {x:1};
o.propertylsEnumerable("x");//true
o.propertylsEnumerable("y");//false,無該屬性
o.propertylsEnumerable("valueOF");//false,該屬性不可列舉
isPrototypeOf() 呼叫該函式的物件如果是引數的原型,就返回true 
 var o=new Object();
 Object.prototype.isPrototypeOf(o);
 //true,o.constructor == Object

 Object.isPrototypeOf(o);//false
 o.isPrototypeOf(Object.prototype);//false

 Function.prototype.isPrototypeOF(Object);
 //true:Object.constructor == Function

4.5.7. 陣列

4.5.7.1. 建立
方式1

var a = new Array();
a[0]=2;
a[1]="I'm a earthman ."
a[2]=true;
a[3]={x:1 , y:3}
方式2

var a=new Array(2,"I'm a earthman .",true,{x:1 , y:3});
var a2=new Array(10);//注意,這個10是表示a有10個未定義元素!(因為這時候只傳給Array一個引數)
方式3

var a=[2,"I'm a earthman .",true,{x:1 , y:3}];
var a2=[[1,2,3],[1,2,3]];//可以巢狀

var base=11;
var a3[base,base+1,base+2];//可以為變數

var a4=[1,,,,5];//有3個未定義的元素

4.5.7.2. 陣列的函式
* join() 把所有的元素轉換為字串,引數作為分隔符(預設分隔符是 ,)

var a=[1,2,3];
a.join();//1,2,3
a.join(" : ");//1 : 2 : 3
* reverse() 對陣列反向排序 * sort() 預設按照UTF-8碼的順序排序,可以傳一個引數,如果返回一個小於等於0的數,第1個引數出現在第2個引數前面,反之同理.

 function randOrd(){
return (Math.round(Math.random())-0.5);
}

anyArray = new Array('3','a','5','F','x','47');
anyArray.sort( randOrd );       //把陣列亂序排列
* concat() 返回一個數組,包含了原陣列和引數

anyArray = new Array(47,33);

anyArray.concat(8,99,88 );
//[47,33,8,99,88]

anyArray.concat([8,99],[88,53] );       
//[47,33,8,99,88,53],會自動把引數中陣列拆包一層

anyArray.concat(2,[3,[4,5]]);   
//[47,33,2,3,[4,5]],拆包只拆一層
* slice() 返回一個數組的切片,返回規則如下

var a = [1,2,3,4,5]
a.slice(0,3); //返回a[0]至a[2],即[1,2,3]
a.slice(3);        //返回a[3]至結尾,即[4,5]
a.slice(1,-1);//返回a[1]至最後一個元素[2,3,4]
a.slice(-3,-2);//返回[3]
* splice() 可以刪除/新增原陣列元素,同時返回刪除的值

var a = [1,2,3,4,5,6,7];
a.splice(4);
//刪除a[4]至結尾,同時返回刪除的值,即a=[1,2,3,4],返回[5,6,7]

var a = [1,2,3,4,5,6,7];
a.splice(3,3,"a","b");
//從a[3]開始,刪除3個元素(包括a[3]),同時在從a[3]開始插入"a","b"作為新的元素,返回刪除的值
//即a=[1,2,3,"a","b",7],返回[4,5,6]

var a = [1,2,3,4,5,6,7];
a.splice(3,0,["a",2],"k");
//返回[],a=[1,2,3,["a",2],"k",4,5,6,7] ,splice()不會對新增的陣列拆包
* push()和pop()

var stack=[];

stack.push(1,2);//stack=[1,2],return 2(2表示陣列長度)

stack.pop();//stack=[1],return 2

stack.push(3);//stack=[1,3],return 2(2表示陣列長度)

stack.pop();//stack=[1],return 3

stack.push([4,5]);//stack=[1,[4,5]],return 2

stack.pop();//stack=[1],return [4,5]

stack.pop();//stack=[],return 1
* unshift()和shift() 和push()和pop()類似,不過是在陣列的頭進行操作

var a=[2];
a.unshift(1);
//a=[1,2]
//IE(包括IE7)和標準的規定返回值卻不同,Gecko/Opera 中返回值為新陣列的長度,而 IE 中沒有返回值,也就是返回值是 undefined。因此,程式設計時不要依賴這個返回值。

a.unshift(3,[4,5]);//a=[3,[4,5],1,2]

a.shift();
//返回3
* toString() toString等價於不加引數的join


4.5.8. Date物件

var now = new Date();
//預設是當前的時間和日期

var christmas = new Date(2000,11,25);
//月份從0開始計數,所以這是表示2000年12月25日

christmas.toLocaleString();//返回時間的本地表示,如果是中國大陸,這裡返回"2000年12月25日 0:00:00 "
//如果不加toLocalString,christmas自動轉換為string時會用GMT時間
//GMT時間這裡就是"Mon Dec 25 00:00:00 UTC+0800 2000 "

christmas.getDay()
//返回該日期是星期幾,比如這裡返回1,注意星期天返回的是0

4.5.9. null 和 undefined
null : 無值,表示它的不是有效的Javascript型別 
undefined : 已經宣告但是沒有定義的變數的值,物件的一個不存在的屬性也是該值 
==運算子將兩者視為相等,

可以用===區別null和undefinedes


4.6. 函式

4.6.1. 定義函式
方式1:

function square(x){
        return x*x;
}
方式2:

var square = function(x){return x*x;}
方式3://比較笨拙

var square = new Funtion("x","return x*x");

4.6.2. 一個函式,多個函式名

var square = function(x){return x*x;}
var b=square;
var c=b(5);//c=25

4.6.3. 函式巢狀函式

function hypotenuse(){
        function square(x){
                return x*x;
        }
        return Math.sqrt(square(a)+square(b));
}

4.6.4. 函式引數
儘管函式定義時引數個數是固定的,但呼叫時可以傳遞任意多個引數,這些引數可以通過arguments[]訪問,即使是無名的.

arguments.length可以說明它所含的元素個數

注意:arguments不是陣列(不可以用for...in迴圈),它是一個Aguments物件

arguments可以用於引數個數檢查,或接受任意數目引數...

function max()
{
var m=Number.NEGATIVE_INFINITY;
for(var i=0;i< arguments.length;i++)
        if(arguments[i]>m)m=arguments[i];
        
return m;
}

4.6.5. 函式自身的length
返回函式宣告中的引數的個數,通過arguments.callee.length訪問

//一個檢查引數是否相符的函式
function check(args){
        var actual=args.length;
        var expected=args.callee.length;
        if(actual!=expected){
                throw new Error("Wrong number of arguments");
        }
}

function f(x,y)
{
        check(arguments);
        return x+y;
}

4.6.6. arguments.callee : 遞迴無名函式
callee可以引用當前正在執行的函式

function(x)
{
if(x<1)return 1;
return x*arguments.callee(x-1);

4.6.7. 函式的靜態變數
類似在C++函式中宣告一個static變數

uniqueInteger.counter=0;//靜態變數
function uniqueInteger(){//每個返回一個不同的數 
        return uniqueInteger.counter++;
}

4.7. 作用域
沒有塊級作用域,其他類似於Java和C++.

即函式中無論在那裡宣告的變數,在整個函式體中都是有定義的.如:

(見例1_4)

var i="global";

function test(o){

document.write(i);//i為undefined,即函式中i已被宣告,但沒定義
var i="local";

if(typeof o == "object")
        {
                var j=0;        //j在整個函式中都有定義,不限於這個迴圈
                for(var k=0;k<10;k++){//k在整個函式中都有定義,不限於這個迴圈
                        document.write(k);
                }
                document.write("out loop k=",k);//k仍然有定義,值為10
        }

document.write("out loop j=",j);//仍然有定義,如果o不是object(),則j沒有被初始化,值為undefined,否則為9

}

備註:把所有的變數集中在函式開頭宣告(不一定要定義)可以避免許多詭異的錯誤.

4.8. 引用
對與 陣列 , 物件 , 函式 的拷貝只是拷貝了引用(相當於是個快捷方式),對任何一個副本的改動都會改動所有的副本

var a = [1 , 2 , 3];
var b = a;
a[0] = 99;
alert(b); //為99,2,3

a={x:1}
b=a;
a.x=2;
alert(b.x);//為2

4.9. ==(等於)和===(全等)

4.9.1. 等於
等於可以進行型別自動轉換,如

"2"==2
true==1
一個物件和字串或數字比較,會嘗試valueOf()和toString()轉換

null == undinfined

4.9.2. 全等 (否定為!==)
如果型別不同,則不相同 
NaN永遠不與任何值全等,包括它本身(可以用IsNaN()測試一個值是否是NaN) 
按字元原有編碼進行比較(等於操作在比較前先統一了編碼) 
null != undinfined 
對於陣列,物件,函式等引用型別只有當他們是指向同一個實體時才相等,如

var a = [1,2,3];
var b = [1,2,3];
alert(a==b);//false

4.10. +加
加法是從左到右的 a=1+2+" blind mine" // a="3 blind mine" b="blind mine "+1+2 // a="blind mine 12"


4.11. 比較大小
符號> , < , >= , <=

任何和NaN的比較都返回false 
字串和數字比較,會把字串轉換為數字(如果轉換不成功,則其值為NaN),再比較 
如果物件可以被轉換為數字和字串,將執行數字轉換來比較

4.12. in
in運算子左邊是一個字串,右邊是一個物件,如果字串是物件的一個屬性名則返回true

var point = {x:1};
var has_x = "x" in point ; //true
var has_y = "y" in point; //false
var ts = "toString" in point; //true,繼承屬性

4.13. instanceof
instanceof運算子要求左邊是一個物件的例項,右邊是物件名,如果兩者相符返回true

var d=new Date();
d instanceof Date;//true
d instanceof Object;//true,所有的物件都是Object的例項
d instanceof Number;//false

4.14. typeof
返回物件的型別

typeof 1; //number
typeof "1";//string
typeof true;//boolean

typeof [1,2];//object
typeof {x:1};//object

typeof function(x){};//function

typeof xxx;//未定義的物件返回undefined

4.15. new
建立一個新的物件

o=new Date;

4.16. delete
刪除物件的屬性

var o={x:1,y:2};

delete o.x; //返回true
typeof o.x;//返回undefined

delete o.x;//刪除不存在的屬性,返回true

delete o;//不能刪除var宣告的物件,返回true

x=1;//不用var關鍵字,隱式宣告一個變數
delete x;//返回true
x;//一個執行時錯誤,IE6顯示為 " 'x'未定義 "
注意:delete只能刪除屬性值,不能刪除引用物件 如

var my = new Object;

my.hire = new Date;
my.fire = my.hire;

delete my.hire;

alert(my.fire);//顯示當前的時間

4.17. void
可以出現在任何運算元前,它作用是捨棄運算的結果,返回undefined.

常用於javascript : URL中.可以計算一個計算一個表示式的值,又不讓瀏覽器顯示它.如

<a href="javascript:void window.open();">Open</a><!-- 不加void,點選後連結會消失,變為一個"[object]"字串 -->

4.18. []

//用於陣列
var a=[21,3];
a[0];//21

//用於物件,比"."運算子的優勢是其要取的屬性名可以動態生成
var b={x1:1,x2:"zsp"};
b['x1'];//1
b['x'+2];//zsp

for(f in o){
        alert('o.'+f+'='+o[f]);//由於f是動態生成的,所有不能用" . "運算子
}
== if/else/while/do...while/for== 和C++類似

== for...in === 可迴圈物件的所有使用者定義屬性,包括繼承的(但是不包括內建屬性)


var o={x:1,y:2};
var a=[];
var i=0;

for(a[i++] in o);//把o的屬性名複製到一個數字中(注意,順序不固定)

for (i in a)
{
alert(a[i]);//迴圈一個數組
}

4.19. switch

function convert(x){
        switch(typeof x){
                case 'number':  //case後可以接任意表達式,不限於常量
                        return x.toString(16);//轉換為16進位制
                case 'string':
                        return '"'+x+'"';
                case 'boolean':
                        return x.toSting().toUpperCase();
                default:
                        return x.toString();
        }
}

4.20. label(標籤)/break/continue
break,continue的基本用法和C++中類似,不過他們可以和label配合使用(有的像Java中的label,功能限制版的goto)

outerloop:
        for(var i=0;i!=10;i++)
        {
                for (var j=0;j<10;j++){
                        if(j>3)break;
                        if(i==2)break outerloop;//跳出外層迴圈
                        alert("j = "+j);
                }
                alert("i = "+i);
        }

4.21. throw / try...catch...finally
throw用來丟擲異常,異常物件通常是一個Error物件或其子型別

function factorial(x){
if(x<0)throw new Error("x must not be negative");//x是負數就丟擲異常
return x;
}
try...catch...finally捕捉異常

try{
//程式碼
}
catch(e)
{
//僅當try塊丟擲異常,才會執行,e為異常例項
//這個塊可以處理異常,也可以什麼都不做
}
finally{
//無論是否有異常,這個塊中的語句都將被執行
}

4.22. 正值表示式
//todo


5. 瀏覽器中的Javascript概覽
window物件代表顯示瀏覽器的視窗,document物件代表文件中視窗. 
定義函式的js檔案一般放在head區 
<body>和<frameset>的onload在文件被完全載入完成時觸發,onunload在文件被解除安裝時觸發


5.1. window物件
window是全域性物件,它的函式/屬性一般可以不加字首直接呼叫。有時為了避免名字衝突,可以加window字首


5.1.1. 簡單的對話方塊
注意:對話方塊中顯示的是純文字. * alert() 見圖js_0001.png

* confirm() 見圖js_0002.png


if(confirm("看我的非技術Blog嗎?/n/n我寫了不少詩哦 :)"))       location.replace("http://www.cnweblog.com/zuroc/");
* prompt() 見圖js_0003.png


n=prompt("你叫什麼名字呢?","");//第二個引數是輸入的預設值

document.write("<h1>你好, "+n+"!<br/>我叫張沈鵬.</h1>");

5.1.2. 狀態列
* status 瀏覽器狀態列的顯示文字 * defaultStatus 瀏覽器狀態列顯示文字的預設值 該屬性在firefox預設關閉,不介紹了


5.1.3. 定時器
* setTimeout() 安排一個JavaScript程式碼在指定的時間後執行 * clearTimerout() 取消setTimeout的執行 * setInterval() 每隔指定的時間呼叫指定的函式 * clearInterval() 取消Interval的執行

function hi(){alert("hi!");}
setInterval("hi()",2000);//2000ms=2s

5.1.4. 錯誤處理onerror
只要給這個屬性賦了一個函式,那麼這個視窗只要發生了javascript錯誤,該函式就會被呼叫.傳給錯誤處理函式的引數有三個,第一個是錯誤型別,第二個是引發錯誤的js指令碼的Url,第三是發生錯誤的行號.

如果onerror返回true,它將遮蔽系統的錯誤處理程式

//如果你不想錯誤訊息打攪使用者,無論你的程式碼有多Bug
window.onerror = function(){return true;}
//不過,不建議你這樣做

5.1.5. 瀏覽器資訊navigator
包含了瀏覽器的資訊

* appName Web瀏覽器的名稱 * userAgent 瀏覽器在USER-AGENT HTTP標題中傳送的字串,通常包含了appName和appVersion * platform 平臺,如Win32

//一個簡單瀏覽器探測器
var browser = {
    version: parseInt(navigator.appVersion),
    isNetscape: navigator.appName.indexOf("Netscape") != -1,
    isMicrosoft: navigator.appName.indexOf("Microsoft") != -1
};

5.1.6. 螢幕screen
* width,height 解析度的寬和高 * availWidth , availHeight 去除了工作列這樣的特性的寬和高 * colorDepth 螢幕的色深 見例子1_5.html


5.1.7. 開啟視窗open

//注意,直接彈出視窗容易被瀏覽器廣告攔截了
window.open("http://www.cnweblog.com/zuroc/","視窗名","width=200,height=200,status=yes,resizable=yes");
//具體屬性希望那位大哥可以幫我列一下
//被開啟的視窗可以用opener引用父視窗,如果是使用者自己開啟的opener為null
//用open時一般要明確加上window字首,因為Document也有open屬性
見例子1_5.html

window.close可以關閉你用javascript開啟的視窗


5.1.8. 移動視窗/改變大小moveTo , moveBy , resizeTo , resizeBy
* moveTo 把視窗左上角移到指定的座標 * moveTo 把視窗相對現在的位置移動指定的象素 * resizeTo 按照絕對大小調整視窗 * resizeBy 按照相對大小調整視窗 見例子1_5.html


5.1.9. 焦點控制 focus 和 blur
* focus() 將焦點給指定視窗,同時把視窗移動到最前端,使視窗可見,當open()開啟視窗,如果第二個引數指定的視窗名已經存在,open不會自動使那個視窗可見,這時就要呼叫該函式 * blur() 放棄焦點,這時視窗將被至於視窗佇列的最後(這就什麼sohu背投廣告的原理吧) 見例子1_5.html


5.1.10. 文件滾動
* scrollBy() 相對當前位置滾動指定的象素 * scrollTo() 將文件滾動到一個絕對位置,文件的左上角的座標為(0,0)


5.1.11. 當前位址列 location
它本身代表當前視窗的URL,它還有各個屬性如下 * location.protocol 用的協議,如在本地直接開啟網頁則是file: * location.host 用的域名 * location.pathname 域名後的網址路徑.如"/F:/Javascript絕對簡明教程/example/test.html " * location.search 查詢的內容 * location.reload() 重新整理當前線 * location.replace() 跳轉到指定的URL,與直接給location賦值不同的是,這樣不會在瀏覽歷史中留下記錄(也就是後退不會到該頁)

//一個把URL串中查詢內容解析為鍵值對的函式
function getArgs(){
        var args=new Object;
        var query=location.search.substring(1);//或取查詢串
        var pairs=query.split(",");     //在逗號處分開
        for(var i=0;i<pairs.length;i++){
                var pos=pair[i].indexOf("=");
                var argname=pairs[i].substring(0,pos);
                var value=pairs[i].substring(pos+1);
                args[argname]=decodeURIComponent(value);
        }
        return args;
}
//呼叫可以這樣
var args=getArgs();
if(args.x)x=parseInt(args.x);

//檢查瀏覽器是否支援DOM,如果不支援則跳轉
if (!document.getElementById) location = "staticpage.html";

5.1.12. 歷史History
指令碼不能真正訪問History陣列,但是可以呼叫它的函式 * back() 後退 * forward() 前進 * go() 後退/前進指定的頁數


5.1.13. 框架
一個視窗可以用frames,parent,top引用其他屬性

每個視窗有一個frame[]陣列(如果一個視窗沒有框架則它的frame[]是空的,frames.length==0),frame[0]表示它的第一個子框架,如此類推

每個視窗還有一個parent屬性,為包含這個視窗的window物件,這樣一個視窗通過諸如parent.frames[1]的方式,引用他的兄弟視窗

對於頂層視窗,有parent==window

對於框架中的框架,可以用top直接引用最頂層的視窗

相關推薦

詳細JS底層分析

言 準備 如何嵌入網頁? 寫在網頁中 在連結上使用偽協議 使用獨立的js指令碼 語言核心 關於分號 輸出Html最簡單的方式 alert : 彈出視窗,除錯必備 命名規則 基本型別 字串 十六進位制 浮點 特殊常量 布林值 基於物件 建立 建構函式 成員函式

分布式架構的演進,分析詳細到位

解決 配置管理 基本 關系型 class mysq 不能 lamp nosql 作者:李小翀鏈接:https://www.zhihu.com/question/22764869/answer/31277656來源:知乎著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載

ANR日誌traces.txt分析 (mark~ 詳細

ANR日誌traces.txt分析  DD_Dog 關注 2018.07.24 19:58* 字數 806 閱讀 234評論 0喜歡 0 導致ANR的幾種情況 KeyDispatchTimeout(5s): 按鍵或觸控事件在特定時間內無法

這個動態規劃分析詳細(轉載)

動態規劃 通過把原問題分解為相對簡單的子問題的方式求解複雜問題的方法。動態規劃常常適用於有重疊子問題和最優子結構性質的問題。 基本思想 若要解一個給定問題,我們需要解其不同部分(即子問題),再合併子問題的解以得出原問題的解。 通常許多子問題非常相似,為此動態規劃法試圖僅僅解決每個子問題一次,從而減少計算量

詳細的web簡潔的滑動效果Swipe.JS

最近要做一個移動web的專案,前端後端都自己一人來搞。由於之前一直是做後端的開發,沒涉及過前端的開發,甚是無從下手,但又不得不去弄,於是乎,先把w3school上前端相關的html、js、css都預覽了一遍,然後在仿照別人的站點自己嘗試著去實現。 雖然很多人都

分散式架構的演進,分析詳細到位

初始階段 的小型系統 應用程式、資料庫、檔案等所有的資源都在一臺伺服器上通俗稱為LAMP 特徵: 應用程式、資料庫、檔案等所有的資源都在一臺伺服器上。 描述: 通常伺服器作業系統使用linux,應用程式使用PHP開發,然後部署在Apache上,資料庫使用Mysql,彙集各種免費開源軟體以及一臺廉價伺服器就

公司網絡卡的原因分析與處理

網絡問題分析與解決方案一、電腦網速突然變的很慢、很卡,怎麽辦1. 如果你是用的無線路由器,不管你有沒有設置無線密碼,都有可能被別人盜用你的網絡,可以關掉無線功能,自已用有線連接上網 2. 如果還不行,那麽啟路由器,有貓的話也要重啟,再試試 3. 如果你的路由器用的時間超過一年,質量不好的話可能內部的部件已經老

js prototype分析

分享 proto nbsp height 2-2 idt ima 技術 wid js prototype分析

NAT穿透的詳細講解及分析

設置 網通 我會 什麽 報告 pub 後端 火墻 聯系 原文地址:http://bbs.pediy.com/thread-131961.htm 一、什麽是NAT?為什麽要使用NAT?NAT是將私有地址轉換為合法IP地址的技術,通俗的講就是將內網與內網通信時怎麽將內網私有IP

【9.0】對於java集合的叠代器的底層分析

trac print post turn pan 很難 分享 對象 nal 前言:如果對java的集合的遍歷(主要是HashMap中的keySet() 和 entrySet()是如何取值並且可以實現遍歷的)不是很明白的話,有興趣深入了解的小夥伴,本文可以作為一個參考,由於時

在MyEclipse(2015)中上傳項目到github的步驟(詳細

hub csdn log www sdn 使用詳解 html cli idc (圖文)在MyEclipse(2015)中上傳項目到github的步驟(很詳細) git|smartGit使用詳解 SmartGit使用教程在MyEclipse(2015)中上傳項目到github

與Node.js重新認識的第2周 - Node.js 底層

可見 復用 rip compile 不同 包含 completed content 兩個 我與Node.js重新認識的第2周 - Node.js 底層 書接上次:《我與Node.js重新認識的第一周 - Node.js 風格特點》。這次讀了一些關於底層實現的東西: 《

Python-關於豆瓣發布“說句話”,添加網頁等的js行為分析

方法 blog 為我 png lin 註意點 douban tom line 想做個利用Python發布豆瓣“說句話”的工具,目前我已知的有兩種方法: 用Python驅動一些無界面瀏覽器phantomjs(因為我沒用Chrome),直接模擬發狀態的行為。 按F12分析網頁

Array方面Js底層代碼學習記錄

urn 表示 eve 計算 ray app 類型 absolute 對象 一、.clear() →Array function clear() { this.length = 0; return this;

DataGridView詳細的用法

olt windows pri 追加 情況下 限制行 clear 編輯狀態 tro 一、 DataGridView 取得或者修改當前單元格的內容: 當前單元格指的是 DataGridView 焦點所在的單元格,它可以通過 DataGridView 對象的 C

安卓詳細布局分析-從根布局到具體布局

技術 右下角 就是 nbsp sdk appname content set tools 安卓詳細布局分析-從根布局到具體布局 一,分析一下安卓程序的根布局是什麽,我們寫的xml文件部署到什麽地方,setContentview(layout)是怎麽回事。 安卓SDK

hive 學習系列五(hive 和elasticsearch 的交互,詳細哦,我又來吹liubi了)

圖片 upload ima com 5.6 cat rds href ping hive 操作elasticsearch 一,從hive 表格向elasticsearch 導入數據 1,首先,創建elasticsearch 索引,索引如下 curl -XPUT ‘10.81

Js分析遞迴

遞迴 相信在數學中很常見這個概念,實際在程式設計中也很常見這樣的思維。遞迴通俗的來說,就是通過不斷的將當前問題進行分解,向前追溯直到終點然後再反推求解的過程。 通俗解讀 案例一 :看電影不知道在第幾排 看電影時不清楚自己在第幾排,可以通過問前一排的人來得知,進行加1即可。那麼用遞迴的思路求解程式碼就是

HTTP-web伺服器接收到client請求後的處理過程(詳細

      1. 客戶發起情況到伺服器網絡卡;     2. 伺服器網絡卡接受到請求後轉交給核心處理;     3. 核心根據請求對應的套接字,將請求交給工作在使用者空間的Web伺服器程序     4. Web伺

HTTP-web服務器接收到client請求後的處理過程(詳細

dns解析 版權 如果能 結束 它的 配置網絡 cin 規範 路徑 1. 客戶發起情況到服務器網卡; 2. 服務器網卡接受到請求後轉交給內核處理; 3. 內核根據請求對應的套接字,將請求交給工作在用戶空間的Web服務器進程 4. Web服