JavaScript 基礎(chǔ)重點歸納

目錄

JavaScript重點歸納................................................................3

第一章JavaScript的基本語法.......................................................3

1、為什么要學(xué)習(xí)JS.......................................................................................................................3

2、什么是JavaScript......................................................................................................................3

3、在網(wǎng)頁中引用JavaScript的方式.............................................3

4、JavaScript核心語法.........................................................3

5、數(shù)據(jù)類型.................................................................4

6、常用的輸入/輸出...........................................................4

7、語法約定.................................................................4

8、Firebug.匚具，火狐插件調(diào)試工具............................................4

第2章函數(shù)和window對象.......................................................4

1、常用的系統(tǒng)函數(shù)...........................................................4

2、自定義函數(shù)...............................................................5

3、匿名函數(shù).................................................................5

4、轉(zhuǎn)義符...................................................................5

5、變量的作用域.............................................................5

6、window對象..............................................................6

7、Date對象.................................................................6

第3章BOM編程................................................................7

1、history對象...............................................................7

2、location對象..............................................................7

3、document對象............................................................7

4、元素的顯示和隱藏.........................................................7

第4章DOM高級編程............................................................8

1、DOM的組成..............................................................8

2、CoreDOM的標(biāo)準(zhǔn)節(jié)點操作.................................................8

3、HTMLDOM的特有對象和操作............................................9

第5章JavaScript和CSS的交互....................................................10

1、JavaScript訪問樣式的常用方法.............................................10

2、獲取樣式屬性值..........................................................10

3、獲取滾動條滾動的距離....................................................11

第6章表單基本驗證技術(shù).......................................................11

1、基本數(shù)據(jù)類型String和對象String的區(qū)別...................................11

2、String對象的方法.........................................................12

3、表單提交的方法..........................................................12

4、文本框控件..............................................................12

5、制作文本輸入提示特效....................................................13

第7章正則表達式和表單輔助特效...............................................13

1、正則表達式..............................................................13

2、定義正則表達式：........................................................13

3、表達式的模式............................................................13

1

4、RegExp（正則表達式）對象的常用方法........................................14

5、使用下拉列表框?qū)崿F(xiàn)級聯(lián)效果.............................................15

6、Array數(shù)組對象...........................................................15

擴展............................................................................17

1、對象類型和基本類型......................................................17

2^Math對象..............................................................17

3、number對象.............................................................17

2

JavaScript重點歸納

第一章JavaScript的基本語法

I、為什么要學(xué)習(xí)JS

①客戶端表單驗證

②頁面動態(tài)效果

③動態(tài)改變頁面內(nèi)容

2、什么是JavaScript

JavaScript是??種描述語言，也是一種基于對象和事件驅(qū)動的、并具有安全性能的腳本

語言。

JavaScript的組成

JavaScript

ECMAScriptBOMDOM

核心語法瀏覽器對象模型文檔對象模型

3、在網(wǎng)頁中引用JavaScript的方式

①使用〈script〉標(biāo)簽

<scripttype=z,text/javascript,z>ft§</script>

②使用外部JavaScript文件

<scripttype=z/text/javascriptz/src=,zjs文件路徑〃></script>

③直接在HTML標(biāo)簽中

<inputname=zzbtn/ztype=,zbuttonwvalue=z,彈出消息框

onclick=,zjavascript:alert（'歡迎你，）;"/>

4、JavaScript核心語法

聲明變量

var變量名;

3

注意：JavaScript區(qū)分大小寫，var可不要，但一般先聲明，再賦值使用

5、數(shù)據(jù)類型

JavaScript是一種弱類型語言，在聲明變量時不需要聲明變量的數(shù)據(jù)類型，面是由賦給

變量的值決定，但有時也需要檢測變量的具體數(shù)據(jù)類型（通過typeof）。

數(shù)據(jù)類型typeof（）的返回結(jié)果示例

undefined（未定義類型）undefinedvarwidth;

mill（空類型）objecttypeof(null)

