JavaScript 進階篇的學習~

---恢復內容開始---

讓你認識JS

你知道嗎，Web前端開發師需要掌握什么技術?也許你已經了解HTML標記(也稱為結構)，知道了CSS樣式(也稱為表示)，會使用HTML+CSS創建一個漂亮的頁面，但這還不夠，它只是靜態頁面而已。我們還需使用JavaScript增加行為，為網頁添加動態效果。准備好，讓JavaScript帶你進入新境界吧!

JavaScript能做什么？

1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)

2.實現頁面與用戶之間的實時、動態交互(如:用戶注冊、登陸驗證等)

JS進階篇學習什么？

在JavaScript入門篇中，我們學習了如何插入JS、輸出內容及簡單的DOM操作，JavaScript進階篇讓您進一步的了解JS的變量、數組、函數、語法、對象、事件、DOM操作，制作簡單的網頁動態效果。

 

什么是變量

什么是變量? 從字面上看，變量是可變的量；從編程角度講，變量是用於存儲某種/某些數值的存儲器。我們可以把變量看做一個盒子,盒子用來存放物品,物品可以是衣服、玩具、水果...等。

給變量取個名字(變量命名)

我們為了區分盒子，可以用BOX1,BOX2等名稱代表不同盒子，BOX1就是盒子的名字（也就是變量的名字）。

我們趕快給變量取個好名字吧!變量名字可以任意取，只不過取名字要遵循一些規則:

1.必須以字母、下划線或美元符號開頭，后面可以跟字母、下划線、美元符號和數字。如下:

正確:           
    mysum            
    _mychar         
    $numa1          

錯誤:
  6num  //開頭不能用數字
  %sum //開頭不能用除(_ $)外特殊符號,如(%  + /等)
  sum+num //開頭中間不能使用除(_ $)外特殊符號，如(%  + /等)

2.變量名區分大小寫，如:A與a是兩個不同變量。

3.不允許使用JavaScript關鍵字和保留字做變量名。

 

3、確定你的存在(變量聲明)

我們要使用盒子裝東西,是不是先要找到盒子,那在編程中，這個過程叫聲明變量,找盒子的動作，如何表示：

聲明變量語法: var 變量名;    

