weixin_30681121

JavaScript：基礎知識

JavaScript基礎知識

1、標籤組使用

charset=’utf-8’ //設置字元集

defet //使腳本延遲到文檔解析完成，Browser已忽略

language=’javascript’ //設置語言，已廢棄

src=’url’ //引用外部檔，可選

type=’text/javascript’ //必選，language替代品

>代碼

列印JavaScript結尾符(外部引用可直接打)：‘’);

src引用JS後，不要在之間加任何語句

2、判斷是否支持JavaScript

3、JavaScriptの核心是ECMAScript

首字母必須是字母、_或$

其他字母可是字母、_、$或數字

不可使用關鍵字、保留字、true、false、null

4、注釋

單行： //語句或文字

多行： /*

語句或文字

多行美觀版： /*

*語句或文字

5、數據類型

undefined、Boolean、string、number、object(含null)、function

初始化：

var box=’’; //字串初始化

var box=0; //數值初始化

var box=false; //布爾值初始化

6、Boolean型

每個類型の值都有對應的Boolean值

Stringの非空為真，空為假

Numberの非零為真，0為假

Objectの非null為真，null為假

undefined為假，其餘為真

7、Number類型

浮點型範圍：Number.MIN_VALUE到Number.MAX_VALUE

正無窮：Number.POSITIVE_INFINITY

負無窮：Number.NEGATIVE_INFINITY

是否超範圍：isFinite()

NaN：Not a Number(非數值)

如：0/0、12/0*0

是否NaN類型：isNaN()

NaNの類型：Number.NaN、NaN+1

Number()將非數值轉換成數值型

Number(‘’) //0

Number(null) //0

Number(false) //0

Number(true) //1

Number(undefined) //NaN

Number(‘345’) //345

Number(032) //26 八進制

Number(‘032’) //32

Number(‘08.90’) //8.9

Number(‘12A21’) //NaN

parseInt()把字串轉為字元型

parseInt(‘34M’) //34

parseInt(‘M51’) //NaN

parseInt(‘3M2’) //3

parseInt(‘12.34’) //12

parseInt(‘’) //NaN

parseInt(‘0xAF’) //175 十六進制

parseInt(‘070’) //56 八進制

第二個參數用於解決進制問題

parseInt(‘AF’,16) //175

parseInt(‘70’,8) //56

parseInt(‘1010’,2) //10

parseFloat()將string型轉為float型，不可識別十六/八進制

parseFloat(‘123M’) //123

parseFloat(‘0xA’) //0

parseFloat(‘123.4.5’) //123.4

parseFloat(‘012.300’) //12.3

parseFloat(‘1.2e3’) //1200

8、轉義字元

\n：換行 \t：製錶 \’：’ \r：回車 \xnn：十六進制のASCII

\\：\ \b：空格 \”：” \f：換頁 \unnn：Unicode值の符號

ASCII對應の十六進制 eg：\x2B：+

String.fromCharCode(2B)； //+，返回ASCII值對應的字元

0-9：30-39 A-Z：41-5A a-z：61-7A

Unicode值與對應の字元

6EE1：滿 6eff：滿 5B5D：孝 96EA：雪 306e：の 9ed1：黑

51ac：冬 6f2B：漫 85CF：藏 85e4：藤 98C4：飄 51B0：冰

toString()將值轉換成字串

var box=10;

box.toString(); //10，默認

box.toString(2); //1010，二進制

box.toString(8); //12，八進制

box.toString(16); //a，十六進制

若不知是否為null或undefined(toString()不可轉此二者)，可用string()轉換

String(null); //null

String(undefined); //undefined

age=++box; //先box+1，再將值賦給age

age=box++; //先將值賦給age，再box+1

age=--box; //先box-1，再將值賦給age

age=box--; //先將值賦給age，再box-1

-、--、+、++對數值字串有隱形轉換類型功能

將false轉為0，true轉為1

+box：取正 -box：取負

加法の特殊：

1+’’;//1 1+NaN;//NaN 1+2; //3 Infinity+Infinity;//Infinity -Infinity+Infinity;//NaN

100+’100’;//100100 ‘abc’+10+20;//abc1020 10+20+’abc’;30abc ‘abc’+(10+20);//abc30

特殊の運算：var box={}; box=12+box; //新box為string型

減法の特殊：Infinity-Infinity;//NaN 100-’Lee’;//NaN 100-’70’;//30

乘法の特殊：100*’’;//0 10*null;//0 100*NaN;//NaN 100*true;//100 100*’Lee’;//NaN

除法の特殊：100/’’;//Infinity 100/’Lee’;//NaN Infinity/-Infinity;//NaN

求餘の特殊：100%null;//NaN 100%’Lee’;//NaN Infinity%Infinity;//NaN 100%true;//0

9、關係運算符

規則： ①若皆為數值，則比較

②若皆為字串，則比較首字元のASCII碼值

③首為數字，則轉為數進行比較

④false轉為0，true轉為1

⑤null與undefined相等

⑥NaN與任何值都不相等(含其自身)

⑦{}=={} //false，比較的是他們の地址

⑧undefined==0; null==0; //false

符號： ===(恆等)、!===(非恆等) 在此比較上，null和undefined不會轉為0，’’會轉為0

邏輯運算符：&&(與)、||(或)、!(非)

與（&&）的規則是：

第一項的Boolean值為false，則返回第一項的值

第一項的Boolean值為true，則返回第二項的值

簡記：一假返一，一真返二

與：一假為假，全真為真

或（||）的規則是：

第一項的Boolean值為true，則返回第一項的值

第一項的Boolean值為false，則返回第二項的值

簡記：一真返一，一假返二

或：一真為真，全假為假

非（!）的規則是：

false：非空字元串、非零數值(含Infinity)、對象

true：0、NaN、null、undefined、空字元串

Boolean()與!!の結果一樣

10、判斷語句

a?b:c; //若a為true則執行b，否則執行c

IF單句：if (條件) 語句；

IF復合語句：條件轉為Boolean類型進行判斷

if (條件){

語句;

}else{

語句;

}

或 if (條件){

語句;

}

IF分支語句：

if (條件){

語句;

}else if{

語句;

}

switch語句：break; 退出全循環 coutinue; 退出本次循環

switch(變量){

case 值 :

語句;

break;

default :

語句;

break;

}

do while語句：先執行一次再判斷

do{

語句;

} while (判斷語句);

while語句：先判斷再執行語句

while (判斷語句){

語句;

}

for語句：順序：先聲明，再判斷，三語句1，四語句2

for(聲明變量; 判斷; 語句2 ){

語句1;

}

for in語句：

for (var p in 對象){

語句;

}

with語句：將作用域設置到同一個對象中

var n=box.name; var a=box.age; var h=box.height;

等價於：with(box){

var n=name; var a=age; var h=height;

}

11、函數：

構造函數： function 函數名 (參數1,參數2……){

語句;

return 對象/值; //return還有一共能就是退出函數，即return之後の語句不再執行

}

動態用參： function box() {

if (arguments.length==0) return 對象/值;

for (var i=0; i

語句;

return 對象/值;

}

創建方法： var man= new box(); ( new可省略，即var man= box(); ) 或 var man=box;

調用方法： man或man();

運行方法： man()或man()();

對象(屬性)賦值： box.name=’man’;

或 var box={

name=’man’,

……

}

給對象(屬性)創建方法： var box={

name : ‘man’,

run : function(){}

}

刪除對象：delete box.name;

空對象：var box={};

匿名對象：box({});

function調用：function box(obj){

if (obj.name!==undefined)語句;

}

13、數組

數組中可以是對象、字串、數值、數組等也可混用；

創建數組： var box=new Array();

var box=new Array(10); //new 可省略

var box=(‘man’,28,’華人’)

字面量法：

var box=[];

var box=[‘Man’,28,’華人’]

屬性： box.lenght; //獲取元素個數

box.lenght=10; //設置元素個數

box[box.lenght]=’js’; //給數組尾部加一個元素

堆棧： push()、pop() 後進先出

box.push(‘Man’); //數組尾部添加一元素，並返回新長度

box.unshift(‘xiao’,4) //數組頭部添加倆元素，並返回新長度

box.pop(); //移出最後一元素，並返回移出的元素

box.shift(); //移除數組頭部的元素，並返回移除的元素

box.join(‘|’); //返回用|分開的字串

box.reverse(); //逆向排序，並將結果返給原數組

box.sort(); //從小到大排序(依字串法，即2>10)，結果返給原數組

基於當前數組建立新數組

var box2=box.concat(‘man’); //創建新數組並添加元素

box.slice(1); //從boxの第2個元素開始取，剩下の全取

box.slice(1,2); //取box第1元素到第2個元素，且將取出的元素從原數組中刪除

box.splice(0,2) //從box第1元素開始取2個元素

box.splice(1,0,’a’,’man’) //在box第1個元素後截取0個，插入2個（插入）

box.splice(1,1,100) //在box第1個元素後截取1個，插入1個（替換）

14、日期對象

創建：var date=new Date(); //返回類型：Mon Jun 13 2011 00:00:00 GMT+0800

Date()中可接收の類型：除Date.parse()和Date.UTC()所支持の類型，還可接收毫秒數和

方法： Date.parse(); //接收一表示日期の字串，並返回毫秒數

可接收の類型：6/3/2011、May 25,2004、Tue May 25 2004 00:23:22 GMT-070

Date.UTC(年,月,日,時,分,秒,毫秒) //前二者必須，返回毫秒數

月份為0-11，此日期為0時區，若在中國，會自動加上8h

格式化：date.toString(); //Thu Nov 15 2006 17:22:32 GMT+8

date.toLocaleString(); //2007-11-23 14:22:33

date.valueOf(); //返回毫秒數

date.toDateString(); //以特定的格式顯示星期幾、月、日和年

date.toTimeString(); //以特定的格式顯示時、分、秒和時區

date.toLocaleDateString(); //以特定地區格式顯示星期幾、月、日和年

date.toLocaleTimeString(); //以特定的格式顯示時、分、秒和時區

date.toUTCString(); //以特定的格式顯示完整的 UTC 日期

組件方法：

box.getTime(); //獲取日期的毫秒數，和 valueOf()返回一致

box.setTime(100); //以毫秒數設置日期，會改變整個日期

box.getFullYear(); //獲取四位年份

box.setFullYear(2012); //設置四位年份，返回的是毫秒數

box.getMonth(); //獲取月份，沒指定月份，從 0 開始算起

box.setMonth(11); //設置月份

box.getDate(); //獲取日期

box.setDate(8); //設置日期，返回毫秒數

box.getDay(); //返回星期幾，0 表示星期日，6 表示星期六

box.setDay(2); //設置星期幾

box.getHours(); //返回時

box.setHours(12); //設置時

box.getMinutes(); //返回分鐘

box.setMinutes(22); //設置分鐘

box.getSeconds(); //返回秒數

box.setSeconds(44); //設置秒數

box.getMilliseconds(); //返回毫秒數

box.setMilliseconds(); //設置毫秒數

box.getTimezoneOffset(); //返回本地時間和 UTC 時間相差的分鐘數，除此外，其他都有UTC功能，即中國のgetHours與getUTCHours相差8小時

15、正則表達式

創建： var box=new RegExp(‘box’ , ’ig’) //i:忽略大小寫；g:全局匹配；m:多行匹配

var box=/box/ig;

var box=new RegExp(‘box’);

var box=/box/;

檢測與替換：/box/i.test(‘This is a Box!’); //一句話法

box.test(str); //判斷str中是否有box，有返true

box.exec(str); //判斷str中是否有box，有返數組，無返null

str.match(box); //判斷str中是否有box，有返數組，無返null

str.search(box); //判斷str中是否有box，返回第一個匹配位置

str.replace(box,’tom’) //把str中匹配的box替換為tom，開啟全局模式，全換

str.split(box) //把str中匹配的box作為分割符生成一數組

靜態屬性：屬性：短名：含義

input ： $_ ：被匹配的字串

lastMarth ： $& ：最有一個被匹配的字串

lastParen ： $+ ：最後一對()匹配的字串

leftContext ： $` ：最後一次匹配的字串

rightContext ： $’ ：上次匹配之後的字串

multiline ： $* ：所有表達式都用於多行布爾值

用法： box.test(str); //先執行一下

RegExp.input; //此為靜態屬性，輸出被匹配額字串，RegExp為靜態量

RegExp.[‘$_’] //第二種寫法

另注：input比較特殊，還有一種寫法：RegExp.$_，但是其他不可這麼用

實例屬性：

global：是否設置全局屬性，同g

ignoreCase：是否設置忽略大小寫，同i

multiline：是否支持換行，同m

source：正則表達式要匹配的字串

用法： var pattern = /google/ig; //需要先預先聲明

alert(pattern.global); //

這些實例屬性基本沒什麼用。並且 lastIndex 在獲取下次匹配位置上 IE 和其他流覽器有偏差，

主要表現在非全局匹配上。lastIndex 還支持手動設置，直接賦值操作。

特殊字元：

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

[a-z0-9] //匹配括弧中的字元集中的任意字元

[^a-z0-9] //匹配任意不在括弧中的字元集中的字元

\d //匹配數字

\D //匹配非數字，同[^0-9]相同

\w //匹配字母和數字及_

\W //匹配非字母和數字及_

\0 //匹配 null 字元

\b //匹配空格字元

\f //匹配進紙字元

\n //匹配換行符

\r //匹配回車字元

\t //匹配跳位字元

\s //匹配空白字元、空格、跳位字元和換行符

\S //匹配非空白字元

^ //行首匹配

$ //行尾匹配

\A //只有匹配字串開始處

\b //匹配單詞邊界，詞在[]內時無效

\B //匹配非單詞邊界

\G //匹配當前搜索的開始位置

\Z //匹配字串結束處或行尾

\z //只匹配字串結束處

x? //匹配 0 個或 1 個 x

x* //匹配 0 個或任意多個 x

x+ //匹配至少一個 x

(xyz)+ //匹配至少一個(xyz)

x{m,n} //匹配最少 m 個、最多 n 個 x

this|where|logo //匹配 this或where或logo中任意一個

(string) //用於反向引用的分組

\1 或$1 //匹配第一個分組中的內容

\2 或$2 //匹配第二個分組中的內容

\3 或$3 //匹配第三個分組中的內容

捕獲性分組和非捕獲性分組

var str = '123abc'; var pattern = /(\d+)([a-z])/; //捕獲性分組，即普通分組

alert(pattern.exec(str));

var str = '123abc'; var pattern = /(\d+)(?:[a-z])/; //非捕獲性分組，即不獲取其分組，標誌就是?:

alert(pattern.exec(str)); //返回123a，123；不返回a

使用分組嵌套

var str = 'ABC'; var pattern = /(A?(B?(C?)))/; //從外往內獲取

alert(pattern.exec(str)); //返回ABC , ABC , BC , C

使用前瞻捕獲

var str = 'google'; var pattern = /(goo(?=gle))/; //goo 後面必須跟著 gle 才能捕獲

alert(pattern.exec(str));

使用特殊字元匹配

var str = '.[/b]'; var pattern = /\.\[\/b\]/; //特殊字元，用\符號轉義即可

alert(pattern.test(str));

使用換行模式

var str = '1.baidu\n2.google\n3.bing'; var pattern = /^\d+/mg; //啟用了換行模式

var result = str.replace(pattern, '#'); alert(result);

常用の正則運算式

郵遞區號：/[1-9][0-9]{5}/) //共 6 位數字，第一位不能為 0

郵箱地址：/^([\w\.\-])+@([\w\.\-]+)\.([a-zA-Z]{2,5})$/

檔壓縮包：/[\w]+\.zip|rar|gz/ //\d\w_表示所有數字和字母加下劃線

刪除多餘空格：str.replace(/\s/g,''); //g 必須全局，才能全部匹把空格匹配成無空格

刪除首空格：str.replace( /^\s+/, '');

刪除尾空格：str.replace(/\s+$/, '');

刪除首尾空格：str.replace(/^\s*(.+?)\s*$/);

替換用法：

pattern.exec(str)[1];

str.replace(pattern,’$1’)

16、function類型

變數聲明：

1.普通的函數聲明

function box(num1, num2) {return num1+ num2;}

2.使用變數初始化函數

var box= function(num1, num2) {return num1 + num2;};

3.使用 Function 構造函數

var box= new Function('num1', 'num2' ,'return num1 + num2');

function內部自身調用

arguments.callee()

this代表作用域，全局模式下為window

匿名函數沒有自身域，他のthis代表父層

實名函數的作用域為傳遞來的參數對象的

box.length //獲取參數個數

作用域改變：不傳參數，box和apply用法相同，區別只在傳參

box.call(dog); //將boxの作用域放在dog下

box.apply(this); //將boxの作用域放在上一層域內

box.call(); //同上，

box.call(window); //將boxの作用域放在window下

box.apply(dog,num1,num2) //將n1、n2傳入到box中，在dog域內使用相當於dog{box(n1,n2);}

box.call(dog,[num1,num2]) //同上

17、變數、作用域及記憶體

基本類型（複製の都是值）：undefined、null、Boolean、number、string

引用類型（複製の都是地址）：object

JavaScriptのfunction參數不會按引用傳遞，都是按值傳遞。

引用類型檢測：instanceof

如：box instanceof Array

類型名：Array、Object、RegExp、String

作用域：

局部環境中の變數在環境被銷毀後隨之銷毀

全局變數在執行完程式或網頁被關閉才被銷毀

局部變數編程全局變數，省略var即可，即直接賦值

變數查詢中，訪問局部變數要比全局變數更快，因為不需要向上搜索，當局部變數不存在時，會向父層搜索。

JavaScriptの記憶體垃圾搜集器週期性的自動運行。

解除引用，等待回收（內置變數不可解除）：box=null;

18、三類特殊引用類型

使用new定義的Boolean、String、Number三中類型可以為自己添加屬性和方法。

字面量法定義則不可添加屬性和方法，但此二法皆可用內置方法。

不建議使用new添加屬性和方法。

比如：var box = new String('Mr. Lee'); //new 運算符

box.name = 'Lee'; //自定義屬性

box.age = function () {}; //自定義方法

Numberの靜態方法（直接用Number加屬性）

Number.MAX_VALUE //表示最大數

Number.MIN_VALUE //表示最小值

Number.NaN //非數值

Number.NEGATIVE_INFINITY //負無窮大，溢出返回該值

Number.POSITIVE_INFINITY //無窮大，溢出返回該值

Number.prototype //原型，用於增加新屬性和方法

Number對象の方法（var a=123 ; a.toString();）

toString() //將數值轉化為字串，並且可以轉換進制

toLocaleString() //根據本地數字格式轉換為字串

toFixed() //將數字保留小數點後指定位數並轉化為字串

toExponential() //將數字以指數形式表示，保留小數點後指定位數並轉化為字串

toPrecision() //指數形式或點形式表述數，保留小數點後面指定位數並轉化為字串

用法：var num=123; num.toFixed(2);

String對象の方法與屬性（var a=’China’ ; a.length;）

length //返回字串的字元長度

constructor //返回創建 String 對象的函數

prototype //通過添加屬性和方法擴展字串定義

charAt(n) //返回指定索引位置的字元

charCodeAt(n) //以 Unicode 編碼形式返回指定索引位置的字元

concat(str1,str2) //將字串參數串聯到調用該方法的字串

slice(n,m) //返回字串 n 到 m 之間位置的字串

substring(n,m) //同上

substr(n,m) //返回字串 n 開始的 m 個字串

slice(n)、substring(n)、substr(n) //n為正數，三者功能相同，從n為開始之後全返

slice(n)、substr(n) //n為負數，此二者功能相同，返回總長度與n之和，開始之後の所有字串

substring(n) //n為負數，全返

slice(-a,-b) //若其長為l，等價於slice(l-a , l-b)，若l-b，則什麼都不返

substring(a,b) //b為負數等價於substring(0,a)，皆為負數等價於substring(0 , 0)，則無值

substr(a,-b) //等價於substr(a,0)，啥也不取

substr(-a,b) //等價於substr(l-a,b)，若l-a大於b，則無值

indexOf(str) //從頭搜索str，並返回查找到的第一個索引，若無返回-1

indexOf(str , n) //從第n個字元後搜索，並返回查找到的第一個索引，若無返回-1

lastIndexOf(str) //從尾部搜索str，並返回查找到的第一個索引，若無返回-1

lastIndexOf(str,n) //從倒數第n個字元前搜索，並返回查找到的第一個索引，若無返回-1

toLowerCase() //轉為全小寫

toUpperCase() //轉為全大寫

toLocaleLowerCase() //將字串全部轉換為小寫，並且本地化

toLocaleUpperCase() //將字串全部轉換為大寫，並且本地化

split(str) //用str作為分隔符號，把字串轉為數組

match(str) //在字串中查找str，找到返回str，否則null

replace(s1,s2) //把字串s1替換成s2

search(str) //在字串中查找str，並返回索引，若無返回-1

localeCompare(str) //比較與strの大小，返回值：1(比str首字母大)、0、-1

19、HTMLの方法（添上HTML標籤，var b=’box’;b.anchor(‘china’);//box）

anchor(name) //str

big() //str

blink() //str

bold() //Str

fixed() //Str

fontcolor(color) //str

fontsize(size) //str

link(URL) //str

small() //str

strike() //~~str~~

italics() //italics

sub() //_str

sup() //^str

20、UTF-8編碼與解碼

encodeURI(str); //除特殊字元與英文外都編碼

encodeURIComponent(str); //除英文外都編碼（常用）

decodeURI(str); //解碼encodeURIの編碼

decodeURIComponent(str); //解碼encodeURIComponentの解碼

eval(str) //將str解析為JavaScript語句

eval()使用時一定要注意安全，防範代碼注入

21、Mathの常量

Math.E //自然對數的底數，即常量 e 的值

Math.LN10 //10的自然對數，即ln10

Math.LN2 //2的自然對數，即ln2

Math.LOG2E //以2為底e的對數，即log₂e

Math.LOG10E //以10為底 e 的對數，即log₁₀e

Math.PI //π的值

Math.SQRT1_2 //1/2的平方根

Math.SQRT2 //2的平方根

Math.min(3,8,0,1,3); //最小值

Math.max(1,9,6,0,3,2); //最大值

Math.ceil(25.1); //26，向上進一

Math.floor(25.9); //25，取整

Math.round(25.9); //26，四捨五入

Math.random(); //產生0-1之間の亂數（不含0和1）

Math.abs(n); //返回 n 的絕對值，即|n|

Math.exp(n); //返回 Math.E 的 num 次冪，即eⁿ

Math.log(n); //返回 n的自然對數，即logn

Math.pow(n,m); //返回 n的 m次冪，即n^m

Math.sqrt(n); //返回 n的平方根

Math.acos(x); //返回 x 的反余弦值，即arccos(x)

Math.asin(x); //返回 x 的反正弦值，即arcsin(x)

Math.atan(x); //返回 x 的反正切值，即arctan(x)

Math.atan2(y,x); //返回 y/x 的反正切值，即arctan(y/x)

Math.cos(x); //返回 x 的余弦值，即cos(x)

Math.sin(x); //返回 x 的正弦值，即sin(x)

Math.tan(x); //返回 x 的正切值，即tan(x)

產生區間隨機值

Math.floor(Math.random() *總數+首值); //如a-b之間，a為首值，b-a+1為總數

22、構造函數

普通函數：

function china(參1,參2){

return 參1+參2;

}

工廠模式：即內部賦值，在內部設置屬性，外部互用時不會相互影響。無法搞清楚他們到底是哪個對象的實例

function a(name,age){

var obj = new Object();

obj.name = name;

obj.age = age;

obj.run = function () {

return this.name + this.age + '運行中...';

};

return obj;

};

工廠模式の引用：var b=a(參數1,參數2)

構造函數：

function Box(name, age) {

this.name = name;

this.age = age;

this.run = function () {

return this.name + this.age + '運行中...';

};

}

構造函數命名規範：

1.函數名和實例化構造名相同且大寫，(PS：非強制，但這麼寫有助於區分構造函數和普通函數)；

2.通過構造函數創建對象，必須使用 new 運算符。（Box('Lee', 20); //普通模式調用，無效）

工廠模式下引用後的類型都是以object，構造函數引用後的類型都是Box

寄生構造函數：工廠模式+構造函數

function myString(string) {

var str = new String(string);

str.addstring = function () {

return this + '，被添加了！';

};

return str;

}

寄生構造函數の引用：var box=new myString();

穩妥構造函數：不讓用new和thisの情況

function Box(name , age) {

var obj = new Object();

obj.run = function () {

return name + age + '運行中...'; //直接列印參數即可

};

return obj;

}

穩妥構造函數的引用：var box=Box();

23、原型：prototype

讓所有對象實例共用他所包含的屬性和方法

不必在構造時定義對象，就可以將信息直接加到原型中

原型模式の執行流程：

1、先查找實例裏の屬性或方法，有則返回

2、若實例中無則去原型中找，有則返回

已存在屬性，想訪問原型中的，需將屬性刪除：delete box1.name

刪除原型屬性：delete Box.prototype.name

判斷屬性是否在實例中：box1.hasOwnProperty(‘name’)

判斷屬性是否可訪問(不分實例、原型)：’name’ in box1

判斷對象是否實例化：Box.prototype.isPrototypeOf(box1)

獲取構造函數名(通過實例對象)：box1.constructor //返回Box，用此判斷是否為Box的實例對象

原型重寫：將之前的信息全部刪去

Box.prototype={

constructor:Box, //不加此句，則constructor為Object

name:’Man’,

}

給原型添加屬性：

Box.prototype.name=’man’;

Box.prototype.age=function(){};

動態原型模式(不用字面量重寫原型)：

if (typeof this.run!=’function’){

Box.prototype.run=function(){}

}

繼承：

Desk.prototype=new Box(); //將box()封裝到Deskの原型中

子類從屬於自身和其父類，但字面量重寫會中斷與原型的關係，子類無法給父類傳遞參數

對象冒充，只能繼承構造裏的信息，不能繼承原型

組合模式：可以解決傳參和繼承原型，但父函數被調用兩次

function Desk(參數){

Box.call(this,參數); //冒充

}

Desk.prototype=new Box(); //繼承

寄生組合繼承：思路：①將父の原型給子の原型②子再冒充父；解決了兩次調用

①function create(sun,father){

sun.prototype=father.prototype;

sun.prototype.constructor=sun;

}

②function Sun(參數){

Father.call(this,參數)

}

③執行一次：create(Sun,Father)

24、匿名函數和閉包

匿名函數：

匿名函數的自我執行：(匿名函數)();

把匿名函數返給變數：var 變數名=匿名函數;

把匿名函數執行後的返回值給變數：var 變數名=(匿名函數)();

匿名函數的傳參：(function(參數){})(值);

閉包（內匿）：指有權訪問另一個函數作用域中的變數的函數，創建閉包的常見的方式，就是在一個函數內部創建另一個函數，通過另一個函數訪問這個函數的局部變數

function box(){

function(){}

}

調用內匿：var b=box()();

閉包運行時指向window，即閉包的this指向window，改變this有兩種方法：

①冒充(冒充的本意就是改變作用域)

②var _this=this；在閉包內用_this，代替this

為了防止記憶體洩漏，應該講變數清除，如 box=null

由於JavaScript沒有塊級作用域，即出了if、for等語句後變數仍有用

解決辦法模仿塊級作用域：即(function(){if或for語句;})(); 匿名函數的變數出匿名函數後就銷毀

私有變數的引用：在function中建立一個匿名函數，在匿名函數內將需要の值返回

對外公共界面（匿名函數）：function Box(參數){

this.set=function(參數){}; //對外公共界面

}

全局屬性：採用的是 Box = function () {} 而不是 function Box() {} 因為如果用後面這種，就變成私有函數了，無法在全局訪問到了。

Box = function () {}; //構造方法

Box.prototype.setUser = function (value) {

user = value; //user為靜態屬性，即共用於不同對象中的屬性

}

引用：var box =new Box();

對外公共界面：

return{}；或var obj={}; return obj;

增強型：

function Desk() {};

var box = function () {

var desk = new Desk(); //可以實例化特定的對象

desk.go = function () {

return age + run();

};

return desk;

}();

alert(box.go());

25、BOM：Browser Object Mode 流覽器對象

window對象の方法：

強制操作，防止流覽器不認，即在前面加上window

如：window.closed(直接用closed可能不認)

closed //當窗口關閉時為真

defaultStatus=’文本’ //在狀態欄顯示的默認文本

status=’文本’ //在狀態欄顯示文本(臨時)

document //窗口中當前顯示的文檔對象

frames //窗口中的框架對象數組

history //保存有窗口最近加載的 URL

length //窗口中的框架數

location //當前窗口的 URL

name //窗口名

offscreenBuffering //用於繪製新窗口內容並在完成後複製已存在的內容，控制屏幕更新

opener //打開當前窗口的窗口

parent //指向包含另一個窗口的窗口（由框架使用）

screen //顯示屏幕相關信息，如高度、寬度（以像素為單位）

self //指示當前窗口。

top //包含特定窗口的最頂層窗口（由框架使用）

window //指示當前窗口，與 self 等效

windowの方法

confirm(‘提示語’); //有確定和取消，返回值：確定true，取消false

prompt(‘提示語’,’初始值’); //輸入框，返回值為內值

alert(“提示語”); //只有確定

print(); //打印頁面

find(); //調用查找

blur() //將焦點從窗口移除

clearInterval(interval) //清除之前設置的定時器間隔

clearTimeOut(timer) //清除之前設置的超時

close() //關閉窗口

focus() //將焦點移至窗口

open(url,name,[options]) //打開一個新窗口並返回新 window 對象

prompt(text,defaultInput) //創建一個對話框要求用戶輸入信息

scroll(x,y) //在窗口中滾動到一個像素點的位置

setInterval(expression,milliseconds) //經過指定時間間隔計算一個運算式

setInterval(function,millisenconds,[arguments]) //經過指定時間間隔後調用一個函數

setTimeout(expression,milliseconds) //在定時器超過後計算一個運算式

setTimeout(expression,milliseconds,[arguments]) //在定時器超過時後計算一個函數

open(‘url’ [,窗口名稱或窗口目標][,特性字串])

如：open(‘http:\\www.baidu.com’,’百度’,'width=400,height=400,top=200,left=200,toolbar=yes');//百度即窗口名

窗口目標：_parent(本窗口)、_blank(新建)

特性字串：可用,分開

width:寬度 height:高度 //此二者不可小於100

top:Y座標 left:X座標 //此二者皆不可為負值

以下字串值為yes或No，IE可能支持，其他流覽器不支持。(因為其他流覽器不在支持新建單頁模式)

location:是否顯示地址欄 menubar:是否顯示菜單欄

resizable:是否允許拖動 scrollbars:是否允許滾動條

status:是否顯示狀態欄 toolbar:是否顯示工具欄

fullscreen:是否最大化

opener:表示開啟子窗の父窗

如opener.document.write(‘’); //在子窗操作可讓父窗執行

窗口位置：直接用不用加首碼

screenLeft、screenTop；除火狐外都支持

screenX、screenY；全支持

相容寫法：var leftX = (typeof screenLeft == 'number') ? screenLeft : screenX;

var topY = (typeof screenTop == 'number') ? screenTop : screenY;

窗口頁面的4個屬性：(穀歌のinner=outer)

頁面的長寬：innerWidth、innerHeight

頁面+邊框的長寬：outerWidth、outerHeight

全相容寫法：

//如果是 Firefox 流覽器，直接使用 innerWidth 和 innerHeight

var width = window.innerWidth; //這裏要加 window，因為 IE 會無效

var height = window.innerHeight;

if (typeof width != 'number') { //如果是 IE，就使用 document

if (document.compatMode == 'CSS1Compat') {

width = document.documentElement.clientWidth;

height = document.documentElement.clientHeight;

} else {

width = document.body.clientWidth; //IE6非標準模式使用 body

height = document.body.clientHeight;

}

調整流覽器位置

moveTo(0,0); //IE 有效，移動到 0,0 座標

moveBy(10,10); //IE 有效，向下和右分別移動 10 像素

調整流覽器大小

resizeTo(200,200); //IE 有效，調正大小

resizeBy(200,200); //IE 有效，擴展收縮大小

超時調用：var time=setTimeout(語句,時間);

取消超時：clearTimeout(time);

間歇調用：var time=setInterval(fn,1000);

取消間歇：clearInterval(time);

location對象の方法：location 對象是 window 對象的屬性，也是 document 對象的屬性；

所以 window.location 和 document.location 等效，用法需在前面加上location

跳到指定頁面：location.assign(‘網址’); //網址需加上http:\\

重新加載： location.reload(); //會不停的加載

location.reload(true); //從服務器加載

不產生歷史記錄的跳轉：location.replace(‘網址’);

location.hash //如果該部分存在，表示獲取錨點部分

location.host //獲取主機名：端口號

location.hostname //獲取主機名

location.href //獲取整個 URL即絕對file:///D:/Windows/APP/AppServ/www/JS/1st.html

location.pathname //獲取路徑名

location.port //獲取端口號

location.protocol //獲取協議部分

slocation.search //獲取查詢字串即URL裏?之後的字串

以上皆可設置：如location.href =’http://www.baidu.com’ ; 但除protocal外都會自動跳轉

History對象：是 window 對象的屬性，它保存著用戶上網的記錄，從窗口被打開的那一刻算起。

history.length //history 對象中的記錄數

history.back() //前往流覽器歷史條目前一個 URL，類似後退

history.forward() //前往流覽器歷史條目下一個 URL，類似前進

history.go(num) //流覽器在 history 對象中向前或向後，正值前進，負值後退

26、流覽器檢測：

navigator對象：

navigator.appCodeName //流覽器的名稱。通常是Mozilla，即使在非 Mozilla 流覽器中也顯示Mozilla

navigator.appName //完整的流覽器名稱

navigator.appVersion //流覽器的版本。一般不與實際的流覽器版本對應

navigator.cookieEnabled //表示 cookie 是否啟用

navigator.javaEnabled() //表示當前流覽器中是否啟用了Java

navigator.mimeTypes //在流覽器中註冊的 MIME 類型數組

navigator.platform //流覽器所在的系統平臺

navigator.plugins //流覽器中安裝的插件信息的數組

navigator.userAgent //流覽器的用戶代理字串

插件屬性：

navigator.plugins.name //插件名

navigator.plugins.filename //文檔名

navigator.plugins.length //插件個數

navigator.plugins.description //插件的描述

非IE插件檢測：

function hasPlugin(name) {

var name = name.toLowerCase();

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

if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {

return true;

}

return false;

}

IE控件檢測：

function hasIEPlugin(name) {

try {

new ActiveXObject(name);

return true;

} catch (e) {

return false;

}

flash插件檢測：

function hasFlash() {

var result = hasPlugin('Flash');

if (!result) {

result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');

}

return result;

}

MIME類型：指多用途因特網郵件擴展。它是通過因特網發送郵件消息的標準格式。

navigator.mineTypes[i].type //類型文檔名

navigator.mineTypes[i].description //描述

navigator.mineTypes[i].enablePlugin //引用の類型

navigator.mineTypes[i].suffixes //支持の檔擴展名

27、DOM：Document Object Mode

DOM操作必須等待HTML文檔加載完畢，才能獲取

window.οnlοad=function(){}

通過ID獲取元素節點：

var box=document.getElementById(‘box’);

其下屬性：

box.tagName //獲取節點の標籤名

box.innerHTML //獲取節點中間の純文本+標籤

box.id //ID名(可自設)

box.title //title屬性值(可自設)

box.style //style屬性對象(可自設)

box.className //class屬性の名字(可自設)

box.style.color //獲取style屬性中colorの值(可自設)

通過標籤獲取元素

var tag=document.getElementsByTagName(‘a’);

把a改為*表示所有標籤

tag.item(0) 或tag[0]：表示第一個元素

tag.length:表示元素數目

通過name獲取元素

var nm=document.getElementsByName(‘’)

box.getAttribute(‘class’); //獲取class屬性

box.setAttribute(‘屬性’,’值’) //設置屬性值

box.removeAttribute(‘class’) //移出屬性值

box.nodeName //同tagName,若為文本返回#text，其他則返回名

box.nodeType //元素返回1，屬性返回2，文本返回3

box.nodeValue //元素返回null，屬性返回屬性值，文本返回文本內容

box.bbb //獲取自定義屬性的值

nodeValue與innerHTML的區別

①box.innerHTML與box.childNodes[0].nodeValue等價，即nodeValue只能通過子節點去設置

②賦值不同：box.innerHTML可接收html標籤，而box.nodeValue不接收，會把其按文本輸出

層次節點：

box.childNodes //獲取當前元素節點的所有子節點

box.firstChild //獲取當前元素節點的第一個子節點

box.lastChild //獲取當前元素節點的最後一個子節點

box.ownerDocument //獲取該節點的文檔根節點，相當與 document

box.parentNode //獲取當前節點的父節點

box.previousSibling //獲取當前節點的前一個同級節點

box.nextSibling //獲取當前節點的後一個同級節點

box.attributes //獲取當前元素節點的所有屬性節點集合

box.attributes[0]或box.attributes[‘id’] //表示第一個屬性，id表示id的屬性值

box.removeChild(‘’) //移除子節點

DOM操作節點：

document.write() //這個方法可以把任意字串插入到文檔中

document.createElement() //創建一個元素節點

box.appendChild() //將新節點追加到子節點列表的末尾

document.createTextNode() //創建一個檔節點

box.parentNode.insertBefore(p, box); //將新節點p插到box插入在前面

box.parentNode.replaceChild(p,box); //將新節點p替換舊節點box

box.firstChild.cloneNode(true) //複製節點，true把標籤內文本也複製，false只複製標籤

box.parentNode.removeChild(box) //移除節點

28、DOM進階

Node類型：表示所有類型值的統一界面，IE 不支持

Node的常量

常量名說明 nodeType 值

ELEMENT_NODE 元素 1

ATTRIBUTE_NODE 屬性 2

TEXT_NODE 文本 3

CDATA_SECTION_NODE CDATA 4

ENTITY_REFERENCE_NODE 實體參考 5

ENTITY_NODE 實體 6

PROCESSING_INSTRUCETION_NODE 處理指令 7

COMMENT_NODE 注釋 8

DOCUMENT_NODE 文檔根 9

DOCUMENT_TYPE_NODE doctype 10

DOCUMENT_FRAGMENT_NODE 文檔片段 11

NOTATION_NODE 符號 12

例如： alert(Node.ELEMENT_NODE); //1，元素節點類型值

alert(Node.TEXT_NODE); //2，文本節點類型值

document類型；

document; //document

document.nodeType; //9，類型值

document.childNodes[0]; //DocumentType，第一個子節點對象

document.childNodes[0].nodeType; //非 IE 為 10，IE 為 8

document.childNodes[1]; //HTMLHtmlElement

document.childNodes[1].nodeName; //HTML

document.documentElement; //HTMLHtmlElement，獲取

document.body; //HTMLBodyElement，獲取

document.doctype; //DocumentType，獲取

document.childNodes[0].nodeName //IE 會是#Comment

//屬性