前端開發之JavaScript篇_ZenDei技術網路在線

一、JavaScript介紹前端三劍客之JavaScript，簡稱js，可能是這三個裡面最難的一個了。很早以前，市面上流通著三種js版本，為了統一，ECMA（歐洲電腦製造協會）定義了規範的版本，即EcmaScript。事實上ECMAScript只是JavaScript的一部分，完整的JavaS ...

一、JavaScript介紹

前端三劍客之JavaScript，簡稱js，可能是這三個裡面最難的一個了。很早以前，市面上流通著三種js版本，為了統一，ECMA（歐洲電腦製造協會）定義了規範的版本，即EcmaScript。

事實上ECMAScript只是JavaScript的一部分，完整的JavaScript是由以下三個部分組成的：

　　核心（ECMAScript）

　　文檔對象模型（DOM）Document object model

　　瀏覽器對象模型（BOM）Broswer object model

與html和css相比，js是一門成熟的編程語言，而且是前端唯一的一門編程語言。js的很多代碼結構和Java相似，但是在語法上又沒有很強制的要求，在使用中你會慢慢發現，這個東西很難會報錯。既然是一門編程語言，就要從變數，數據類型，運算符，流程式控制制語句，函數（並不是所有的語言都有函數的概念），類和對象（js沒有“類”）這些方面來入手學習。

二、ECMAScript（核心）

首先，js的註釋和Java一樣

　　//單行註釋

　　/*多行註釋*/

js的代碼段是用大括弧分割的，語句與語句之間用分號隔開,沒有分號的話預設以換行符為分隔符。

1.變數

（1）聲明變數時有var關鍵字，不用var關鍵字的話是全局變數，除非有需要，否則不建議用全局變數，會拖慢效率；

（2）變數要先聲明，再定義，

　　var i;

　　i=10;

　　或者簡寫成var i=10;（一般都這樣處理）

（3）js還支持一行聲明多個變數，並且可以是不同類型

　　var i=10,j="zhang";

（4）如果聲明一個變數x,卻不給他賦值，列印的時候竟然也不報錯，而是列印undefined

（5）變數的命名規範，這並不是某一種語言特有的，只要是變數，就會涉及這個問題，推薦一個匈牙利類型標記法：在變數名前加一個小寫字母說明該變數的類型，後面的名字用駝峰命名法。

（6）變數命名：首字母必須是字母、下劃線或者$三個中的一個，其餘的可以是下劃線、美元符號或者任何字母，數字。要避開關鍵字：

2.數據類型

js中沒有print，我們可以用alert（彈窗）或者console.log()（在瀏覽器的控制台列印）列印我們想要的結果

查看數據類型用typeof命令

var x=10;
console.log(typeof(x));

（1）js中有的數據類型有：

　　　　基本數據類型：Number（數值），String（字元串），Boolean（布爾值），Null，Undefined

　　　　引用數據類型：object

　　　　js中並沒有列表，元組，字典這種數據類型，列表和元組是以數組對象實現的

（2）Number（數字類型）

不區分整型和浮點型；

（3）String（字元串類型）

由unicode字元、數字和標點符號組成的序列，特殊字元要加上反斜杠轉義。

（4）Boolean（布爾類型）

布爾類型僅有兩個值，true和false，在實際運算中，true=1，false=0

這個用在if判斷語句後面，事實上if語句後面可以是任意數據類型，只要有布爾值就行了，這一點js和python一樣，但是其他語言中，if後面必須是表達式

（5）null和undefined類型

undefined類型只有一個值，就是undefined，當函數沒有明確返回值，或者聲明的變數沒有初識化的時候，就會產生這個值。

而null常出現在找不到對象的時候。

3.運算符

js中的運算符和python中基本一樣，說一說不一樣的幾個：

（1）i++和++i

這個學過c++的一定知道，沒什麼可說的，應該是為了考試才出的這種東西吧

　　i++是先賦值再計算

　　++i是先計算再賦值

（2）"==="

首先在python中，如果這樣一條語句

print(2=="2")

