對於JavaScript原生的JS

前言：工作接近一年，發現對於原生JS的基礎內容總是不夠掌握，特定抽出三個周的周末，結合本人的工作經驗還有菜鳥教程及w3school的基礎內容等整理了如下內容。對JS的常用知識進行概括！希望對大家能夠有所幫助。

一、JavaScript 簡介

1、JavaScript 是 Web 的編程語言，是前端開發必須掌握的三門語言之一，即：

1. HTML   定義了網頁的內容
2. CSS      描述了網頁的布局
3. JavaScript     實現了網頁的行為

2、JavaScript 是一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。現在 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可廣泛用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。 

二、JavaScript 主要實現功能

1、JavaScript：直接寫入 HTML 輸出流：

       document.write("<h1>這是一個標題</h1>");

       document.write("<p>這是一個段落。</p>");

2、JavaScript：對事件的反應：

　　<button type="button" onclick="alert('歡迎!')">點我!</button>

3、JavaScript：改變 HTML 內容：

　　x=document.getElementById("demo") //查找元素

　　x.innerHTML="Hello JavaScript"; //改變內容

4、JavaScript：改變 HTML 圖像：

　　動態地改變 HTML <image> 的來源（src）

5、JavaScript：改變 HTML 樣式

　　x=document.getElementById("demo") //找到元素

　　x.style.color="#ff0000"; //改變樣式

6、JavaScript：驗證輸入

　　if isNaN(x) {alert("不是數字")}; //下面會介紹 isNaN 一種常用的數值函數

三、JavaScript中的變量和輸入輸出

一、JavaScript中的變量:

1、JS中變量聲明的寫法：
  var num =10；// 使用var聲明的變量，屬於局部變量，只是當前作用域內有效；
  num = 10； // 不用var聲明，默認為全局變量，在整個JS文件中都有效；
  var x=8,y,z=10;使用一行語句，同時聲明多個變量。上式中，y屬於已聲明，但是未賦值狀態，結果為undefined；

2、JS中變量的命名規范：

1、變量名的命名要求：
  ①變量名只能有字母、數字、下划線組成；
  ②開頭不能是數字；
  ③變量名區分大小寫，大寫字母和小寫字母為不同變量；純大寫字母，一般默認為常量；
2、變量名的命名規范：
  ①要符合小駝峰法則：
  首字母小寫，之后每個單詞的首字母大寫；
  myNameIsJiangHao 駱駝命名法：
  ② 所有字母小寫，中間用
  _my_name_is_jiang_hao 匈牙利寫法
  ③ manameisjianghao 能用 但是不規范

二、JavaScript中的數據類型:

1、JavaScript   字符串（String）類型

字符串是存儲字符（比如 "Bill Gates"）的變量。

字符串可以是引號中的任意文本。您可以使用單引號或雙引號：

var carname="Volvo XC60";
var carname='Volvo XC60';

2、JavaScript  數字 （Number）類型

JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶：

var x1=34.00;     //使用小數點來寫
var x2=34;         //不使用小數點來寫

極大或極小的數字可以通過科學（指數）計數法來書寫：

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

3、JavaScript 布爾 ( Boolean ) 類型

布爾（邏輯）只能有兩個值：true 或 false。

var x=true;
var y=false;

4、JavaScript  數組 （ Array ）

下面的代碼創建名為 cars 的數組：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 :

var cars=new Array("Saab","Volvo","BMW");

或者 :

var cars=["Saab","Volvo","BMW"];

數組下標是基於零的，所以第一個項目是 [0]，第二個是 [1]，以此類推。

5、JavaScript 對象 （ Object ）

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。

空格和折行無關緊要。聲明可橫跨多行：

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

對象屬性有兩種尋址方式：

name=person.lastname;//Doe
name=person["lastname"];//Doe

 

6、JavaScript   Undefined   和    null  ：

Undefined 這個值表示變量不含有值。

可以通過將變量的值再一次設置為 null 來清空變量。