var就相當於找盒子的動作，在JavaScript中是關鍵字（即保留字），這個關鍵字的作用是聲明變量，並為"變量"准備位置(即內存）。

var mynum ; //聲明一個變量mynum

當然，我們可以一次找一個盒子，也可以一次找多個盒子，所以Var還可以一次聲明多個變量，變量之間用","逗號隔開。

var num1,mun2 ; //聲明一個變量num1

注意:變量也可以不聲明，直接使用，但為了規范，需要先聲明，后使用。

 

4、多樣化的我(變量賦值）

我們可以把變量看做一個盒子,盒子用來存放物品,那如何在變量中存儲內容呢?

我們使用"="號給變量存儲內容,看下面的語句:

var mynum = 5 ; //聲明變量mynum並賦值。

這個語句怎么讀呢？ 給變量mynum賦值，值為5。我們也可以這樣寫:

var mynum; //聲明變量mynum
mynum = 5 ; //給變量mynum賦值

注:這里 "="號的作用是給變量賦值，不是等於號。

盒子可以裝衣服、玩具、水果...等。其實，變量是無所不能的容器，你可以把任何東西存儲在變量里，如數值、字符串、布爾值等，例如：

var num1 = 123;       // 123是數值
var num2 = "一二三";    //"一二三"是字符串
var num3=true;    //布爾值true（真），false(假)

其中，num1變量存儲的內容是數值；num2變量存儲的內容是字符串，字符串需要用一對引號""括起來，num3變量存儲的內容是布爾值(true、false)。

 

5、表達出你的想法(表達式)

表達式與數學中的定義相似，表達式是指具有一定的值、用操作符把常數和變量連接起來的代數式。一個表達式可以包含常數或變量。

我們先看看下面的JavaScript語句：

生活中“再見”表達方法很多，如:英語(goodbye）、網絡語（88）、肢體語（揮揮手）等。在JavaScript表達式無處不在，所以一定要知道可以表達哪些內容，看看下面幾種情況:

注意:串表達式中mychar是變量

 

注意:數值表達式中num是變量

 

注意:布爾表達式中num是變量

6、我還有其它用途( +號操作符）

操作符是用於在JavaScript中指定一定動作的符號。

（1）操作符

看下面這段JavaScript代碼。

sum = numa + numb;

其中的"="和"+"都是操作符。

JavaScript中還有很多這樣的操作符，例如，算術操作符(+、-、*、/等)，比較操作符(<、>、>=、<=等)，邏輯操作符(&&、||、！)。

注意: “=” 操作符是賦值，不是等於。

(2) "+"操作符

算術運算符主要用來完成類似加減乘除的工作，在JavaScript中，“+”不只代表加法，還可以連接兩個字符串，例如：

mystring = "Java" + "Script"; // mystring的值“JavaScript”這個字符串

較量較量(比較操作符)

我們先來做道數學題，數學考試成績中，小明考了90分，小紅考了95分，問誰考的分數高?
答: 因為“95 > 90”，所以小紅考試成績高。

其中大於號">" 就是比較操作符，小紅考試成績和小明考試成績就是操作數，並且是兩個操作數。

也就是說兩個操作數通過比較操作符進行比較，得到值為真（true）和假(false)。

在JavaScript中，這樣的比較操作符有很多，這些操作符的含義如下: 

看看下面例子:

var a = 5;//定義a變量，賦值為5
var b = 9; //定義b變量，賦值為9
document.write (a<b); //a小於b的值嗎? 結果是真(true)
document.write (a>=b); //a大於或等於b的值嗎? 結果是假(false)
document.write (a!=b); //a不等於b的值嗎? 結果是真(true)
document.write (a==b); //a等於b的值嗎? 結果是假(false)

我與你同在(邏輯與操作符）

數學里面的“a>b”，在JavaScript中還表示為a>b；數學中的“b大於a，b小於c”是“a<b<c”，那么在JavaScript中可以用&&表示，如下：

b>a && b<c    //“&&”是並且的意思, 讀法"b大於a"並且" b小於c "

好比我們參加高考時,在進入考場前,必須出示准考證和身份證,兩者缺一不可，否則不能參加考試，表示如下:

if(有准考證 &&有身份證) 
{
   進行考場考試
}

 “&&”是邏輯與操作符，只有“&&”兩邊值同時滿足(同時為真)，整個表達式值才為真。

邏輯與操作符值表:

注意: 如果A為假，A && B為假，不會在執行B; 反之，如果A為真，要由 B 的值來決定 A && B 的值。

我或你都可以 (邏輯或操作符）

"||"邏輯或操作符，相當於生活中的“或者”，當兩個條件中有任一個條件滿足，“邏輯或”的運算結果就為“真”。

例如：本周我們計划出游,可是周一至周五工作,所以周六或者周日哪天去都可以。即兩天中只要有一天有空，就可以出游了。

var a=3;
var b=5;
var c;
c=b>a ||a>b;  //b>a是true，a>b是false，c是true

邏輯或操作符值表:

注意: 如果A為真，A || B為真，不會在執行B; 反之，如果A為假，要由 B 的值來決定 A || B 的值。

 

是非顛倒(邏輯非操作符）

"!"是邏輯非操作符，也就是"不是"的意思,非真即假，非假即真。好比小華今天買了一個杯子，小明說:"杯子是白色的"，小亮說:“杯子是紅色的”，小華說："小明說的不是真話，小亮說的不是假話"。猜猜小華買的什么顏色的杯子，答案：紅色杯子。

邏輯非操作符值表:

看看下面代碼，變量c的值是什么:

var a=3;
var b=5;
var c;
c=!(b>a);  // b>a值是true,! (b>a）值是false
c=!(b<a);  // b<a值是false, ! (b<a）值是true

 

保持先后順序(操作符優先級）

我們都知道，除法、乘法等操作符的優先級比加法和減法高，例如：

var numa=3;
var numb=6
jq= numa + 30 / 2 - numb * 3;  // 結果為0

如果我們要改變運算順序，需添加括號的方法來改變優先級:

var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //結果是-24.75

操作符之間的優先級（高到低）:

算術操作符 → 比較操作符 → 邏輯操作符 → "="賦值符號

如果同級的運算是按從左到右次序進行,多層括號由里向外。

var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2;  //結果為false

一起組團（什么是數組）

我們知道變量用來存儲數據，一個變量只能存儲一個內容。假設你想存儲10個人的姓名或者存儲20個人的數學成績，就需要10個或20個變量來存儲，如果需要存儲更多數據，那就會變的更麻煩。我們用數組解決問題，一個數組變量可以存放多個數據。好比一個團，團里有很多人，如下我們使用數組存儲5個學生成績。

數組是一個值的集合，每個值都有一個索引號，從0開始，每個索引都有一個相應的值，根據需要添加更多數值。

組團，並給團取個名（如何創建數組）

使用數組之前首先要創建，而且需要把數組本身賦至一個變量。好比我們出游，要組團，並給團定個名字“雲南之旅”。

創建數組語法：

var myarray=new Array();

          
 我們創建數組的同時，還可以為數組指定長度，長度可任意指定。

var myarray= new Array(8); //創建數組，存儲8個數據。 

注意：
1.創建的新數組是空數組，沒有值，如輸出，則顯示undefined。
2.雖然創建數組時，指定了長度，但實際上數組都是變長的，也就是說即使指定了長度為8，仍然可以將元素存儲在規定長度以外。

 

誰是團里成員（數組賦值）

數組創建好，接下來我們為數組賦值。我們把數組看似旅游團的大巴車，大巴車里有很多位置，每個位置都有一個號碼，顧客要坐在哪個位置呢？ 

第一步：組個大巴車
第二步：按票對號入座
        大巴車的1號座位是張三
        大巴車的2號座位是李四

數組的表達方式：

第一步：創建數組var myarr=new Array(); 
第二步：給數組賦值
        myarr[1]=" 張三";
        myarr[2]=" 李四";

下面創建一個數組，用於存儲5個人的數學成績。

var myarray=new Array(); //創建一個新的空數組
myarray[0]=66; //存儲第1個人的成績
myarray[1]=80; //存儲第2個人的成績
myarray[2]=90; //存儲第3個人的成績
myarray[3]=77; //存儲第4個人的成績
myarray[4]=59; //存儲第5個人的成績

注意：數組每個值有一個索引號，從0開始。

我們還可以用簡單的方法創建上面的數組和賦值：

第一種方法：

var myarray = new Array(66,80,90,77,59);//創建數組同時賦值

第二種方法：

 var myarray = [66,80,90,77,59];//直接輸入一個數組（稱 “字面量數組”）

注意：數組存儲的數據可以是任何類型（數字、字符、布爾值等）

 

團里添加新成員（向數組增加一個新元素）

上一節中，我們使用myarray變量存儲了5個人的成績，現在多出一個人的成績，如何存儲呢？ 

只需使用下一個未用的索引，任何時刻可以不斷向數組增加新元素。

myarray[5]=88; //使用一個新索引，為數組增加一個新元素

了解成員數量(數組屬性length)

如果我們想知道數組的大小，只需引用數組的一個屬性length。Length屬性表示數組的長度，即數組中元素的個數。

語法：

myarray.length; //獲得數組myarray的長度

注意：因為數組的索引總是由0開始，所以一個數組的上下限分別是：0和length-1。如數組的長度是5，數組的上下限分別是0和4。

var arr=[55,32,5,90,60,98,76,54];//包含8個數值的數組arr 
document.write(arr.length); //顯示數組長度8
document.write(arr[7]); //顯示第8個元素的值54

同時，JavaScript數組的length屬性是可變的，這一點需要特別注意。

arr.length=10; //增大數組的長度
document.write(arr.length); //數組長度已經變為10

數組隨元素的增加，長度也會改變，如下:

var arr=[98,76,54,56,76]; // 包含5個數值的數組
document.write(arr.length); //顯示數組的長度5
arr[15]=34;  //增加元素，使用索引為15,賦值為34
alert(arr.length); //顯示數組的長度16

二維數組

一維數組，我們看成一組盒子，每個盒子只能放一個內容。

一維數組的表示: myarray[ ]

二維數組，我們看成一組盒子，不過每個盒子里還可以放多個盒子。

二維數組的表示: myarray[ ][ ]

注意: 二維數組的兩個維度的索引值也是從0開始，兩個維度的最后一個索引值為長度-1。 

1. 二維數組的定義方法一

var myarr=new Array();  //先聲明一維 
for(var i=0;i<2;i++){   //一維長度為2
   myarr[i]=new Array();  //再聲明二維 
   for(var j=0;j<3;j++){   //二維長度為3
   myarr[i][j]=i+j;   // 賦值，每個數組元素的值為i+j
   }
 }

注意: 關於for 循環語句，請看第四章4-5 。

將上面二維數組，用表格的方式表示:

2. 二維數組的定義方法二

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

3. 賦值

myarr[0][1]=5; //將5的值傳入到數組中，覆蓋原有值。

說明: myarr[0][1] ,0 表示表的行，1表示表的列。

 

做判斷（if語句）

if語句是基於條件成立才執行相應代碼時使用的語句。

語法:

if(條件)
{ 條件成立時執行代碼}

注意：if小寫，大寫字母（IF）會出錯！

假設你應聘web前端技術開發崗位，如果你會HTML技術，你面試成功，歡迎加入公司。代碼表示如下:

<script type="text/javascript">
  var mycarrer = "HTML";
  if (mycarrer == "HTML")
  {
    document.write("你面試成功，歡迎加入公司。");
  }
</script>

多重判斷（if..else嵌套語句）

要在多組語句中選擇一組來執行，使用if..else嵌套語句。

語法:

if(條件1)
{ 條件1成立時執行的代碼}
else  if(條件2)
{ 條件2成立時執行的代碼}
...
else  if(條件n)
{ 條件n成立時執行的代碼}
else
{ 條件1、2至n不成立時執行的代碼}

假設數學考試，小明考了86分，給他做個評價，60分以下的不及格，60(包含60分)-75分為良好，75(包含75分)-85分為很好，85(包含85分)-100優秀。

代碼表示如下:

結果:

 

多種選擇（Switch語句)

當有很多種選項的時候，switch比if else使用更方便。

語法:

switch(表達式)
{
case值1:
  執行代碼塊 1
  break;
case值2:
  執行代碼塊 2
  break;
...
case值n:
  執行代碼塊 n
  break;
default:
  與 case值1 、 case值2...case值n 不同時執行的代碼
}

語法說明:

Switch必須賦初始值，值與每個case值匹配。滿足執行該 case 后的所有語句，並用break語句來阻止運行下一個case。如所有case值都不匹配，執行default后的語句。

假設評價學生的考試成績，10分滿分制，我們按照每一分一個等級將成績分等，並根據成績的等級做出不同的評價。

代碼如下:

執行結果:

評語: 及格，加油!

注意:記得在case所執行的語句后添加上一個break語句。否則就直接繼續執行下面的case中的語句，看以下代碼:

執行結果:

評語: 繼續努力!
評語: 及格，加油!
評語: 湊合，奮進
評語: 很棒，很棒
評語: 高手，大牛

在上面的代碼中，沒有break停止語句，如果成績是4分，則case 5后面的語句將會得到執行，同樣，case6、7-10后面的語句都會得到執行。

重復重復（for循環）

很多事情不只是做一次，要重復做。如打印10份試卷，每次打印一份，重復這個動作，直到打印完成。這些事情，我們使用循環語句來完成，循環語句，就是重復執行一段代碼。

for語句結構：

for(初始化變量;循環條件;循環迭代)
{     
    循環語句 
 }

假如，一個盒子里有6個球，我們每次取一個，重復從盒中取出球，直到球取完為止。

<script type="text/javascript">
var num=1;
for (num=1;num<=6;num++)  //初始化值；循環條件；循環后條件值更新
{   document.write("取出第"+num+"個球<br />");
}
</script>

結果:

執行思路:

 

反反復復(while循環)

和for循環有相同功能的還有while循環, while循環重復執行一段代碼，直到某個條件不再滿足。

while語句結構：

while(判斷條件)
{
    循環語句
 }

使用while循環，完成從盒子里取球的動作，每次取一個，共6個球。

<script type="text/javascript">
var num=0;  //初始化值
while (num<=6)   //條件判斷
{
  document.write("取出第"+num+"個球<br />");
  num=num+1;  //條件值更新
}
</script>

來來回回(Do...while循環)

do while結構的基本原理和while結構是基本相同的，但是它保證循環體至少被執行一次。因為它是先執行代碼，后判斷條件，如果條件為真，繼續循環。

do...while語句結構：

do
{
    循環語句
 }
while(判斷條件)

我們試着輸出5個數字。

<script type="text/javascript">
   num= 1;
   do
   {
     document.write("數值為:" +  num+"<br />");
     num++; //更新條件
   }
   while (num<=5)
</script>

執行結果:

為什么呢?我們來看下執行思路：

 

 

退出循環break

在while、for、do...while、while循環中使用break語句退出當前循環，直接執行后面的代碼。

格式如下：

for(初始條件;判斷條件;循環后條件值更新)
{
  if(特殊情況)
  {break;}
  循環代碼
}

當遇到特殊情況的時候，循環就會立即結束。看看下面的例子，輸出10個數，如果數值為5，就停止輸出。

 

執行結果:

注:當num=5的時候循環就會結束，不會輸出后面循環的內容。

 

繼續循環continue

continue的作用是僅僅跳過本次循環，而整個循環體繼續執行。

語句結構：

for(初始條件;判斷條件;循環后條件值更新)
{
  if(特殊情況)
  { continue; }
 循環代碼
}

上面的循環中，當特殊情況發生的時候，本次循環將被跳過，而后續的循環則不會受到影響。好比輸出10個數字，如果數字為5就不輸出了。

執行結果:

注:上面的代碼中，num=5的那次循環將被跳過

 

 

什么是函數

函數的作用，可以寫一次代碼，然后反復地重用這個代碼。

如:我們要完成多組數和的功能。

var sum;   
sum = 3+2;
alert(sum);

sum=7+8 ;
alert(sum); 

....  //不停重復兩行代碼

如果要實現8組數的和，就需要16行代碼，實現的越多，代碼行也就越多。所以我們可以把完成特定功能的代碼塊放到一個函數里，直接調用這個函數，就省去重復輸入大量代碼的麻煩。

使用函數完成:

function add2(a,b){
sum = a + b;
 alert(sum);
} //  只需寫一次就可以

add2(3,2);
add2(7,8);
....  //只需調用函數就可以

 

定義函數

如何定義一個函數呢？看看下面的格式：

function  函數名( )
{
     函數體;
}

function定義函數的關鍵字，“函數名”你為函數取的名字，“函數體”替換為完成特定功能的代碼。

我們完成對兩個數求和並顯示結果的功能。並給函數起個有意義的名字：“add2”，代碼如下：

<script type="text/javascript">
  function add2(){
    sum = 3 + 2;
    alert(sum);
  }
  ​add2();
</script>

結果: 

 

返回值的函數

思考:上一節函數中，通過"document.write"把結果輸出來，如果想對函數的結果進行處理怎么辦呢？

我們只要把"document.write(sum)"這行改成如下代碼：

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函數值,return后面的值叫做返回值。
}

還可以通過變量存儲調用函數的返回值，代碼如下:

result = add2(3,4);//語句執行后,result變量中的值為7.

注意:函數中參數和返回值不只是數字，還可以是字符串等其它類型。 

 

什么是事件

JavaScript 創建動態頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。

比如說，當用戶單擊按鈕或者提交表單數據時，就發生一個鼠標單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結果。

主要事件表:

 

鼠標移開事件（onmouseout）

鼠標移開事件，當鼠標移開當前對象時，執行onmouseout調用的程序。

當把鼠標移動到"登錄"按鈕上，然后再移開時，觸發onmouseout事件，調用函數message()，代碼如下:

運行結果:

 

光標聚焦事件（onfocus）

當網頁中的對象獲得聚點時，執行onfocus調用的程序就會被執行。

如下代碼, 當將光標移到文本框內時，即焦點在文本框內，觸發onfocus 事件，並調用函數message()。

運行結果：

文本框內容改變事件（onchange）

通過改變文本框的內容來觸發onchange事件，同時執行被調用的程序。

如下代碼,當用戶將文本框內的文字改變后，彈出對話框“您改變了文本內容！”。

運行結果：

加載事件（onload）

事件會在頁面加載完成后，立即發生，同時執行被調用的程序。
注意：1. 加載頁面時，觸發onload事件，事件寫在<body>標簽內。

      2. 此節的加載頁面，可理解為打開一個新頁面時。
如下代碼,當加載一個新頁面時，彈出對話框“加載中，請稍等…”。

運行結果：

 

卸載事件（onunload）

當用戶退出頁面時（頁面關閉、頁面刷新等），觸發onUnload事件，同時執行被調用的程序。

注意：不同瀏覽器對onunload事件支持不同。

如下代碼,當退出頁面時，彈出對話框“您確定離開該網頁嗎？”。

運行結果：（IE瀏覽器）

---恢復內容結束---

使用JS完成一個簡單的計算器功能。實現2個輸入框中輸入整數后，點擊第三個輸入框能給出2個整數的加減乘除。

提示：獲取元素的值設置和獲取方法為：例：賦值：document.getElementById(“id”）.value = 1； 取值：var = document.getElementById(“id”）.value；

 

<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){

//獲取第一個輸入框的值
var mychar1=document.getElementById("txt1").value
; //獲取第二個輸入框的值
var mychar2=document.getElementById("txt2").value;
//獲取選擇框的值
var mychar3=document.getElementById("select").value;
var result="";
//獲取通過下拉框來選擇的值來改變加減乘除的運算法則
swith(mychar){
case "+":
result=parseFloat(mychar1)+parseFloat(mychar2);
break;
case "*":
result=parseFloat(mychar1)*parseFloat(mychar2);
break;
case:"/":
result=parseFloat(mychar1)/parseFloat(mychar2);
break;
default:
result=parseFloat(mychar1)-parseFloat(mychar2);
}
//設置結果輸入框的值
document.getElementById("fruit").value=result;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' /> <!--通過 = 按鈕來調用創建的函數，得到結果-->
<input type='text' id='fruit' />
</body>

什么是對象

JavaScript 中的所有事物都是對象，如:字符串、數值、數組、函數等，每個對象帶有屬性和方法。

對象的屬性：反映該對象某些特定的性質的，如：字符串的長度、圖像的長寬等；

對象的方法：能夠在對象上執行的動作。例如，表單的“提交”(Submit)，時間的“獲取”(getYear)等；

JavaScript 提供多個內建對象，比如 String、Date、Array 等等，使用對象前先定義，如下使用數組對象：

  var objectName =new Array();//使用new關鍵字定義對象
或者
  var objectName =[];

訪問對象屬性的語法:

objectName.propertyName

如使用 Array 對象的 length 屬性來獲得數組的長度：

var myarray=new Array(6);//定義數組對象
var myl=myarray.length;//訪問數組長度length屬性

以上代碼執行后，myl的值將是：6

訪問對象的方法：

objectName.methodName()

如使用string 對象的 toUpperCase() 方法來將文本轉換為大寫：

var mystr="Hello world!";//創建一個字符串
var request=mystr.toUpperCase(); //使用字符串對象方法

以上代碼執行后，request的值是：HELLO WORLD!

 

 

Date 日期對象

日期對象可以儲存任意一個日期，並且可以精確到毫秒數（1/1000 秒）。

定義一個時間對象 :

var Udate=new Date(); 

注意:使用關鍵字new，Date()的首字母必須大寫。 

使 Udate 成為日期對象，並且已有初始值：當前時間(當前電腦系統時間)。

如果要自定義初始值，可以用以下方法：

var d = new Date(2012, 10, 1);  //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日

我們最好使用下面介紹的“方法”來嚴格定義時間。

訪問方法語法：“<日期對象>.<方法>”

Date對象中處理時間和日期的常用方法：

 

 

返回/設置年份方法

get/setFullYear() 返回/設置年份，用四位數表示。

var mydate=new Date();//當前時間2014年3月6日
document.write(mydate+"<br>");//輸出當前時間
document.write(mydate.getFullYear()+"<br>");//輸出當前年份
mydate.setFullYear(81); //設置年份
document.write(mydate+"<br>"); //輸出年份被設定為 0081年。

注意:不同瀏覽器， mydate.setFullYear(81)結果不同，年份被設定為 0081或81兩種情況。

結果:

Thu Mar 06 2014 10:57:47 GMT+0800
2014
Thu Mar 06 0081 10:57:47 GMT+0800

注意:

1.結果格式依次為：星期、月、日、年、時、分、秒、時區。(火狐瀏覽器)

2. 不同瀏覽器，時間格式有差異。

 

返回星期方法

getDay() 返回星期，返回的是0-6的數字，0 表示星期天。如果要返回相對應“星期”，通過數組完成，代碼如下:

<script type="text/javascript">
  var mydate=new Date();//定義日期對象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定義數組對象,給每個數組項賦值
  var mynum=mydate.getDay();//返回值存儲在變量mynum中
  document.write(mydate.getDay());//輸出getDay()獲取值
  document.write("今天是："+ weekday[mynum]);//輸出星期幾
</script>

注意：以上代碼是在2014年3月7日，星期五運行。

結果:

5

今天是：星期五

 

返回/設置時間方法

get/setTime() 返回/設置時間，單位毫秒數，計算從 1970 年 1 月 1 日零時到日期對象所指的日期的毫秒數。

如果將目前日期對象的時間推遲1小時，代碼如下:

<script type="text/javascript">
  var mydate=new Date();
  document.write("當前時間："+mydate+"<br>");
  mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
  document.write("推遲一小時時間：" + mydate);
</script>

結果:

當前時間：Thu Mar 6 11:46:27 UTC+0800 2014

推遲一小時時間：Thu Mar 6 12:46:27 UTC+0800 2014

注意:1. 一小時 60 分，一分 60 秒，一秒 1000 毫秒

      2. 時間推遲 1 小時,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”

 

harAt() 方法可返回指定位置的字符。返回的字符是長度為 1 的字符串。

語法:

stringObject.charAt(index)

參數說明：

注意：1.字符串中第一個字符的下標是 0。最后一個字符的下標為字符串長度減一（string.length-1）。

2.如果參數 index 不在 0 與 string.length-1 之間，該方法將返回一個空字符串。

如:在字符串 "I love JavaScript!" 中，返回位置2的字符：

<script type="text/javascript">
  var mystr="I love JavaScript!"
  document.write(mystr.charAt(2));
</script>

注意：一個空格也算一個字符。

以上代碼的運行結果：

返回指定的字符串首次出現的位置

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

語法

stringObject.indexOf(substring, startpos)

參數說明：

說明：

1.該方法將從頭到尾地檢索字符串 stringObject，看它是否含有子串 substring。

2.可選參數，從stringObject的startpos位置開始查找substring，如果沒有此參數將從stringObject的開始位置查找。

3.如果找到一個 substring，則返回 substring 的第一次出現的位置。stringObject 中的字符位置是從 0 開始的。

注意：1.indexOf() 方法區分大小寫。

2.如果要檢索的字符串值沒有出現，則該方法返回 -1。

例如: 對 "I love JavaScript!" 字符串內進行不同的檢索：

<script type="text/javascript">
  var str="I love JavaScript!"
  document.write(str.indexOf("I") + "<br />");
  document.write(str.indexOf("v") + "<br />");
  document.write(str.indexOf("v",8));
</script>

以上代碼的輸出：

0
4
9

substring() 方法用於提取字符串中介於兩個指定下標之間的字符。

語法:

stringObject.substring(starPos,stopPos) 

參數說明:

注意：

1. 返回的內容是從 start開始(包含start位置的字符)到 stop-1 處的所有字符，其長度為 stop 減start。

2. 如果參數 start 與 stop 相等，那么該方法返回的就是一個空串（即長度為 0 的字符串）。

3. 如果 start 比 stop 大，那么該方法在提取子串之前會先交換這兩個參數。

使用 substring() 從字符串中提取字符串，代碼如下：

<script type="text/javascript">
  var mystr="I love JavaScript";
  document.write(mystr.substring(7));
  document.write(mystr.substring(2,6));
</script>

運行結果:

JavaScript
love

提取指定數目的字符substr()

substr() 方法從字符串中提取從 startPos位置開始的指定數目的字符串。

語法:

stringObject.substr(startPos,length)

參數說明:

注意：如果參數startPos是負數，從字符串的尾部開始算起的位置。也就是說，-1 指字符串中最后一個字符，-2 指倒數第二個字符，以此類推。

如果startPos為負數且絕對值大於字符串長度，startPos為0。

使用 substr() 從字符串中提取一些字符，代碼如下：

<script type="text/javascript">
  var mystr="I love JavaScript!";
  document.write(mystr.substr(7));
  document.write(mystr.substr(2,4));
</script>

Math對象

Math對象，提供對數據的數學計算。

使用 Math 的屬性和方法，代碼如下：

 

<script type="text/javascript">
  var mypi=Math.PI; 
  var myabs=Math.abs(-15);
  document.write(mypi);
  document.write(myabs);
</script>

運行結果:

3.141592653589793
15

注意：Math 對象是一個固有的對象，無需創建它，直接把 Math 作為對象使用就可以調用其所有屬性和方法。這是它與Date,String對象的區別。

Math 對象屬性

Math 對象方法

運行結果：

JavaScript!
love

向上取整ceil()

ceil() 方法可對一個數進行向上取整。

語法:

Math.ceil(x)

參數說明:

注意：它返回的是大於或等於x，並且與x最接近的整數。

我們將把 ceil() 方法運用到不同的數字上，代碼如下：

<script type="text/javascript">
  document.write(Math.ceil(0.8) + "<br />")
  document.write(Math.ceil(6.3) + "<br />")
  document.write(Math.ceil(5) + "<br />")
  document.write(Math.ceil(3.5) + "<br />")
  document.write(Math.ceil(-5.1) + "<br />")
  document.write(Math.ceil(-5.9))
</script>

運行結果：

1
7
5
4
-5
-5

向下取整floor()

floor() 方法可對一個數進行向下取整。

語法:

Math.floor(x)

參數說明：

注意：返回的是小於或等於x，並且與 x 最接近的整數。

我們將在不同的數字上使用 floor() 方法，代碼如下:

<script type="text/javascript">
  document.write(Math.floor(0.8)+ "<br>")
  document.write(Math.floor(6.3)+ "<br>")
  document.write(Math.floor(5)+ "<br>")
  document.write(Math.floor(3.5)+ "<br>")
  document.write(Math.floor(-5.1)+ "<br>")
  document.write(Math.floor(-5.9))
</script>

運行結果：

0
6
5
3
-6
-6

四舍五入round()

round() 方法可把一個數字四舍五入為最接近的整數。

語法:

Math.round(x)

參數說明：

注意：

1. 返回與 x 最接近的整數。

2. 對於 0.5，該方法將進行上舍入。(5.5 將舍入為 6)

3. 如果 x 與兩側整數同等接近，則結果接近 +∞方向的數字值 。(如 -5.5 將舍入為 -5; -5.52 將舍入為 -6),如下圖:

把不同的數舍入為最接近的整數,代碼如下：

<script type="text/javascript">
  document.write(Math.round(1.6)+ "<br>");
  document.write(Math.round(2.5)+ "<br>");
  document.write(Math.round(0.49)+ "<br>");
  document.write(Math.round(-6.4)+ "<br>");
  document.write(Math.round(-6.6));
</script>

運行結果：

2
3
0
-6
-7

隨機數 random()

random() 方法可返回介於 0 ~ 1（大於或等於 0 但小於 1 )之間的一個隨機數。

語法：

Math.random();

注意：返回一個大於或等於 0 但小於 1 的符號為正的數字值。

我們取得介於 0 到 1 之間的一個隨機數，代碼如下：

<script type="text/javascript">
  document.write(Math.random());
</script>

運行結果：

0.190305486195328  

注意 :因為是隨機數，所以每次運行結果不一樣，但是0 ~ 1的數值。

獲得0 ~ 10之間的隨機數，代碼如下:

<script type="text/javascript">
  document.write((Math.random())*10);
</script>

運行結果：

8.72153625893887

Array 數組對象

數組對象是一個對象的集合，里邊的對象可以是不同類型的。數組的每一個成員對象都有一個“下標”，用來表示它在數組中的位置，是從零開始的

數組定義的方法：

1. 定義了一個空數組:

var  數組名= new Array();

2. 定義時指定有n個空元素的數組：

var 數組名 =new Array(n);

3.定義數組的時候，直接初始化數據：

var  數組名 = [<元素1>, <元素2>, <元素3>...];

我們定義myArray數組，並賦值，代碼如下：

var myArray = [2, 8, 6]; 

說明：定義了一個數組 myArray，里邊的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。

數組元素使用：

數組名[下標] = 值;

注意: 數組的下標用方括號括起來，從0開始。

數組屬性：

length 用法：<數組對象>.length；返回：數組的長度，即數組里有多少個元素。它等於數組里最后一個元素的下標加一。

數組方法：

 

數組連接concat()

concat() 方法用於連接兩個或多個數組。此方法返回一個新數組，不改變原來的數組。

語法

arrayObject.concat(array1,array2,...,arrayN)

參數說明：

注意:  該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。

我們創建一個數組，將把 concat() 中的參數連接到數組 myarr 中，代碼如下：

<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>

運行結果：

1,2,3,4,5
1,2,3

我們創建了三個數組，然后使用 concat() 把它們連接起來，代碼如下：

<script type="text/javascript">
  var mya1= new Array("hello!")
  var mya2= new Array("I","love");
  var mya3= new Array("JavaScript","!");
  var mya4=mya1.concat(mya2,mya3);
  document.write(mya4);
</script>

運行結果：

hello!,I,love,JavaScript,!

指定分隔符連接數組元素join()

join()方法用於把數組中的所有元素放入一個字符串。元素是通過指定的分隔符進行分隔的。

語法：

arrayObject.join(分隔符)

參數說明:

注意：返回一個字符串，該字符串把數組中的各個元素串起來，用<分隔符>置於元素與元素之間。這個方法不影響數組原本的內容。 我們使用join（）方法，將數組的所有元素放入一個字符串中，代碼如下：

<script type="text/javascript">
  var myarr = new Array(3);
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join());
</script>

運行結果：

I,love,JavaScript

我們將使用分隔符來分隔數組中的元素，代碼如下：

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "I";
  myarr[1] = "love";
  myarr[2] = "JavaScript";
  document.write(myarr.join("."));
</script>

運行結果：

I.love.JavaScript

顛倒數組元素順序reverse()

reverse() 方法用於顛倒數組中元素的順序。

語法：

arrayObject.reverse()

注意：該方法會改變原來的數組，而不會創建新的數組。

定義數組myarr並賦值，然后顛倒其元素的順序：

<script type="text/javascript">
  var myarr = new Array(3)
  myarr[0] = "1"
  myarr[1] = "2"
  myarr[2] = "3"
  document.write(myarr + "<br />")
  document.write(myarr.reverse())
</script>

運行結果：

1,2,3
3,2,1

選定元素slice()

slice() 方法可從已有的數組中返回選定的元素。

語法

arrayObject.slice(start,end)

參數說明：

1.返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

2. 該方法並不會修改數組，而是返回一個子數組。

注意：

1. 可使用負值從數組的尾部選取元素。

2.如果 end 未被規定，那么 slice() 方法會選取從 start 到數組結尾的所有元素。

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>

運行結果：

1,2,3,4,5,6
3,4
1,2,3,4,5,6

數組排序sort()

sort()方法使數組中的元素按照一定的順序排列。

語法:

arrayObject.sort(方法函數)

參數說明：

1.如果不指定<方法函數>，則按unicode碼順序排列。

2.如果指定<方法函數>，則按<方法函數>所指定的排序方法排序。

myArray.sort(sortMethod);

注意: 該函數要比較兩個值，然后返回一個用於說明這兩個值的相對順序的數字。比較函數應該具有兩個參數 a 和 b，其返回值如下： 

  若返回值<=-1，則表示 A 在排序后的序列中出現在 B 之前。
  若返回值>-1 && <1，則表示 A 和 B 具有相同的排序順序。
  若返回值>=1，則表示 A 在排序后的序列中出現在 B 之后。

1.使用sort()將數組進行排序，代碼如下：

<script type="text/javascript">
  var myarr1 = new Array("Hello","John","love","JavaScript"); 
  var myarr2 = new Array("80","16","50","6","100","1");
  document.write(myarr1.sort()+"<br>");
  document.write(myarr2.sort());
</script>

運行結果：

Hello,JavaScript,John,love
1,100,16,50,6,80

注意:上面的代碼沒有按照數值的大小對數字進行排序。

2.如要實現這一點，就必須使用一個排序函數，代碼如下：

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”該成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

運行結果：

80,16,50,6,100,1
1,6,16,50,80,100

計時器setInterval()

在執行時,從載入頁面后每隔指定的時間執行代碼。

語法:

setInterval(代碼,交互時間);

參數說明：

1. 代碼：要調用的函數或要執行的代碼串。

2. 交互時間：周期性執行或調用表達式之間的時間間隔，以毫秒計（1s=1000ms）。

返回值:

一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執行的值。

調用函數格式(假設有一個clock()函數):

setInterval("clock()",1000)
或
setInterval(clock,1000)

我們設置一個計時器，每隔100毫秒調用clock()函數，並將時間顯示出來，代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
  </form>
</body>
</html>

取消計時器clearInterval()

clearInterval() 方法可取消由 setInterval() 設置的交互時間。

語法：

clearInterval(id_of_setInterval)

參數說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。

每隔 100 毫秒調用 clock() 函數,並顯示時間。當點擊按鈕時，停止時間,代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>計時器</title>
<script type="text/javascript">
   function clock(){
      var time=new Date();                     
      document.getElementById("clock").value = time;
   }
// 每隔100毫秒調用clock函數，並將返回值賦值給i
     var i=setInterval("clock()",100);
</script>
</head>
<body>
  <form>
    <input type="text" id="clock" size="50"  />
    <input type="button" value="Stop" onclick="clearInterval(i)"  />
  </form>
</body>
</html>

 

任務

補充右邊編輯器第12行，使用setInterval()計時器，顯示動態時間。

補充右邊編輯器第18行，點擊Stop按鈕后，取消計時器。

 

計時器setTimeout()

setTimeout()計時器，在載入后延遲指定時間后,去執行一次表達式,僅執行一次。

語法:

setTimeout(代碼,延遲時間);

參數說明：

1. 要調用的函數或要執行的代碼串。
2. 延時時間：在執行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。

當我們打開網頁3秒后，在彈出一個提示框，代碼如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>

當按鈕start被點擊時，setTimeout()調用函數，在5秒后彈出一個提示框。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
  var t=setTimeout("alert('Hello!')",5000);
 }
</script>
</head>
<body>
<form>
  <input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>

要創建一個運行於無窮循環中的計數器，我們需要編寫一個函數來調用其自身。在下面的代碼，當按鈕被點擊后，輸入域便從0開始計數。

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
 document.getElementById('txt').value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>

取消計時器clearTimeout()

setTimeout()和clearTimeout()一起使用，停止計時器。

語法:

clearTimeout(id_of_setTimeout)

參數說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標識要取消的延遲執行代碼塊。

下面的例子和上節的無窮循環的例子相似。唯一不同是，現在我們添加了一個 "Stop" 按鈕來停止這個計數器：

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
  var num=0,i;
  function timedCount(){
    document.getElementById('txt').value=num;
    num=num+1;
    i=setTimeout(timedCount,1000);
  }
    setTimeout(timedCount,1000);
  function stopCount(){
    clearTimeout(i);
  }
</script>
</head>
<body>
  <form>
    <input type="text" id="txt">
    <input type="button" value="Stop" onClick="stopCount()">
  </form>
</body>
</html>

 

History 對象

history對象記錄了用戶曾經瀏覽過的頁面(URL)，並可以實現瀏覽器前進與后退相似導航的功能。

注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標簽頁乃至每個框架，都有自己的history對象與特定的window對象關聯。

語法：

window.history.[屬性|方法]

注意：window可以省略。

History 對象屬性

History 對象方法

使用length屬性，當前窗口的瀏覽歷史總長度，代碼如下：

<script type="text/javascript">
  var HL = window.history.length;
  document.write(HL);
</script>

返回前一個瀏覽的頁面

back()方法，加載 history 列表中的前一個 URL。

語法：

window.history.back();

比如，返回前一個瀏覽的頁面，代碼如下：

window.history.back();

注意：等同於點擊瀏覽器的倒退按鈕。

back()相當於go(-1),代碼如下:

window.history.go(-1);

返回下一個瀏覽的頁面

forward()方法，加載 history 列表中的下一個 URL。

如果倒退之后，再想回到倒退之前瀏覽的頁面，則可以使用forward()方法,代碼如下:

window.history.forward();

注意：等價點擊前進按鈕。

forward()相當於go(1),代碼如下:

window.history.go(1);

返回瀏覽歷史中的其他頁面

go()方法，根據當前所處的頁面，加載 history 列表中的某個具體的頁面。

語法：

window.history.go(number);

參數：

瀏覽器中，返回當前頁面之前瀏覽過的第二個歷史頁面，代碼如下：

window.history.go(-2);

注意：和在瀏覽器中單擊兩次后退按鈕操作一樣。

同理，返回當前頁面之后瀏覽過的第三個歷史頁面，代碼如下：

window.history.go(3);

Location對象

location用於獲取或設置窗體的URL，並且可以用於解析URL。

語法:

location.[屬性|方法]

location對象屬性圖示:

location 對象屬性：

location 對象方法:

Navigator對象

Navigator 對象包含有關瀏覽器的信息，通常用於檢測瀏覽器與操作系統的版本。

對象屬性:

查看瀏覽器的名稱和版本，代碼如下:

<script type="text/javascript">
   var browser=navigator.appName;
   var b_version=navigator.appVersion;
   document.write("Browser name"+browser);
   document.write("<br>");
   document.write("Browser version"+b_version);
</script>

userAgent

返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)

語法

navigator.userAgent

幾種瀏覽的user_agent.，像360的兼容模式用的是IE、極速模式用的是chrom的內核。

使用userAgent判斷使用的是什么瀏覽器(假設使用的是IE8瀏覽器),代碼如下:

function validB(){ 
  var u_agent = navigator.userAgent; 
  var B_name="Failed to identify the browser"; 
  if(u_agent.indexOf("Firefox")>-1){ 
      B_name="Firefox"; 
  }else if(u_agent.indexOf("Chrome")>-1){ 
      B_name="Chrome"; 
  }else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){ 
      B_name="IE(8-10)";  
  }
    document.write("B_name:"+B_name+"<br>");
    document.write("u_agent:"+u_agent+"<br>"); 
} 

運行結果:

screen對象

screen對象用於獲取用戶的屏幕信息。

語法：

window.screen.屬性

對象屬性:

window.screen 對象包含有關用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計。
2. window.screen 對象在編寫時可以不使用 window 這個前綴。
我們來獲取屏幕的高和寬，代碼如下:

<script type="text/javascript">
  document.write( "屏幕寬度："+screen.width+"px<br />" );
  document.write( "屏幕高度："+screen.height+"px<br />" );
</script>

章節末尾的練習：

制作一個跳轉提示頁面：

要求：

1. 如果打開該頁面后，如果不做任何操作則5秒后自動跳轉到一個新的地址，如慕課網主頁。

2. 如果點擊“返回”按鈕則返回前一個頁面。

 

<!DOCTYPE html>
<html>
<head>
<title>瀏覽器對象</title>
<meta http-equiv="Content-Type" content="text/html; charset=gkb"/>
</head>
<body>
<!--先編寫好網頁布局-->
<h1>操作成功</h1>
<p><b id="second" >5</b>
秒后回到主頁<a href="javascript:goback();">返回</p>

<script type="text/javascript">

//獲取顯示秒數的元素，通過定時器來更改秒數。
var sec=document.getElementById("second");
var i =5;
var timer=setInterval(function(){
i--;
sec.innerHTML = i;
if(i==1){
window.location.href = "http://www.imooc.com/"
}
},1000);
//通過window的location和history對象來控制網頁的跳轉。
function back(){
window.history.go(-1);
}
</script>
</body>
</html>

 

認識DOM

文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標准方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。

先來看看下面代碼:

將HTML代碼分解為DOM節點層次圖:

HTML文檔可以說由節點構成的集合，DOM節點有:

1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標簽。

2. 文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 屬性節點:元素屬性，如<a>標簽的鏈接屬性href="http://www.imooc.com"。

節點屬性:

遍歷節點樹:

以上圖ul為例，它的父級節點body,它的子節點3個li,它的兄弟結點h2、P。

DOM操作:

注意:前兩個是document方法。

 

getElementsByName()方法

返回帶有指定名稱的節點對象的集合。

語法：

document.getElementsByName(name)

與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。

注意:

1. 因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數組，而不是一個元素。

2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，從0開始。

看看下面的代碼:

運行結果:

getElementsByTagName()方法

返回帶有指定標簽名的節點對象的集合。返回元素的順序是它們在文檔中的順序。

語法:

document.getElementsByTagName(Tagname)

說明:

1. Tagname是標簽的名稱，如p、a、img等標簽名。

2. 和數組類似也有length屬性，可以和訪問數組一樣的方法來訪問，所以從0開始。

看看下面代碼，通過getElementsByTagName()獲取節點。

 

 

區別getElementByID,getElementsByName,getElementsByTagName

以人來舉例說明，人有能標識身份的身份證，有姓名，有類別(大人、小孩、老人)等。

1. ID 是一個人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個人。

2. Name 是他的名字，可以重復。所以通過getElementsByName獲取名字相同的人集合。

3. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。

把上面的例子轉換到HTML中，如下:

<input type="checkbox" name="hobby" id="hobby1">  音樂

input標簽就像人的類別。

name屬性就像人的姓名。

id屬性就像人的身份證。

方法總結如下:

注意：方法區分大小寫

通過下面的例子(6個name="hobby"的復選項，兩個按鈕)來區分三種方法的不同:

  <input type="checkbox" name="hobby" id="hobby1">  音樂
  <input type="checkbox" name="hobby" id="hobby2">  登山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  閱讀
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全選" id="button1">
  <input type="button" value = "全不選" id="button1">

1. document.getElementsByTagName("input")，結果為獲取所有標簽為input的元素，共8個。

2. document.getElementsByName("hobby")，結果為獲取屬性name="hobby"的元素，共6個。

3. document.getElementById("hobby6")，結果為獲取屬性id="hobby6"的元素，只有一個，"跑步"這個復選項。

 

getAttribute()方法

通過元素節點的屬性名稱獲取屬性的值。

語法：

elementNode.getAttribute(name)

說明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節點。

2. name：要想查詢的元素節點的屬性名字

看看下面的代碼，獲取h1標簽的屬性值：

運行結果:

h1標簽的ID ：alink
h1標簽的title ：getAttribute()獲取標簽的屬值

 

setAttribute()方法

setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現有的屬性設定為指定的值。

語法：

elementNode.setAttribute(name,value)

說明：

1.name: 要設置的屬性名。

2.value: 要設置的屬性值。

注意：

1.把指定的屬性設置為指定的值。如果不存在具有指定名稱的屬性，該方法將創建一個新屬性。

2.類似於getAttribute()方法，setAttribute()方法只能通過元素節點對象調用的函數。

 

節點屬性

在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ：

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

一、nodeName 屬性: 節點的名稱，是只讀的。

1. 元素節點的 nodeName 與標簽名相同
2. 屬性節點的 nodeName 是屬性的名稱
3. 文本節點的 nodeName 永遠是 #text
4. 文檔節點的 nodeName 永遠是 #document

二、nodeValue 屬性：節點的值

1. 元素節點的 nodeValue 是 undefined 或 null
2. 文本節點的 nodeValue 是文本自身
3. 屬性節點的 nodeValue 是屬性的值

三、nodeType 屬性: 節點的類型，是只讀的。以下常用的幾種結點類型:

元素類型    節點類型
  元素          1
  屬性          2
  文本          3
  注釋          8
  文檔          9

 

訪問子結點childNodes

訪問選定元素節點下的所有子節點的列表，返回的值可以看作是一個數組，他具有length屬性。

語法：

elementNode.childNodes

注意：

如果選定的節點沒有子節點，則該屬性返回不包含節點的 NodeList。

我們來看看下面的代碼:

運行結果:

IE:

  UL子節點個數:3
  節點類型:1

其它瀏覽器:

   UL子節點個數:7
   節點類型:3

注意:

1. IE全系列、firefox、chrome、opera、safari兼容問題

2. 節點之間的空白符，在firefox、chrome、opera、safari瀏覽器是文本節點，所以IE是3，其它瀏覽器是7，如下圖所示:

如果把代碼改成這樣:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

運行結果:（IE和其它瀏覽器結果是一樣的）

  UL子節點個數:3
  節點類型:1

訪問子結點的第一和最后項

一、firstChild 屬性返回‘childNodes’數組的第一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.firstChild

說明：與elementNode.childNodes[0]是同樣的效果。 

二、 lastChild 屬性返回‘childNodes’數組的最后一個子節點。如果選定的節點沒有子節點，則該屬性返回 NULL。

語法：

node.lastChild

說明：與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果。 

注意: 上一節中，我們知道Internet Explorer 會忽略節點之間生成的空白文本節點，而其它瀏覽器不會。我們可以通過檢測節點類型，過濾子節點。 (以后章節講解)

 

訪問父節點parentNode

獲取指定節點的父節點

語法：

elementNode.parentNode

注意:父節點只能有一個。

看看下面的例子,獲取 P 節點的父節點，代碼如下:

<div id="text">
  <p id="con"> parentNode 獲取指點節點的父節點</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

運行結果:

parentNode 獲取指點節點的父節點
DIV

訪問祖節點:

elementNode.parentNode.parentNode

看看下面的代碼:

<div id="text">  
  <p>
    parentNode      
    <span id="con"> 獲取指點節點的父節點</span>
  </p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.parentNode.nodeName);
</script>

運行結果:

parentNode獲取指點節點的父節點
DIV

注意: 瀏覽器兼容問題，chrome、firefox等瀏覽器標簽之間的空白也算是一個文本節點。

任務

試一試，通過獲取的mylist節點，使用訪問父節點parentNode，將"HTML/CSS"課程內容輸出。

補充第30行代碼，將"HTML/CSS"課程內容輸出。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
</head>
<body>
<ul id="con">
<li id="lesson1">javascript
<ul>
<li id="tcon"> 基礎語法</li>
<li>流程控制語句</li>
<li>函數</li>
<li>事件</li>
<li>DOM</li>
</ul>
</li>
<li id="lesson2">das</li>
<li id="lesson3">dadf</li>
<li id="lesson4">HTML/CSS
<ul>
<li>文字</li>
<li>段落</li>
<li>表單</li>
<li>表格</li>
</ul>
</li></ul>
<script type="text/javascript">
var mylist = document.getElementById("tcon");
document.write(mylist.parentNode.parentNode.parentNode.lastChild.innerHTML);
</script>

</body>
</html>

 

 

訪問兄弟節點

1. nextSibling 屬性可返回某個節點之后緊跟的節點（處於同一樹層級中）。

語法：

nodeObject.nextSibling

說明：如果無此節點，則該屬性返回 null。

2. previousSibling 屬性可返回某個節點之前緊跟的節點（處於同一樹層級中）。

語法：

nodeObject.previousSibling  

說明：如果無此節點，則該屬性返回 null。

注意: 兩個屬性獲取的是節點。Internet Explorer 會忽略節點間生成的空白文本節點（例如，換行符號），而其它瀏覽器不會忽略。

解決問題方法:

判斷節點nodeType是否為1, 如是為元素節點，跳過。

運行結果:

LI = javascript
nextsibling: LI = jquery

 

插入節點appendChild()

在指定節點的最后一個子節點列表之后添加一個新的子節點。

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

我們來看看，div標簽內創建一個新的 P 標簽，代碼如下:

運行結果:

HTML
JavaScript
This is a new p

插入節點insertBefore()

insertBefore() 方法可在已有的子節點前插入一個新的子節點。

語法:

insertBefore(newnode,node);

參數:

newnode: 要插入的新節點。

node: 指定此節點前插入節點。

我們在來看看下面代碼，在指定節點前插入節點。

運行結果:

This is a new p
JavaScript
HTML

注意: otest.insertBefore(newnode,node); 也可以改為:  otest.insertBefore(newnode,otest.childNodes[0]); 

 

 

刪除節點removeChild()

removeChild() 方法從子節點列表中刪除某個節點。如刪除成功，此方法可返回被刪除的節點，如失敗，則返回 NULL。

語法:

nodeObject.removeChild(node)

參數:

node ：必需，指定需要刪除的節點。

我們來看看下面代碼，刪除子點。

運行結果:

HTML
刪除節點的內容: javascript

注意: 把刪除的子節點賦值給 x，這個子節點不在DOM樹中，但是還存在內存中，可通過 x 操作。

如果要完全刪除對象，給 x 賦 null 值，代碼如下:

替換元素節點replaceChild()

replaceChild 實現子節點(對象)的替換。返回被替換對象的引用。 

語法：

node.replaceChild (newnode,oldnew ) 

參數：

newnode : 必需，用於替換 oldnew 的對象。 
oldnew : 必需，被 newnode 替換的對象。

我們來看看下面的代碼:

 

效果: 將文檔中的 Java 改為 JavaScript。

注意: 

1. 當 oldnode 被替換時，所有與之相關的屬性內容都將被移除。 

2. newnode 必須先被建立。 

 

創建元素節點createElement

createElement()方法可創建元素節點。此方法可返回一個 Element 對象。

語法：

document.createElement(tagName)

參數:

tagName：字符串值，這個字符串用來指明創建元素的類型。

注意：要與appendChild() 或 insertBefore()方法聯合使用，將元素顯示在頁面中。

我們來創建一個按鈕，代碼如下：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "創建一個按鈕";  
   body.appendChild(input);  
 </script>  

效果：在HTML文檔中，創建一個按鈕。

我們也可以使用setAttribute來設置屬性，代碼如下：

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>  

效果：在HTML文檔中，創建一個文本框，使用setAttribute設置屬性值。 當點擊這個文本框時，會彈出對話框“This is a text!”。

 

 

創建文本節點createTextNode

createTextNode() 方法創建新的文本節點，返回新創建的 Text 節點。

語法：

document.createTextNode(data)

參數：

data : 字符串值，可規定此節點的文本。

我們來創建一個<div>元素並向其中添加一條消息，代碼如下：

運行結果:

 

 

 

瀏覽器窗口可視區域大小

獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:

一、對於IE9+、Chrome、Firefox、Opera 以及 Safari：

•  window.innerHeight - 瀏覽器窗口的內部高度

•  window.innerWidth - 瀏覽器窗口的內部寬度

二、對於 Internet Explorer 8、7、6、5：

•  document.documentElement.clientHeight表示HTML文檔所在窗口的當前高度。

•  document.documentElement.clientWidth表示HTML文檔所在窗口的當前寬度。

或者

Document對象的body屬性對應HTML文檔的<body>標簽

•  document.body.clientHeight

•  document.body.clientWidth

在不同瀏覽器都實用的 JavaScript 方案：

var w= document.documentElement.clientWidth
      || document.body.clientWidth;
var h= document.documentElement.clientHeight
      || document.body.clientHeight;

網頁尺寸scrollHeight

scrollHeight和scrollWidth，獲取網頁內容高度和寬度。

一、針對IE、Opera:

scrollHeight 是網頁內容實際高度，可以小於 clientHeight。

二、針對NS、FF:

scrollHeight 是網頁內容高度，不過最小值是 clientHeight。也就是說網頁內容實際高度小於 clientHeight 時，scrollHeight 返回 clientHeight 。

三、瀏覽器兼容性

var w=document.documentElement.scrollWidth
   || document.body.scrollWidth;
var h=document.documentElement.scrollHeight
   || document.body.scrollHeight;

注意:區分大小寫

scrollHeight和scrollWidth還可獲取Dom元素中內容實際占用的高度和寬度。

 

網頁尺寸offsetHeight

offsetHeight和offsetWidth，獲取網頁內容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。

一、值

offsetHeight = clientHeight + 滾動條 + 邊框。

二、瀏覽器兼容性

var w= document.documentElement.offsetWidth
    || document.body.offsetWidth;
var h= document.documentElement.offsetHeight
    || document.body.offsetHeight;

網頁卷去的距離與偏移量

我們先來看看下面的圖：

scrollLeft:設置或獲取位於給定對象左邊界與窗口中目前可見內容的最左端之間的距離 ，即左邊灰色的內容。

scrollTop:設置或獲取位於對象最頂端與窗口中可見內容的最頂端之間的距離 ，即上邊灰色的內容。

offsetLeft:獲取指定對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置 。

offsetTop:獲取指定對象相對於版面或由 offsetParent 屬性指定的父坐標的計算頂端位置 。

注意:

1. 區分大小寫

2. offsetParent：布局中設置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節點開始，一層層向上找，直到HTML的body。

 

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function req(){
var div = document.getElementById("div1");
document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距離屏幕頂部的距離
document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距離屏幕左部的距離
document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1縱向滾動條滾動的距離
document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1橫向滾動條滾動的距離
}
</script>
</head>
<body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
<div style="width:60%;border-right:1px dashed red;float:left;">
<div style="float:left;">
<div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
<div style="height:500px;width:400px">請調整橫豎滾動條后，點擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
</div>
<input type="button" value="點擊我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
</div>

</div>
<div style="width:30%;float:left;">
<ul style="list-style-type: none; line-height:30px;">結果：
<li>offsetTop : <span id="li1"></span></li>
<li>offsetLeft : <span id="li2"></span></li>
<li> scrollTop : <span id="li3"></span></li>
<li>scrollLeft : <span id="li4"></span></li>
</ul>

</div>
<div style="clear:both;"></div>
</body>
</html>

編程挑戰

現在利用之前我們學過的JavaScript知識，實現選項卡切換的效果。

效果圖:

文字素材:

房產：

    275萬購昌平鄰鐵三居 總價20萬買一居
    200萬內購五環三居 140萬安家東三環
    北京首現零首付樓盤 53萬購東5環50平
    京樓盤直降5000 中信府 公園樓王現房

家居:

     40平出租屋大改造 美少女的混搭小窩
     經典清新簡歐愛家 90平老房煥發新生
     新中式的酷色溫情 66平撞色活潑家居
     瓷磚就像選好老婆 衛生間煙道的設計

二手房：

     通州豪華3居260萬 二環稀缺2居250w甩
     西3環通透2居290萬 130萬2居限量搶購
     黃城根小學學區僅260萬 121平70萬拋!
     獨家別墅280萬 蘇州橋2居優惠價248萬
 
   

任務

大家先思考和分析實現思路，然后在動手實現

一、HTML頁面布局

提示:
選項卡標題使用ul..li
選項卡內容使用div

二、CSS樣式制作

提示:
整個選項卡的樣式設置
選項卡標題的樣式設置
選項卡內容的樣式設置
一開始只顯示一個選項卡內容，其它選項卡內容隱藏。

三、JS實現選項卡切換

提示:
獲取選項卡標題和選項卡內容
選項卡內容多個，需要循環遍歷來操作，得知哪個選項卡和哪個選項內容匹配
通過改變DOM的css類名稱,當前點擊的選項卡顯示，其它隱藏。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實踐題 - 選項卡</title>
<style type="text/css">
*{padding:0px;margin: 0px;font:12px normal "microsoft yahei";}
#tabs {width:290px;padding:5px;height:150px;margin:20px;}
#tabs ul{list-style:none;display: block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}
#tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:28px;line-height:28px;margin:0px 3px;border:1px solid #aaaaaa;border-bottom:none;display:inline-block;width:60px;text-align: center;}
#tabs ul li.on{border-top:2px solid saddlebrown;border-bottom: 2px solid #fff;}
#tabs div{height:120px;line-height: 25px;border:1px solid #336699;border-top:none;padding:5px;}
.hide{display: none;}
</style>
<script type="text/javascript">
window.onload = function(){
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs= oTab.getElementsByTagName("div");

for(var i= 0,len = oLis.length;i<len;i++){
oLis[i].index = i;
oLis[i].onclick = function() {
for(var n= 0;n<len;n++){
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
};
}
</script>

</head>
<body>
<div id="tabs">
<ul>
<li class="on">房產</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
275萬購昌平鄰鐵三居 總價20萬買一居<br>
200萬內購五環三居 140萬安家東三環<br>
北京首現零首付樓盤 53萬購東5環50平<br>
京樓盤直降5000 中信府 公園樓王現房<br>
</div>
<div class="hide">
40平出租屋大改造 美少女的混搭小窩<br>
經典清新簡歐愛家 90平老房煥發新生<br>
新中式的酷色溫情 66平撞色活潑家居<br>
瓷磚就像選好老婆 衛生間煙道的設計<br>

</div>
<div class="hide">
通州豪華3居260萬 二環稀缺2居250w甩<br>
西3環通透2居290萬 130萬2居限量搶購<br>
黃城根小學學區僅260萬 121平70萬拋!<br>
獨家別墅280萬 蘇州橋2居優惠價248萬<br>

</div>
</div>

</body>
</html>