列印的結果一定是false，這是因為Python是一門強類型語言，不會自動轉換變數的類型，但是，js是一種弱類型語言，在js中列印這個語句，結果會是true，因為js自動把數值類型的2轉換成字元串類型的“2”，那麼問題就來了，如果在js中，就是判斷類型是否一樣，不要自動轉換，就用到了這個運算符“===”

在js的number類型中，還要一種數據類型是NaN類型，這是當遇到字元串轉換成數字無效時得到的結果。比如：

var s="hello";
var ret2=+s;
console.log(ret2)

這樣就會得到一個NaN

4.流程式控制制

（1）if條件語句

與Python不同的是，js中沒有elif這種寫法，多分支只能用else if

if (表達式){
    執行語句
}
else if(表達式){
    執行語句
}
else{
    執行語句
}

（2）switch-case語句

switch (表達式){
    case 值1:語句1;break;
    case 值2:語句2;break;
    case 值3:語句3;break;
    default:語句4;
}

註意：值1，值2。。。。這些是確定的值，default是上述值都不是表達式的值的時候執行的語句；

　　這個break是必要的，如果沒有break，這些語句將都會執行

（3）while迴圈和for迴圈

while迴圈和Python一樣，有三個要素：初始變數，判斷條件，變數自加。就不多說了

說一下for迴圈

for迴圈方式一：條件迴圈（最常用）

for(var i=0;i<10;i++){
    console.log("i")
}

for迴圈方式二：遍歷迴圈

var arr=["a","b","c"];
for (var i in arr){
    console.log(i)
}

這個結果列印的是索引值0,1,2

想取到數組裡的值，可以用arr[i],關於數組對象，一會兒會專門說

這是數組，js中沒有字典這種數據類型，但是有一種類似的寫法和用法

var info={"a":123,"b":234,"c":345};
for (var i in info){
    console.log(i)
}

這種情況下，拿到的i就是“字典”中的“key”:a,b,c,取值同樣是info[i]

5.對象

在我們學習了面向對象之後，應該有這種思想，見到“對象”這兩個字，就馬上想到對象有屬性和方法。

（1）字元串對象

　　創建方式有兩種：　　　　　　　　

　　　　　　　　變數=“字元串”；　　var str1="hello world"

　　　　　　　　字元串對象名稱=new String（字元串） var str1=new String("hello world")

　　字元串對象就一個屬性，length屬性

方法：s為字元串對象

s.toLowerCase()　　　　-----轉成小寫

s.toUpperCase()　　　　-----轉成大寫

s.trim()　　　　　　　　 ------去除字元串兩邊空格

s.charAt()　　　　　　　------獲取指定位置字元，括弧里為要獲取的字元索引

s.indexOf()　　　　　　 -------查詢指定字元的索引位置，括弧里為要查找的字元

s.lastIndexOf()　　　　　-------跟上面這條功能一樣，但是是反著找

s.match()　　　　　　　 -------返回匹配字元串的數組，沒有匹配到返回null

s.seach()　　　　　　　 -------返回匹配到的字元串首字元的位置索引，匹配不到返回-1

s.substr(start,length)　　　　截取指定長度字元串，start是開始位置的索引值，length表示長度

s.substring(start,end)　　　　截取字元串，start是開始位置索引，end是結束位置索引，取之間的字元串

s.slice(start,end)　　　　　　切片字元串

s.replace(oldstr,newstr)　　　　替換字元串，（舊的，新的）

s.split()　　　　　　　　　　分割字元串，結果放到一個數組中

s.concat(addstr)　　　　　　　拼接字元串，括弧里為要拼接的字元串

演示：

s="hello";
    console.log(s.toLowerCase());       //hello
    console.log(s.toUpperCase());       //HELLO
    console.log(s.charAt(2));           //l
    console.log(s.indexOf("o"));        //4
    console.log(s.lastIndexOf("o"));    //4
    console.log(s.match("lo"));         //[object Array]["lo"]
    console.log(s.match("lol"));        //null
    console.log(s.search("lo"));        //3
    console.log(s.search("lol"));       //-1
    console.log(s.substr(1,3));         //ell
    console.log(s.substring(1,3));      //el
    console.log(s.slice(1,3)) ;         //el
    console.log(s.replace("ell","o")) ; //hoo
    console.log(s.split("e")) ;         //[object Array]["h", "llo"]
    console.log(s.concat("world")) ;    //helloworld