number（數(shù)值類型）numbervarheight=20;

string（字符串類型）stringvar-

boolean（布爾類型）booleanvarisOk=true;

alert（null==undefined）;返回true

undefined、null兩個值是相等的，但含義不同，undefined是聲明了變量但未對該變

量賦值，null表示對該變量賦了一個空值。

6、常用的輸入/輸出

警告：alert（''提示信息〃）；

提示輸入框:prompt（''提示信息〃，〃輸入框的默認信息〃）;

7、語法約定

?區(qū)分大小寫，JavaScript的關(guān)鍵字一般都是小寫，內(nèi)置對象是以大寫字母開頭的

（Date、Math）,Dom對象的名稱通常是小寫字母開頭，遵循駱駝命名法。

?變量、對象和函數(shù)的名稱：可以包括大寫字母、小寫字母、數(shù)字、下劃線和$符號，但

不能以數(shù)字開頭。

令分號結(jié)尾:推薦使用；號作業(yè)一行代碼的結(jié)尾。

8、Firebug工具,火狐插件調(diào)試工具。

第2章函數(shù)和window對象

1、常用的系統(tǒng)函數(shù)

parselnt（''字符串〃）：將一個有效的數(shù)字字符串轉(zhuǎn)換成整型數(shù)字

parseFloaL、'字符串〃）:將一個有效的數(shù)字字符串轉(zhuǎn)換成浮點型數(shù)字

4

isNaN():isnotanumber檢查參數(shù)是否是非數(shù)字

參數(shù)parselnt()parseFloa-tioNaN()

''78.57〃7878.57false

、'78.88color〃7878.88二rue

、'this98.6〃NaNNaN二rue

''56.45.56〃5656.45true

87+'.5*8787.5false

2、自定義函數(shù)

function函數(shù)名([參數(shù)1,參數(shù)2,參數(shù)3,?..]){

JavaScript語句；

[return返回值；]

}

調(diào)用函數(shù)：

事件名=〃函數(shù)名()〃

注意事項：

實參比形參少的情況，默認賦值undefined;實參比形參多時，自動舍棄。

所有函數(shù)都有返回值，沒寫return的情況下返回undefined。

在HTML中只有事件才可以直接調(diào)用js中的函數(shù)，事件一般以on開頭，其它屬性要調(diào)用

則要加前緩javascript:如href="javascript:函數(shù)名()；〃

3、匿名函數(shù)

[var變量名|事件名卜function(){.??}

匿名函數(shù)只能定義在前，使用在后

4、轉(zhuǎn)義符

\n換行、\t\r換行、\，\"\\

轉(zhuǎn)義符只能在alert()中使用，在document.write()不能使用。

5、變量的作用域

5

局部變量和全局變量和java中類似。

在函數(shù)內(nèi)部如果沒有用var來聲明變量那么這個變量變是一個全局變量。

6、window對象

名稱說明

prompt顯示可提示用戶輸入的圣誕框

alert顯示一個帶有提示信息和一個“確定”按鈕的警示

框

confirm顯示一個帶有提示信息和一個“確定”和“取消”

按鈕的警示框

close關(guān)閉瀏覽器窗口

open打開一個新的瀏覽器窗口，可以設(shè)置諸多屬性

setTimeou七(函數(shù)，間隔亳秒數(shù))在指定亳秒數(shù)后調(diào)用函數(shù)或計算表達式(調(diào)用一

次)，clearTimeout(名稱)可以清除定時器

setinterval(函數(shù)，間隔毫秒按照指定的周期來調(diào)用函數(shù)或表達式(調(diào)用多次)

數(shù))clearinterval()清除定時器

常用事件

名稱說明

onload一個頁面或一幅圖像完成加載

onmouseover鼠標(biāo)移動到某元素上

onclick鼠標(biāo)單擊某個對象

onkeydown某個鍵盤按鍵被按下

onchange域的內(nèi)容被改變

7、Date對象

用于操作日期和時間

var日期實例=newDate(［參數(shù)］);

方法：getXxx()獲取時間和日期值，如getDate()獲取一月中的每一天

getHours(),getminutes(),getMonth(),getFullYear(),getDay()獲取星期中

的某一天。getMonth()返回0~11之間的值，實際月份=9$114011111，：)+1