三、JavaScript 中的數值函數

 1、isNaN（）：判斷一個變量或常量，是否是NaN( not a num 非數值)；
 使用isNaN()判斷時，會嘗試使用Number（）函數進行轉換，如果最終結果能夠轉換數字，則不是NaN,結果為false；
 2、number()函數： 將其他類型的數據，嘗試轉為數值型；
   [字符串類型]
  >>>字符串為純數值字符串，會轉為對應的數字；"111"→111
  >>>字符串為空字符串，會轉為0： " "-> 0
  >>>字符串包含任何其它字符時，都不能轉；"1a"->NaN
 [Boolean類型]
 true->1 false->0
 [Null/Undefined]
 Null->0 Undefined->NaN
 [Object]
 (后續講解)
 3、ParseInt():將字符串轉為整數類型；
  >>>純數值字符串，能轉。"12"->12;"12.9"->12(小數轉化時，直接抹掉小數點，不進行四舍五入)
  >>>空字符串，不能轉。" "->NaN
  >>>包含其它字符的字符串，會截取第一個非數值字符串前的數字部分；
 "123a456"->123;"a123b456"->NaN
  >>>ParseInt()只能轉字符串，轉其它類型，全是NaN.
 [number函數與ParseInt函數的區別]
   1、Number函數可以轉各種數據的類型，ParseInt函數只能轉字符串；
   2、兩者在轉字符串時，結果不完全相同。(詳見上面解釋)
 4、ParseFloat：將字符串轉為數值型；
 轉換規則與ParseInt相同，只是如果有小數，則保留小數點；如果沒有小數，則依然是整數；"12.5"->12.5;"12"->12
 5、typeof：檢測變量的數據類型：
 字符串->String 數值->Number 未定義->Undefined 對象/NULL->object 函數->function
 true/false->Boolean

四、JavaScript  中的輸入和輸出語句

1、prompt（）  彈窗輸入語句

 接受兩部分參數：
 ①輸入框上面的提示內容，可選；
 ②輸入框里面的默認信息，可選；
 當只寫一部分時，表示輸入框上面的提示內容；
 可以定義變量，接受輸入的內容。點擊確定按鈕，變量將被賦值為輸入的內容；點擊取消按鈕，變量將被賦值為null；

 var  name = promopt("請輸入您的姓名"," ");

2、JavaScript 可以通過不同的方式來輸出數據：

• 使用 window.alert() 彈出警告框。
• 使用 document.write() 方法將內容寫到 HTML 文檔中。
• 使用 innerHTML 寫入到 HTML 元素。
• 使用 console.log() 寫入到瀏覽器的控制台。

五、JavaScript  中的運算符

1、算術運算(單目運算符)
+  加、- 減、* 乘、 / 除、 % 取余、++ 自增 、-- 自減

+號：有兩種作用，連接字符串/加法運算。當+兩邊連接數字時，進行加法運算；當+兩邊有任意一邊為字符串時，起連接字符串作用，
鏈接之后的結果為字符串；
除+外，其余符號運算時，會先嘗試將左右兩邊的變量用Number函數轉為數字；
>>>/:結果保留小數點；
>>>++:自增運算時，將變量在原有基礎上+1；
>>>--:自減運算符，將變量在自身基礎上-1；

【a++和++a的異同點】
①相同點：無論a++還是++a，運算完以后，a的值均會+1；
②不同點： a++，先用a的值去運算，再把a+1；
++a，先把a+1，再用a+1以后的值去運算。
eg：量、var a=3，b，c；
b=a++ +2；//先用a運算，b=3+2 再把a+1，a=4；
c=++a +2；//先把a+1，a=5再用a+1以后的值去運算，c=5+2；

2、賦值運算
=   +=  -=   *=   /=  %=
+=：a+=b；相當於a=a+b；但是前者的運算效率要比后者快，所以推薦使用+=的寫法；
3、關系運算
==、 ！=、>、<、>=、<=

