Java Script 基礎

1、 JS的簡介

JavaScript是一種網頁編程技術，常常用於建立動態交互網頁

JavaScript是一種基於對象和事件驅動的解釋性腳本語言，相似C語言和Java的語法

事先不編譯；逐行執行；無需進行嚴格的變量聲明；內置大量現成對象，編寫少許程序能夠完成目標

不一樣的瀏覽器甚至同一瀏覽器的不一樣版本對JavaScript的支持程度都不同

2、 JS的基本語法

0. 有兩種JavaScript寫法：

a. 直接在 html 中嵌入，程序寫法:

<script type="text/javascript" language="JavaScript" charset="UTF-8">

<!--

...javaScript程序...

// -->

</script>

b. 調用獨立JavaScript文件：在html中寫 <script type="text/javascript" src="test1.js"> </script>

<script> 不能用空標誌。 JS腳本文件中不須要腳本開始和結束聲明，直接寫 function

1. 在HTML中大小寫是不敏感的，但標準的JavaScript是區分大小寫的

2. 分號表示語句結束。有換行，分號容許不加(建議加上，以避免錯誤和歧義)

程序忽略縮進：提倡加上空格或TAB加強程序可讀性

3. 標識符：成份是 不以數字開頭的字母、數字 和下劃線(_)、美圓符($)

ECMA v3標準保留的JavaScript的關鍵字：

break case catch continue default delete do else false finally

for function if in instanceof new null return switch this

throw true try typeof var void while with

4. 變量的聲明： var x,y; (變量沒類型；未聲明的變量也能夠用，且是全局的；函數體內聲明的變量則是局部的)

x=1; y="hello world!"; (變量的類型由所賦的值決定)

5. 函數： function 函數名 (參數){ 函數體; return 返回值;}

參數沒類型或順序，且可變長；可使用變量、常量或表達式做爲函數調用的參數

聲明函數時，參數可不明寫，調用時用 arguments[number] 接收。參數是值傳遞的。

函數由關鍵字 function 定義； 函數名的定義規則與標識符一致，大小寫是敏感的

返回任意類型(不需寫返回類型)； 返回值必須使用return

//參數數量是可變的,若要限定參數數量,以下作法: (指定參數數量爲0)

if ( arguments.length !== 0 ) throw Error.parameterCount();

caller: 調用此函數的函數。沒有被調用則此變量爲 null

arguments: 此函數的參數列表。

arguments.caller: 調用此函數的參數列表,沒有被調用則爲 undefined

arguments.callee: 此函數自己的一個引用。在匿名函數裏會須要用到。

6. 數據類型：

基本類型: Number：數字、 String：字符串、 Boolean：布

爾

特殊類型: Null：空、 Undefined：未定義

組合類型: Array：數組、 Object：對象

7. Number 數值類型：全部數字都採用64位浮點格式存儲，至關於Java和C語言中的double格式

能表示的最大值是 ±1.7976931348623157 x 10^308；能表示的最小值是 ±5 x 10^ -324

10進制的整數的精確表達的範圍是 -9007199254740992 (-2^53) 到 9007199254740992 (2^53)

16進制數據前面加上0x，八進制前面加0

保留多少位小數： var a = 111.115555; var b = a.toFixed(2); alert(b + ' : ' + typeof b); // 111.12 : string

8. String 類型：字符串常量首尾由單引號或雙引號括起

沒有字符，只有字符串(全部字符都按字符串處理)

經常使用轉義符： \n換行 \'單引號 \"雙引號 \\右斜杆 (字符串中部分特殊字符必須加上右劃線\)

漢字常使用特殊字符寫，如： \u4f60 -->"你" \u597d -->"好" (可避免亂碼)

9. Boolean 類型：僅有兩個值：true和false，實際運算中true=1,false=0

也能夠看做on/off、yes/no、1/0對應true/false；主要用於JavaScript的控制語句

10.null, undefine 類型：

null 在程序中表明變量沒有值；或者不是一個對象

undefined 表明變量的值還沒有指定；或者對象屬性根本不存在

有趣的比較：

null 與空字符串: 不相等, null 表明什麼也沒有，空字符串則表明一個爲空的字符串

null 與 false : 不相等, 可是 !null 等於 true

null 與 0 : 不相等，(可是在C++等其它語言中是相等的)

null 與 undefined : 相等，可是 null 與 undefined 並不相同

11.數據類型轉換：JavaScript屬於鬆散類型的程序語言

變量在聲明的時候並不須要指定數據類型；變量只有在賦值的時候纔會肯定數據類型

表達式中包含不一樣類型數據則在計算過程當中會強制進行類別轉換(優先級：布爾-->數字-->字符)

數字 + 字符串：數字轉換爲字符串

數字 + 布爾值：true轉換爲1，false轉換爲0

字符串 + 布爾值：布爾值轉換爲字符串true或false

函數 parseInt: 強制轉換成整數(若是包含字符串，則轉換到字符串爲止，後面再也不理) //如 parseInt("13a2")=13

函數 parseFloat: 強制轉換成浮點數

函數 eval: 將字符串強制轉換爲表達式並返回結果，亦可將字節或變量轉成數值。

函數 typeof: 查詢數據當前類型(string / number / boolean / object ) ，未定義則返回「undefined」

12.運算符：(同java)

算術運算符: 加/字符鏈接(+)、 減/負號(-)、 乘(*) 、除(/)、 餘數(% )； 遞增(++)、 遞減(--)

邏輯運算符: 等於( == )、 不等於( != ) 、 大於( > ) 、 小於( < ) ； 大於

等於(>=) 、小於等於(<=)

與(&&) 、或(||) 、非(!) ； 恆等(===)、不恆等(!==)

位運算符: 左移(<<) 、有符號右移(>>)；無符號右移(>>>)

位與(&) 、位或(|)、異或(^) 、NOT (~)

賦值運算符: 賦值(=) 、複合賦值(+= -= *= /= %= &= )

(先運行完右邊的，再跟左邊的進行賦值運算；如 var i=10;i-=5-3;結果8)

13.選擇控制語句(同java)

if(...){...} else{...} if 語句容許不使用else子句；容許進行嵌套

switch(表達式){case 值1:語句1;break; case 值2:語句2;break; default:語句3;}

14.循環控制語句(相似java)

for (初始化;條件;增量){ 語句1; ... }

for-each遍歷: for(var key in objs){var element=objs[key];...} // 注意: in 前面的是 key,而不是下標或者集合裏面的元素,獲取集合裏的元素要使用 集合[key]

while (條件){ 語句1; ... }

do{語句1; ...}while(條件);

break, continue 跳出循環；還可配合標籤使用

15.對象：JavaScript是一種基於對象語言，對象是JavaScript中最重要的元素

對象由屬性和方法封裝而成

javaScript包含四種對象:

內置對象 Date

自定義對象 Cart

瀏覽器對象 window

ActiveX對象 ActionXObject

16. 異常處理：

try{ ... } catch( e ) { ... } finally { ... }

try{ throw new Error("Err0"); } catch( e ) { alert(e.description); } finally { ... }

try{ throw "Err1"; } catch( e ) { if(e == "Err1") alert("錯誤！"); }

try{ ... } catch( e ) { alert(e.message || e.description); } // 查看出錯提示

17.選取頁面的對象:

var obj = document.forms["FormName"].elements["elementName"];

var obj = document.forms[x].elements[y]; //x和y 是int類型，表示第幾個表單，第幾個元素

var obj = document.FormName.elementName;

var obj = document.all["elementName"];

var obj = document.all["elementID"];

var obj = document.getElementById("elementID");

var obj = document.getElementsByName("elementName"); //返回數組

var obj = document.getElementsByTagName("TagName"); //返回數組

18. typeof 查看類型:

undefined, null, boolean, number, string, object, function

也就是 typeof 返回的值只能是上面的其中一個(字符串類型)。

注意:以上單詞都是小寫，不要與內置對象 Number, String, Object, Function 等混淆。

null: typeof(null) 返回 "object", 但null並不是object, 具備 null 值的變量也並不是object。未定義的返回"undefined"

number: typeof(NaN) 和 typeof(Infinity) 都返回 number; NaN參與任何數值的計算結果都是NaN,且 NaN != NaN, Infinity / Infinity = NaN

19.instanceof 判斷類型:

instanceof 返回一個 boolean 值,

指出對象是不是特定類的一個實例, 實際上就是檢測實例是否有繼承某類的原型鏈。

對於 Array, null 等特殊對象 typeof 一概返回 object，這正是 typeof 的侷限性。

instanceof 用於判斷一個變量是否某個對象的實例,或者子類,如: var a=new Array();alert(a instanceof Array);會返回 true, 而 alert(a instanceof Object)也會返回 true

再如: function test(){};var a=new test();alert(a instanceof test)返回 true, alert(test instanceof Function)返回 true, 但 alert(a instanceof Function)返回 false(不明白什麼緣由)

注意: function 的 arguments, 使用(arguments instanceof Array)返回 false,儘管看起來很像。

另外: (window instanceof Object)返回 false, 這裏的 instanceof 測試的 Object 是指js中的對象,不是dom模型對象。而 typeof(window) 會得 "object"

20.in 用法:

一般使用在 for 循環中,做 foreach 用,像 for(var i in obj)...

也能夠用在類中,判斷類裏面是否有此 key。但注意不能有效用在數組中。

如: var ar = {a:false, b:2}; alert('a' in ar)返回 true;由於 ar['a'] 存在。

在數組中使用時,如: var arr=[4,5,6]; alert(2 in arr)會返回 true,由於 arr[2] 存在。而 alert(5 in arr)會返回 false,arr[5] 不存在。

if (key in obj) 至關於 if(!!obj[key])。

數組中也可使用 for in,如: var array = ['a', 'b', 'c', 'd'];for(var item in array){alert(array[item]);}

值得注意的是,若是對類進行 .prototype.函數 來擴展, for in 時會受到影響,把擴展的內容也循環出來。

因此不同意對 Object 類進行擴展,也不同意數組使用 for in(由於數組有可能被擴展了)

21.閉包(closure)

是一個擁有許多變量和綁定了這些變量的環境的表達式(一般是一個函數)，於是這些變量也是該表達式的一部分。

1) 變量的做用域

函數內部能夠直接讀取全局變量。(函數內部聲明變量的時候，必定要使用var命令。若是不用的話，你實際上聲明瞭一個全局變量！)

在函數外部沒法讀取函數內的局部變量。

鏈式做用域(chain scope):子對象會一級一級地向上尋找全部父對象的變量。因此，父對象的全部變量，對子對象都是可見的，反之則不成立。

2) 閉包就是可以讀取其餘函數內部變量的函數。

因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成"定義在一個函數內部的函數"。

因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

3) 閉包的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是避免外部修改這些變量的值。

4) 注意:

閉

包使得函數中的變量都被保存在內存中，內存消耗很大，不能濫用，不然影響性能，可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象(object)使用，把閉包看成它的公用方法(Public Method)，把內部變量看成它的私有屬性(private value)，這時必定要當心，不要隨便改變父函數內部變量的值。

22.比較運算

1)「==」 與 「===」 的區別

「==」 雙等號, 用於比較時會忽略類型, 字符串能夠與數字相等, null 與 undefined 相等

「===」 三等號, 用於比較時嚴格區分類型,類型不相同的不會認爲相等

同理還有不等於( 「!=」 與 「!==」 ),比較規則與上面的同樣

示例:

alert( '22' == 22 ); // true

alert( '22' === 22 ); // false

