Javascript- Javascript學習

時間 2019-11-12

原文原文鏈接

Javasrcipt的引入方式

內部引入方式

直接將javascript代碼寫入到<script type="text/javascript"></script>javascript

外部引入方式

須要建立一個.js文件，在裏面書寫javascript 代碼，而後在html文件中經過script標籤的src 屬性引入外部的js 文件html

<script type="text/javascript" src="1.js" ></script>

javascript事件

表單提交事件：onsubmitjava

javascript的輸出：

警告框：alert();正則表達式

向頁面指定位置寫入內容：innerHTML(屬性)數組

向頁面寫入內容：document.write("")瀏覽器

表單提交步驟分析：

第一步：肯定事件（onsubmit）併爲其綁定一個函數緩存

第二步：書寫這個函數(獲取用戶輸入的數據<獲取數據時須要在指定位置定義一個 id >)app

第三步：對用戶輸入的數據進行判斷函數

第四步：數據合法（讓表單提交）this

第五步：數據非法（給出錯誤提示信息，不讓表單提交）

問題：如何控制表單提交？

　　關於事件onsubmit：通常用於表單提交的位置

<form action="#" method="get" name="regForm" onsubmit="return checkForm()">

一個使用JS完成表單註冊校驗的例子

<script>
            function checkForm(){
                //alert("aaa")
                /** 校驗用戶名 **/
                //1.獲取用戶輸入的數據
                var uValue = document.getElementById("user").value;
                if(uValue==""){
                    //2.給出錯誤提示信息
                    alert("用戶名不能爲空！");
                    return false;
                }
                
                /** 校驗密碼*/
                var pValue = document.getElementById("password").value;
                if(pValue==""){
                        alert("密碼不能爲空！");
                        return false
                }
                
                
                /** 校驗確認密碼*/
                var rpValue = document.getElementById("repassword").value;
                if(rpValue == ""){
                    alert("確認密碼不能爲空！");
                    return false;
                }else if(rpValue != pValue){
                    alert("兩次密碼輸入不一致！");
                    return false;
                }
                
                /**校驗郵箱 */
                var eValue = document.getElementById("email").value;
                if(! /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
                    alert("郵箱格式不正確！");
                    return false;
                }
                
            }
        </script>

一些經常使用的正則表達式示例：

一、匹配全部的正數：^[0-9]+$

二、匹配全部的小數：^\-?[0-9]*\.?[0-9]*$

三、匹配全部的整數：^\-?[0-9]+$

四、提取信息中的中文字符串： [\u4e00-\u9fa5]* ;

五、提取信息中的郵件地址：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
六、提取信息中的中國手機號碼：(86)*0*13\d{9}
七、提取信息中的中國固定電話號碼：($\d{3,4}$|\d{3,4}-|\s)?\d{8}
八、提取信息中的中國郵政編碼：[1-9]{1}(\d+){5}
九、提取信息中的中國身份證號碼：\d{18}|\d{15}
十、提取信息中的任何數字：(-?\d*)(\.\d+)?
十一、匹配HTML標記的正則表達式：/<(.*)>.*<\/\1>|<(.*) \/>/

十二、匹配郵箱：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/

則表達式用於字符串處理、表單驗證等場合，實用高效。
現將一些經常使用的表達式收集於此，以備不時之需。

匹配中文字符的正則表達式： [\u4e00-\u9fa5]
評註：匹配中文還真是個頭疼的事，有了這個表達式就好辦了

匹配雙字節字符(包括漢字在內)：[^\x00-\xff]
評註：能夠用來計算字符串的長度（一個雙字節字符長度計2，ASCII字符計1）

匹配空白行的正則表達式：\n\s*\r
評註：能夠用來刪除空白行

匹配HTML標記的正則表達式：<(\S*?) [^>]*>.*?</\1>|<.*? />
評註：網上流傳的版本太糟糕，上面這個也僅僅能匹配部分，對於複雜的嵌套標記依舊無能爲力

匹配首尾空白字符的正則表達式：^\s*|\s*$
評註：能夠用來刪除行首行尾的空白字符(包括空格、製表符、換頁符等等)，很是有用的表達式

匹配Email地址的正則表達式：\w+([-+.]\w+)*@\w+([-.] \w+)*\.\w+([-.]\w+)*
評註：表單驗證時很實用