>>> 關系運算符，運算之后的結果，只能是Boolean類型；
>>> 判斷一個數字是否處於一個區間，必須用&&鏈接；
a<10 && a>0 √ ; 10>a>0 x
>>> ===:嚴格等於；要求不但類型要相同，值也必須相同；類型不同結果直接為false，類型相同，再進行下一步判斷；
== ：等於。類型相同，同===一樣，類型不同時，會先嘗試用Number將兩邊轉為數字，然后再進行判斷。
但是，有個別特例： Null==false x ；Null==Undefined √
！=：不等、！== 不全等

4、條件運算符(多目運算)
a>b?true:false 

有兩個重要符號： ？ 和 ：
當？前面部分，運算結果為true時，執行：前面的代碼；
當？前面部分，運算結果為false時，執行：后面的代碼；

冒號兩邊可以為數值，則整個式子可用於賦值。Var a= 1<2?1:2
冒號兩邊可以為代碼塊，將直接執行代碼。1<2?alert(1):alert(2);

多目運算符可以多層嵌套。var a = 1<2?alert(1):(1>0?4:5)

5、 位運算符、 邏輯運算符
&、|、~ &&與、||或、！非

&& 兩邊都成立，結果為true

|| 兩邊有任意一個成立，結果為true
6、運算符的優先級
（）小括號最高
！ ++ -- 
* / %
+ -
< > >= <=
== !=
&& //與或同時存在時，&&比|| 高
||
= += -= *= /= 最低的是各種賦值

六、JavaScript  中的條件語句

在 JavaScript 中，我們可使用以下條件語句：

• if 語句 - 只有當指定條件為 true 時，使用該語句來執行代碼
• if...else 語句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
• if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行
• switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

1、If 語句     只有當指定條件為 true 時，該語句才會執行代碼。

if 的（）中的判斷條件，支持的情況：
  ①Boolean：true為真；false為假；
  ②String：空字符串為假
  ③Number：0為假；一切非零數字為真；
  ④null/Undefined/NaN:全為假；
  ⑤object：全為真；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>如果時間早於 20:00，會獲得問候 "Good day"。</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x="";
    var time=new Date().getHours();
    if (time<20){
        x="Good day";
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

2、使用 if....else 語句在條件為 true 時執行代碼，在條件為 false 時執行其他代碼。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>點擊這個按鈕，獲得基於時間的問候。</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x="";
    var time=new Date().getHours();
    if (time<20){
         x="Good day";
     }
    else{
         x="Good evening";
     }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

3、使用 if....else if...else 語句來選擇多個代碼塊之一來執行。

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}
</script>
<p>
這個例子演示了 if..else if...else 語句。
</p>

</body>
</html>

4、JavaScript switch 語句

switch 語句用於基於不同的條件來執行不同的動作。

工作原理：首先設置表達式 n（通常是一個變量）。隨后表達式的值會與結構中的每個 case 的值做比較。如果存在匹配，則與該 case 關聯的代碼塊會被執行。請使用 break 來阻止代碼自動地向下一個 case 運行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>點擊下面的按鈕來顯示今天是周幾：</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x;
    var d=new Date().getDay();
    switch (d){
          case 0:x="今天是星期日";
        break;
         case 1:x="今天是星期一";
        break;
          case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
            break;
          case 4:x="今天是星期四";
        break;
          case 5:x="今天是星期五";
        break;
          case 6:x="今天是星期六";
        break;
　　　　　　default：x="未知錯誤"；
　　　　　break；

     }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

七、JavaScript 中的循環結構

1、【while(){}循環結構的步驟】

 1、聲明循環變量
 2、判斷循環條件
 3、執行循環體操作
 4、更新循環變量
 然后循環執行2-4，直到條件不成立時跳出循環。
 while循環()中的表達式，運算結果可以是多種類型，但是最終都會轉為真假，轉換規則同if結構
 （1）、boolean類型：true為真，false為假
 （2）、string類型：所有非空字符串為真，空字符串為假
 （3）、number類型：一切非零數字為真，零為假
 （4）、null、undefined、NaN：全為假
 （5）、object類型：全為真。

            var num=1;  //聲明循環變量
            while (num<=10){  //判斷循環條件
                document.write(num+"<br />");//執行循環體操作
                num++;  //更新循環變量
            }

 【 while循環與do-while循環的區別:】：

 while循環是先判斷再循環;  

 do-while循環是先執行再判斷,即便是條件不成立,該循環也最少執行一次.