alert( null == undefined ); // true

alert( null === undefined ); // false

alert( 0 == null ); // false, 注: null, undefined 這二者與其它的比較都爲false

alert( 1 == true ); // true

alert( 1 === true ); // false

alert( 0 == '' ); // true

alert( 0 === '' ); // false

alert( ' \t\r\n ' == 0 ); // true, 注: 空格、跳格、換行, 都會轉成 0 來處理

alert( [10] == 10 ); // true,注: 對象與基本類型比較時，會先把對象轉成基本類型。

alert( [10] == '10' ); // true

alert( /\d/ > 0 || /\d/ <= 0 ); // false, 沒法轉換正則爲數字

alert( {} > 0 || {} <= 0 ); // false, 沒法轉換Object爲數字

alert( NaN == NaN ); // false, NaN 與全部值都不相等，包括它本身。

alert( NaN > 0 || NaN <= 0 ); // false, NaN的比較都爲false

alert( NaN > NaN || NaN <= NaN ); // false

2) 比較法則(僅忽略類型的比較,不是嚴格比較,比較運算符有: >, >=, <, <=, ==, !=):

對於基本類型 Boolean, Number, String 三者之間作比較時，老是向 Number進行類型轉換，而後再比較(String 類型的若是無法轉成數字,則轉成 NaN)；

若是有Object，那麼將Object轉化成這三者，再進行比較(能夠轉成數字的，優先轉成數字,像Date就轉成數字)；

對於 null 和 undefined, 只有兩個都是它們時才相同，其餘都爲false。

比較對象、數組和函數時，進行引用比較，只有引用的是相同地址才認爲相同，不然即便擁有相同的屬性和函數都認爲不相同。

若是不能轉成數值，或者是NaN，則比較結果爲false

3、 JS的內置對象

11種內置對象：Array, Boolean, Date, Math, Number , String

Error, Function, Global , Object, RegExp

在JavaScript中除了nul

l和undefined之外其它的數據類型都被定義成了對象

能夠用建立對象的方法定義變量； String、Math、Array、Date、RegExp是JavaScript中經常使用的對象

內置對象的分類：

數據對象: Number數據對象； String字符串對象； Boolean布爾值對象

組合對象: Array數組對象； Math數學對象； Date日期對象

高級對象: Object自定義對象；Error錯誤對象；Function函數對象； RegExp正則表達式對象；Global全局對象

自動建立對象:調用字符串的對象屬性或方法時自動建立對象，用完就丟棄。 如： var str1="hello world";

手工建立對象:採用new建立字符串對象str1，全局有效。 如：var str1= new String("hello word");

1. String 字符串對象：

格式編排:anchor()錨、blink()閃爍、fixed()固定、bold()粗體、italics()斜體、strike()刪除線

big()字變大、small()字變小、sub()下標、sup()上標；

fontcolor(color)字體顏色、fontsize(size)字體大小、link(url)超連接

大小寫轉換: toLowerCase()返回小寫字符串、toUpperCase()返回大寫字符串

獲取指定字符:charAt(index)返回指定位置字符、charCodeAt(index)返回指定位置字符Unicode編碼

用法：str1.bold();//字體變粗；至關於「<b>str1</b>「 str1.anchor(); //把str1標識爲錨

子字符串處理:

截取:str1.substr(start,length); //返回從索引位置start開始長爲length的子字符串

str1.substring(start,end); //返回start開始end結束的子字符串,不包括最後的一個

str1.slice(start,end); //同substring，但容許使用負數表示從後計算位置,不包括最後的一個

替換:str1.replace(findstr,tostr); //返回替換finstr爲tostr以後的字符串

分割:str1.split(bystr); //返回由bystr分割成的字符串數組(一般bystr是鏈接符號，如逗號或橫杆)

鏈接:str1.concat(string2); //返回 str1 與 string2 鏈接後的字符串

查詢字符串: indexOf(findstr,index)返回正向的索引位置、lastIndexOf(findstr)返回反向的索引位置

match(regexp)返回匹配的字符串、search(regexp)返回找到字符串的首字符索引

用法：

str1.indexOf(findstr,index);//查找字符串findstr;從index位置開始的索引，省略index則從0開始找;相似下一句

str1.lastIndexOf(findstr); //從後面找起;返回findstr在str1中出現的首字符位置下標，沒有找到返回-1

str1.match(regexp); //regexp表明正則表達式或字符串;返回匹配字符串的數組，若是沒有匹配則返回null

str1.search(regexp); //返回匹配字符串的首字符位置下標;做用同indexOf方法,但可寫正則表達式

str1.length; //獲取字符

串長度；漢字、字母長度均爲1；返回大於或等於0的整數

2. Array 數組對象：

1) 建立數組：

var a = new Array(); a[0] = "元素1"; a[1] = "元素2";

var a = new Array(){"元素1", "元素2"};

var a = new Array("元素1","元素2"); //一維數組，效果同上

var a = new Array(); a[0] = new Array(); //二維數組

簡略的數組建立方法：

var a = ['元素1', '元素2']; // 效果等同於: var a = new Array("元素1","元素2");

2) 刪除數組： delete 數組名;

3) 數組操做：

arr.length; //獲取數組元素的個數；返回大於或等於0的整數

鏈接數組： (原數組不變)

arr.join(bystr); //把數組的各元素由bystr鏈接起來做爲字符串；與字符串的split功能恰好相反

arr.toString(); //返回由逗號(,)鏈接數組元素組成的字符串

document.write(v.toString());document.write(v); //這兩句效果同樣

arr2 = arr.concat(元素, ...); //把元素添加到數組尾端後，返回另外一數組；在參數裏填入另外一數組，返回合併數組

數組排序： (返回排序後的數組；改變原數組)

arr.reverse(); //按原順序倒着排序

arr.sort(); //按字典順序排序

獲取子數組： (返回被刪/被截取的元素數組)

arr.slice(start,end); //從start下標開始，截取到end；返回被截取的元素數組；不改變原數組

//start和end可用負數表倒數(-1表明最後一個元素)；end<start時不截取；忽略end，截取start後的全部元素

arr.splice(start,n,value, ...); //從start下標開始刪除n個，再插入value(可理解爲替換)；改變原數組

//start爲負數時表倒數；n<1表不刪除；可忽略value(不插入)；可忽略n，表刪除後面全部；返回被刪元素數組

4) 棧：(數組的基礎； 改變原數組)

arr.pop(); //刪最後的一個元素；返回刪除的元素

arr.push(元素, ...); //添加元素到最後位置；返回數組長度; 等價於: arr[length] = newValue;

arr.unshift(元素, ...); //添加元素到最前位置(多個參數，則按參數順序同時插入)；返回數組長度

arr.shift(); //刪最前的一個元素；返回被刪除的元素

5) toString 和 valueOf

把每一項都調用 toString 方法，而後用半角逗號(,)鏈接每一項。

如: var arr = [1,2,3,4,5]; alert(arr); //output:1,2,3,4,5

toLocaleString 方法在這裏不作詳細說明了，他的效果與 toString 方法相似，只是每項調用 toLocateString 方法。

4. Math 數學對象：

都是數學常數：(可直接用)

Math.E (天然數) Math.LN2 (ln2) Math.LN10 (ln10)

Math.LOG2E (log 2e)

Math.LOG10E (log e) Math.PI (圓周率) Math.SQRT1_2 (根號1/2) Math.SQRT2 (根號2)

三角函數：

Math.sin(x) 計算正弦值； (x在0~2π之間，返回值-1~1)

Math.cos(x) 計算餘弦值； (x在0~2π之間，返回值-1~1)

Math.tan(x) 計算正切值； (x在0~2π之間，返回正切值)

反三角函數：

Math.asin(x) 計算反正弦值；(x在 -1與1之間，返回0~2π)

Math.acos(x) 計算反餘弦值；(x在 -1與1之間，返回0~2π)

Math.atan(x) 計算反正切值；(x能夠爲任意值，返回 -π/2 ~π/2)

Math.atan2(y,x) 計算從X軸到一個點的角度；(y,x分別爲點的縱座標和橫座標，返回-π ~π)

計算函數：

Math.sqrt(x) 計算平方根

Math.pow(x,y) 計算x^y

Math.exp(x) 計算e的指數 e^x

Math.log(x) 計算天然對數 (x爲大於0的整數)

數值比較函數：

Math.abs(x) 計算絕對值

Math.max(x,y,...) 返回參數中最大的一個

Math.min(x,y,...) 返回參數中最小的一個

* Math.random() 返回0~1之間的一個隨機數 //若要整數時，如0~99的隨機數： n=parseInt(Math.random()*100);

Math.round(x) 返回舍入爲最接近的整數(四捨五入，負數時五舍六入)

* Math.floor(x) 返回下舍入整數 (結果不大於x；正數時直接捨去小數，負數時 -1.1==-2 )

Math.ceil(x) 返回上舍入整數 (結果大於等於x)

5. Date 時間對象：

建立日期對象：

a.不指定參數時： var nowd1=new Date();document.write(nowd1.toLocaleString( ));

//顯示當前時間，如：2008年11月24日 星期一 19時23分21秒

//不用"toLocaleString()"則顯示： Mon Nov 24 2008 19:23:21 GMT+0800 (CST)

b.參數爲日期字符串： var nowd2=new Date("2008/3/20 11:12");alert(nowd2.toLocaleString());

//顯示： 2008年03月20日 星期六 11時12分00秒

var nowd3=new Date("08/03/20 11:12");alert(nowd3.toLocaleString( ));

//顯示： 1920年08月03日 星期六 11時12分00秒 //按 月、日、年 的順序

c.參數爲毫秒數： var nowd3=new Date(5000); alert(nowd3.toLocaleString( ));

//顯示： 1970年01月01日 星期四 08時00分05秒 //顯示本國的時間

alert(nowd3.toUTCString()); //顯示西方的時間： Thu, 01 Jan 1970 00:00:05 GMT

d.參數爲年月日小時分鐘秒毫秒： var nowd4=new Date(2008,10,24,11,12,0,300);

alert(nowd4.toLocaleString( )); //毫秒並不直接顯示；月份參數從0~11，因此這裏10對應11月份

//顯示： 2008年11月24日 星期一 11時12分00秒

獲取和設置日期、時間的方

法：

getDate() setDate(day_of_month) 日期 (1~31)

getDay() 星期 (1~7; 沒set方法)

getMonth() setMonth (month) 月份 (0~11; 別忘加1)

getFullYear() setFullYear (year) 完全年份(-271820~275760)

getYear() setYear(year) 年 (範圍同上； 1900年計算爲0)

getHours() setHours (hour) 小時 (0~23)

getMinutes() setMinutes (minute) 分鐘 (0~59)

getSeconds() setSeconds (second) 秒 (0~59)

getMilliseconds() setMillliseconds (ms) 毫秒(0-999)

getTime() setTime (allms) 累計毫秒數(從1970/1/1 00:00:00開始)

注意：set方法對任意整數有效，影響上一級的數；如setDate(-1)設爲上個月30號。 但對小數沒效。

日期和時間的轉換：

getTimezoneOffset() 返回本地時間與GMT的時間差，以分鐘爲單位(中國爲-480；差8小時)

toUTCString() 返回國際標準時間字符串(默認)

toLocalString() 返回本地格式時間字符串

Date.parse(x) 返回累計毫秒數(從1970/1/1 00:00:00到x的本地時間，忽略秒如下的數字)

Date.UTC(x) 返回累計毫秒數(從1970/1/1 00:00:00到x的UTC時間) 不明UTC是什麼