（2）數組對象（array對象）

創建數組的三種方式：　　

　　var arr=[1,2,3];
var arr=new Array[1,2,3];
var arr=new Array(3);

　　　　　　arr[0]=1;

　　　　　　arr[1]=2;

　　　　　　arr[2]=3;

還可以創建二維數組，類似一個列表，arr[ ] [ ]，第一個索引為行，第二個索引為列

join方法：

　　在Python中的join方法的用法是這樣的：　　　　

s1="hello"
s2="world"
s3="-".join([s1,s2])
print(s3)           #hello-world

　　在js的數組中正好反過來，

console.log(["hello","world"].join("-"))    //hello-world

reverse方法和sort方法：

　　都是對數組進行排序的，reverse是顛倒順序，sort是按首字母的ascii碼表位置排序

slice方法：

　　對數組進行切片操作，參數為開始位置和結束位置的索引值

splice方法：

　　刪除子數組，有幾個參數

　　arr.splice(start,deleteCount,value)

　　start代表開始位置（從開始位置後面開始刪），deleteCount 表示刪除數組元素的個數，value 表示在刪除位置插入的數組元素（可省略）

push和pop方法：

　　在數組的最後添加和刪除元素

unshift和shift方法：

　　在數組開始位置添加和刪除元素

（3）時間對象

　　創建時間對象：var timer = new Date()

獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完整年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)


//設置日期和時間
//setDate(day_of_month)       設置日
//setMonth (month)                 設置月
//setFullYear (year)               設置年
//setHours (hour)         設置小時
//setMinutes (minute)     設置分鐘
//setSeconds (second)     設置秒
//setMillliseconds (ms)       設置毫秒(0-999)
//setTime (allms)     設置累計毫秒(從1970/1/1午夜)

var x=new Date();
x.setFullYear (1997);    //設置年1997
x.setMonth(7);        //設置月7
x.setDate(1);        //設置日1
x.setHours(5);        //設置小時5
x.setMinutes(12);    //設置分鐘12
x.setSeconds(54);    //設置秒54
x.setMilliseconds(230);        //設置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5點12分54秒

x.setTime(870409430000); //設置累計毫秒數
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12點23分50秒

時間對象

（4）math對象，就是把內置函數封裝到math對象中，使用時需要用Math來調用方法

abs(x)    返回數的絕對值。
exp(x)    返回 e 的指數。
floor(x)對數進行下舍入。
log(x)    返回數的自然對數（底為e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入為最接近的整數。
sin(x)    返回數的正弦。
sqrt(x)    返回數的平方根。
tan(x)    返回角的正切。

（5）函數對象（重點）

    //定義一個函數
    function 函數名(參數) {
        函數體
    }
    
    //調用函數
    函數名()

註意：js中函數的調用可以在定義之前，這點和Python不同，Python是一行一行的執行，而js是先編譯一遍，再去執行

關於函數的參數：

　　在函數內部有一個arguments對象，這個對象里包含了函數調用時傳的參數

    function add() {
        console.log(arguments);
        var sum=0;
        for (var i=0;i<arguments.length;i++){
           sum+=arguments[i] ;
        }
        console.log(sum);
    }

    add(1,2,3,5,7);
    //[object Arguments]{0: 1, 1: 2, 2: 3, 3: 5, 4: 7, length: 5}
    //18

js中也有匿名函數，在後面事件綁定的時候會經常用到

三、BOM對象（瀏覽器對象）

1.windows對象

　　在瀏覽器中，每個打開的網頁是一個視窗，有三種方法實現彈出框：

　　（1）alert(123) 　　　　在視窗中彈出“123”，點擊確定消失

　　（2）var ret=confirm('zhang');

　　　　　　console.log(ret);　　　　在視窗中彈出“zhang“，有確定和取消兩個按鈕，點擊確定，會在後臺返回一個true，點擊取消，會返回一個false