var num=10;
 do{
 document.write(num+"<br />");
 num--;
 }
 while(num>=0);

2、【for(){}循環結構的步驟】

1、for循環有三個表達式：
 ① 聲明循環變量;
 ② 判斷循環條件;
 ③ 更新循環變量;
 三個表達式之間用;分隔開,三個表達式可以省略,但是兩個分號不能省略.
 2、for循環的執行特點:先判斷再執行，和while相同；
 執行順序：1、初始語句 2、執行條件是否符合？ 3、循環體 4、增加增量 ；
 3、for循環三個表達式均可以由多部分組成，第二部分多個判斷條件用&& 、||連接，其他部分可以用，連接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>點擊按鈕循環代碼5次。</p>
<button onclick="myFunction()">點擊這里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x="";
    for (var i=0;i<5;i++){
        x=x + "該數字為 " + i + "<br>";
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

八、JacaScript 中的函數

一、JacaScript 函數：函數是由事件驅動的或者當它被調用時執行的可重復使用的代碼塊。

二、函數的聲明及調用：
 1、函數的標准聲明格式：
 function 函數名（參數一，參數二，...）{
 //函數體代碼
 return 返回值；
 }
 函數的調用：
 ① 直接調用：函數名加（參數一的值，參數二的值,.......)；

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>本例調用的函數會執行一個計算，然后返回結果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

 ② 事件調用：HTML標簽中，使用事件名="函數名（）"
  <button onclick="saySth('hah ha','yellow')">點擊按鈕，打印內容</button>

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>點擊這個按鈕，來調用帶參數的函數。</p>
<button onclick="myFunction('Harry Potter','Wizard')">點擊這里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

2、函數的注意事項：
 ① 函數必須要符合小駝峰法則！！！（首字母小寫，之后每個人單詞首字母大寫）
 ② 函數名后面的（）中，可以有參數，也可以沒有參數。分別稱為有參函數和無參函數；
 ③ 聲明函數時的參數列表，稱為型參列表，形式參數。（變量的名字）
 function saySth(str,color){}
 調用函數時的參數列表，稱為實參列表，實際參數。（變量的賦值）
 saySth("哈哈哈","red");
 ④ 函數的形參列表個數和實參列表個數沒有實際關系。
 函數參數的個數，取決於實參列表。
 如果實參列表的個數<形參列表,則未賦值的形參，將為Undefined。
 ⑤ 函數可以有返回值，使用return返回結果；
 調回函數時，可以使用一個變量接受函數的返回結果。如果函數沒有返回值，則接受的結果為undefined；
 function func(){
   return = "hahaha";
 }
  var num = func()；//num = "hahaha"
 ⑥ 函數變量的作用域：
 在函數中，使用var聲明的變量，為局部變量，只能在函數內部訪問；
 不使用var聲明的變量，為全局變量，在函數外邊也能訪問；
 函數的形象列表，默認為函數的局部變量，只能在函數內部使用；
 ⑦ 函數的聲明與函數的調用，沒有先后之分。即，可以在聲明函數之前，調用函數。
 func（）；//聲明func之前調用也是可以的。
 function func(){}；

【匿名函數的聲明和使用】：

1、聲明一個匿名函數直接賦值給某一個事件；
     window.onload = function(){} ；
2、使用匿名函數表達式；將匿名函數，賦值給一個變量。
 聲明：var func = function(){}
 調用：func()；
 注意：使用匿名函數表達時，函數的調用語句，必須放在函數聲明語句之后！！！（與普通函數的區別！！！）
3、自執行函數
 ① !function(){}();//可以使用多種運算符開頭，單一版用！；
 !function(形參列表){}(實參列表)；
 ② (function(){}());//使用()將函數及函數后的括號包起來；
 ③ (function(){})();//使用()值包裹函數部分；
 三種寫法的特點：
 ① 第一種使用!開頭，結構清晰，不容易混亂，推薦使用；
 ② 第二種寫法能夠表明匿名函數與調用的()為一個整體，官方推薦使用；
 ③ 第三種無法表明函數之后的()的整體性，不推薦使用；