4、 自定義對象

1. 基本語法：

使用 function 指令定義。其屬性用「this.屬性名」定義。

如： function ObjectName(yName,yAge) {

this.name = yName;

this.age = yAge;

}

調用時：

var myObject = new ObjectName("kk",80); // ObjectName 裏面的函數會被執行

document.write("name = " + myObject.name + "<br> age = " + myObject.age);

2. 使用簡略語句快速建立對象

1) 類

正常寫法：

var car = new Object();

car.color = "red";

car.wheels = 4;

car.hubcaps = "spinning";

簡略寫法：

var car = {

color: "red",

wheels:4,

hubcaps:"spinning"

}

對象 car 就此建立，不過須要特別注意，結束花括號前必定不要加 ";" 不然在 IE 會遇到很大麻煩。

2) 數組

正常數組是這樣寫的： var movies = new Array('Transformers','Transformers2','Avatar','Indiana Jones 4');

更簡潔的寫法是： var movies = ['Transformers', 'Transformers2', 'Avatar', 'Indiana Jones 4'];

3)關聯數組

這樣一個特別的東西。 你會發現不少代碼是這樣定義對象的：

var car = new Array();

car['colour'] = 'red';

car['wheels'] = 4;

car['hubcaps'] = 'spinning';

//遍

歷的時候

for ( var key in car ) { alert(key + " : " + car[key]); }

3.匿名函數

var myFun = function(args1, args2){ alert('haha'); }

變量 myFun 指向一個匿名函數,這至關於建立函數 function myFun(args1, args2){ alert('haha'); }

因爲 javascript 沒有類型,因此變量能夠指向任意類型,也能夠指向一個函數,對它來講都只是一片內存空間而已

匿名函數通常用在只有一次使用的狀況下,也是能夠傳遞參數的

如: element.onclick = function(){ alert(0); }

4.JavaScript原生函數

//要找一組數字中的最大數,以下，能夠用一個循環

var numbers = [3,342,23,22,124];

var max = 0;

for(var i=0;i<numbers.length;i++){ if(numbers[i] > max){max = numbers[i];} }

alert(max);

//也能夠用排序實現一樣的功能：

var numbers = [3,342,23,22,124];

numbers.sort(function(a,b){return b - a});

alert(numbers[0]);

//而最簡潔的寫法是：

Math.max(12,123,3,2,433,4); // returns 433

//你甚至可使用Math.max來檢測瀏覽器支持哪一個屬性：

var scrollTop = Math.max( document.documentElement.scrollTop, document.body.scrollTop );

5.若是你想給一個元素增長class樣式，可能原始的寫法是這樣的：

function addclass(elm,newclass) {

var c = elm.className;

elm.className = (c === '') ? newclass : c+' '+newclass;

}

//而更優雅的寫法是：

function addclass(elm,newclass){

var classes = elm.className.split(' ');

classes.push(newclass);

elm.className = classes.join(' ');

}

6.對象的繼承，通常的作法是複製全部屬性，但還有種方法，就是: Function.apply

函數的 apply 方法能劫持另一個對象的方法，繼承另一個對象的屬性

Function.apply(obj,args) 方法接收兩個參數

obj：這個對象將代替Function類裏this對象

args：這個是數組，它將做爲參數傳給Function（args-->arguments）

示範如：

function Person(name,age){ // 定義一個類，人類

this.name=name; //名字

this.age=age; //年齡

this.sayhello=function(){alert("hello " + this.name);};

}

function Print(){ // 顯示類的屬性

this.show=function(){

var msg=[];

for(var key in this){

if(typeof(this[key])!="function"){

msg.push([key,":",this[key]].join(""));

}

}

alert(msg.join(" "));

};

}

function Student(name,age,grade,school){ //學生類

Person.apply(this,arguments); // this 繼承 Person,具有了它的全部方法和屬性

Print.apply(this,arguments

); // this 繼承 Print,具有了它的全部方法和屬性

this.grade=grade; //年級

this.school=school; //學校

}

var p1=new Person("jake",10);

p1.sayhello();

var s1=new Student("tom",13,6,"清華小學");

s1.show();

s1.sayhello();

JavaScript技術

1、 使用DHtml

DHTML

定義：使用JavaScript和CSS級聯樣式表操做HTML創造出各類動態視覺效果統稱爲DHTML

DHTML = CSS + Html + JS

是一種瀏覽器端的動態網頁技術

DHTML對象模型(DOM)

將HTML標記、屬性和CSS樣式都對象化

能夠動態存取HTML文檔中的全部元素

可使用屬性name或id來存取或標記對象

改變元素內容或樣式後瀏覽器中顯示效果即時更新

DHTML對象模型包括瀏覽器對象模型和Document對象模型

Window對象的經常使用屬性：

* document 對象，表明窗口中顯示的HTML文檔

frames 窗口中框架對象的數組

* history 對象，表明瀏覽過窗口的歷史記錄

* location 對象，表明窗口文件地址，修改屬性能夠調入新的網頁

* status (defaultStatus)窗口的狀態欄信息

closed 窗口是否關閉，關閉時該值爲true

* name 窗口名稱，用於標識該窗口對象

opener 對象，是指打開當前窗口的window對象，若是當前窗口被用戶打開，則它的值爲null

parent 對象，當前窗口是框架頁時指的是包含該框架頁的上一級框架窗口

top 對象，當前窗口是框架頁時指的是包含該框架頁的最外部的框架窗口

self 對象，指當前Window對象

window 對象，指當前Window對象，同self

Window對象的經常使用方法：

(使用這些方法時，一般不加window也沒區別；但在特定狀況下必須加，如在內嵌頁面用open();)

* alert(sMsg); 彈出簡單對話框

confirm(sMsg); 選擇對話框

prompt(sMsg, sInit); 彈出輸入對話框

* close(); 關閉窗口

open(sURL, sName, sFeatures, bReplace); 打開窗口

print(); 打印窗口中網頁的內容

focus(); 設置焦點並執行 onfocus 事件的代碼。

blur(); 失去焦點並觸發 onblur 事件。

moveBy(iX, iY); 將窗口的位置移動指定 x 和 y 偏移值。

moveTo(iX, iY); 將窗口左上角的屏幕位置移動到指定的 x 和 y 位置。

resizeBy(iX, iY); 更改窗口的當前位置縮放指定的 x 和 y 偏移量。

resizeTo(iWidth, iHeight); 將窗口的大小更改成指定的寬度和高度值。

scrollBy(iX, iY); 將窗口滾動 x 和 y 偏移量。

scrollTo(iX, iY); 將窗口

滾動到指定的 x 和 y 偏移量。

* setInterval(vCode,iMilliSeconds,sLanguage); 每通過指定毫秒值後執行一段代碼。

clearInterval(iIntervalID); 取消 setInterval 方法的事件。

* setTimeout(vCode,iMilliSeconds,sLanguage); 通過指定毫秒值後執行一段代碼。(一次性)

clearTimeout(iTimeoutID); 取消 setTimeout 方法設置的超時事件。

window主要功能：

1.窗口的打開和關閉

window.open(url,name,config) 打開新窗口；url:打開的超連接，name:窗口的名稱，返回新窗口對象

config爲窗口的配置參數：menubar 菜單條、toolbar 工具條、location 地址欄、directories 連接、

status 狀態欄、scrollbars 滾動條、resizeable 可調整大小(以上參數值爲yes或no，默認yes)；

width 窗口寬，以像素爲單位；height 窗口高，以像素爲單位(參數值爲數值)

* window.close() 關閉窗口

2.對話框

簡單對話框：

alert(str) 提示框，顯示str字符串的內容；按[肯定]關閉對話框

confirm(str) 確認對話框，顯示str字符串的內容；按[肯定]按鈕返回true，[取消]返回false

prompt(str,value) 輸入對話框，顯示str的內容；按[肯定]按鈕返回輸入值，[取消]關閉，返回null

窗口對話框：

showModalDialog(url,arguments,config) IE4或更高版本支持該方法

showModelessDialog(url,arguments,config) IE5或更高版本支持該方法

參數:url 打開連接，arguments 傳入參數名，config 窗口配置參數

config 外觀配置參數：status、resizable、help 是否顯示標題欄中的問號按鈕、center 是否在桌面中間

dialogWidth 對話框寬、dialogHeight 對話框高、(上一行參數值爲yes或no，這兩行參數爲多少像素)

dialogTop 對話框左上角的y座標、dialogLeft 對話框左上角的x座標

3.狀態欄

window.status 狀態欄中的字符串信息容許進行設置或讀取

4.定時器

tID1=setInterval(exp,time) 週期性執行exp代碼；exp 代碼塊名，time 週期(毫秒)，返回啓動的定時器

clearInterval(tID1) 中止週期性的定時器

tID2=setTimeout(exp,time) 一次性觸發執行代碼exp；返回已經啓動的定時器

clearTimeout(tID2) 中止一次性觸發的定時器

5.內容滾動

window.scroll(x,y) 滾動窗口到指定位置；單位爲像素

window.scrollTo(x,y) 同scroll方法

window.scrollBy(ax,ay) 從當前位置開始，向右滾動ax像素，向下滾動ay像素

6.調整窗口大小和位置

window.moveTo(x,y) 移動窗

口到指定位置；單位爲像素

window.moveBy(ax,ay) 向右移動ax像素，向下移動ay像素，參數爲負數表示反方向移動

window.resizeTo(width,height) 調整窗口大小爲指定大小

window.resizeBy(ax,ay) 放大或縮小窗口；參數爲負數表示縮小

7.Screen對象 // 屏幕信息(屬於window的子對象；經常使用於獲取屏幕的分辨率和色彩)

screen.width 屏幕分辨率的寬度，例如1024*768分辨率下寬度爲1024

screen.height 相似上面，屏幕分辨率的高度

screen.availWidth 屏幕中可用的寬 //排除 Windows 任務欄

screen.availHeight 屏幕中可用的高 //排除 Windows 任務欄

screen.colorDepth 屏幕的色彩數

8.History對象 // 窗口的訪問歷史信息(屬於window的子對象,經常使用於返回到已經訪問過的頁面)

history.length 歷史記錄數

history.foward() 向下一頁

history.back() 返回上一頁

history.go(0) 刷新。括號裏填"-1"就是返回上一頁，填"1"就是下一頁；其它數字類推

9.Navigator對象 瀏覽器和OS(系統)的信息 數組

10.Location對象 瀏覽器地址欄的信息 如： location.href="http://www.google.com/";

location.assign(href); 前往新地址，在歷史記錄中，用 Back 和 Forward 按鈕可回到以前的地址

location.replace(href); 替代當前文文件，在歷史記錄中也回不到以前的地址

location.reload(true); 相似刷新，默認 false

// location 各屬性的用途

location.href 整個URl字符串(在瀏覽器中就是完整的地址欄),如: "http://www.test.com:8080/test/view.htm?id=209&dd=5#cmt1323"

location.protocol 返回scheme(通訊協議)，如: "http:", "https:", "ftp:", "maito:" 等等(後面帶有冒號的)

location.host 主機部分(域名+端口號)，端口號是80時不顯示，返回值如："www.test.com:8080", "www.test.com"

location.port 端口部分(字符串類型)。若是採用默認的80端口(即便添加了:80)，那麼返回值並非默認的80而是空字符。

location.pathname 路徑部分(就是文件地址)，如: "/test/view.htm"

location.search 查詢(參數)部分。如: "?id=209&dd=5"