setXxx()設(shè)置時間和日期值

Date對象直接得到年-月?日時一分一秒格式的方法

vard=newDate();

vars=d.toLocaleString();

6

第3章BOM編程

1、history對象

提供用戶最近瀏覽過的URL列表

對象的方法：back()返回、forward。前進、go(n)前進或后退n個頁面。

2、location對象

方法：reload。重新加載當(dāng)前文檔、replace()用新的文檔替換當(dāng)前文檔

3、document又寸象

名稱ge七ElementBy1d()說明

getElementByName()返回對擁有指定id的第一個對象的引用

getElementByTagName()返回帶有指定名稱的對象的集合(數(shù)組)

write()返回帶有指定標(biāo)簽名的對象的集合(數(shù)組)

向文檔寫文本，HTML表達式或JavaScript代碼

對象數(shù)組.length可以裝雙數(shù)組的長度一

對象名.getElementByTagName()：返回該對象的子節(jié)點中指定名稱的對象的集合

document對象經(jīng)常應(yīng)用于實現(xiàn)網(wǎng)頁元素的顯示和隱版效果。

4、兀素的顯示和隱藏

object.style.visibility=''值"visible為可見，hidden不可見

object.style.display=''值"none不顯示，block顯示為塊級元素

兩者區(qū)別：使用visibility屬性設(shè)置元素不可見，此元素會占據(jù)頁面上的空間。使用

display屬性設(shè)置元素不顯示，此元素不會占據(jù)頁面空間。

7

第4章DOM高級編程

1、DOM的組成

CoreDOM：也稱核心DOM編程，定義了一套標(biāo)準(zhǔn)的針對任何結(jié)構(gòu)化文檔的對象，包括HTML,

XHTML,XMLo

XMLDOM:定義了一套標(biāo)準(zhǔn)的針對XML文檔的對象。

HTMLDOM:定義了一套標(biāo)準(zhǔn)的針對HTML文檔的對象。

2、CoreDOM的標(biāo)準(zhǔn)節(jié)點操作

1）訪問和修改節(jié)點屬性

object.getAttribute（"屬性名”）:獲取對象的屬性值。

object.setAttribute（"屬性名"，"屬性值"）：設(shè)置對象屬性值

經(jīng)驗：使用getAttribute（）方法以讀取屬性值時，如果屬性不存在，返回null

2）根據(jù)層次關(guān)系查找節(jié)點（適合于在文檔局部短距離查找元素）

object.屬性

令childNodes（index）：按下標(biāo)訪問指定子節(jié)點

令childNodes：子節(jié)點集合（數(shù)組）

令firstChild：第一個子節(jié)點

?nextSbling：卜一個子節(jié)點

令lastchild：最后一個子節(jié)點

?parentNode：父節(jié)點

注意事項：對表格進行查找時，表格默認會有<tbody>、<thead>fn<tfoot>,查找時要考慮它

們的存在。

3）訪問文檔的根節(jié)點的方法：

令document.documentElement//工E和火狐

?document.body//谷歌

4）創(chuàng)建和增加節(jié)點

名稱描述