九、JavaScript  中的 BOM 

BOM:瀏覽器對象模型（Browser Object Model (BOM)，瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。

由於現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。

1、【location對象】：取到瀏覽器的URL地址信息。

 使用location提供的方法跳轉頁面的方式:

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>點擊這個按鈕，實現頁面的跳轉。</p>
<button onclick="assign()">assign</button>
             <button onclick="replace()">replace</button>
             <button onclick="reload()">repload</button>
<script>
　　　　　　　　   //加載新的文檔，加載之后，可以回退。
                
                function assign(){
                    location.assign("http://www.baidu.com");
                }
                
                //使用新的文檔替換當前文檔。替換以后，不能回退。
                
                function replace(){
                    location.replace("http://www.baidu.com");
                }
                function reload(){
                    /*從新加載當前文檔。刷新頁面
                     *reload():在本地刷新當前頁面，相當於F5
                     *reload(true):強制刷新，從服務器端從新加載頁面，相當於ctrl+F5
                     */
                    location.reload();
                }
</script>

</body>
</html>

2、【history瀏覽歷史】

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>點擊這個按鈕，實現頁面的歷史記錄。</p>
　　　　　　　　<button onclick="back()">后退一步</button>
              <button onclick="forward()">前進一步</button>
              <button onclick="go()"></button>
<script>
　　　　　　　　　function back(){
                    history.back();//后退按鈕
                }
                function forward(){
                    history.forward();//前進按鈕
                }
                function go(){
                    /* 跳轉到瀏覽歷史的任意頁面
                     * 0表示當前頁面-1表示后一個頁面（back），1表示前一頁（forward）
                     */
                    history.go();//
                }
</script>

</body>
</html>

3、【window對象】：在window對象中的所有方法和屬性，均可以省略window關鍵字；window.alert();--> alert(); √

>>>window對象的常用方法：

 1、alert()：彈出一個警告提示框：
 2、prompt()：彈窗接受用戶的輸入：
 3、confirm():彈出帶有"確定""取消"按鈕的對話框，點擊按鈕返回true/false
 4、close():關閉當前瀏覽器窗口。在個別瀏覽器中，只能關閉在當前腳本新打開的頁面(使用超鏈接、window.open()等方式打開的頁面)
 5、打開一個新窗口
      參數一：新窗口的地址；
      參數二：新窗口的名字，並沒有什么作用；
      參數三：新窗口的各種屬性設置，"屬性1=值1，屬性2=值2,屬性3=值3，屬性4=值4"；
 6、setTimeout：設置延時執行，只會執行一次；
      setInterval：設置定時器，每隔n毫秒執行一次；
      接受兩個參數：需要執行的function、毫秒數；

 7、clearTimeout：清除延時器；
    clearInterval：清除定時器；
    * 使用方法:設置延時器或定時器時，可以使用變量接受定時器ID；
    * var id = setInterval；
    * 調用clearIntertval，將id傳入，即可清除對應的定時器；
    * clearIntertval(id);

 

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
<p>點擊這個按鈕，實現window對象方法。</p>

　　　　　　　　　　　　<button onclick="close()">window.close</button>
                    <button onclick="lopen()">window.open</button>   
                    <button onclick="setTimeout1()">setTimeout   設置延時器</button>
                    <button onclick="setInterval1()">setInterval 設置定時器</button>
                    <button onclick="clearsetInterval1()">清除延時器</button>

<script>
　　　　　　　　　function close(){
                    window.close();
                }
                function lopen(){
                    window.open("http://www.baidu.com","baidu","width=1000px,height=600px,left=100px,top=50px");
                }
                
                
                var  setTimeoutID = 0;
                function setTimeout1(){
                    
                    //setTimeout(function(){console.log("延時器成功執行");},3000);
                    
                        setTimeoutID = setTimeout(lopen,3000);
                        
                }    
                function clearTimeout1(){
                    
                    clearTimeout(setTimeoutID);
                    
                }</script>