location.hash 錨點，如: "#cmt1323"

不包含參數的地址： location.protocol + '//' + location.host + location.pathname;

應用例子：窗口最大化

window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight);

或者： moveTo(0,0); resizeT

o(screen.width, screen.height);

//採用screen對象的分辨率屬性和resizeTo方法來動態肯定窗口最大長度和寬度

2、 Dom 元素

處理 XML 文件的 DOM 元素屬性：

<element>.childNodes 返回目前元素全部子元素的數組

<element>.children 返回目前元素全部子元素的數組(這個在IE、火狐上也能夠用)

<element>.firstChild 返回目前元素的第一個子元素

<element>.lastChild 返回目前元素的最後一個子元素

<element>.nodeValue 指定表示元素值的讀/寫屬性

<element>.parentNode 返回元素的父節點

<element>.previousSibling 返回緊鄰目前元素以前的元素

<element>.nextSibling 返回目前元素的後面的元素

<element>.tagName 返回目前元素的標籤名(大寫)

沿 XML 文件來回移動的 DOM 元素方法：

document.getElementById(id) 取得有指定惟一ID屬性值文件中的元素

document.getElementsByTagName(name) 返回目前元素中有指定標籤名的子元素的數組

<element>.hasChildNodes() 返回布爾值，表示元素是否有子元素

<element>.getAttribute(name) 返回元素的屬性值，屬性由name指定

動態創建內容時所用的 W3C DOM 屬性和方法：

document.createElement(tagName) 創建由tagName指定的元素。好比以"div"做爲參數，則生成一個div元素。

document.createTextNode(text) 創建一個包含靜態文字的節點。

<element>.appendChild(childNode) 將指定節點增長到目前元素的子節點中。例如：select中增長option子節點

<element>.getAttribute(name) 取得元素中的name屬性的值

<element>.setAttribute(name,value) 設定元素中的name屬性的值

<element>.insertBefore(Node1,Node2) 將節點Node1做爲目前元素的子節點插到Node2元素前面。

<element>.removeAttribute(name) 從元素中刪除屬性name

<element>.removeChild(childNode) 從元素中刪除子元素childNode

<element>.replaceChild(newN,oldN) 將節點oldN替換爲節點newN

<element>.hasChildnodes() 返回布爾值，表示元素是否有子元素

注意：文字其實是父元素的一個子節點，因此可使用firstChild屬性來存取元素的文字節點。

有了文字節點後，能夠參考文字節點的nodeValue屬性來獲得文字。

讀取XML時，須考慮它的空格和換行符也做爲子節點。

處理 HTML DOM 元素中3個經常使用的屬性: nodeName、 nodeValue 以及 nodeType

nodeName 屬性(只讀)含有某個節點的名稱:

元素節點的 nodeName 是標籤名稱(永遠是大寫的)

屬性節點的 nodeName 是屬性名稱

文本節點的 nodeName 永遠是 #text

文檔節點的 nodeName 永遠是 #document

nodeValue / data

對於文本節點，nodeValue 屬性包含文本。可增刪改

對於屬性節點，nodeValue 屬性包含屬性值。

nodeValue 屬性對於文檔節點和元素節點是不可用的。會返回 null

data一樣是文本的內容,這個屬性下一樣能夠增刪改。對於文檔節點和元素節點不可用,返回 undefine

nodeType 屬性返回節點的類型。節點類型是：

元素類型 節點類型

ELEMENT_NODE : 1 // 元素

ATTRIBUTE_NODE : 2 // 屬性

TEXT_NODE : 3 // 文本

CDATA_SECTION_NODE : 4

ENTITY_REFERENCE_NODE : 5

ENTITY_NODE : 6

PROCESSING_INSTRUCTION_NODE : 7

COMMENT_NODE : 8 // 註釋

DOCUMENT_NODE : 9 // 文檔,即 document

DOCUMENT_TYPE_NODE : 10

DOCUMENT_FRAGMENT_NODE : 11

NOTATION_NODE : 12

注： 對於屬性節點，可以使用 「attr.nodeName」和「attr.nodeValue」來查看或者賦值, 也可使用「attr.name」和「attr.value」。

只是, attr.nodeValue 會返回真實類型,如 bool,number,string,object 等； 而 attr.value 全是 string 類型(null 則返回"null")

判斷是否 dom 元素，一些特殊節點只有nodeName，沒有tagName，好比document的nodeName爲「#document」，tagName爲空值。

3、跨瀏覽器

1.瀏覽器判斷：

//若是是火狐等瀏覽器則爲「true」

var isNav = (navigator.appName.indexOf("Netscape") != -1);

//若是是IE瀏覽器則爲「true」

var isIE = (navigator.appName.indexOf("Microsoft") != -1); // navigator.appName == "Microsoft Internet Explorer"

var isIE = (navigator.appVersion.indexOf("MSIE") != -1);

//判斷IE6

var isIE6 = (navigator.userAgent && navigator.userAgent.split(";")[1].toLowerCase().indexOf("msie 6.0")!="-1");

//若是是Opera瀏覽器則爲「true」

var isOpera = (navigator.userAgent.indexOf("Opera") != -1);

//瀏覽器運行的平臺，是 windows 則返回 true

var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1);

2.event 事件

在 IE4+ 和 Firefox下的 event

function doEventThing(event)

{

//獲取不一樣瀏覽器的 event

event = event || window.event; // window.event for IE; 參數event for firefox

//獲取不一樣瀏覽器的鍵盤輸入記錄

var currentKey = event.keyCode || event.charCode; // keyCode 目前兼容了

//獲取不一樣瀏覽器的事件源

var eventSource = event.target || event.srcElement; // sr

cElement for IE; target for firefox

var target = event.relatedTarget || event.toElement; // 將會去到的元素,像 onmouseout 會觸發

//屏蔽Form提交事件

//if ( event.returnValue ) event.returnValue = false; // for IE

//if ( event.preventDefault ) event.preventDefault(); // for firefox

( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);

//添加事件

if ( event.attachEvent ) {

event.attachEvent('onclick', func ); // for IE; 須要加上「on」,如 onmouseover

} else if ( event.addEventListener ) {

event.addEventListener('clcik', func, false); // for firefox; 不須要加上「on」,直接寫「click」

}

//改變事件; 但上面的綁定事件方法並不改變原有的onclick事件，而是添加事件

event.onclick = func;

}

//Firefox 下必須手動輸入參數,調用時如: <input type="button" onclick="doEventThing(event);"/>

3. firefox 的 click() 事件,因爲 firefox 不支持 click() 事件,代替方式：

// 獲取須要觸發 onclick() 的元素

var element = document.getElementsByTagName('a')[0];

// For IE

if ( document.all ) {

element.click();

// FOR DOM2

} else if ( document.createEvent ) {

var ev = document.createEvent('MouseEvents'); //'MouseEvents' 改爲 'HTMLEvents' 的話,firfox2不經過

ev.initEvent('click', false, true);

element.dispatchEvent(ev);

}

4. 跨瀏覽器技巧：

1) IE不能用setAttribute設定class屬性。

解決方法1: 同時使用 setAttribute("class","newClassName") 和 setAttribute("className","newClassName")

解決方法2: <element>.className = "newClassName"

2) IE中不能使用setAttribute設定style屬性。即 <element>.setAttribute("style","fontweight:bold;") 不相容。

解決方法：使用 <element>.style.cssText = "fontweight:bold;"

3) 使用appendChild將<tr>元素直接增長到<table>中，則在IE中這一行並不出現，但其它瀏覽器卻會出現。

解決方法：在<table>下增長<tbody>元素，再添加<tr>

4) IE不能直接添加按鈕處理事件。如：addButton.setAttribute("onclick","addEmployee('unid');");不適用。

解決方法：addButton.onclick = function() { addEmployee('unid'); };//用匿名函數調用addEmployee()函數。

此外,onmouseover,onmouseout 等事件也要使用此方法。

5) firefox 不支持 document.all

解決方法: 用 document.getElementsByTagName("*") 替代,能夠獲得獲得全部元素的集合

6) 設置元素的id

同時使用 .id 和 setAttribute 來設置

var div = document.createElement('div');

div.id="btc";

div.setAttribute("id","btc");

5.Firefox註冊innerText寫法