document.createElement(//tagNamez,)按照給定的標(biāo)簽名稱創(chuàng)建一個新的元素節(jié)點

父節(jié)點.appendChild(nodeName)向已存在節(jié)點列表的末尾添加新的子節(jié)點

父節(jié)點.insertBefore(newNode[,oldNode])向指定的節(jié)點之前插入一個新的子節(jié)點

要克隆的對象.cloneNode(true|fake)復(fù)制某個指定的節(jié)點

cloneNode（）的參數(shù)值為true表示復(fù)制指定的節(jié)點及它的所有子節(jié)點，為false只復(fù)制該節(jié)點

和屬性。

8

5）刪除和替換節(jié)點

名稱描述

父節(jié)點.removeChild(node)刪除指定的節(jié)點

父節(jié)點.replaceChild(newNode,oldNode)用其他的節(jié)點替換指定的節(jié)點

3、HTMLDOM的特有對象和操作

訪問HTMLDOM對象的屬性：對象名.屬性名

表格對象屬性和方法

Table對象

類別名稱描述

屬性rows[]返回包含表格中所有行的一個數(shù)組

insertRow(index)在表格中的index所在行之前插入一個新行

方法

deleteRow(index)從表格中刪除一行

TableRow對象

類別名稱描述

cells[]返回包含行中所有單元格的一個數(shù)組

rowindex獲取對象在表格的rows集合中的位置。

屬性

sectionRowIndex獲取對象位于tBody,tHead,tFoot或rows集合中的

位置.

insertCell()在一行中的指定位置插入一個空的＜td＞標(biāo)簽

方法

deleteCell()刪除行中指定的單元格

TableCell對象

類別名稱描述

celllndex返回單元格在某行單元格集合中的位置

innerHTML設(shè)置或返回單元格的開始標(biāo)簽和結(jié)束標(biāo)簽之間的HTML

屬性innerText設(shè)置或返回單元格的開始標(biāo)簽和結(jié)束標(biāo)簽之間的文本內(nèi)容

align設(shè)置或返回單元水平排列方式

className設(shè)置或返回元素的class屬性

注意：數(shù)組下標(biāo)和行、單元格的位置都是從0開始,

9

第5章JavaScript和CSS的交互

1、JavaScript訪問樣式的常用方法

1）style屬性（對象）

HTML元素.style.樣式屬性="值”；

注意事項：在JS中的CSS樣式一在HTML中使用不同，由多個單詞組成的樣式屬性要去到

中間的〃-〃號，第一個單詞首字小寫，其余首字母大寫，如backgroundcolor。

var變量=HTML元素.style.樣式屬性；

該方式只能獲取內(nèi)聯(lián)樣式的屬性值，無法獲取內(nèi)部樣式表或外部樣式表中的屬性值。

2）元素的常用事件

名稱描述

onclick當(dāng)用戶單擊某個對象時調(diào)用事件

onmouseover鼠標(biāo)移到某元素上

onmouseout鼠標(biāo)從某元素移開

onmousedown鼠標(biāo)按鈕被按下

3）this關(guān)鍵字：通常指向正在執(zhí)行的函數(shù)本身或指向函數(shù)所屬的對象或事件所屬的對象。

如：鼠標(biāo)移到對象上時改變對象的背景圖片

cbjAct.onmoi]c；AovAr=fi]nc!tioin（）{

this,style.backgroundlmage=,/url（images/bg2.jpg）”;

}

4）className屬性

HTML元素.className=/zCSS類選擇器樣式名稱〃

2、獲取樣式屬性值

1）style對象中的Positioning（偏移）屬性

top、left、right,bottom分別設(shè)置元素的頂、左、右、底邊緣距離父元素頂、左、右、底邊

緣的距離，單位pxozlndex設(shè)置元素的堆疊次序。

2）獲取內(nèi)部樣式表或外部樣式表中的屬性值的方法：

IE：object.currentstyle.樣式屬性；（只讀）

火狐/谷歌：document.defaultview.getComputedStyle（元素，null）.屬性；

10

3、獲取滾動條滾動的距離

scrollTop和scrollLeft屬性

名稱描述

scrollTop設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離，

即對象在垂直方向上滾動的距離，單位px

scrollLeft設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離

即對象在水平方向上滾動的距離，單位px

clientwidth指對象的可見寬度，即在樣式中設(shè)置的width值，不帶px

clientHeight指對象的可見高度，即在樣式中設(shè)置的height值，不帶px

得到瀏覽器滾動條的垂直滾動距原的方法：

document.ducumentElement.scrollTop;//IE和火狐

document.body.scrollTop://谷歌