匹配網址URL的正則表達式：[a-zA- z]+://[^\s]*
評註：網上流傳的版本功能頗有限，上面這個基本能夠知足需求

匹配賬號是否合法(字母開頭，容許5-16 字節，容許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
評註：表單驗證時很實用

匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7}
評註：匹配形式如 0511-4405222 或 021-87888822

匹配騰訊QQ號：[1-9][0-9]{4,}
評註：騰訊QQ號從10000開始

匹配中國郵政編碼：[1-9]\d{5}(?! \d)
評註：中國郵政編碼爲6位數字

匹配身份證：\d{15}|\d{18}
評註：中國的身份證爲15位或18位

匹配ip地址：\d+\.\d+\.\d+\.\d+
評註：提取ip地址時有用

匹配特定數字：
^[1-9]\d*$　　 //匹配正整數
^-[1-9]\d*$ 　 //匹配負整數
^-?[1-9]\d*$　　 //匹配整數
^[1-9]\d*|0$ 　 //匹配非負整數（正整數 + 0）
^-[1-9]\d*|0$　　 //匹配非正整數（負整數 + 0）
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 　　 //匹配正浮點數
^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配負浮點數
^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$ 　 //匹配浮點數
^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非負浮點數（正浮點數 + 0）
^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮點數（負浮點數 + 0）
評註：處理大量數據時有用，具體應用時注意修正

匹配特定字符串：
^[A-Za-z]+$　　//匹配由26 個英文字母組成的字符串
^[A-Z]+$　　//匹配由26個英文字母的大寫組成的字符串
^[a-z]+$　　//匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$　　//匹配由數字和26個英文字母組成的字符串
^\w+$　　//匹配由數字、26個英文字母或者下劃線組成的字符串
評註：最基本也是最經常使用的一些表達式

加了時間驗證的

^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-)) (20|21|22|23|[0-1]?\d):[0-5]?\d:[0-5]?\d$