if ( (navigator.appName.indexOf("Nets

cape") != -1) )

{

//註冊 Getter

HTMLElement.prototype.__defineGetter__("innerText", function(){

var anyString = "";

var childS = this.childNodes;

for ( var i=0; i < childS.length; i++ ) {

if ( childS[i].nodeType == 1 )

anyString += childS[i].tagName == "BR" ? '\n' : childS[i].innerText;

else if(childS[i].nodeType == 3 ) {

anyString += childS[i].nodeValue;

}

}

return anyString;

});

//註冊 Setter

HTMLElement.prototype.__defineSetter__("innerText",

function ( sText ) { this.textContent = sText; }

);

}

//在非IE瀏覽器中使用 textContent 代替 innerText

6.長度：FireFox長度必須加「px」，IE無所謂

解決方法：統一使用 obj.style.height = imgObj.height + "px";

7.父控件下的子控件：IE是「children」，FireFox是「childNodes」

8.XmlHttp

在IE中，XmlHttp.send(content)方法的content能夠爲空，而firefox則不能爲空，應該用send(" ")，不然會出現411錯誤

9.event.x 與 event.y 問題

問題： 在IE中，event 對象有x,y屬性，FF中沒有

解決方法：

在FF中，與 event.x 等效的是 event.pageX ，但event.pageX IE中沒有

故採用 event.clientX 代替 event.x ，在IE中也有這個變量

event.clientX 與 event.pageX 有微妙的差異，就是滾動條

要徹底同樣，能夠這樣：

mX = event.x ? event.x : event.pageX;

10.禁止選取網頁內容

問題：FF須要用CSS禁止，IE用JS禁止

解決方法：

IE: obj.onselectstart = function() {return false;}

FF: -moz-user-select:none;

11.各類瀏覽器的特徵及其userAgent。

IE

只有IE支持建立ActiveX控件，所以她有一個其餘瀏覽器沒有的東西，就是 window.ActiveXObject 函數。

IE各個版本典型的userAgent以下(其中，版本號是MSIE以後的數字)：

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

Firefox

Firefox中的DOM元素都有一個getBoxObjectFor函數，用來獲取該DOM元素的位置和大小(IE對應的中是getBoundingClientRect函數)。這是Firefox獨有的，判斷它便可知道是當前瀏覽器是Firefox。

Firefox幾個版本的userAgent大體以下(其中，版本號是Firefox以後的數字)：

Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1

Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3

Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12

Opera

Opera提供了專門的瀏覽器標誌，就是 window.opera 屬

性。

Opera典型的userAgent以下(其中，版本號是Opera以後的數字)：

Opera/9.27 (Windows NT 5.2; U; zh-cn)

Opera/8.0 (Macintosh; PPC Mac OS X; U; en)

Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0

Safari

Safari瀏覽器中有一個其餘瀏覽器沒有的openDatabase函數，可作爲判斷Safari的標誌。

Safari典型的userAgent以下(其版本號是Version以後的數字)：

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13

Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

Chrome

Chrome有一個 window.MessageEvent 函數，但Firefox也有。不過，好在Chrome並無Firefox的getBoxObjectFor函數，根據這個條件仍是能夠準確判斷出Chrome瀏覽器的。

目前，Chrome的userAgent是(其中，版本號在Chrome以後的數字)：

Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

下面是判斷瀏覽器的代碼：

var Sys = {};

var ua = navigator.userAgent.toLowerCase();

if (window.ActiveXObject)

Sys.ie = ua.match(/msie ([\d.]+)/i)[1];

else if (document.getBoxObjectFor) // 火狐判斷出錯

Sys.firefox = ua.match(/firefox\/([\d.]+)/i)[1];

else if (window.opera)

Sys.opera = ua.match(/opera.([\d.]+)/i)[1];

else if (window.MessageEvent)

Sys.chrome = ua.match(/chrome\/([\d.]+)/i)[1];

else if (window.openDatabase)

Sys.safari = ua.match(/version\/([\d.]+)/i)[1];

//如下進行測試

if(Sys.ie) alert('IE: '+Sys.ie);

if(Sys.firefox) alert('Firefox: '+Sys.firefox);

if(Sys.chrome) alert('Chrome: '+Sys.chrome);

if(Sys.opera) alert('Opera: '+Sys.opera);

if(Sys.safari) alert('Safari: '+Sys.safari);

4、 摘錄：

1. 省略對象名稱，用 with() 命令。

如: document.write(".....<br/>");

document.write(".....<br/>");

可省略寫爲：

with (document) {

write(".....<br/>");

write(".....<br/>");

} //把相同的 document 省略掉。

省略對象名稱，變量。

如： document.myForm.myText.value;

可省略寫爲： f = document.myForm; f.myText.value;

2.頁面調試

javascript 加入以下語句，出錯時會提示

注意： chrome、opera 和 safari 等瀏覽器不支持 window.onerror 事件(w3c標準沒有此事件),需另外捕獲出錯信息

<script type="text/javascript">

/**

* 這是出錯調試代碼

* 當頁面發生錯誤時，提示錯誤信息

* @param msg 出錯信息

* @param url 出錯文件的地址

* @param sLine 發

生錯誤的行

* @return true 讓出錯時不顯示出錯圖標

*/

window.onerror = function ( msg, url, sLine ) {

var hostUrl = window.location.href;

// 判斷網址,測試時能夠提示出錯信息;正式發佈時不提示

if ( hostUrl.indexOf("http://localhost") === 0 || hostUrl.indexOf("http://127.0.0.1") === 0 ||

hostUrl.indexOf("http://192.168.") === 0 || hostUrl.indexOf("file://") === 0 )

{

var errorMsg = "當前頁面的腳本發生錯誤.\n\n";

errorMsg += "錯誤: " + msg + "\n";

errorMsg += "URL: " + url + "\n";

errorMsg += "行: " + sLine + "\n\n";

errorMsg += "點擊「肯定」消去此錯誤，「取消」保留此錯誤。\n\n";

return window.confirm( errorMsg );

}

// 返回true,會消去 IE下那個惱人的「網頁上有錯誤」的提示

return true;

};

</script>

3.把數值變成 奇 \ 偶數(利用位運算)

n = n | 1 ; //必定獲得奇數。若是本來是偶數則加一。

n = (n >> 1) <<1; //必定獲得偶數。若是本來是奇數則減一。

n = n ^ 1; //奇偶互換。對偶數加一，對奇數減一。

4.取出數值的整數部分(取整)。

// 如下第一種方法不受瀏覽器和版本的影響，後兩種受版本影響。

n = ( n > 0 ) ? Math.floor(n) : Math.ceil(n);

n = Number ( (String(n).split("."))[0]);

n = parseInt(n,10);

// 下面作法更簡便高效,用位運算來作(右移0位,或者兩次取反),且非數值型的值會轉成0

alert(5>>0); alert(~~5); // 值爲 5

alert(5.55>>0); alert(~~5.55); // 值爲 5

alert(-98.4>>0); alert(~~-98.4); // 值爲 -98

alert('absd'>>0); alert(~~'absd'); // 值爲 0

alert(null>>0); alert(~~null); // 值爲 0

alert('34.5'>>0); alert(~~'34.5'); // 值爲 34

5.取出數值的小數部分。

須先檢查小數點是否存在。但有時會發生運算偏差。

n = Math.abs(n); if(n>0) n = n - Math.floor(n); else n = 0;

n = parseInt(n,10) - parseFloat(n);

if((""+n).indexOf(".") > -1) n = Number("0."+(String(n).split("."))[1]); else n = 0;

6.在任意位置插入一行js(單行程序)：

<script type="text/javascript">alert("中斷一下");</script>

<input type="button" onclick="javascript:formName.DataName.value='';formName.DataName.focus();" />

7.設置焦點：

//document.all["DateID"].onfocus;

document.all["DateID"].focus();

formName.DataName.focus();

8.默認參數：

function show() {

alert( arguments[0] );

}

這個函數會alert出第一個參數，如調用時： show("haha")，則alert("haha");

9.禁止 confirm 與 alert

window.confirm

= function(str){return true;};

window.alert = function(str){};

10.獲取下拉菜單的內容

<select name="seleName" >

<option value="value1">Text</option>

</select>

獲取選中的下拉菜單的內容：

var seleElement = document.formName.seleName;

var optionText = seleElement.options[seleElement.selectedIndex].text;

11.設置默認值:

edittype = edittype || "text"; //edittype預設爲 text

上面一句: 若是 edittype 以前有值,則取以前的值; 以前沒有值,則取默認值

12.數值的截取:

numObj.toFixed([fractionDigits])

//numObj:必選項。一個 Number 對象。

//fractionDigits:可選項。小數點後的數字位數。其值必須在 0 – 20 之間，包括 0 和 20。 預設爲0

toFixed 方法返回一個以定點表示法表示的數字的字符串形式。對數值進行四捨五入截取到指定位數的小數

如: 55.3654.toFixed(2) //返回55.37

13.IE上的關閉窗口時不提示

window.opener = null; // 關閉IE6不提示

window.open("","_self"); // 關閉IE7不提示

//關閉窗口

window.close();

14.刷新頁面的幾種方法：

history.go(0);

window.navigate(location);

document.URL = location.href;

document.execCommand('Refresh'); //火狐不能用

location.reload();

location = location;

location.href = location.href;

location.assign(location);

location.replace(location);

15.頁面跳轉：

location.href = "yourURL"

window.location = 'url'

window.location.href = "yourURL"

window.navigate("top.jsp");

self.location = 'top.htm' //令所在框架頁面跳轉，大框架不變

top.location = 'xx.jsp'; //在框架內令整個頁面跳轉

16.頁面跳轉/刷新 的注意：

須要先執行其餘代碼，而後再頁面跳轉或者刷新。由於頁面跳轉或者刷新後再也不執行下面的代碼。

如：alert('請先登陸'); window.location.href = 'index.jsp';

17.改變標題(即改變<title>標籤的內容)

document.title = "title_content";

18.if 判斷對象是否存在

通常能夠用 if 判斷對象是否存在,但直接寫「 if(對象名){...} 」判斷時,若是對象不存在則瀏覽器會拋異常。

這裏建議用「 if(window['對象名']){...} 」的寫法來判斷

當確認對象已經存在時,用「對象名.變量名」跟「對象名['變量名']」沒什麼區別。

如： var c = new Object(); // 假如這是寫在另外一個js文件裏的變量,下面用的時候須要判斷這對象是否存在

if (c) {alert('c存在');} // 若是這對象確實存在，則沒有問題。但對象不存在時會拋異常

if (window['c']){alert('c存在');}; if (window.c){alert('c存在');} // 推薦用這兩種寫法之一,無論對象是否存在,都不

會拋異常,且存在時可正常使用。

5、JavaScript 技巧

1.獲取表單的內容

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--

function aa(){

//var value=document.all("td1").value; //.innerHTML

var value=document.getElementById("td1").value;//上句也可行

document.all("ta").value=value;

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<input id="td1" name="haha" type="text" onkeydown="if(13==event.keyCode){aa();return false;}"/><br/>

<INPUT TYPE="button" NAME="" value="引用" onclick="aa()"><br/>

<TEXTAREA id="ta" ROWS="15" COLS="20"></TEXTAREA>

</BODY>

</HTML>

2. IE3.0 和 NN2.0(Netscape Navigator)上能同時運做的程序

爲照顧不一樣的瀏覽器和版本，只好多做幾回判斷。看程序中的幾個 if 實現的是同一功能就明白。

<html>

<head>

<title>寫能同時在IE和NN上運行的程序</title>

<script language="JavaScript">

<!--

x = 0;

function moveLayer() {

x = x + 2;

if(document.all) {document.all["myLay"].style.left = x;} //IE4以上版本可用，IE4以前和NN上都沒有 all

if(document.layers) {document.layers["myLay"].left = x;} //僅NN4上運行，NN4外沒有layers對象

/* 下面這句僅NN6之後版本可用。

由於document.getElementById()在IE5.x上有，因此需 " !document.all " */

if(!document.all && document.getElementById) {document.getElementById("myLay").style.left = x;}

}

// -->

</script>

</head>

<body bgcolor = "white" onLoad="setInterval('moveLayer()',1000)">

<div id="myLay" style="position:absolute;left:0px"> <img src="btn1.gif"></div>

</body>

</html>

3. 讀取 Behavior 文檔 (任意標籤均可觸發 onclick 事件) (IE5.0以上可用)

//在 html 文件上寫：

<html>

<head>

<title>讀取 Behavior 文件</title>

<style type="text/css">

<!--

div { behavior:url(a.htc); }

-->

</style>

<script language="JavaScript">

<!--

function testA() { alert("haha"); } //<a>標籤的 onclick事件

function check() { //獲取 id 和 class 名稱

alert("id = "+document.all["myObj"].id+"; className="+document.all["myObj"].className);

}

// -->

</script>

</head>

<body bgcolor = "white"><center>

<div>點擊文字</div><br/><br/>

<a href="JavaScript:testA()">sample</a><br/><br/><br/>

<input id="myObj" class="mz" type=button value="test" onclick="check()" />

</center></body>

</html>

//在此 html 文件的同一目

錄下的 a.htc 文件裏寫：

<script language="JavaScript">

<!--

attachEvent("onclick",msg);

function msg() { alert("oh!");}

// -->

</script>

4.定時器，每隔一段時間進行處理(IE3.0以上，NN2.0以上可用)

<html>

<head>

<title>定時器</title>

<script language="JavaScript">

<!--

var timerId;

var n = 0;

function timerUpdate(){

window.document.myForm.result.value = n++ ;

//這是個一次性觸發的方法，這裏以反覆調用來實現週期性觸發

timerId = setTimeout("timerUpdate()",100); //第一個參數是要執行的函數,也能夠直接寫匿名函數而不用字符串

}

function timerStart() {

//防止連續屢次點擊，致使計數器速度迭加

document.getElementById("StartCount").onclick = "";

setTimeout("timerUpdate()",1);

}

function timerEnd() {

clearTimeout(timerId);

//這兩句的效果同樣。

//clearInterval(timerId);

//還原 "StartTime"按鈕 的點擊能力

document.getElementById("StartCount").onclick = timerStart;

}

// -->

</script>

</head>

<body>

<form name="myForm">

<input type="text" name="result"/><br/><br/>

</form>

<input type="button" id="StartCount" value="StartTime" onclick="timerStart()"/>

<input type="button" value="EndTime" onclick="timerEnd()"/>

</body>

</html>

5.根據 javaScript 的開閉狀態來顯示網頁(適用IE3.0和NN2.0以上版本)

以 <meta> 配合 location.href 來實現。

下面的 <meta> 裏的content的5表示當javascript關閉時，5秒後跳轉到closeJavaScript.html 頁面。

location.href="openJavaScript.html"; 表示當javascript可用時，跳轉到 openJavaScript.html 頁面。

在 html 里加入"<noscript>您使用的瀏覽器不支持或者禁止了Javascript</noscript>"則在本頁面提示。

<meta http-equiv="refresh" content="5; url=closeJavaScript.html">

<script language="JavaScript">

<!--

location.href="openJavaScript.html";

// -->

</script>

7.淡入/淡出效果(背景色適用IE3.0和NN2.0以上版本，文字色適用IE4以上版本)

<body bgcolor="black" onLoad="newCount('bgColor'); fade('0123456789ABCDEF')">

<script language="JavaScript">

var count = 0 ;

var obj = null ;

function fade(str){

c = str.charAt(count++);

if (obj=='bgColor') {document.bgColor = "#"+c+c+c+c+c+c+c+c;} //改變背景顏色，顏色碼8位

if (obj=='word'

) {document.all["strId"].style.color = "#"+c+c+"0000";} //改變文字顏色，顏色碼6位

if(count < str.length) setTimeout("fade('"+str+"')",250);

}

function newCount(object){ count = 0 ; obj = object ; }

</script>

<input type="button" value="toWhite" onclick="newCount('bgColor'); fade('0123456789ABCDEF')"/>

<input type="button" value="toBlack" onclick="newCount('bgColor'); fade('fedcba9876543210')"/><br/><br/>

<span id="strId" onMouseover="newCount('word'); fade('fedcba9876543210')">點擊淡入淡出的文字</span>

</body>

8.窗口的振動效果(適用IE4.0和NN4.0以上版本)

<script language="JavaScript">

//指定窗口的錯位。

x = new Array( 10, 3, -6, 8, -10, -7, 5, -3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);

y = new Array(-12, 6, -3, 10, -9, -2, 8, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);

count = 0;

function purupuruWin() {

if(x[count] != 0) moveBy(x[count], y[count]); //窗口的振動

count++;

if(count >= x.length )count = 0;

setTimeout("purupuruWin()",100);

}

</script>

<input type="button" name="" value="StartPuru" onclick="purupuruWin()">

9.檢查電子郵件地址是否正確(適用IE4.0和NN3.0以上版本)

<script language="JavaScript">

function checkMailAddr(dstText){

var data = dstText.match(/^\S+@\S+\.\S+$/); //檢查是否郵件的表達式

if(!data || !dstText ) alert('電子郵件地址不正確！'); else alert('電子郵件地址正確！');

}

</script>

<form>

電子郵件：<input type="text" name="address" />

<input type="button" value="check" onclick="checkMailAddr(this.form.address.value)"/>

</form>

10. cookie 的使用。顯示訪問次數。(適用IE3.0和NN2.0以上版本)

<script language="JavaScript">

if ( !navigator.cookieEnabled ) alert("can not use cookie");

//在 cookie 中存儲訪問次數。

function setCount(n){

var theDay = 30;

var setDay = new Date();

setDay.setTime(setDay.getTime()+(theDay*1000*60*60*24));

document.cookie = "count=" + n + ";expires=" + setDay.toGMTString();

}

function getCount() {

var theName = "count=";

var theCookie = document.cookie + ";" ;

var start = theCookie.indexOf(theName); //沒有cookie時返回「-1」

if (start != -1) { //這是對第2次之後的訪問的處理

var end = theCookie.indexOf(";",start);

var count = eval(unescape(theCookie.substring(start+theName.length,end)));

document.write("這是第 "+count+" 次訪問本頁面");

setCount(count+1);

} else { //這是對第1次訪問的處理

document.write("這是第1次訪問本頁面");

setCount(2);

}

}

getCount();

</script>

11.簡單的預防二次提交 (適用IE3.0和NN3.0以上版本)

<script language="JavaScript">

var flag = false;

function send() {

if (flag) { alert("提交完畢！"); return false; }

flag = true ; return true;

}

function send2(form) {

if ( !flag ){ form.submit(); }

}

</script>

<form name="myForm" method="post" action="send.html" enctype="text/plain" onSubmit="return send()">

<input type="submit" value="提交" />

<!-- onclick裏的函數要用雙引號括起來，form表單的名稱不能加引號，字符則須用單引號括起來-->

<input type="button" value="按鈕" onclick="send2(myform);" >

</form>

12.解決中文亂碼問題。

用如下三個方法進行轉碼就好了：

escape('你好') == %u4F60%u597D //轉成 Unicode 編碼

encodeURI('你好/p') == %E4%BD%A0%E5%A5%BD/p //轉換爲UTF-8；URL須要傳遞中文時使用

encodeURIComponent('你好/p') == %E4%BD%A0%E5%A5%BD%2Fp

三種方法都能對字符進行過濾。後二者是將字符串轉換爲UTF-8的方式。

escape() 不會編碼的字符有69個: * + - . / @ _ 0-9 a-z A-Z

全部空格、標點符號以及任何其它非 ASCII 字符都用 %xx 編碼替換

其中 xx 表示該字符的16進制數。例如，空格返回爲「%20」。

(字符值大於 255 的字符以 %uxxxx 格式存儲。)

注意：escape 方法不能用來對「統一資源標識符」(URI) 進行編碼。

unescape() 從用 escape() 編碼的 String 對象中返回已解碼的字符串。一樣不能用於 URI

encodeURI()返回編碼爲有效的 URI 字符串。

不會編碼的字符有82個: ! # $ & ' ( ) * + , - . / : ; = ? @ _ ~ 0-9 a-z A-Z

此方法返回一個已編碼的 URI。將編碼結果傳遞給 decodeURI()，則返回初始的字符串。

decodeURI() 不對下列字符進行編碼： : / ; ?

encodeURIComponent() 返回編碼爲 URI 的有效組件的字符串。

不會編碼的字符有71個: ! ' ( ) * - . _ ~ 0-9 a-z A-Z

注意，它會編譯「/」，因此不能包含路徑，不然無效。

decodeURIComponent() 將編碼結果解碼回初始字符串。

//把任意編碼轉成 java 的 ascii 編碼(Unicode native2ascii )

//注意：html的ascii碼是「%」開頭的，但java的倒是「\

」開頭，因此這裏替換了

function change1( str ) {

var tem = "";

for( var j = 0; j < str.length; j=j+1 ) {

if ( escape(str.charAt(j)).length >= 6) {

tem += escape(str.charAt(j)).replace("%", "\\");

} else { tem += str.charAt(j); }

}

return tem;

}

// ascii2nactive 解碼

function change2( str ) {

for( var j = str.length/3; j > 0; j=j-1 ) {

str = str.replace("\\", "%");

}

return unescape(str);

}

12.1 <a> (A標籤) 傳參時的中文亂碼解決方案

利用js的escape函數,轉碼便可

<script language="javascript" type="text/javascript">

/**

* 打開小視窗

* @param url 須要打開視窗的網址

* @param name 視窗名稱

* @param param 視窗顯示的參數

*/

function openWin(url, name, param) {

var newurl,arrurl;

if ( typeof(url) === "undefined" || url === "" ) {

return ;

}

else {

//沒有參數時

if ( url.indexOf("?") == -1 ) {

newurl = url;

}

//分解參數,並逐個轉碼

else {

newurl = url.substring(0,url.indexOf("?")+1);

arrurl = url.substring(url.indexOf("?")+1).split("&");

for ( var i =0; i<arrurl.length; i++ ) {

newurl += arrurl[i].split("=")[0] + "=" + escape(arrurl[i].split("=")[1]) + "&";

}

newurl = newurl.substring(0,newurl.length-1);

}

}

window.open(newurl, name, param);

}

</script>

//使用以下 (下面第二句會更好,測試火狐時第一句會延遲或者沒反應)

<a href="#" onclick="openWin('test.html','test','width=300,height=400');">Links</a>

<a href="javascript:openWin('test.html','test','width=300,height=400');">Links</a>

A標籤的 href="#" 時，IE瀏覽器會跳轉到頁面頂部, 解決方法是把「<A href="#">」改寫成「<A href="javascript:void(0);">」或者「<A href="javascript:;">」

A標籤的 onclick 事件，若是返回 false, 能夠阻止頁面跳轉,如: <A href="/index.html" onclick="alert(8);return false;">test</a>

注意：使用A標籤的 href="javascript:xxx代碼" 時，裏面的js代碼不能使用 this, event 對象, 由於這至關於瀏覽器地址欄, this 不表明 A 標籤。

若是須要使用 this 或者 event 來獲取此A標籤,建議改用 onclick 事件。

另外 A 標籤裏面的 onclick 事件返回 false,則

不會跳轉(即 href 的內容不會觸發, href 裏面的js也不會執行)。

13.正則表達式：

產生正則表達式的方式

1. var re = new RegExp("pattern",["flags"]); // 這種方式比較好

pattern :正則表達式字符串 // 注意這是字符串,裏面的反斜槓("\")須要連寫兩個來表示一個,由於會轉義,如 new RegExp("\\d") 匹配一個數字

flags: // flags 能夠多個一塊兒使用, 如 new RegExp("\\w", 'gm')

g global (全文查找出現的全部 pattern)

i ignoreCase (忽略大小寫)

m multiLine (多行查找)

2. 使用 正斜槓("/") 括起來

var re = /pattern/flags

pattern 和 flags 的含義跟 new RegExp 的同樣。

只不過,這裏的 pattern 不是字符串,不會轉義,因此裏面的反斜槓("\")不須要連寫兩個。如 /\d/ 表示匹配一個數字

這兩種方式產生的正則表達式都是同樣的，如 new RegExp("(f+)d+(s+)") 也能夠寫成： /(f+)d+(s+)/

正則表達式的經常使用函數：

re.exec(字符串); // 返回匹配數組(下標0是整個匹配到的字符串,下標1是第1個捕獲組,下標2是第2個捕獲組...),沒有匹配時返回 null

re.test(字符串); // 返回 true, 或者 false,表示是否匹配

另外,字符串也有可運用正則表達式的：

字符串.replace(正則表達式, 要替換的字符串); // 要替換的字符串裏面,也可使用 $1, $2 做爲捕獲組

字符串.match(正則表達式); // 同 re.exec,返回匹配數組,沒法匹配則返回null,[0]是匹配的整個字符串,[1]是匹配的第一個捕獲組,[2]是第二個捕獲組...

RegExp 的屬性

$1, ..., $9 捕獲組,$1是匹配的第一個捕獲組(即第一個用小括號括起來的內容),$2是第二個捕獲組... 如：

if ( new RegExp("(f+)d+(s+)").test("ddfffdddsss") ) {

alert(RegExp.$1 + ", " + RegExp.$2); // 提示出： fff, sss

}

$_, input 返回輸入的內容

如: /^1((3\d)|(5[036789])|(8[89]))\d{8}$/.exec("13595044124"); alert(RegExp.$_); alert(RegExp.input); // 提示出: 13595044124

經常使用的正則表達式 元字符

\ 轉義符

. 匹配除換行符之外的任意字符

| 或符號

\w 匹配字母或數字或下劃線 (大寫的一般是小寫的反義)

\W 匹配任意不是字母,數字,下劃線的字符

\s 匹配任意的空白符

\S 匹配任意不是空白符的字符

\d 匹配數字

\D 匹配任意非數字的字符

\b 匹配單詞的開始或結束

\B 匹配不是單詞開頭或結束的位置

^ 匹配字符串的

開始

$ 匹配字符串的結束

[^x] 匹配除了x之外的任意字符

[^aeiou] 匹配除了aeiou這幾個字母之外的任意字符

\數字 表示捕獲組,要求與第幾個捕獲組相同

經常使用的限定符

* 重複零次或屢次

+ 重複一次或屢次

? 重複零次或一次

{n} 重複n次

{n,} 重複n次或更屢次

{n,m} 重複n到m次

經常使用正則表達式

/^[-]?\d+([.]?\d*)$/ //數字

/^[-]?\d+$/ //整數

/^[0-9a-zA-Z]{5,16}$/ //用戶名(區分大小寫，5-16位)

/^[\u4e00-\u9fa5]+$/ //中文

/^(\w){6,20}$/; //校驗密碼：只能輸入6-20個字母、數字、下劃線

//電話號碼(手機號碼):像(010)88886666，022-22334455，029 1234-5678，010 3523922轉259，3523922。04-36018188/23051418 等

/^([(（]?0\d{1,6}[）) -]?)?(\d{5,30}|((\d{4}[ -]){1,7}\d{1,4}))([ -#(（轉轉]?\d{1,6}[）)]?)?$/;

/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ //十六進制值

/^([a-zA-Z\d_\.-]+)@([a-zA-Z\d]+\.)+[a-zA-Z\d]{2,6}$/ //電子郵箱

/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/ //URL

//下句是 IP 地址: 1.0.0.1 到 255.255.255.255,每段不能用「0」打頭

/^([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.(([\d]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/

/^<([a-z]+)([^<]+)*(?:>(.*)<\/\1>|\s+\/>)$/ //HTML 標籤

"str".replace(/(^\s*)|(\s*$)/g, ""); // 去除先後空格

//校驗登陸名：只能輸入5-20個以字母開頭、可帶數字、「_」、「.」的字符串

function isRegisterUserName(s) {

var patrn = /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;

return !!(patrn.exec(s)); //返回匹配數組,沒有匹配時返回null;因此非兩次以返回boolean值

}

//防止SQL注入，返回true表示經過驗證，返回false表示驗證不經過

function IsValid( oField ) {

re= /select|update|delete|exec|count|'|"|=|;|>|<|%/i;

$sMsg = "請您不要在參數中輸入特殊字符和SQL關鍵字！";

if ( re.test(oField.value) ) {

alert( $sMsg );

return false;

}

return true;

}

// 日期檢查

function strDateTime(str)

{

var r = str.match(/^(\d{1,4})(-|\/)?(\d{1,2})\2(\d{1,2})$/); // 注意裏面的「\2」，表示要求與第2個捕獲組「(-|\/)?」的值相同

if ( r == null ) return false;

var d = new Date(r[1], r[3]-1, r[4]);

return (d.getFullYear()==r[1] &&

(d.getMonth()+1)==r[3] && d.getDate()==r[4]);

}

14.修改表單內容

<html>

<head><title>修改表單內容</title>

<script language="JavaScript" type="text/javascript" >

/**

* 編輯按鈕

* @param form 頁面提交的<form>的name

* @param dataId 要編輯的行的 id

* @param number 要編輯的列的數量

*/

var isedit = false;

function edit ( form, dataId, number )

{

if ( isedit ){ alert("請編輯完再編輯下一筆！");return;}

isedit = true;

//獲取需編輯的對象(<tr>卷標對象)

var data = document.getElementById("data_"+dataId);

//獲取需編輯的各子對象(<td>卷標對象)。注意：各<td>間別換行，換行符也算子元素。

var dataNodes = data.childNodes;

//寫進去的內容。這將是數組對象

var dataInput;

//循環修改須編輯的列的內容

for ( var i=number-1; i >= 1; i=i-1 ) {

var editname = "edit_" + i;

dataInput = "<input type='text' name='" + editname + "' id='" + editname + "' ";

dataInput += " size='10' maxlength='15' value='" + dataNodes[i].innerHTML + "' \/>"

dataNodes[i].innerHTML = dataInput;

}

// 第一欄是學號等 ID字段，不準修改。但提交時需在提交窗體裏找到它。

dataInput = "<input type='hidden' name='edit_0' value='";

dataInput += dataNodes[0].innerHTML + "' \/>" + dataNodes[0].innerHTML;

dataNodes[0].innerHTML = dataInput;

//性別欄，下拉菜單

dataInput = "<select name='edit_2'>"

//dataNodes[2].innerHTML.indexOf("男") 若是相同則傳回"0"，不一樣傳回"-1"

if(dataNodes[2].innerHTML.indexOf("男") === 0){

dataInput += "<option value='m' selected>男<\/option>";

dataInput += "<option value='f' >女<\/option><\/select>";

} else {

dataInput += "<option value='m' >男<\/option>";

dataInput += "<option value='f' selected>女<\/option><\/select>";

}

dataNodes[2].innerHTML = dataInput;

//按鈕欄

dataInput = "<input type='button' value='確認' onclick=\"updateValue(";

dataInput += form.name + ", " + number + ", 'edit_' );\"\/>";

dataNodes[ (dataNodes.length -2) ].innerHTML = dataInput;

dataNodes[ (dataNodes.length -1) ].innerHTML = ""; //編輯時不給刪除

form.SQLmethod.value = "modify"; //表單提交信息，與這裏無關

form.submitId.value = dataId; //表單提交信息，與這裏無關

}

/**

* 編輯後確認，提交

* @param form 頁面提交的<form>的name

* @param number 要編輯的列的數量

* @param str name屬性的開始字段

*/

function updateValue ( form , number , str ) {

var editname;

//循環處理，主要是 alert() 提醒客戶端必須填寫某些內容

for ( var i=1; i < number; i=i+1 ) {

editname = str + i;

if( document.all[editname].value.length === 0) {

document.all[editname].focus();

alert("請填寫各欄目內容！");

return ;

}

}

form.submit();

}

</script>

</head>

<body>

<form name="pageForm" action="" >

<table border="1">

<TR><TH>學號</TH><TH>姓名</TH><TH>性別</TH>

<TH style="BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid"></TH>

<TH style="BORDER-BOTTOM: #000000 1px solid"></TH>

</TR>

<tr id='data_1' ><td>101</td><td>stu1</td><td>男</td><td><INPUT type='button' value='編輯' onclick="edit(pageForm,1,2 ); " ></td><td><INPUT type='button' value='刪除' onclick="del(pageForm,1, 'del');" ></td></tr>

<tr id='data_2' ><td>102</td><td>stu2</td><td>女</td><td><INPUT type='button' value='編輯' onclick="edit(pageForm,'2',2 ); " ></td><td><INPUT type='button' value='刪除' onclick="del(pageForm,2, 'del');" ></td></tr>

</table>

</form>

</body>

</html>

15.可變長參數 的 動態函數：

函數是一個對象，一個Function對象

(函數參數列表及函數主體事實上只是Function對象的構造函數的參數而已)

函數參數是可變的，好比定義函數時的參數列表有3個參數，調用時能夠傳2個參數，或者5個參數

arguments.length 是實際參數的個數(被傳遞參數的個數)

方法名.length 指望參數的個數(定義函數時的參數列表的參數個數)

動態函數：

var square = new Function("x", "y", "var sum;sum=x*x+y*y;return sum;");

alert(square(2,3)); //值爲13

動態函數的做用：函數體是由一個字符串構成的，故函數體可動態生成。

16.頁面刷新的方法：

history.go(0);

location.reload();

location=location;

location.assign(location);

document.execCommand('Refresh');

window.navigate(location);

location.replace(location);

document.URL=location.href;

自動刷新的方法：

1) <head> 裏使用標籤：<meta http-equiv="refresh" content="20"> //其中20指每隔20秒刷新一次頁面

2) 使用javascript：

<script language="JavaScript">

function myrefresh() {

window.location.reload();

}

setTimeout(

'myrefresh()',1000); //指定1秒刷新一次

</script>

頁面自動跳轉：

<meta http-equiv="refresh" content="20;url=http://www.wyxg.com"> //20秒後跳轉到url指定的頁面

刷新框架的js:

//刷新包含該框架的頁面用

parent.location.reload();

//子窗口刷新父窗口

self.opener.location.reload(); ( 或 <a href="javascript:opener.location.reload()">刷新</a> )

//刷新另外一個框架的頁面用

parent.otherFrameID.location.reload();

關閉或者打開窗口時刷新，在<body>中用 onload 或 onUnload 便可。

<body onload="opener.location.reload()"> //打開窗口時刷新

<body onUnload="opener.location.reload()"> //關閉窗口時刷新

window.opener.document.location.reload(); // ?

17.用 javascript 處理 JSON：

JSON 是 javascript 的一個子集，因此，在javascript 中使用JSON是很是簡單的。

JSON的規則很簡單： 對象是一個無序的「‘名稱/值’對」集合。一個對象以「{」（左括號）開始，「}」（右括號）結束。

每一個「名稱」後跟一個「:」（冒號）；「‘名稱/值’ 對」之間使用「,」（逗號）分隔。

1) 建立 JSON 對象，以下建立了只包含一個成員 "bindings" 的一個對象，bindings 則包含了一個由3個對象組成的數組。

var myJSONObject = {"bindings": [

{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},

{"ircEvent": "PRIUUCG", "method": "deleteURI", "regex": "^delete.*"},

{"ircEvent": "PRIIPKD", "method": "randomURI", "regex": "^random.*"}

]

};

2) 獲取對象： 在javascript 中， 成員能夠經過「點號」來獲取。

如： myJSONObject.bindings[0].method // 結果： newURI

alert(myJSONObject.bindings[1].method); //alert信息: deleteURI

3) 經過eval() 函數能夠將JSON字符串轉化爲對象。

如： var myJSONtext = '{"ircEvent": "PRIUUCG", "method": "deleteURI", "regex": "^delete.*"}';

var myObject = eval('(' + myJSONtext + ')');

alert(myObject.ircEvent); //alert信息: PRIUUCG

如： var myObject2 = eval('({ircEvent: "PRIUUCG", method: "delete"})'); //名稱也能夠不用引號括起來

alert(myObject2.ircEvent); //alert信息: PRIUUCG

4) 基於安全的考慮的 JSON 解析器。

eval 函數很是快，可是它能夠編譯任何 javascirpt 代碼，這樣的話就可能產生安全的問題。

eval 的使用是基於傳入的代碼參數是可靠的假設的，有一些狀況下，可能客戶端是不可信任的。

一個 JSON 解析器將只接受 JSON 文本。因此是更安全的。

如： var myObject = JSON.parse(myJSONtext, filter);

可選的 fil

ter 參數將遍歷每個 value key 值對， 並進行相關的處理。

如： myData = JSON.parse(text, function (key, value) {

return key.indexOf('date') >= 0 ? new Date(value) : value;

});

18.匿名函數與 Module 模式

JavaScript 的任何變量，函數或是對象，除非是在某個函數內部定義，不然，就是全局的。

意味着同一網頁的別的代碼能夠訪問並改寫這個變量(ECMA 的 JavaScript 5 已經改變了這一情況 - 譯者)

使用匿名函數，你能夠繞過這一問題。

好比，你有這樣一段代碼，很顯然，變量 name, age, status 將成爲全局變量:

var name = 'Chris';

var age = 18;

function createMenber() {

// ...

}

function getMenber() {

// ...

}

爲了不這一問題，你可使用匿名函數:

var myApp = function() {

var name = 'Chris';

var age = 18;

// 若是在函數裏面再定義函數,建議以下寫法,若是寫「function createMenber(){...}」則IE7會報錯

var createMenber = function() {

// ...

}

var getMenber = function() {

// ...

}

}();

若是這個函數不會被再次調用，能夠連這個函數的名稱也省了，更直接寫爲:

(function() {

var name = 'Chris';

var age = 18;

var createMenber = function() {

// ...

}

var getMenber = function() {

// ...

}

}) ();

若是要訪問其中的對象或函數，能夠:

var myApp = function() {

var name = 'Chris';

var age = 18;

return {

createMenber: function() {

// ...

}

getMenber: function () {

// ...

}

}

} ();

// myApp.createMenber() 和 myApp.getMenber() 可使用

所謂 Module 模式或單例模式(Singleton)，假如你想在別的地方調用裏面的方法，能夠在匿名函數中返回這些方法，甚至用簡稱返回：

var myApp = function() {

var name = 'Chris';

var age = 18;

var createMenber = function () {

// ...

}

var getMenber = function () {

// ...

}

return {

create:createMenber,

get:getMenber

}

} ();

// myApp.create() 和 myApp.get() 可使用

19.事件委託

事件是JavaScript很是重要的一部分。

咱們想給一個列表中的連接綁定點擊事件，通常的作法是寫一個循環，給每一個連接對象綁定事件，HTML代碼以下：

<h2>Great Web resources</h2>

<ul id="resources">

<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>

<li><a href="http://sitepoint.com">Sitepoint</a></li>

<li><a href="http://alistapart.com">A List Apart</a></li>

<li><a href="http://yuiblog.com">YUI Blog</a></li>

<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>

<li><a href="http://oddlyspecific.com">Oddly specific</a></li>

</ul>

代碼以下：

// 典型事件綁定示例

(function(){

//回調函數

var handler = function (e){

e = e || window.event;

//獲取事件源(被點擊的元素對象)

var x = e.target || e.srcElement;

alert('Event delegation:' + x);

//屏蔽Form提交事件

if ( e.returnValue ) e.returnValue = false; //for IE

if ( e.preventDefault ) e.preventDefault(); //for Firefox

};

var resources = document.getElementById('resources');

var links = resources.getElementsByTagName('a'); // Dom 對象下獲取子對象

var all = links.length;

// 給每一個連接綁定點擊事件

for(var i=0;i<all;i++){

var link = links[i];

if ( link.attachEvent ) {

link.attachEvent('onclick',handler);

}

else if ( link.addEventListener ) {

link.addEventListener('click',handler,false);

}

};

})();

更合理的寫法是隻給列表的父對象綁定事件，代碼以下：

(function(){

var handler = function (e) {

e = e || window.event;

var x = e.target || e.srcElement;

// 確認被點擊的對象是 A標籤

if ( x.nodeName.toLowerCase() === 'a' ) {

alert('Event delegation:' + x);

//屏蔽Form提交事件

( e.preventDefault ) ? (e.preventDefault()) : (e.returnValue = false);

}

};

var resources = document.getElementById('resources');

resources.onclick = handler; //也能夠像上面用 addEventListener 和 attachEvent 添加 onclick 事件

})();

20.window.open() 子窗口控制

// 窗口參數,控制位置和大小、顯示等

var param = 'top='+(screen.height-pHeight)/2+',left='+(screen.width-pWidth)/2+',width='+ pWidth +',height=' + pHeight + ',resizable=yes,scrollbars=yes,location=no, status=no';

// 參數解釋:

height=100 窗口高度； // 這裏 pHeight 須要先設定參數值

width=400 窗口寬度； // 這裏 pWidth 須要先設定參數值

top=0 窗口距離屏幕上方的象素值； //top=(screen.height-pHeight)/2 和 left=(screen.width-pWidth)/2 讓窗口居中顯示

left=0 窗口距離屏幕

左側的象素值；

toolbar=no 是否顯示工具欄，yes爲顯示；

menubar，scrollbars 表示菜單欄和滾動欄。

resizable=no 是否容許改變窗口大小，yes爲容許；

location=no 是否顯示地址欄，yes爲容許；

status=no 是否顯示狀態欄內的信息（一般是文件已經打開），yes爲容許；

// 子窗口網址

var url = "test.html";

var pName = "windowsName" // 子窗口的名稱: 若是子窗口名稱相同,會覆蓋舊的窗口

// 打開窗口,返回子窗口對象

var win = window.open(url,pName,param);

// 父窗口控制子窗口的對象

win.window.document.getElementById("productName").innerHTML = "<%=prod.Name%>";

// 父窗口調用子窗口的函數

win.testFun();

// 子窗口控制父窗口

window.opener.window.document.getElementById("bnt").value = "從新查看";

// 子窗口調用父窗口的函數

window.opener.testfun();

注意:父窗口剛打開子窗口時立刻對它進行賦值或者調用其函數等操做可能會失敗,由於子窗口未徹底加載

須要這樣作時,最好在子窗口寫加載的js,再調用父窗口; 以避免操做失敗。

21.URL編程

javascript容許直接在URL地址欄寫程序，這令js作的驗證所有都是不安全，必須後臺在驗證一次。

如，在一個頁面的地址欄輸入：「javascript:alert(55);」，那頁面便可執行 alert 函數，同理也可執行任意的js函數。

利用這點，<A>標籤的地址也能夠編程，如：「<A href='javascript:alert(5);testFun();'></A>」

22.頁面的script結束符問題

以下寫法，html頁面不會alert,反而會在頁面上顯示「');」的內容

<script>

alert('</script>');

</script>

由於瀏覽器把alert的字符串中的「</script>」解析成結束符了，須要「\」轉換一下，以下寫成能正常：

<script>

alert('<\/script>');

</script>

23.z-index(zIndex)塗層使用

在css裏面用 z-index, 而javascript裏面用 zIndex, 如：

<div id='fl' style="Z-INDEX: 9999999;">...</div>

<script>

var element = document.getElementById('fl');

element.style.zIndex = 9;

</script>

z-index(zIndex) 默認爲0,(其實打印的時候爲空),塗層的數值越大越往上，也就是顯示時覆蓋塗層低的。

注意：IE6上，層級會影響塗層，按前後出現的順序來絕定層的堆疊順序，不一樣層級的元素須要設置祖先元素(上溯到同層級爲止)的z-index才生效。

24. iframe 的操做

1) 得到 iframe 的 window 對象。存在跨域訪問限制。

chrome: iframeElement. contentWindow

firefox: iframeElement.contentWindow

ie6: iframeElement.

contentWindow

function getIframeWindow(element){

return element.contentWindow;

//return element.contentWindow || element.contentDocument.parentWindow;

}

2) 得到 iframe 的 document 對象。存在跨域訪問限制。

chrome: iframeElement.contentDocument

firefox: iframeElement.contentDocument

ie: iframeElement.contentWindow.document // ie沒有 iframeElement.contentDocument 屬性。

function getIframeDocument(element) {

return element.contentDocument || element.contentWindow.document;

}

3) iframe 中得到父頁面的 window 對象。存在跨域訪問限制。

父頁面：window.parent

頂層頁面：window.top

適用於全部瀏覽器

4) 得到 iframe 的內容。存在跨域訪問限制。

firefox: iframeElement.contentDocument.documentElement.textContent

ie: iframeElement.contentWindow.document.documentElement.innerText

function getIframeText(element) {

var iframeDocument = element.contentDocument || element.contentWindow.document;

var documentElement = iframeDocument.documentElement || iframeDocument.body;

return documentElement.textContent || documentElement.innerText;

}

5) iframe的 onload 事件