設(shè)置div內(nèi)容超過其大小時產(chǎn)生滾動條overflow:scroll;

頁面事件

名稱描述

onscroll用于捕捉頁面垂直和水平的滾動，水平和垂直滾動距離動態(tài)變化

onload一個頁面或一幅圖片完成加載(上傳)

第6章表單基本驗證技術(shù)

1、基本數(shù)據(jù)類型String和對象String的區(qū)別

對象類型String

varstrl=newString(''I^aprogrammer");

varlenl=strl.length;

len可以得到字符串的長度

基本類型String

varstr2=''Izmaprogrammer”;

varlen2=str2.length;

len也可以得到字符串的長度

解釋：當(dāng)我們聲明了一個基本類型的字符串，要把它當(dāng)作對象類型來使用時，如訪問其屬性或方

法，JavaScript知道這些操作只適用于對象類型，會將字符串的字面值臨時轉(zhuǎn)換為對象類

型，以適用當(dāng)前的操作，此操作對于number和boolean類型同樣適用。

11

2、String對象的方法

方法名作用

Strl.charAt(index)選取字符串中某一位置的單個字符

Strl.charCodeAt(index)返回該位置字符對應(yīng)的Unicode編碼

Unicode編碼表a-z:97-122A-Z:65~900-9:48-57

String.fromCharCode()將編碼轉(zhuǎn)成字符（可用于生成英文字母）

Strl.indexOf(str2)查找str2在strl中第一出現(xiàn)的位置

Strl.lastlndexOf(str2)查找str2在strl中最后一次出現(xiàn)的位置

Strl.substr(starpos,[length])截取字符串

Strl.substring(starpos,[endpos])截取字符串，含開始不含結(jié)束

Strl.toLowerCase()轉(zhuǎn)小寫字母

Strl.toUpperCase()轉(zhuǎn)大寫字母

3、表單提交的方法

onsubmit=,zreturn表單驗證的函數(shù)”

onsubmit方法根據(jù)函數(shù)返回值來決定是否提交表單，當(dāng)返回值是false時表單不提交,

當(dāng)返回值為true時提交表單。

4、文本框控件

文本框?qū)ο蟪Ｓ玫姆椒ê蛯傩?/p>

類別名稱描述

onblur失去焦點，當(dāng)光標(biāo)離開文本框時觸發(fā)

事件onfocus獲得焦點，當(dāng)光標(biāo)進行入文本框時觸發(fā)

onkeypress某個鍵盤按鍵被按下并松開

blur()從文本域中移開焦點

方法focus()文本框獲得焦點

select()選取文本框中的內(nèi)容，并突出顯示，常用于提示用戶輸入

id設(shè)置或返回文本框的id

屬性

value設(shè)置或返回文本框的value屬性的值

12

5、制作文本輸入提示特效

鼠標(biāo)離開文本框時，驗證輸入是否合法，

<inputid=z,emailz,type=,,textz,class=,/inputsz/onblur=,/checkEmal()"/>

<divclass=,,red,zid=,,DivEmail,,x/div>

通過object.innerHTMl改變div中的提示內(nèi)容和樣式。

設(shè)置div的樣式display=inline;將塊級標(biāo)簽和等級標(biāo)簽置于同一行。

獲得指定工D的對象的封裝函數(shù)：

function$(elementld){

returndocument.getElementById(elementld);

第7章正則表達式和表單輔助特效

1、正則表達式

正則表達式是一個描述字符模式的對象，它由一些特殊的符號組成的，其組成的字符模式用來

匹配各種表達式。

2、定義正則表達式：

1)普通方式

varreg=/表達式/附力口參數(shù)

表達式：一個字符串代表了某種規(guī)則

附加參數(shù)：用來擴展表達式的含義，可以任意組合，代表復(fù)合含義

?g:代表可以進行全局匹配global

?i:代表不區(qū)分大小寫匹配ignorecase

?m:代表可以進行多選匹配multiline

2)構(gòu)造函數(shù)