</body>
</html>

十、JavaScript中的——DOM

一、HTML DOM (文檔對象模型)：

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹：

HTML DOM 樹：

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

• JavaScript 能夠改變頁面中的所有 HTML 元素
• JavaScript 能夠改變頁面中的所有 HTML 屬性
• JavaScript 能夠改變頁面中的所有 CSS 樣式
• JavaScript 能夠對頁面中的所有事件做出反應

【DOM樹節點】
 DOM節點分為三大類： 元素節點、 屬性節點、 文本節點；
 文本節點、屬性節點屬於元素節點的子節點。操作時，均需要先取到元素節點，再操作子節點；
 可以使用getElement系列方法，取到元素節點。
【查看元素節點】
      getElementById：通過id取到唯一節點。如果ID重名，只能取到第一個。     例如：   var x=document.getElementById("xxx");
      getElementsByName()： 通過name屬性 。　　　　　　　　　　　　　　例如：   var x=document.getElementsByClassName("xxx");
      getElementsByTagName()： 通過標簽名 。　　　　　　　　　　　　　   例如：   var y=document.getElementsByTagName("p");

二、JavaScript HTML DOM - 改變 HTML：

1、改變 HTML 輸出流：

JavaScript 能夠創建動態的 HTML 內容：

今天的日期是： Sun Oct 15 2017 22:53:40 GMT+0800 (中國標准時間)

在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

2、改變 HTML 內容

修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById( id).innerHTML= 新的 HTML

本例改變了 <p>元素的內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通過腳本修改文本。</p>

</body>
</html>

3、改變 HTML 屬性

如需改變 HTML 元素的屬性，請使用這個語法：

document.getElementById( id). attribute=新屬性值

本例改變了 <img> 元素的 src 屬性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原圖片為 smiley.gif,腳本將圖片修改為 landscape.jpg</p>

</body>
</html>

三、JavaScript HTML DOM - 改變CSS

1、改變 HTML 樣式

如需改變 HTML 元素的樣式，請使用這個語法：

document.getElementById( id).style. property= 新樣式

下面的例子會改變 <p> 元素的樣式：

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>
</html>

2、使用事件

HTML DOM 允許我們通過觸發事件來執行代碼。

比如以下事件：

• 元素被點擊。
• 頁面加載完成。
• 輸入框被修改。
• ……

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<h1 id="id1">我的標題 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
點我!</button>

</body>
</html>

四、JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。

我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。

如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：

onclick= JavaScript

HTML 事件的例子：

• 當用戶點擊鼠標時
• 當網頁已加載時
• 當圖像已加載時
• 當鼠標移動到元素上時
• 當輸入字段被改變時
• 當提交 HTML 表單時
• 當用戶觸發按鍵時

 1、HTML 事件屬性

 如需向 HTML 元素分配 事件，您可以使用事件屬性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button onclick="displayDate()">點這里</button>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>

2、使用 HTML DOM 來分配事件

HTML DOM 允許您使用 JavaScript 來向 HTML 元素分配事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
</head>
<body>

<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button id="myBtn">點這里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>

3、onload 和 onunload 事件

      onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

      onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。

      onload 和 onunload 事件可用於處理 cookie。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){ alert("Cookies 可用") } else{ alert("Cookies 不可用") } } </script> <p>彈窗-提示瀏覽器 cookie 是否可用。</p> </body> </html>

4、onchange 事件

    onchange 事件常結合對輸入字段的驗證來使用。

    下面是一個如何使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