非ie瀏覽器都提供了 onload 事件。例以下面代碼在ie中是不會有彈出框的。

var ifr = document.createElement('iframe');

ifr.src = 'http://www.b.com/index.html';

ifr.onload = function() {

alert('loaded');

};

document.body.appendChild(ifr);

可是ie卻又彷佛提供了onload事件，下面兩種方法都會觸發onload

//方法一：

<iframe onload="alert('loaded');" src="http://www.b.com/index.html"></iframe>

//只有ie才支持爲createElement傳遞這樣的參數

var ifr = document.createElement('<iframe onload="alert(\'loaded\');" src="http://www.b.com/index.html"></iframe>');

document.body.appendChild(ifr);因爲iframe元素包含於父級頁面中，所以以上方法均不存在跨域問題。

實際上IE提供了 onload 事件，但必須使用attachEvent進行綁定。因此最好的 onload事件寫法以下：

var ifr = document.createElement('iframe');

ifr.src = 'http://b.a.com/b.html';

var loaded_fun = function(){ alert('loaded'); }; // 要執行的 onload 事件

if (ifr.attachEvent) {

ifr.attachEvent('onload', loaded_fun );

} else {

ifr.onload = loaded_fun;

}

document.body.appendChild(ifr);

6) frames

window.frames 能夠取到頁面中的幀

