變量命名、聲明、賦值
1.必須以字母、下劃線或美元符號(hào)開(kāi)頭，后面可以跟字母、下劃線、美元符號(hào)和數(shù)字。
2.變量名區(qū)分大小寫(xiě)，如:A與a是兩個(gè)不同變量。
3.不允許使用JavaScript關(guān)鍵字和保留字做變量名。
聲明變量語(yǔ)法: var 變量名;
Var還可以一次聲明多個(gè)變量，變量之間用","逗號(hào)隔開(kāi)。注意:變量也可以不聲明，直接使用，但為了規(guī)范，需要先聲明，后使用。
我們使用"="號(hào)給變量存儲(chǔ)內(nèi)容，可以把任何東西存儲(chǔ)在變量里，如數(shù)值、字符串、布爾值等，例如：
var num1 = 123; // 123是數(shù)值
var num2 = "一二三"; //"一二三"是字符串
var num3=true; //布爾值true（真），false(假)
表達(dá)式：
表達(dá)式是指具有一定的值、用操作符把常數(shù)和變量連接起來(lái)的代數(shù)式。一個(gè)表達(dá)式可以包含常數(shù)或變量。
操作符
算術(shù)操作符(+、-、*、/等)，比較操作符(<、>、>=、<=等)，邏輯操作符(&&、||、！)。算術(shù)運(yùn)算符主要用來(lái)完成類似加減乘除的工作，在JavaScript中，“+”不只代表加法，還可以連接兩個(gè)字符串
自加一，自減一 ( ++和- -)
比較操作符，看看下面例子:
var a = 5;//定義a變量，賦值為5
var b = 9; //定義b變量，賦值為9
document.write (a<b); //a小于b的值嗎? 結(jié)果是真(true)
document.write (a>=b); //a大于或等于b的值嗎? 結(jié)果是假(false)
document.write (a!=b); //a不等于b的值嗎? 結(jié)果是真(true)
document.write (a==b); //a等于b的值嗎? 結(jié)果是假(false)
與或非操作符：“&&” “||” “！”
操作符之間的優(yōu)先級(jí)（高到低）:
算術(shù)操作符 → 比較操作符 → 邏輯操作符 → "="賦值符號(hào)
數(shù)組
創(chuàng)建數(shù)組語(yǔ)法：
var myarray=new Array();
我們創(chuàng)建數(shù)組的同時(shí)，還可以為數(shù)組指定長(zhǎng)度，長(zhǎng)度可任意指定。
var myarray= new Array(8); //創(chuàng)建數(shù)組，存儲(chǔ)8個(gè)數(shù)據(jù)。
注意：
1.創(chuàng)建的新數(shù)組是空數(shù)組，沒(méi)有值，如輸出，則顯示undefined。
2.雖然創(chuàng)建數(shù)組時(shí)，指定了長(zhǎng)度，但實(shí)際上數(shù)組都是變長(zhǎng)的，也就是說(shuō)即使指定了長(zhǎng)度為8，仍然可以將元素存儲(chǔ)在規(guī)定長(zhǎng)度以外。
賦值：
第一步：創(chuàng)建數(shù)組var myarr=new Array();
第二步：給數(shù)組賦值
myarr[1]=" 張三";
myarr[2]=" 李四";
注意：數(shù)組每個(gè)值有一個(gè)索引號(hào)，從0開(kāi)始。
其他方法：
一、var myarray = new Array(66,80,90,77,59);//創(chuàng)建數(shù)組同時(shí)賦值
二、var myarray = [66,80,90,77,59];//直接輸入一個(gè)數(shù)組（稱 “字面量數(shù)組”）
注意：數(shù)組存儲(chǔ)的數(shù)據(jù)可以是任何類型（數(shù)字、字符、布爾值等）
只需使用下一個(gè)未用的索引，任何時(shí)刻可以不斷向數(shù)組增加新元素。
myarray[5]=88; //使用一個(gè)新索引，為數(shù)組增加一個(gè)新元素
數(shù)組中的每個(gè)值有一個(gè)索引號(hào)，從0開(kāi)始,可按需取出：第一個(gè)人的成績(jī)表示方法：myarray[0]
數(shù)組屬性
語(yǔ)法：
myarray.length; //獲得數(shù)組myarray的長(zhǎng)度
var arr=[55,32,5,90,60,98,76,54];//包含8個(gè)數(shù)值的數(shù)組arr
document.write(arr.length); //顯示數(shù)組長(zhǎng)度8
JavaScript數(shù)組的length屬性是可變的，這一點(diǎn)需要特別注意。
arr.length=10; //增大數(shù)組的長(zhǎng)度
document.write(arr.length); //數(shù)組長(zhǎng)度已經(jīng)變?yōu)?0
數(shù)組隨元素的增加，長(zhǎng)度也會(huì)改變，如下:
var arr=[98,76,54,56,76]; // 包含5個(gè)數(shù)值的數(shù)組
document.write(arr.length); //顯示數(shù)組的長(zhǎng)度5
arr[15]=34; //增加元素，使用索引為15,賦值為34
alert(arr.length); //顯示數(shù)組的長(zhǎng)度16
二維數(shù)組
一維數(shù)組的表示: myarray[ ]
二維數(shù)組的表示: myarray[ ][ ]
1. 二維數(shù)組的定義方法一
var myarr=new Array(); //先聲明一維
for(var i=0;i<2;i++){ //一維長(zhǎng)度為2
myarr[i]=new Array(); //再聲明二維
for(var j=0;j<3;j++){ //二維長(zhǎng)度為3
myarr[i][j]=i+j; // 賦值，每個(gè)數(shù)組元素的值為i+j
}
}
-
二維數(shù)組的定義方法二
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
3. 賦值
myarr[0][1]=5; //將5的值傳入到數(shù)組中，覆蓋原有值。
說(shuō)明: myarr[0][1] ,0 表示表的行，1表示表的列。
流程控制語(yǔ)句
1、if語(yǔ)句：
var mypen = "black"; //定義變量mypen，存儲(chǔ)筆的黑色。
if(mypen == "black")
{
document.write("筆是黑色的，所以購(gòu)買(mǎi)");
}
2、if..else.. if..else if..else..
3、swtch:
var myweek =6;//myweek表示星期幾變量
switch(myweek)
{
case 1:
document.write("學(xué)習(xí)理念知識(shí)");
break;
case 3:
document.write("到企業(yè)實(shí)踐");
break;
default:
document.write("周六、日休息和娛樂(lè)");
}
4、for循環(huán)
5、while循環(huán)（和for循環(huán)有相同功能的還有while循環(huán), while循環(huán)重復(fù)執(zhí)行一段代碼，直到某個(gè)條件不再滿足。）
while(判斷條件)
{
循環(huán)語(yǔ)句
}
6、Do...while循環(huán)（do while結(jié)構(gòu)的基本原理和while結(jié)構(gòu)是基本相同的，但是它保證循環(huán)體至少被執(zhí)行一次。因?yàn)樗窍葓?zhí)行代碼，后判斷條件，如果條件為真，繼續(xù)循環(huán)。）
var mynum =6;//mynum初值化數(shù)值為6
do
{
document.write("數(shù)字:"+mynum+"<br/>");
mynum--;
}
while( mynum >=0 )
7、退出循環(huán)break
for(初始條件;判斷條件;循環(huán)后條件值更新)
{
if(特殊情況)
{break;}
循環(huán)代碼
}
8、繼續(xù)循環(huán)continue(continue的作用是僅僅跳過(guò)本次循環(huán)，而整個(gè)循環(huán)體繼續(xù)執(zhí)行。)
for(初始條件;判斷條件;循環(huán)后條件值更新)
{
if(特殊情況)
{ continue; }
循環(huán)代碼
}
函數(shù)
（函數(shù)的作用，可以寫(xiě)一次代碼，然后反復(fù)地重用這個(gè)代碼。）
function 函數(shù)名( )
{
函數(shù)體;
}
//function定義函數(shù)的關(guān)鍵字，“函數(shù)名”你為函數(shù)取的名字，“函數(shù)體”替換
為完成特定功能的代碼。再合適的地方調(diào)用即可 *函數(shù)名()*
函數(shù)調(diào)用
第一種情況:在<script>標(biāo)簽內(nèi)調(diào)用。
<script type="text/javascript">
function add2()
{
sum = 1 + 1;
alert(sum);
}
add2();//調(diào)用函數(shù)，直接寫(xiě)函數(shù)名。
</SCRIPT>
第二種情況:在HTML文件中調(diào)用，如通過(guò)點(diǎn)擊按鈕后調(diào)用定義好的函數(shù)。
html>
<head>
<script type="text/javascript">
function add2()
{
sum = 5 + 6;
alert(sum);
}
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()"> //按鈕,onclick點(diǎn)擊事件，直接寫(xiě)函數(shù)名
</form>
</body>
</html>
有參數(shù)的函數(shù)
//注意:參數(shù)可以多個(gè)，根據(jù)需要增減參數(shù)個(gè)數(shù)。參數(shù)之間用(逗號(hào)，）隔開(kāi)。
function 函數(shù)名(參數(shù)1,參數(shù)2)
{
函數(shù)代碼
}
按照這個(gè)格式，函數(shù)實(shí)現(xiàn)任意兩個(gè)數(shù)的和應(yīng)該寫(xiě)成：
function add2(x,y)
{
sum = x + y;
document.write(sum);
}//x和y則是函數(shù)的兩個(gè)參數(shù)，調(diào)用函數(shù)的時(shí)候，我們可通過(guò)這兩個(gè)參數(shù)
//把兩個(gè)實(shí)際的加數(shù)傳遞給函數(shù)了。
返回值的函數(shù)
我們只要把"document.write(sum)"這行改成如下代碼：
function add2(x,y)
{
sum = x + y;
return sum; //返回函數(shù)值,return后面的值叫做返回值。
}
還可以通過(guò)變量存儲(chǔ)調(diào)用函數(shù)的返回值，代碼如下:
result = add2(3,4);//語(yǔ)句執(zhí)行后,result變量中的值為7。
注意:函數(shù)中參數(shù)和返回值不只是數(shù)字，還可以是字符串等其它類型。
事件
JavaScript 創(chuàng)建動(dòng)態(tài)頁(yè)面。事件是可以被 JavaScript 偵測(cè)到的行為。 網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。
比如說(shuō)，當(dāng)用戶單擊按鈕或者提交表單數(shù)據(jù)時(shí)，就發(fā)生一個(gè)鼠標(biāo)單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個(gè)結(jié)果。
鼠標(biāo)單擊事件( onclick ）
<form>
<input name="button" type="button" value="點(diǎn)擊提交" onclick="add2()" />
</form>
注意: 在網(wǎng)頁(yè)中，如使用事件，就在該元素中設(shè)置事件屬性。
鼠標(biāo)經(jīng)過(guò)事件（onmouseover）
當(dāng)鼠標(biāo)移到一個(gè)對(duì)象上時(shí)，該對(duì)象就觸發(fā)onmouseover事件，并執(zhí)行onmouseover事件調(diào)用的程序。
<input name="password" type="password" onmouseover = "message()"/>
鼠標(biāo)移開(kāi)事件（onmouseout）
鼠標(biāo)移開(kāi)事件，當(dāng)鼠標(biāo)移開(kāi)當(dāng)前對(duì)象時(shí)，執(zhí)行onmouseout調(diào)用的程序。
<a onmouseout = "message()">點(diǎn)擊我 </a>
光標(biāo)聚焦事件（onfocus）
當(dāng)網(wǎng)頁(yè)中的對(duì)象獲得聚點(diǎn)時(shí)，執(zhí)行onfocus調(diào)用的程序就會(huì)被執(zhí)行。如將光標(biāo)移到文本框內(nèi)時(shí)，即焦點(diǎn)在文本框內(nèi)，觸發(fā)onfocus 事件，并調(diào)用函數(shù)message()。
<input name="password" type="password" onfocus = "message()"/>
失焦事件（onblur）
onblur事件與onfocus是相對(duì)事件，當(dāng)光標(biāo)離開(kāi)當(dāng)前獲得聚焦對(duì)象的時(shí)候，觸發(fā)onblur事件，同時(shí)執(zhí)行被調(diào)用的程序。如網(wǎng)頁(yè)中有用戶和密碼兩個(gè)文本框。當(dāng)前光標(biāo)在用戶文本框內(nèi)時(shí)（即焦點(diǎn)在文本框），在光標(biāo)離開(kāi)該文本框后（即失焦時(shí)），觸發(fā)onblur事件，并調(diào)用函數(shù)message()。
<input name="username" type="text" value="請(qǐng)輸入用戶名！" onblur = "message()" >
內(nèi)容選中事件（onselect）
選中事件，當(dāng)文本框或者文本域中的文字被選中時(shí)，觸發(fā)onselect事件，同時(shí)調(diào)用的程序就會(huì)被執(zhí)行。
<textarea name="summary" cols="60" rows="5" onselect = "message()">請(qǐng)寫(xiě)入個(gè)人簡(jiǎn)介，不少于200字！</textarea>
文本框內(nèi)容改變事件（onchange）
通過(guò)改變文本框的內(nèi)容來(lái)觸發(fā)onchange事件，同時(shí)執(zhí)行被調(diào)用的程序。
<textarea name="summary" cols="60" rows="5" onchange ="message()">請(qǐng)寫(xiě)入個(gè)人簡(jiǎn)介，不少于200字！</textarea>
加載事件（onload）
事件會(huì)在頁(yè)面加載完成后，立即發(fā)生，同時(shí)執(zhí)行被調(diào)用的程序。
注意：
- 加載頁(yè)面時(shí)，觸發(fā)onload事件，事件寫(xiě)在<body>標(biāo)簽內(nèi)。
- 此節(jié)的加載頁(yè)面，可理解為打開(kāi)一個(gè)新頁(yè)面時(shí)。
如下代碼,當(dāng)加載一個(gè)新頁(yè)面時(shí)，彈出對(duì)話框“加載中，請(qǐng)稍等…”。
<script type="text/javascript">
function message(){
alert("加載中，請(qǐng)稍等…"); }
</script>
</head>
<body onload = "message()">
歡迎學(xué)習(xí)JavaScript。
</body>
卸載事件（onunload）
卸載事件（onunload）
當(dāng)用戶退出頁(yè)面時(shí)（頁(yè)面關(guān)閉、頁(yè)面刷新等），觸發(fā)onUnload事件，同時(shí)執(zhí)行被調(diào)用的程序。注意：不同瀏覽器對(duì)onunload事件支持不同。
JS內(nèi)置對(duì)象
JavaScript 中的所有事物都是對(duì)象，如:字符串、數(shù)值、數(shù)組、函數(shù)等，每個(gè)對(duì)象帶有屬性和方法。
對(duì)象的屬性：反映該對(duì)象某些特定的性質(zhì)的，如：字符串的長(zhǎng)度、圖像的長(zhǎng)寬等；
對(duì)象的方法：能夠在對(duì)象上執(zhí)行的動(dòng)作。例如，表單的“提交”(Submit)，時(shí)間的“獲取”(getYear)等；
JavaScript 提供多個(gè)內(nèi)建對(duì)象，比如 String、Date、Array 等等，使用對(duì)象前先定義。
訪問(wèn)對(duì)象屬性的語(yǔ)法:
objectName.propertyName
訪問(wèn)對(duì)象的方法：
objectName.methodName()
如使用string 對(duì)象的 toUpperCase() 方法來(lái)將文本轉(zhuǎn)換為大寫(xiě)：
var mystr="Hello world!";//創(chuàng)建一個(gè)字符串
var request=mystr.toUpperCase(); //使用字符串對(duì)象方法
Date 日期對(duì)象
定義一個(gè)時(shí)間對(duì)象 :
var Udate=new Date();
注意:使用關(guān)鍵字new，Date()的首字母必須大寫(xiě)。
使 Udate 成為日期對(duì)象，并且已有初始值：當(dāng)前時(shí)間(當(dāng)前電腦系統(tǒng)時(shí)間)。
如果要自定義初始值，可以用以下方法：
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
我們最好使用下面介紹的“方法”來(lái)嚴(yán)格定義時(shí)間。
訪問(wèn)方法語(yǔ)法：“<日期對(duì)象>.<方法>”
Date對(duì)象中處理時(shí)間和日期的常用方法：
返回/設(shè)置年份方法
get/setFullYear() 返回/設(shè)置年份，用四位數(shù)表示。
mydate.getMonth()、mydate.getDay()、mydate.getHours()、mydate.getMinutes()、mydate.getSeconds()//依次為月到秒
var mydate=new Date();//當(dāng)前時(shí)間
document.write(mydate+"<br>");//輸出當(dāng)前時(shí)間
document.write(mydate.getFullYear()+"<br>");//輸出當(dāng)前年份
mydate.setFullYear(81); //設(shè)置年份
document.write(mydate+"<br>"); //輸出年份被設(shè)定為 0081年。
//結(jié)果：
Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800
注意:
1、結(jié)果格式依次為：星期、月、日、年、時(shí)、分、秒、時(shí)區(qū)。(火狐瀏覽器)
2、不同瀏覽器，時(shí)間格式有差異。
返回星期方法
getDay() 返回星期，返回的是0-6的數(shù)字，0 表示星期天。如果要返回相對(duì)應(yīng)“星期”，通過(guò)數(shù)組完成
var mydate=new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write("今天是：" + weekday[mydate.getDay()]);
返回/設(shè)置時(shí)間方法
get/setTime() 返回/設(shè)置時(shí)間，單位毫秒數(shù)，計(jì)算從 1970 年 1 月 1 日零時(shí)到日期對(duì)象所指的日期的毫秒數(shù)。
使用getTime()和setTime()方法，將時(shí)間推后2小時(shí):
var mydate=new Date();
document.write("當(dāng)前時(shí)間："+mydate+"<br>");
mydate.setTime( mydate.getTime() + 2* 60 * 60 * 1000);
document.write("推遲二小時(shí)時(shí)間：" + mydate);
String 字符串對(duì)象
定義字符串的方法就是直接賦值。比如：var mystr = "I love JavaScript!"
訪問(wèn)字符串對(duì)象的屬性length:
stringObject.length; 返回該字符串的長(zhǎng)度。
訪問(wèn)字符串對(duì)象的方法：如：小寫(xiě)轉(zhuǎn)大寫(xiě)
var mystr="Hello world!";
var mynum=mystr.toUpperCase();
以上代碼執(zhí)行后，mynum 的值是：HELLO WORLD!
返回指定位置的字符
charAt() 方法可返回指定位置的字符。返回的字符是長(zhǎng)度為 1 的字符串。
stringObject.charAt(index)
注意:如果參數(shù) index 不在 0 與 string.length-1 之間，該方法將返回一個(gè)空字符串。
返回指定的字符串首次出現(xiàn)的位置
indexOf() 方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置。
stringObject.indexOf(substring, startpos)
說(shuō)明：
1.該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 substring。
2.可選參數(shù)，從stringObject的startpos位置開(kāi)始查找substring，如果沒(méi)有此參數(shù)將從stringObject的開(kāi)始位置查找。
3.如果找到一個(gè) substring，則返回 substring 的第一次出現(xiàn)的位置。stringObject 中的字符位置是從 0 開(kāi)始的。
注意：
1.indexOf() 方法區(qū)分大小寫(xiě)。
2.如果要檢索的字符串值沒(méi)有出現(xiàn)，則該方法返回 -1。
如：使用indexOf()方法，檢索第二個(gè)字符ｏ出現(xiàn)的位置
var mystr="Hello World!"
document.write(mystr.indexOf("o",mystr.indexOf("o")+1));
//先取第一個(gè)索引，+1后可查詢第二個(gè)
字符串分割split()
split() 方法將字符串分割為字符串?dāng)?shù)組，并返回此數(shù)組。
stringObject.split(separator,limit)
注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個(gè)字符之間都會(huì)被分割。
var mystr = "www.imooc.com";
document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));
結(jié)果：
w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i
提取字符串substring()
substring() 方法用于提取字符串中介于兩個(gè)指定下標(biāo)之間的字符。
stringObject.substring(startPos,stopPos)
參數(shù)說(shuō)明:
注意：
- 返回的內(nèi)容是從 start開(kāi)始(包含start位置的字符)到 stop-1 處的所有字符，其長(zhǎng)度為 stop 減start。
- 如果參數(shù) start 與 stop 相等，那么該方法返回的就是一個(gè)空串（即長(zhǎng)度為 0 的字符串）。
- 如果 start 比 stop 大，那么該方法在提取子串之前會(huì)先交換這兩個(gè)參數(shù)。
如：
<script type="text/javascript">
var mystr="I love JavaScript";
document.write(mystr.substring(7));
document.write(mystr.substring(2,6));
</script>
運(yùn)行結(jié)果:
JavaScript
love
提取指定數(shù)目的字符substr()
substr() 方法從字符串中提取從 startPos位置開(kāi)始的指定數(shù)目的字符串。
stringObject.substr(startPos,length)
注意：
1、如果參數(shù)startPos是負(fù)數(shù)，從字符串的尾部開(kāi)始算起的位置。也就是說(shuō)，-1 指字符串中最后一個(gè)字符，-2 指倒數(shù)第二個(gè)字符，以此類推。
2、如果startPos為負(fù)數(shù)且絕對(duì)值大于字符串長(zhǎng)度，startPos為0。
代碼如下：
<script type="text/javascript">
var mystr="I love JavaScript!";
document.write(mystr.substr(7));
document.write(mystr.substr(2,4));
</script>
運(yùn)行結(jié)果：
JavaScript!
love
Math對(duì)象
Math對(duì)象，提供對(duì)數(shù)據(jù)的數(shù)學(xué)計(jì)算。
使用 Math 的屬性和方法，代碼如下：
<script type="text/javascript">
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
</script>
運(yùn)行結(jié)果:
3.141592653589793
15
注意：Math 對(duì)象是一個(gè)固有的對(duì)象，無(wú)需創(chuàng)建它，直接把 Math 作為對(duì)象使用就可以調(diào)用其所有屬性和方法。這是它與Date,String對(duì)象的區(qū)別。
Math 對(duì)象屬性:
Math 對(duì)象方法:
** 向上取整ceil()**
ceil() 方法可對(duì)一個(gè)數(shù)進(jìn)行向上取整。
語(yǔ)法:Math.ceil(x)
注意：它返回的是大于或等于x，并且與x最接近的整數(shù)。
如：document.write(Math.ceil(0.624)) 輸出1
向下取整floor()
floor() 方法可對(duì)一個(gè)數(shù)進(jìn)行向下取整。
語(yǔ)法:Math.floor(x)
如：alert(Math.floor(-5.214)) 運(yùn)行結(jié)果-6
四舍五入round()
round() 方法可把一個(gè)數(shù)字四舍五入為最接近的整數(shù)。
語(yǔ)法:Math.round(x)
如：alert(Math.round(-5.34)) 輸出-5
隨機(jī)數(shù) random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之間的一個(gè)隨機(jī)數(shù)。
語(yǔ)法：Math.random();
注意：返回一個(gè)大于或等于 0 但小于 1 的符號(hào)為正的數(shù)字值。
獲得0 ~ 10之間的隨機(jī)數(shù)，代碼如下:
<script type="text/javascript">
document.write((Math.random())*10);
</script>
運(yùn)行結(jié)果：
8.72153625893887
Array 數(shù)組對(duì)象
數(shù)組定義的方法：
- 定義了一個(gè)空數(shù)組:
var 數(shù)組名= new Array(); - 定義時(shí)指定有n個(gè)空元素的數(shù)組：
var 數(shù)組名 =new Array(n);
3.定義數(shù)組的時(shí)候，直接初始化數(shù)據(jù)：
var 數(shù)組名 = [<元素1>, <元素2>, <元素3>...];
數(shù)組屬性：
length 用法：<數(shù)組對(duì)象>.length；返回：數(shù)組的長(zhǎng)度，即數(shù)組里有多少個(gè)元素。它等于數(shù)組里最后一個(gè)元素的下標(biāo)加一。
數(shù)組方法：
數(shù)組連接concat()
concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。此方法返回一個(gè)新數(shù)組，不改變?cè)瓉?lái)的數(shù)組。
語(yǔ)法arrayObject.concat(array1,array2,...,arrayN)
注意: 該方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本。
如：
<script type="text/javascript">
var mya = new Array(3);
mya[0] = "1";
mya[1] = "2";
mya[2] = "3";
document.write(mya.concat(4,5)+"<br>");
document.write(mya);
</script>
運(yùn)行結(jié)果：
1,2,3,4,5
1,2,3
** 指定分隔符連接數(shù)組元素join()**
join()方法用于把數(shù)組中的所有元素放入一個(gè)字符串。元素是通過(guò)指定的分隔符進(jìn)行分隔的。
語(yǔ)法：arrayObject.join(分隔符)
注意：返回一個(gè)字符串，該字符串把數(shù)組中的各個(gè)元素串起來(lái)，用<分隔符>置于元素與元素之間。這個(gè)方法不影響數(shù)組原本的內(nèi)容。 我們使用join（）方法，將數(shù)組的所有元素放入一個(gè)字符串中，代碼如下：
<script type="text/javascript">
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join());
document.write(myarr.join("="));
</script>
運(yùn)行結(jié)果：
I,love,JavaScript
I=love=JavaScript
顛倒數(shù)組元素順序reverse()
reverse() 方法用于顛倒數(shù)組中元素的順序。
語(yǔ)法：arrayObject.reverse()
注意：該方法會(huì)改變?cè)瓉?lái)的數(shù)組，而不會(huì)創(chuàng)建新的數(shù)組。
使用reverse()方法,將數(shù)組myarr1順序顛倒:
var myarr1= ["我","愛(ài)","你"];
document.write(myarr1.reverse());
//輸出
你，愛(ài)，我
選定元素slice()
slice() 方法可從已有的數(shù)組中返回選定的元素。
語(yǔ)法arrayObject.slice(start,end)
1/返回一個(gè)新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
2/該方法并不會(huì)修改數(shù)組，而是返回一個(gè)子數(shù)組。
注意：
1／可使用負(fù)值從數(shù)組的尾部選取元素。
2／如果 end 未被規(guī)定，那么 slice() 方法會(huì)選取從 start 到數(shù)組結(jié)尾的所有元素。
3／String.slice() 與 Array.slice() 相似。
<script type="text/javascript">
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "<br>");
document.write(myarr.slice(2,4) + "<br>");
document.write(myarr);
</script>
運(yùn)行結(jié)果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6
數(shù)組排序sort()
sort()方法使數(shù)組中的元素按照一定的順序排列。
語(yǔ)法:arrayObject.sort(方法函數(shù))
1.如果不指定<方法函數(shù)>，則按unicode碼順序排列。
2.如果指定<方法函數(shù)>，則按<方法函數(shù)>所指定的排序方法排序。
myArray.sort(sortMethod);
注意: 該函數(shù)要比較兩個(gè)值，然后返回一個(gè)用于說(shuō)明這兩個(gè)值的相對(duì)順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù) a 和 b，其返回值如下：
/若返回值<=-1，則表示 A 在排序后的序列中出現(xiàn)在 B 之前。
/若返回值>-1 && <1，則表示 A 和 B 具有相同的排序順序。
/若返回值>=1，則表示 A 在排序后的序列中出現(xiàn)在 B 之后。
使用sort()方法，進(jìn)行數(shù)組降序列排列
function sortNum(a,b) {
return b-a;
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr.sort(sortNum) );
//輸出
100,80,50,16,6,1
練習(xí)
輸出日期，并計(jì)算學(xué)生總分和平均分
//通過(guò)javascript的日期對(duì)象來(lái)得到當(dāng)前的日期，并輸出。
var dateNow = new Date();
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
document.write(dateNow.getFullYear()+"年"+dateNow.getMonth()+1+"月"+dateNow.getDate()+"日"+" "+weekday[dateNow.getDay()]+ "<br/>");
//成績(jī)是一長(zhǎng)竄的字符串不好處理，找規(guī)律后分割放到數(shù)組里更好操作哦
var scoreStr = "小明:87;小花:81;小紅:97;小天:76;小張:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76";
var arr = scoreStr.split(";");//把字符串通過(guò)";"拆分為數(shù)組
//從數(shù)組中將成績(jī)撮出來(lái)，然后求和取整，并輸出。
var num = 0 ;
for(var b = 0; b < arr.length;b++){
var str = arr[b];
var a = parseInt(str.substring(str.indexOf(":")+1));
//先通過(guò)indexOf取索引，再通過(guò)substring截取所需字符串
num = num + a;
}
document.write("總分為："+num+"<br/>"+"分");
document.write("班級(jí)平均分為："+Math.floor(num/arr.length));
輸出為：
DOM
DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。
下面代碼:
將HTML代碼分解為DOM節(jié)點(diǎn)層次圖:
HTML文檔可以說(shuō)由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有:
- 元素節(jié)點(diǎn)：上圖中
<html>、<body>、<p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。 - 文本節(jié)點(diǎn):向用戶展示的內(nèi)容，如
<li>...</li>中的JavaScript、DOM、CSS等文本。 - 屬性節(jié)點(diǎn):元素屬性，如
<a>標(biāo)簽的鏈接屬性。
節(jié)點(diǎn)屬性:
遍歷節(jié)點(diǎn)樹(shù):
以上圖ul為例，它的父級(jí)節(jié)點(diǎn)body,它的子節(jié)點(diǎn)3個(gè)li,它的兄弟結(jié)點(diǎn)h2、P。
注意:前兩個(gè)是document方法。
getElementsByName()方法
返回帶有指定名稱的節(jié)點(diǎn)對(duì)象的集合。
語(yǔ)法：
document.getElementsByName(name)
與getElementById() 方法不同的是，通過(guò)元素的 name 屬性查詢?cè)?，而不是通過(guò) id 屬性。
注意:
- 因?yàn)槲臋n中的 name 屬性可能不唯一，所有g(shù)etElementsByName() 方法返回的是元素的數(shù)組，而不是一個(gè)元素。
- 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)，從0開(kāi)始。
getElementsByTagName()方法
返回帶有指定標(biāo)簽名的節(jié)點(diǎn)對(duì)象的集合。返回元素的順序是它們?cè)谖臋n中的順序。
語(yǔ)法:
document.getElementsByTagName(Tagname)
說(shuō)明:
- Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。
- 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問(wèn)數(shù)組一樣的方法來(lái)訪問(wèn)，所以從0開(kāi)始。
<script type="text/javascript">
function getValue()
{
var myH = document.getElementById("myHead");
alert(myH.innerHTML)
}
function getElements()
{
var myS = document.getElementsByName("sex");
alert(myS.length);
}
function getTagElements()
{
var myI = document.getElementsByTagName("input");
alert(myI.length);
}
區(qū)別
- ID 是一個(gè)人的身份證號(hào)碼，是唯一的。所以通過(guò)getElementById獲取的是指定的一個(gè)人。
- Name 是他的名字，可以重復(fù)。所以通過(guò)getElementsByName獲取名字相同的人集合。
- TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
getAttribute()方法
通過(guò) 元素節(jié)點(diǎn) 的屬性名稱獲取屬性的值。
語(yǔ)法：
elementNode.getAttribute(name)
說(shuō)明:
- elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點(diǎn)。
- name：要想查詢的元素節(jié)點(diǎn)的屬性名字
看看下面的代碼，獲取h1標(biāo)簽的屬性值：
setAttribute()方法
setAttribute() 方法增加一個(gè)指定名稱和值的新屬性，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值。
語(yǔ)法：
elementNode.setAttribute(name,value)
說(shuō)明：
1.name: 要設(shè)置的屬性名。
2.value: 要設(shè)置的屬性值。
注意：
1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個(gè)新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過(guò) 元素節(jié)點(diǎn) 對(duì)象調(diào)用的函數(shù)。
節(jié)點(diǎn)屬性
在文檔對(duì)象模型 (DOM) 中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM 節(jié)點(diǎn)有三個(gè)重要的屬性 ：
一. nodeName : 節(jié)點(diǎn)的名稱（只讀）
- 元素節(jié)點(diǎn)的 nodeName 與標(biāo)簽名相同
- 屬性節(jié)點(diǎn)的 nodeName 是屬性的名稱
- 文本節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #text
- 文檔節(jié)點(diǎn)的 nodeName 永遠(yuǎn)是 #document
二. nodeValue ：節(jié)點(diǎn)的值
- 元素節(jié)點(diǎn)的 nodeValue 是 undefined 或 null
- 文本節(jié)點(diǎn)的 nodeValue 是文本自身
- 屬性節(jié)點(diǎn)的 nodeValue 是屬性的值
三. nodeType ：節(jié)點(diǎn)的類型（只讀）
元素類型 節(jié)點(diǎn)類型
元素 ====== 1
屬性 ====== 2
文本 ====== 3
注釋 ====== 8
文檔 ====== 9
訪問(wèn)子節(jié)點(diǎn)childNodes
訪問(wèn)選定元素節(jié)點(diǎn)下的所有子節(jié)點(diǎn)的列表，返回的值可以看作是一個(gè)數(shù)組，他具有l(wèi)ength屬性。
語(yǔ)法：
elementNode.childNodes
注意：
1、如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回不包含節(jié)點(diǎn)的 NodeList。
2、根據(jù)瀏覽器不同 IE上節(jié)點(diǎn)之間的空白符不算節(jié)點(diǎn)，其他瀏覽器算文本節(jié)點(diǎn)
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var tx = document.getElementsByTagName("div")[0].childNodes;
for (var i = 0;i<tx.length;i++)
{
document.write("第"+(i+1)+"個(gè)節(jié)點(diǎn)屬性是"+tx[i].nodeType+"<br/>");
}
訪問(wèn)子節(jié)點(diǎn)的第一和最后項(xiàng)
一、firstChild 屬性返回‘childNodes’數(shù)組的第一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回 NULL。
語(yǔ)法：
node.firstChild
說(shuō)明：與elementNode.childNodes[0]是同樣的效果。
二、 lastChild 屬性返回‘childNodes’數(shù)組的最后一個(gè)子節(jié)點(diǎn)。如果選定的節(jié)點(diǎn)沒(méi)有子節(jié)點(diǎn)，則該屬性返回 NULL。
語(yǔ)法：
node.lastChild
說(shuō)明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。
注意: 上一節(jié)中，我們知道Internet Explorer 會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)，而其它瀏覽器不會(huì)。我們可以通過(guò)檢測(cè)節(jié)點(diǎn)類型，過(guò)濾子節(jié)點(diǎn)。 (以后章節(jié)講解)
<div id="con"><p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5></div>
<script type="text/javascript">
var x=document.getElementById("con");
document.write(x.firstChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType+"<br/>");
document.write(x.lastChild.nodeName+" "+x.firstChild.nodeValue+" "+x.firstChild.nodeType);
訪問(wèn)父節(jié)點(diǎn)parentNode
獲取指定節(jié)點(diǎn)的父節(jié)點(diǎn)
語(yǔ)法：
elementNode.parentNode
注意:父節(jié)點(diǎn)只能有一個(gè)。
例子,獲取 P 節(jié)點(diǎn)的父節(jié)點(diǎn)，代碼如下:
<div id="text">
<p id="con"> parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)</p>
</div>
<script type="text/javascript">
var mynode= document.getElementById("con");
document.write(mynode.parentNode.nodeName);
</script>
運(yùn)行結(jié)果:
parentNode 獲取指點(diǎn)節(jié)點(diǎn)的父節(jié)點(diǎn)
DIV
訪問(wèn)祖節(jié)點(diǎn):
elementNode.parentNode.parentNode
訪問(wèn)兄弟節(jié)點(diǎn)
nextSibling 屬性可返回某個(gè)節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)（處于同一樹(shù)層級(jí)中）。
語(yǔ)法：
nodeObject.nextSibling
說(shuō)明：如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null。previousSibling 屬性可返回某個(gè)節(jié)點(diǎn)之前緊跟的節(jié)點(diǎn)（處于同一樹(shù)層級(jí)中）
語(yǔ)法：
nodeObject.previousSibling
說(shuō)明：如果無(wú)此節(jié)點(diǎn)，則該屬性返回 null。
注意: 兩個(gè)屬性獲取的是節(jié)點(diǎn)。Internet Explorer 會(huì)忽略節(jié)點(diǎn)間生成的空白文本節(jié)點(diǎn)（例如，換行符號(hào)），而其它瀏覽器不會(huì)忽略。
解決問(wèn)題方法:
判斷節(jié)點(diǎn)nodeType是否為1, 如是為元素節(jié)點(diǎn)，跳過(guò)。
運(yùn)行結(jié)果:
LI = javascript
nextsibling: LI = jquery
插入節(jié)點(diǎn)appendChild()
在指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn)。
語(yǔ)法:
appendChild(newnode)
參數(shù):
newnode：指定追加的節(jié)點(diǎn)。
<ul id="test">
<li>JavaScript</li>
<li>HTML</li>
</ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var newNode = document.createElement("li");
newNode.innerHTML = "PHP";
otest.appendChild(newNode);
</script>
運(yùn)行結(jié)果:
HTML
JavaScript
PHP
插入節(jié)點(diǎn)insertBefore()
insertBefore() 方法可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。
語(yǔ)法:
insertBefore(newnode,node);
參數(shù):
newnode: 要插入的新節(jié)點(diǎn)。
node: 指定此節(jié)點(diǎn)前插入節(jié)點(diǎn)。
<ul id="test"><li>JavaScript</li><li>HTML</li></ul>
<script type="text/javascript">
var otest = document.getElementById("test");
var onode = document.createElement("li");
onode.innerHTML = "PHP";
otest.insertBefore(onode,otest.childNodes[0]);
</script>
輸出：
PHP
JavaScript
HTML
刪除節(jié)點(diǎn)removeChild()
removeChild() 方法從子節(jié)點(diǎn)列表中刪除某個(gè)節(jié)點(diǎn)。如刪除成功，此方法可返回被刪除的節(jié)點(diǎn)，如失敗，則返回 NULL。
語(yǔ)法:
nodeObject.removeChild(node)
參數(shù):
node ：必需，指定需要?jiǎng)h除的節(jié)點(diǎn)。
運(yùn)行結(jié)果:
HTML
刪除節(jié)點(diǎn)的內(nèi)容: javascript
注意: 把刪除的子節(jié)點(diǎn)賦值給 x，這個(gè)子節(jié)點(diǎn)不在DOM樹(shù)中，但是還存在內(nèi)存中，可通過(guò) x 操作。
如果要完全刪除對(duì)象，給 x 賦 null 值，代碼如下:
替換元素節(jié)點(diǎn)replaceChild()
replaceChild 實(shí)現(xiàn) 子節(jié)點(diǎn)(對(duì)象) 的替換。返回被替換對(duì)象的引用。
語(yǔ)法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需，用于替換 oldnew 的對(duì)象。
oldnew : 必需，被 newnode 替換的對(duì)象。
效果: 將文檔中的 Java 改為 JavaScript。
注意:
- 當(dāng) oldnode 被替換時(shí)，所有與之相關(guān)的屬性內(nèi)容都將被移除。
- newnode 必須先被建立。
創(chuàng)建元素節(jié)點(diǎn)createElement
createElement()方法可創(chuàng)建元素節(jié)點(diǎn)。此方法可返回一個(gè) Element 對(duì)象。
語(yǔ)法：
document.createElement(tagName)
參數(shù):
tagName：字符串值，這個(gè)字符串用來(lái)指明創(chuàng)建元素的類型。
注意：
要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁(yè)面中。
在HTML文檔中創(chuàng)建一個(gè)鏈接，并設(shè)置相應(yīng)屬性:
var main = document.body;
//創(chuàng)建鏈接
function createa(url,text)
{
var a = document.createElement("a");
a.href=url;
a.innerHTML = text;
//a.style.color = "red";
main.appendChild(a);
}
// 調(diào)用函數(shù)創(chuàng)建鏈接
createa("http://www.imooc.com","慕課");
創(chuàng)建一個(gè)按鈕，代碼如下：
<script type="text/javascript">
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "創(chuàng)建一個(gè)按鈕";
body.appendChild(input);
</script>
創(chuàng)建文本節(jié)點(diǎn)createTextNode
createTextNode() 方法創(chuàng)建新的文本節(jié)點(diǎn)，返回新創(chuàng)建的 Text 節(jié)點(diǎn)。
語(yǔ)法：
document.createTextNode(data)
參數(shù)：
data : 字符串值，可規(guī)定此節(jié)點(diǎn)的文本。
.message{
width:200px;
height:100px;
background-color:#CCC;}
</style>
</head>
<body>
<script type="text/javascript">
var element=document.createElement("p");
element.className="message";
var newnode=document.createTextNode("I love Javascript!");
document.body.appendChild(element);
element.appendChild(newnode)
</script>
瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動(dòng)條）的方法:
一、對(duì)于IE9+、Chrome、Firefox、Opera 以及 Safari：
? window.innerHeight - 瀏覽器窗口的內(nèi)部高度
? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對(duì)于 Internet Explorer 8、7、6、5：
? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。
? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的<body>標(biāo)簽
? document.body.clientHeight
? document.body.clientWidth
在不同瀏覽器都實(shí)用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
網(wǎng)頁(yè)尺寸
scrollHeight和scrollWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度。
一、針對(duì)IE、Opera:
scrollHeight 是網(wǎng)頁(yè)內(nèi)容實(shí)際高度，可以小于 clientHeight。
二、針對(duì)NS、FF:
scrollHeight 是網(wǎng)頁(yè)內(nèi)容高度，不過(guò)最小值是 clientHeight。也就是說(shuō)網(wǎng)頁(yè)內(nèi)容實(shí)際高度小于 clientHeight 時(shí)，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth
|| document.body.scrollWidth;
var h=document.documentElement.scrollHeight
|| document.body.scrollHeight;
注意:區(qū)分大小寫(xiě)
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實(shí)際占用的高度和寬度。
offsetHeight和offsetWidth，獲取網(wǎng)頁(yè)內(nèi)容高度和寬度(包括滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動(dòng)條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