　　（3）var ret=prompt("input a number")　　在視窗彈出一個輸入框，同樣可以通過一個變數來接收用戶輸入的內容

2.setInterval() 和 clearInterval()

setInterval()是按照指定的時間周期（毫秒為單位）來連續調用函數或者計算表達式，第一個參數為函數，第二個參數為時間間隔

clearInterval()是取消由setInterval()設置的操作，這個的參數為setInterval()的返回值

示例：在一個input框右面有兩個按鈕，點擊開始就在框中每隔1秒中列印一次當前時間，點擊停止就停止刷新

<body>
    <input type="text">
    <button class="start">開始</button>
    <button class="end">停止</button>
<script>
    ele_start=document.getElementsByClassName("start")[0];//開始按鈕
    ele_end=document.getElementsByClassName("end")[0];    //停止按鈕
    function foo() {
        var timer=new Date().toString();
        var ele=document.getElementsByTagName("input")[0];
        ele.value=timer.slice(4,25);//是框內顯示最適合查看代碼效果的部分
    }

    var ID;//定義一個全局變數，用於接收返回值
    ele_start.onclick=function () {
        if (ID==undefined){             //為瞭解決第二次點擊開始的時候，代碼不執行的bug
            foo();                      //為了實現一點擊開始，馬上就能出現時間的效果
        ID=setInterval(foo,1000);
        }

    }
    ele_end.onclick = function () {
        clearInterval(ID);
        ID=undefined;   //清除定時器後再給id重新賦值
    }
</script>
</body>

View Code

3.setTimeout() 和 clearTimeout()

這個是在指定的時間後調用函數或計算表達式，用法和上面那兩個一樣。區別是這個只會執行一次。

四、DOM對象 這才是最大的重點

在DOM中，所有對象都是節點對象，其中

　　document對象是：整個html文檔

　　element對象是指：html中的任何一個標簽都是一個element對象

　　想要對標簽執行操作需要兩步：查找標簽和操作標簽

1.查找標簽

　　（1）直接查找

    document.getElementsByClassName("classname");//根據class查找標簽
    document.getElementsByTagName("elementname");//根據標簽名查找標簽
    document.getElementById("idname");           //根據ID名查找標簽
    document.getElementsByName("name");          //根據name屬性查找標簽

這四種方法中，只有 document.getElementById("idname")是找到一個標簽，其他三種都是找到多個，將結果放到一個數組中，可以通過索引分別取到

　　（2）通過節點屬性查找

var ele=document.getElementsByClassName("start")[0];
    ele.parentElement;//    查找父節點
    ele.children;     //    查找所有子標簽
    ele.firstElementChild;  //查找第一個子標簽元素
    ele.lastElementChild;   //查找最後一個子標簽元素
    ele.nextElementSibling; //查找下一個兄弟標簽
    ele.previousElementSibling;//查找上一個兄弟標簽

需要註意的是，沒有直接的屬性可以查找到所有的兄弟標簽，如果想在DOM中找到所有子標簽，可以通過遍歷操作標簽的父標簽的所有子標簽，然後用if條件判斷排除當前操作標簽的方法。

2.事件綁定的方式

方式一：

<body>
    <div>
        <button onclick="foo()">點擊</button>
    </div>
<script>
    function foo() {
        alert(123)
    }
</script>
</body>

這種方式，js代碼和html代碼雜糅在一起，耦合性太強了

方式二：

<body>
    <div>
        <button>點擊</button>
    </div>
<script>
    ele_button=document.getElementsByTagName("button")[0];
    ele_button.onclick=function () {
        alert(123)
    }
</script>
</body>

但是這種方法會有一個問題：js代碼會在頁面出現的時候就已經載入完了，如果後面有新添加的標簽，就不能綁定這個事件了，因為js代碼已經載入過一遍，有幾個綁定事件的標簽就已經確定了，這個問題在jQuery中可以很方便解決，在DOM對象中，有兩種解決辦法可供參考：

　　　　1.把標簽綁定的事件寫到函數中，即第一種綁定事件的方式