用JS完成切圖例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>切換圖片</title>
        <style>
            div{
                border: 1px solid white;
                width: 500px;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script>
            var i = 1;
            function changeImg(){
                i++;
                document.getElementById("img1").src="../../img/"+i+".jpg";
                if(i == 3){
                    i=0;
                }
            }
        </script>
    </head>
    <body>
        <div id="">
            <input type="button" value="下一張" onclick="changeImg()" />
            <img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
        </div>
    </body>
</html>

一個使用JS完成首頁輪播圖片的例子

獲取元素 document.getElementById("id名稱")

事件 (onload)

定時操做：setInterval("changeImg()",3000);

步驟分析：

第一步：肯定事件（onload）併爲其綁定一個函數

第二步：書寫綁定的這個函數

第三步：書寫定時任務（setInterval）

第四步：書寫定時任務裏面的函數

第五步：經過變量的方式，進行循環（獲取輪播圖的位置，並設置src屬性）

注意：在循環的時候須要注意到了最後一張圖片的時候要重置

代碼實現

關於事件onsubmit：通常用於表單提交的位置

<body onload="init()">

詳細代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>輪播圖片</title>
        <style>
            div{
                border: 1px solid white;
                width: 500px;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script>
            function init(){
                //書寫輪播圖片顯示的定時操做
                window.setInterval("changeImg()",3000);
                
            }
            
            //書寫函數
            var i = 1;
            function changeImg(){
                i++;
                //獲取圖片位置並設置src屬性值
                document.getElementById("img1").src="../../img/"+i+".jpg";
                if(i == 3){
                    i=0;
                }
            }
        </script>

    </head>
    <body onload="init()">
        <div id="">
            <!--<input type="button" value="下一張" " />-->
            <img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
        </div>
    </body>
</html>

一個定時彈出廣告圖片例子

技術分析

獲取圖片的位置document.getElementById("id名稱")

隱藏圖片：display:none;

定時操做：setInterval("顯示圖片的的函數",3000);

步驟分析：

第一步：在頁面指定位置隱藏一個廣告圖片（使用display屬性的none值）

第二步：肯定事件（onload）併爲其綁定一個函數

第三步：書寫這個函數（設置一個顯示圖片的定時操做）

第四步：書寫定時器中的函數（獲取廣告圖片的位置並設置屬性 style 的 display 值爲 block）

第五步：清除顯示圖片的定時操做

第六步：書寫隱藏圖片的定時操做

第七步：書寫定時器中的函數（獲取廣告圖片中的位置並設置屬性 style 的 display 值爲 none）

第八步：清除隱藏圖片的定時操做

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>輪播圖片</title>
        <style>
            div{
                border: 1px solid white;
                width: 500px;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script>
            function init(){
                //書寫輪播圖片顯示的定時操做
                window.setInterval("changeImg()",3000);
                
                //1.設置顯示廣告圖片的定時操做
                time = window.setInterval("showAd()",3000);
            }
            
            //書寫函數
            var i = 1;
            function changeImg(){
                i++;
                //獲取圖片位置並設置src屬性值
                document.getElementById("img1").src="../../img/"+i+".jpg";
                if(i == 3){
                    i=0;
                }
            }
            
            //2.書寫顯示廣告圖片的函數
            function showAd(){
                //3.獲取廣告圖片的位置
                var adEle = document.getElementById("img2");
                //4.修改廣告圖片元素的屬性讓其顯示
                adEle.style.display = "block";
                //5.清除顯示圖片的定時操做
                window.clearInterval(time);
                //6.設置隱藏圖片的定時操做
                time = window.setInterval("hiddenAd",3000);
            }
            
            //7.書寫隱藏廣告圖片的函數
            function hiddenAd(){
                //8.獲取廣告圖片而且設置其style的display 值爲 none
                document.getElementById("img2").style.display = "none";
                //9.清除隱藏廣告圖片的定時操做
                window.clearInterval(time)
            }
        </script>

    </head>
    <body onload="init()">
        
        <div id="">
            <img src="../../img/ad.jpg" width="100%" style="display: none" id="img2" />
            <!--<input type="button" value="下一張" " />-->
            <img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
        </div>
    </body>
</html>

實現隔行換色的效果顯示全部用戶信息

<thead>
    <tr>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
    </tr>
</tbody>

分析

肯定事件（頁面加載事件onload）

獲取元素：獲取表格（document.getElementById()），是最終爲了獲取表格中tbody裏面的行數（長度）。
tbody裏面的行數（rows.lengh）
JS的遍歷（for循環）
獲取奇數行和偶數行（對遍歷中角標對2的取餘）
設置背景顏色（.style.backgroundColor）

步驟分析：

第一步：肯定事件（onload)併爲其綁定一個函數
第二步：書寫函數（獲取表格裏面的函數）
第三步：獲取tbody裏面的參數行數
第四步：對tbody裏面的行進行遍歷
第五步：獲取奇數行和偶數行（角標對2的取餘）
第六步：分別對奇數行和偶數行設置背景顏色

代碼實現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行變色</title>
        <script>
            window.onload = function(){
                //1.獲取表格
                var tblEle = document.getElementById("tb1");
                //2.獲取表格中tbody裏面的行數（長度）
                var len = tblEle.tBodies[0].rows.length;
                //3.對tbody裏面的進行遍歷
                for (var i= 0; i<len;i++) {
                    if(i%2==0){
                        //4.對偶數行設置背景顏色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
                    }else{
                        //5.對奇數行設置背景顏色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
                    }
                }
            }
        </script>
        
    </head>
    <body >
        <table border="1" width="500" height="50" align="center" id="tb1">
            <thead>
                <tr>
                    <th>編號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>張三</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>趙六</td>
                    <td>29</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

實現一個表格的高亮顯示

分析：

第一步：肯定事件(nomouseover) 和(onmouseout) 並分別爲其綁定一個函數

第二步：獲取鼠標移上去的行，對其設置背景顏色

代碼實現：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格高亮顯示</title>
        <script>
            function changeColor(id, flag){
                if(flag=="over"){
                    document.getElementById(id).style.backgroundColor="red";
                }else if(flag=="out"){
                    document.getElementById(id).style.backgroundColor="white";
                }
            }
        </script>
    </head>
    <body >
        <table border="1" width="500" height="50" align="center" id="tb1">
            <thead>
                <tr>
                    <th>編號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                </tr>
            </thead>
            <tbody>
                <tr onmousemove="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1', 'out')">
                    <td>1</td>
                    <td>張三</td>
                    <td>22</td>
                </tr>
                <tr onmousemove="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2', 'out')">
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr onmousemove="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3', 'out')">
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr onmousemove="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4', 'out')">
                    <td>4</td>
                    <td>趙六</td>
                    <td>29</td>
                </tr>
                <tr onmousemove="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5', 'out')">
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr onmousemove="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6', 'out')">
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

事件之經常使用事件：

使用js完成全選和全不選操做

技術分析

肯定事件（鼠標點擊事件onclick），事件綁定到編號前面的複選框裏面

獲取比那好前面的複選框的狀態（是否選中）

　　獲取複選框：var checkAllEle = document.getElementById("id")

　　獲取複選框的狀態：checkAllEle.checked?

獲取下面全部的複選框：

　　Document.getElementsByName("name");

步驟分析：

第一步：肯定事件（onclick)併爲其綁定一個函數

第二步：書寫函數（獲取編號前面的複選框，獲取其狀態）

第三步：判斷編號前面複選框的狀態（若是爲未選中，獲取下面全部的複選框，並將其狀態設置爲未選中）

代碼實現：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>全選和全不選</title>
        <script>
            function checkAll(){
                //1.獲取編號前的複選框
                var checkAllEle = document.getElementById("checkAll");
                //2.對編號前面複選框狀態進行判斷
                if(checkAllEle.checked==true){
                    //3.獲取下面全部的複選框
                    var checkOnes =    document.getElementsByName("checkOne");
                    //4.對全部獲取的複選框進行遍歷
                    for(var i =0 ; i<checkOnes.length; i++){
                        //5.拿到每一個複選框，並將其狀態設置爲選中
                        checkOnes[i].checked = true;
                    }
                }else{
                    //6.獲取下面全部的複選框
                    var checkOnes = document.getElementsByName("checkOne");
                    //7.對全部獲取的複選框進行遍歷
                    for(var i =0 ;i<checkOnes.length;i++){
                        //5.拿到每一個複選框，並將其狀態設置爲未選中
                        checkOnes[i].checked =false;
                    }
                }
            }
        </script>
    </head>
    <body >
        <table border="1" width="500" height="50" align="center" id="tb1">
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="刪除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
                    <th>編號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"/ name="checkOne"></td>
                    <td>1</td>
                    <td>張三</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkOne" /></td>
                    <td>4</td>
                    <td>趙六</td>
                    <td>29</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkOne" /></td>
                    <td>5</td>
                    <td>田七</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="checkOne" /></td>
                    <td>6</td>
                    <td>汾九</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Doucument對象

後面兩個方法獲取以後須要遍歷！

如下兩個方法很重要，可是在手冊中查不到！

建立文本節點：document.createTextNode()

建立元素節點：document.createElement()

Element對象

咱們所認知的HTML頁面中全部的標籤都是element 元素

element.appendChild() 向元素添加新的子節點，做爲最後一個子節點

element.firstChild 返回元素的首個子節點

element.getAttribute() 返回元素節點的指定屬性值

element.innerHTML 設置或返回元素的內容

element.insertBefore() 在指定的已有的子節點以前插入新節點

element.lastChild　　返回元素的最後一個子元素

element.setAttribute()　　把指定屬性設置或更改成指定值

Attribute對象

咱們所認知的HTML 頁面中全部標籤中的屬性都是attribute

在頁面中使用列表顯示一些城市，咱們但願點擊一個按鈕實現動態添加城市

<ul id="ul1">
            <li>北京</li>
            <li>上海</li>
            <li>廣州</li>
        </ul>

分析：

事件（onclick）

獲取ul元素節點

建立一個城市的文本節點

建立一個li元素節點

將文本節點添加到li元素節點中去

使用element裏面的方法 appendChild()來添加子節點

代碼實現：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>動態添加城市</title>
        <script>
            window.onload = function(){
                document.getElementById("btn").onclick = function(){
                    //1.獲取ul元素節點
                    var ulEle= document.getElementById("ul1");
                    
                    //2.建立城市文檔節點
                    var textNode = document.createTextNode("深圳");// 深圳
                    //3.建立li元素節點
                    var liEle = document.createElement("li");//<li></li>
                    //4.將城市節點添加到元素節li點中
                    liEle.appendChild(textNode);
                    //5.將li添加到ul中去
                    ulEle.appendChild(liEle)
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="添加新城市" id="btn" />
        <ul id="ul1">
            <li>北京</li>
            <li>上海</li>
            <li>廣州</li>
        </ul>
        
    </body>
</html>

使用JS完成省市二級聯動

需求分析：

咱們但願在註冊頁面中添加一個字段（籍貫），當用戶選擇一個具體的省份，在後面的下拉列表中動態加載該省份下全部的城市。

技術分析：

事件(onchange)

使用一個二維數組來存儲省份和城市（二維數組的建立？）

獲取用戶選擇的省份（使用方法傳參的方式：this.value）

遍歷數組（獲取省份與用戶選擇的省份比較，若是相同，繼續遍歷該省份下全部的城市）

建立文本節點和元素節點並進行添加操做

createTextNode()

createElement()

appendChild()

步驟分析：

第一步：肯定事件（onchange）併爲其綁定一個函數

第二步：建立一個二維數組用於存儲省份和城市

第三步：獲取用戶選擇的省份

第四步：遍歷二維數組中的省份

第五步：將遍歷的省份與用戶選擇的省份比較

第六步：若是相同，遍歷該省份下全部的城市

第七步：建立城市文本節點

第八步：建立option元素節點

第九步：將城市文本節點添加到option元素節點中去

第十步：獲取第二個下拉列表嗎，並將option元素節點添加進去

第十一步：每次操做前清空第二個下拉列表的option 內容

代碼實現：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市二級聯動</title>
        <script>
        
            
            
            //1.建立一個二維數組
            var cities = new Array(3);
            cities[0]=new Array("武漢市","黃岡市","襄陽市","荊州市");
            cities[1]=new Array("長沙市","郴州市","株洲市","岳陽市");
            cities[2]=new Array("石家莊市","邯鄲市","廊坊市","保定市");
            cities[3]=new Array("鄭州市","洛陽市","開封市","安陽市");
            
            function changeCity(val){
                //7.獲取第二個下拉列表
                var cityEle = document.getElementById("city");
                //9.清空第二個下拉列表的option內容
                cityEle.options.length=0;
                
                //2.遍歷二維數組的省份
                for(var i = 0;i < cities.length; i++){
                    //注意：比較的是角標
                    if(val == i ){
                        //3.遍歷用戶選擇的省份下全部的城市
                        for(var j=0; j<cities[i].length; j++){
                            //alert(cities[i][j]);
                             //4.建立城市文本節點
                             var textNode = document.createTextNode(cities[i][j]);
                             //5.建立option元素節點
                             var opEle = document.createElement("option");
                             //6.將城市文本節點添加到option元素節點
                             opEle.appendChild(textNode);
                             //8.將option元素節點添加到第二個下拉列表中去
                             cityEle.appendChild(opEle);
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <select onchange="changeCity(this.value)">
                        <option>--請選擇--</option>
                        <option value="0">湖北</option>
                        <option value="1">湖南</option>
                        <option value="2">河北</option>
                        <option value="3">河南</option>
                    </select>
                    <select id="city"></select>
                </td>
            </tr>
        </table>
    </body>
</html>

JavaScript內置對象

Array對象

數組的建立

Array數組對象用於在單個的變量中存儲多個值

數組的特色：

　　長度可變！數組的長度=最大角標+1

Boolean對象

若是value 不寫，那麼默認建立的結果爲false

Date對象

getTime() 返回從 1970 年 1 月 1 日至今的毫秒數

解決瀏覽器緩存問題

http://www.xxxx.com?time =new Date().getTime()&

Math和number對象

與Java裏面的基本一致

String對象

match() 方法如何使用 match() 來查找字符串中特定的字符，而且若是找到的話，則返回這個字符。

substr() 從起始索引號提取字符串中指定數目的字符。

substring() 提取字符串中兩個指定的索引號之間的字符。

<script>
    var str = "-a-b-c-d-e-f-";
    var str1 = str.substr(2,4);//-b-c
    //alert(str1);
    var str2 = str.substring(2,4);
    alert(str2);
</script>