<script>
function myFunction(){
    var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 輸入你的名字: <input type="text" id="fname" onchange="myFunction()"> <p>當你離開輸入框后，函數將被觸發，將小寫字母轉為大寫字母。</p> </body> </html>

五、JavaScript HTML DOM EventListener

一、addEventListener() 方法：在用戶點擊按鈕時觸發監聽事件。

addEventListener() 方法用於向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。

你可以向一個元素添加多個事件句柄。

你可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。

你可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。

addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。

當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以添加事件監聽。

你可以使用 removeEventListener() 方法來移除事件的監聽。

二、語法

element.addEventListener( event, function, useCapture);

第一個參數是事件的類型 (如 "click" 或 "mousedown").

第二個參數是事件觸發后調用的函數。

第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。

三、向原元素添加事件句柄

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); }); </script> </body> </html>

四、向同一個元素中添加多個事件句柄

addEventListener() 方法允許向同個元素添加多個事件，且不會覆蓋已存在的事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>該實例使用 addEventListener() 方法向同個按鈕中添加兩個點擊事件。</p>
<button id="myBtn">點我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); function myFunction() { alert ("Hello World!") } function someOtherFunction() { alert ("函數已執行!") } </script> </body> </html>

五、向 Window 對象添加事件句柄

addEventListener() 方法允許你在 HTML DOM 對象添加事件監聽， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象。或者其他支出的事件對象如: xmlHttpRequest 對象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>實例在 window 對象中使用 addEventListener() 方法。</p>
<p>嘗試重置瀏覽器的窗口觸發 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = Math.random(); }); </script> </body> </html>

六、傳遞參數

當傳遞參數值時，使用"匿名函數"調用帶參數的函數：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>實例演示了在使用 addEventListener() 方法時如何傳遞參數。</p>
<p>點擊按鈕執行計算。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7; document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; } </script> </body> </html>

 七、事件捕獲和事件冒泡：

1、事件冒泡
 當某DOM元素觸發一種事件時，會從當前節點開始，逐級往上觸發其祖先節點的同類型事件，直到DOM根節點；
 >>>什么情況下會產生事件冒泡？
 ①DOM0模型綁定事件，全部都是冒泡；
 ②IE8之前，使用attachEvent()綁定的事件，全部是冒泡；
 ③其他瀏覽器，使用addEventLinstener()添加事件，當第三個參數省略或者為false時，為事件冒泡；

 2、事件捕獲：當某DOM元素觸發一種事件時，會從文檔根節點開始，逐漸向下觸發其祖先節點的同類型事件，直到 該節點自身；
 >>>什么情況下會產生事件捕獲？
 ①使用addEventLinstener()添加事件，當第三個參數為true時，為事件捕獲；

3、addEventListener() 方法可以指定 "useCapture" 參數來設置傳遞類型：

     addEventListener( event,  function,  useCapture);

     默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    background-color: coral; border: 1px solid; padding: 50px; } </style> </head> <body> <p>實例演示了在添加不同事件監聽時，冒泡與捕獲的不同。</p> <div id="myDiv"> <p id="myP">點擊段落，我是冒泡。</p> </div><br> <div id="myDiv2"> <p id="myP2">點擊段落，我是捕獲。 </p> </div> <script> document.getElementById("myP").addEventListener("click", function() { alert("你點擊了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert(" 你點擊了 DIV 元素 !"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你點擊了 P2 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你點擊了 DIV2 元素 !"); }, true); </script> </body> </html>

六、removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    background-color: coral; border: 1px solid; padding: 50px; } </style> </head> <body> <p>實例演示了在添加不同事件監聽時，冒泡與捕獲的不同。</p> <div id="myDiv"> <p id="myP">點擊段落，我是冒泡。</p> </div><br> <div id="myDiv2"> <p id="myP2">點擊段落，我是捕獲。 </p> </div> <script> document.getElementById("myP").addEventListener("click", function() { alert("你點擊了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert(" 你點擊了 DIV 元素 !"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你點擊了 P2 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你點擊了 DIV2 元素 !"); }, true); </script> </body> </html>

七、JavaScript HTML DOM 元素(節點)

1、創建新的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是一個新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>

這段代碼創建新的<p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必須首先創建文本節點。這段代碼創建了一個文本節點：

var node=document.createTextNode("這是一個新段落。");

然后您必須向 <p> 元素追加這個文本節點：

para.appendChild(node);