　　　　2.在添加標簽的代碼中，再寫一遍事件綁定函數

如果上面這點沒看明白的話，可能你對查找到的標簽是個數組這件事還不太明白，再寫一個例子：

<body>
    <div>
        <button>添加</button>
        <button>刪除</button>
        <button>編輯</button>
    </div>
<script>
    eles_button=document.getElementsByTagName("button");
    //此時eles_button並不是一個標簽了，而是有三個標簽的集合
    //給每個標簽綁定事件就要通過迴圈遍歷這個數組來拿到每個標簽
    for(var i=0;i<eles_button.length;i++){
        eles_button[i].onclick=function () {
        alert(123)
        }
    }
</script>
</body>

通過這個例子再說明上面的問題，在綁定事件的時候，找標簽的過程就已經完成了，只找到了三個標簽，但是我們新添加一個button後，代碼不會再次重新刷新，所以新添加的這個button並沒有綁定事件。

3.對標簽操作

　　（1）對class操作　　　　

　　 ele.classList.add("hide")       //為標簽添加class
    ele.classList.remove("hide")    //為標簽移除class

練習：左側菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .left{
            width: 20%;
            height: 800px;
            background: grey;
            float: left;
        }
        .right{
            width:80%;
            height:800px;
            background: navajowhite;
            float: left;
        }
        .title{
            background: purple;
            margin-top: 10px;
        }
        ul{
            background: green;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="left">
            <div class="menu">
                <div class="title">菜單一</div>
                    <ul>
                        <li>111</li>
                        <li>111</li>
                        <li>111</li>
                    </ul>
            </div>

            <div class="menu">
            <div class="title">菜單二</div>
            <ul class="hide">
                <li>222</li>
                <li>222</li>
                <li>222</li>
            </ul>
            </div>

        <div class="menu ">
            <div class="title">菜單三</div>
            <ul class="hide">
                <li>333</li>
                <li>333</li>
                <li>333</li>
            </ul>
        </div>
    </div>

    <div class="right"></div>

    <script>
//        查找標簽
        var eles_title=document.getElementsByClassName("title");
        for (var i=0;i<eles_title.length;i++){
            eles_title[i].onclick=function () {
                this.nextElementSibling.classList.remove("hide");   //this就是觸發事件的標簽
                var eles_child=this.parentElement.parentElement.children;
                for (var j=0;j<eles_child.length;j++){
                    if(eles_child[j].firstElementChild!=this) {
                        eles_child[j].lastElementChild.classList.add("hide")//添加hide屬性，就把這個標簽隱藏了
                    }
                }
            }
        }
    </script>
</body>
</html>

View Code

4.節點操作

　　ele.createElement()         //創建一個節點,括弧里是標簽名
    ele.removeChild()           //父標簽刪除一個子節點，括弧里是標簽對象
    ele.replaceChild()          //替換標簽，ele是父標簽，括弧里依次是舊的標簽對象，新的標簽對象
    ele.appendChild()           //父標簽添加子標簽

這裡單獨說一下複製標簽：cloneNode

<script>
    var ele_copy=document.getElementsByTagName("div")[0].cloneNode();//這種只是拷貝最外層的節點
    var ele_copy=document.getElementsByTagName("div")[0].cloneNode(true);//這種才是完整的拷貝
    這裡有一個bug，如果被拷貝的對象有id屬性，仍然可以拷貝，而且拷貝出來的對象也有這個id
    還有一個問題，源標簽的綁定事件不會被拷貝
    
</script>

5.獲取標簽中的文本

ele.innerText 和 ele.innerHTML

這是取值，賦值就是

ele.innerText="<a href='#'>click</a>"
ele.innerHTML="<a href='#'>click</a>"

innerText就是純文本，但是innerHTML 會把拿到的元素當時一個標簽（如果這個元素是一個標簽）

6.屬性值操作 attribute

我們平時取屬性值的時候就直接用的　　標簽.屬性

　　　　給屬性賦值就是直接用的　　　標簽.屬性=“ ”

但是事實上，是有個attribute方法的

屬性取值：ele.getAttribute(屬性名)

屬性賦值：ele.setAttribute(屬性名)

刪除屬性：ele.removeAttribute(屬性名)

7.DOM事件

    onclick             //點擊標簽
    ondbclick           //雙擊標簽
    onfocus             //元素獲得焦點
    onblur              //元素失去焦點
    onchange            //域的內容發生改變，常用於表單元素
    onkeydown           //鍵盤按鍵被按下
    onkeypress          //某個鍵盤按鍵被按下並鬆開。
    onkeyup             //某個鍵盤按鍵被鬆開。


    onload              //一張頁面或一幅圖像完成載入。

    onmousedown         //滑鼠按鈕被按下。
    onmousemove         //滑鼠被移動。
    onmouseout          //滑鼠從某元素移開。
    onmouseover         //滑鼠移到某元素之上。
    onmouseleave        //滑鼠從元素離開

    onselect            //文本被選中。
    onsubmit            //確認按鈕被點擊。

（1）onchange事件

通常用於表單標簽，一個表格裡的內容被改變時（我們選擇一個選項時），觸發事件

練習：省市二級聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<!--需求：兩個表單，左邊是省份，右邊是城市，左邊選擇省份後，右邊內容是對應的城市-->
<body>
<select name="" id="province">
    <option value="">請選擇省份</option>
    <option value="">河北</option>
    <option value="">山東</option>
</select>
<select name="" id="city">
    <option value="" id="select_city">請選擇城市</option>
</select>
</body>

<script>
    var info={
        "河北":["北京","衡水"],
        "山東":["青島","濰坊"]
    };
//    js中雖然沒有字典的說法，但是有類似的用法。
    var ele_pvn=document.getElementById("province");
    var ele_city=document.getElementById("city");
    var ele_select; //定義一個全局變數
    ele_pvn.onchange=function () {
        ele_city.options.length=1;      //保留一項，後面的內容全部清除
        for (var i in info){
            if (i==(this.children[this.selectedIndex]).innerText){  //判斷
//                this.selectedIndex是取到選擇內容的索引值
                for(var j in info[i]){
                    //思路是每選擇一個省份，就把後面城市裡的內容全部清空，然後從“字典”中根據選擇的省份，重新新建一個後面城市的標簽
                    var city_option=document.createElement("option");   
                    city_option.id="selected";                          
                    ele_select=document.getElementById("selected");

                    city_option.innerText=info[i][j];
                    ele_city.appendChild(city_option);          
                }
            }
        }
    }
</script>
</html>

View Code

（2）onkeydown事件，用於input輸入框

這個事件是按鍵盤上任意按鍵都會觸發，這其實意義不大。如果想要指定按鍵，該怎麼做？

這裡用到一個event對象，event對象是保存事件觸髮狀態的對象，由操作系統發送

    ele.onkeydown=function (e) {
        e=e||window.event;   //這句代碼是為了避免出現某些瀏覽器的不相容問題
        console.log(e.keyCode);//這樣會列印按鍵的ascii碼
        console.log(String.fromCharCode(e.keyCode))//這句代碼可以把ascii碼轉換成字元
    }

（3）onload事件

script中涉及到查找標簽時，js代碼必須寫在html代碼下麵，否則會因為找不到標簽而報錯

但是如果就是想讓js代碼在上面，就用到onload事件

或者再說一個應用場景：瀏覽器載入圖片實際上是和載入其他文本標簽分開的，是新開了一個線程。有事網速不給力的時候，就會出錯。這時就可以用到這個事件，讓其他標簽等待圖片載入完才能操作

用法如下：

<script>
    window.onload=function () {
        var ele=document.getElementsByTagName("div")
        ele.style.color="green";
        
    }
</script>

（4）onsubmit事件

這個事件是給form表單用到，是在表單提交的時候觸發。表單標簽裡面的那個submit標簽，點擊之後會刷新頁面，同時把數據提交給後臺伺服器（如果action指定了地址），這是submit自己預設的事件，我們用onsubmit事件的意義就是要阻止submit的預設事件。比如在用戶登錄輸入用戶名密碼的時候，前端可以先判斷一下格式是否正確，如果格式都不正確，就沒必要發送給後端了。

onsubmit事件一定是在submit事件之前觸發的，否則就沒意義了。

阻止submit預設事件的方法有兩個：

　　1.return false

　　2.e.preventDefault()

練習：用戶登錄驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        div{
            margin-top: 30px;
        }
    </style>
</head>
<body>
<form action="" class="form">
    <div id="abd" ><input type="text" placeholder="用戶名" class="text"></div>
    <div><input type="password" placeholder="密碼" ></div>
    <div id="abc"></div>
    <div><input type="submit" value="提交" class="submit"></div>
</form>

</body>

<script>
     var ele_text=document.getElementsByClassName("text")[0];
     var ele_submit=document.getElementsByClassName("form")[0];
     var ele_abd=document.getElementById("abd");

     ele_submit.onsubmit=function () {
         if (ele_text.value.length>5){
             var ele_warm=document.createElement("h5");
             ele_warm.innerText="用戶名超出規定長度!";
             ele_warm.style.color="red";
             ele_warm.style.display="inline";
             ele_abd.appendChild(ele_warm);

             return false;//阻止submit預設事件
         }
     }

</script>
</html>

View Code

（5）onmouseout和onmouseleave事件

這兩個事件都是滑鼠移開時觸發的事件，不同的是：

　　不論滑鼠指針離開被選元素還是任何子元素，都會觸發onmouseout事件
只有在滑鼠指針離開備選元素時，才會觸發onmouseleave事件

可以通過一個左側菜單的案例來搞清楚這兩個的區別

    <style>
        .container{
            width: 300px;
        }
        .title{
            background:green;
            line-height: 44px;
            text-align: center;

        }
        .list{
            display: none;
        }
        .list div{
            line-height: 40px;
        }
        .item1{
            background: purple;
        }
        .item2{
            background: orange;
        }
        .item3{
            background: greenyellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">text</div>
        <div class="list">
            <div class="item1">111</div>
            <div class="item2">222</div>
            <div class="item3">333</div>
        </div>
    </div>

    <script>
        var ele=document.getElementsByClassName("title")[0];
        var ele_list=document.getElementsByClassName("list")[0];
        var ele_box=document.getElementsByClassName("container")[0];
        ele.onmouseover =function () {
            ele_list.style.display="block";
        };
//        ele.onmouseleave =function () {
//            ele_list.style.display="none";
//        }這樣是有問題的，滑鼠往下走也隱藏了,應該給盒子綁定
        ele_box.onmouseleave =function () {
            ele_list.style.display="none";
        };
</script>

View Code

8.事件傳播

父標簽綁定事件a,子標簽綁定事件b,那麼觸發事件b的時候，肯定事件a也會觸發，這就叫事件綁定

我們需要知道的是怎麼解除事件綁定，方法是在子標簽中添加e.stopPropagation

<script>
    ele_inner.onclick =function (e) {
        alert(123);
        e.stopPropagation()
    }
</script>

寫一個跑馬燈的例子，感覺還挺好玩的，下起了雨，下雨天留客天留我不留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
</head>
<body>
    <h4>下雨天留客天留我不留</h4>

</body>

<script>
    function foo() {
        var ele=document.getElementsByTagName("h4")[0];
        var first_str= ele.innerText.charAt(0);
        var second_str=ele.innerText.slice(1,ele.innerText.length);
        var new_str=second_str + first_str;
        ele.innerText=new_str
    }
        setInterval(foo,500)

</script>
</html>

留是不留

9.標簽與標簽之間綁定

考慮一個需求：京東下麵的商品詳情，評論，售後這些內容，是通過點擊“商品詳情”，“評論”，“售後”這些按鈕，就可以顯示對應的內容，這個對應關係是怎麼實現的呢，這用到了自定義屬性

<body>
<ul>
    <li gname="c1">商品詳情</li>
</ul>
<div id="c1">商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹</div>
</body>

這樣就可以實現兩個標簽的綁定

前面說了，取屬性值一般都用點屬性的方式，但是在這裡取這個自定義屬性，就只能用getAttribute方法了。