varreg=newRegExp("表達式“，〃附力口參數(shù)”)；

經(jīng)驗：普通方式中的表達式必須是一個常量字符串，而構(gòu)造函數(shù)中的表達式可以是常量字符串，

也可以是一個JavaScript變量c

3、表達式的模式

復(fù)合模式：指含有通配符來表達的模式

varreg=/人通配符$/

13

正則表達式的常用通配符

符號描述

/.../代表一個模式的開始和結(jié)束

A匹配字符串的開始

$匹配字符串的結(jié)束

\s任何空白字符"space

\s任何非空白字符

\d匹配一個數(shù)字字符，等價于[0-9]//digit

\D除了數(shù)字之外的任何字符，等價于10-9]//whatever

\w匹配一個數(shù)字、下劃線或字母字符，等價于[A-Za-zU-9」

\w任何非單字字符，等價于「A-Za-zO-9」

?除了換行符之外的任意字符

正則表達式的重復(fù)字符

符號描述

{n}匹配前一項n次

{n,}匹配前一項n次，或者多次

{n,m}匹配前一項至少n次，最多m次匹

★配前一項0次或多次，等價于{0,}

+匹配前一項1次或多次，等價于{1,}

匹配前一項0次或1次，也就是說前一項是可靠的，等價于{0,1}

經(jīng)驗：使用反斜杠〃\”來進行字符轉(zhuǎn)義，將上表中元字符作為普通字符來進行匹配。如\$匹配

美元符號，\*、\.、\+分別區(qū)別星號、點號、加號。

匹配Email符號:/A\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

解讀：

令必須包含@符號和.符號，且.在@之前。

令?符號前的字符可以包含任意數(shù)量的\w-+.但第一個最后一個不能是-+.

令?符號與.符號之間的字符可以包含任意數(shù)量的但第一個最后一個不能是

令.符號之后的字符可以包含任意數(shù)量的\w-,但第一個最后一個不能是-.

令-+.符號不能相鄰

正則表達式中I或者關(guān)系運算符的用法：

I與I之間是獨立部分，用〃(''和〃)〃指向開始和結(jié)束

4、RegExp(正則表達式)對象的常用方法

檢測一個字符串是否匹配某個正貝！表達式：

正則表達式對象實例.test(字符串);//返回true或false

14

檢索字符中正則表達式的匹配，返回找到的值，并確定其位置

正則表達式對象實例.exec（字符串）；

String對象的方法

符號描述

match（字符串|reg對象）找到一個或多個正則表達式的匹配

search檢索與正則表達式相匹配的值

replace（reg對象|字符串，〃新的字符串〃）替換與正則表達式匹配的字符串

split(分割符,n)把字符串分割為字符串?dāng)?shù)組

5、使用下拉列表框?qū)崿F(xiàn)級聯(lián)效果

select對象的常用事件、方法、屬性

類別名稱描述

事件onchange當(dāng)改變選項時調(diào)用的事件

方法add(new,old)向下拉列表框中添加一個選項,。Id為空，加在最后

屬性options[]返回包含下拉列表框中的所有選項的?個數(shù)組

selected工ndex設(shè)置或返回下拉列表框中的被選項目的索引號

length返回下拉列表框中的選項的數(shù)目

設(shè)置options.length=0可以清除select對象的所有選項

Option對象的常用屬性

屬性描述

text設(shè)置或返回某個選項的純文本值，即〈option〉標(biāo)簽開始和結(jié)束之間的值

value設(shè)置或返回被送往服務(wù)器的值

為selectObj創(chuàng)建一個新的option選項：

varnewOption=newOption(text,value);

selectObj.add(newOption,rull);

6、Array數(shù)組對象

1)創(chuàng)建數(shù)組：

var數(shù)組名稱=newArray(數(shù)組長度)；

2)為數(shù)組元素賦值：

varfruit=newArray("apple","orange","peach","bananer");

或

varfruit=newArray(4);

fruitfO]=''apple”;

15

fruit[1]=''orange”;

f