( iframe, frame 等)，須要注意的是取到的是 window 對象，而不是 HTMLElement 。

var ifr1 = document.getElementById('ifr1');

var ifr1win = window.frames[0];

ifr1win.frameElement === ifr1; // true

ifr1win === ifr1; // false

25. 反射

在JavaScript中能利用 for in 語句實現反射,如：

// 下面這段語句遍歷obj對象的全部屬性和方法

for (var p in obj) {

if (typeof(obj[p]=="function") {

obj[p](); // 執行函數,也還能夠傳參數

} else {

alert(obj[p]);

}

}

obj.函數名(參數列表); // 這樣執行函數，可使用下面的反射形式來代替

obj["函數名"](參數列表);

26. 過濾數組的重複值

/**

* 返回沒有重複值的新數組,原數組不改變

* @return 返回過濾重複值後的新數組

*

* @example

* var arr = ['a', 'b', 'c', 'd', 'c', null];

* var arr2 = arr.unique(); // arr2 爲: ['a', 'b', 'd', 'c', null]

*/

Array.prototype.unique = function() {

var result = [];

// 注意學習此算法

for (var i=0,l=this.length; i<l; i++) {

for (var j=i+1; j<l; j++) {

if (this[i] === this[j]) j = ++i;

}

result.push(this[i]);

}

return result;

};

27. 巧用「||」、「&&」和「!」

鬆散性語言的特性, if 判斷時能夠用任意值, false、 null、 undefine、 ''、 0、 NaN 都會被當成 false

利用js的鬆散性和沒類型特性, 可簡化一些代碼:

function fun1(name, fun2, obj, add_step) {

// 設預設值

name = name || '匿名';

// 上面一句至關於下面這一句

if ( !name ) name = '匿名';

// 假如傳入的 fun2 是個函數, 當有此值傳入時執行, 沒有則不執行

fun2 && fun2();

// 上面一句至關於下面這一句

if ( fun2 ) fun2();

// 轉成布爾值,無論傳入的 obj 是什麼類型的值, 都會返回布爾類型的值

return !!obj;

// 上面一句至關於下面這幾句

if ( obj ) {

return true;

} else {

return false;

}

// && 多重的if判斷,或者swith判斷,能夠這樣簡寫

var add_level = (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

// 上面一句至關於下面這幾句

var add_level;

if (add_step > 10) {

add_level = 3;

} else if (add_step > 5) {

add_level = 2;

} else if (add_step > 0) {

add_level = 1;

} else {

add_level = 0;

}

}

// 「||」、「&

&」和「!」的特性幫咱們精簡了代碼,同時也下降了代碼的可讀性。 這就須要咱們本身來權衡了。

// 不必定非得用這些精簡寫法,但得讀得懂,由於不少框架用上了這類寫法。

// 之因此會犧牲可讀性來用這些簡便寫法,是爲了壓縮代碼量,減小訪問時間。