全面解讀JavaScript入門到進階，100%基礎知識掌握！

阿新 • • 發佈：2017-10-16

isnan cookies dom 事件 document 動態情況 blue tint mat

一、JavaScript 簡介

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

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

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

二、JavaScript 主要實現功能

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

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

2、JavaScript：對事件的反應：

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中變量聲明的寫法：

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入門到進階，100%基礎知識掌握！

isnan cookies dom 事件 document 動態情況 blue tint mat 一、JavaScript 簡介 1、JavaScript 是 Web 的編程語言，是前端開發必須掌握的三門語言之一，即： HTML 定義了網頁的內容 CSS

全面解讀JavaScript入門到進階，100%基礎知識掌握！

一、JavaScript 簡介

二、JavaScript 主要實現功能

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

一、JavaScript中的變量:

1、JS中變量聲明的寫法：

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

二、JavaScript中的數據類型:

三、JavaScript 中的數值函數

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

五、JavaScript 中的運算符

六、JavaScript 中的條件語句

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

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

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

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

4、JavaScript switch 語句

七、JavaScript 中的循環結構

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

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

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

八、JacaScript 中的函數

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

九、JavaScript 中的 BOM

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

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

2、【history瀏覽歷史】

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

十、JavaScript中的——DOM

三、結束語：

相關推薦

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