最后您必須向一個已有的元素追加這個新元素。

這段代碼找到一個已有的元素：

var element=document.getElementById("div1");

以下代碼在已存在的元素后添加新元素：

element.appendChild(para);

2、刪除已有的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="div1">
    <p id="p1">這是一個段落。</p>
    <p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1"); parent.removeChild(child); </script> </body> </html>

這個 HTML 文檔含有擁有兩個子節點（兩個 <p> 元素）的 <div> 元素：

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>

找到 id="div1" 的元素：

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

從父元素中刪除子元素：

parent.removeChild(child);

十一、JavaScript中的數組-Array

　　 數組是在內容空間中連續存儲的一組有序數據的集合。 元素在數組中的順序，成為下標。可以使用下標訪問數組的每個元素。　　

1、創建一個數組    

① 使用字面量聲明：var arr = [];
    在JS中同一數組可以存儲各種數據類型。
    例如：var arr = [1,"jianghao",true,{},null,func];

② 使用new關鍵字聲明：var arr = new Array(參數);
    >>>參數可以是：
    a.參數省略表示創建一個空數組；
    b.參數只放一個整數表示聲明一個length為指定長度的數組，但是這個length可以隨時可變可追加；
    c.參數為逗號分隔的多個數值，表示數組的多個值。
    new Array(1,2,3) == [1,2,3]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script>
var i;
var mycars = new Array(); mycars[0] = "Jack"; mycars[1] = "Alice"; mycars[2] = "Tom"; for (i=0;i<mycars.length;i++){ document.write(mycars[i] + "<br />"); } </script> </body> </html>

二、數組中的常用方法

　  ①  join():將數組用指定分隔符鏈接為字符串。單參數為空時，默認逗號分隔。

　  ②  contact():【原數組不會被改變】 將數組，與兩個或多個數組的值鏈接為新數組；　

　  ③  push():數組最后增加一個，unshift()數組開頭增加一個。-返回新數組的長度
　　    pop() 數組最后刪除一個，shift() 數組開頭刪除一個。-返回被刪除的值

      ④  reverse():【原數組被改變】,將數組反轉，倒序輸出；

      ⑤  slice():【原數組不會被改變】 截取數組中的某一部分，並返回截取的新數組；

      ⑥  sort()：【原數組被改變】將數組進行排列

      ⑦   indexof(value,index):返回數組中第一個value值所在的下標，如果沒有找到返回-1；

      ⑧   forEach():專門用於循環遍歷數組。接收一個回調函數，回調函數接收兩個參數，第一個參數為該數組的 每一項值，第二個參數為下標；

      ⑨ map():數組映射，使用方式與foreash()使用方式相同。不同的是，map可以有返回值，表示將原數組的每個值

      ....................簡單介紹幾個常用的，如有遺漏請見諒。

      

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script>
　　　　　　　var arr = new Array(1,2,3,4);
            delete  arr[1]； arr.pop(); arr.shift(); arr.unshift(); arr.unshift(); var str = arr.join("-"); var arr1 =arr.concat(["hah","heh","heihei"]); arr.reverse(); arr.sort(function(a,b){ if(a>b){ return 1; }else if(a<b){ return -1; }else{ return 0; } 　　　　　　 return a-b;//升序排列  }); 　　var index = arr.indexOf(6,2); arr.forEach(function(item,index){ console.log(item); }); var arr1 = arr.map(function(item,index){ console.log(item); return item - 1 ; }); </script>

2、創建一個新方法

原型是JavaScript全局構造函數。它可以構建新Javascript對象的屬性和方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p id="demo">單擊按鈕創建一個數組,調用 ucase（）方法, 並顯示結果。</p>
<button onclick="myFunction()">點我</button>
<script>
Array.prototype.myUcase=function(){ for (i=0;i<this.length;i++){ this[i]=this[i].toUpperCase(); } } function myFunction(){ var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.myUcase(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>

三、結束語

       由於時間關系，內容可能不夠完整，還有許多重點的干貨沒能及時整理，希望各位見諒，一定抽出時間補充完整。