【Vegas原創】vscode使用github

阿新 • • 發佈：2021-10-14

JavaScript

1、JavaScript介紹

Javascript 語言誕生主要是完成頁面的資料驗證。因此它執行在客戶端，需要執行瀏覽器來解析執行 JavaScript 程式碼。

特點：
1.、互動性（它可以做的就是資訊的動態互動）
2.、安全性（不允許直接訪問本地硬碟）
3、跨平臺性（只要是可以解釋 JS 的瀏覽器都可以執行，和平臺無關）

2、JavaScript 和 html 程式碼的結合方式

2.1、第一種方式

只需要在 head 標籤中，或者在 body 標籤中，使用 script 標籤來書寫 JavaScript 程式碼

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
     //  alert 是 JavaScript 語言提供的一個警告框函式。
     //它可以接收任意型別的引數，這個引數就是警告框的提示資訊
    alert("hello JavaScript!");
    </script>
</head>
<body>

</body>
</html>

2.2、第二種方式

使用 script 標籤引入單獨的 JavaScript 程式碼檔案

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <!--  現在需要使用 script 引入外部的 js 檔案來執行
            src 屬性專門用來引入 js 檔案路徑（可以是相對路徑，也可以是絕對路徑）
             script 標籤可以用來定義 js 程式碼，也可以用來引入 js 檔案
             但是，兩個功能二選一使用。一個標籤不能同時使用兩個功能   -->
    <script type="text/javascript" src="1.js"></script>
    <script type="text/javascript">
        alert("奧利給");
    </script>
</head>
<body>

</body>
</html>

3、變數

JavaScript 的變數型別：

數值型別： number
字串型別： string
物件型別： object
布林型別： boolean
函式型別： function

JavaScript 裡特殊的值：

undefined 未定義，所有 js 變數未賦於初始值的時候，預設值都是 undefined.
null 空值
NaN 全稱是：Not a Number。非數字。非數值。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var i;
    // alert(i); // undefined
    i=12;
    // typeof()是 JavaScript 語言提供的一個函式,它可以取變數的資料型別返回
    //alert( typeof(i) ); // number
    i = "abc";
    // alert( typeof(i) ); // String
    var a = 12;
    var b = "abc";
    alert( a * b ); // NaN 是非數字，非數值。
  </script>
</head>
<body>

</body>
</html>

4、關係（比較）運算

等於： == 等於是簡單的做字面值的比較

全等於： === 除了做字面值的比較之外，還會比較兩個變數的資料型別

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      var a = "12";
      var b = 12;
     alert(a == b); // true
     //alert( a === b ); // false
    </script>
</head>
<body></body>
</html>

5、邏輯運算

且運算： && 或運算： || 取反運算： !

在 JavaScript 語言中，所有的變數，都可以做為一個 boolean 型別的變數去使用。

0 、null、 undefined、””(空串) 都認為是 false；

&& 且運算有兩種情況：

第一種：當表示式全為真的時候。返回最後一個表示式的值。
第二種：當表示式中，有一個為假的時候。返回第一個為假的表示式的值

|| 或運算:

第一種：當表示式全為假時，返回最後一個表示式的值
第二種：只要有一個表示式為真。就會返回第一個為真的表示式的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = "abc";
        var b = true;
        var d = false;
        var c = null;

        // alert( a && b );// true
        // alert( b && a );// abc
        // alert( a && d ); // false
        // alert( a && c ); // null

        // alert( d || c ); // null
        // alert( c|| d ); //false
        // alert( a || c ); //abc
        // alert( b || c ); //true
    </script>
</head>
<body>

</body>
</html>

6、陣列

JS 中陣列的定義：

var 陣列名 = []; // 空陣列

var 陣列名 = [1 , ’abc’ , true]; // 定義陣列同時賦值元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var arr =[];  //定義一個空陣列
    // alert(arr.length)// 0
    arr[0] = 12;
    //alert(arr[0]);// 12
    //alert(arr.length)// 1

    //javaScript 語言中的陣列，只要我們通過陣列下標賦值，那麼最大的下標值，就會自動的給陣列做擴容操作。
    arr[2] = "abc";
    // alert(arr.length); //3
    // alert(arr[1]);// undefined

    //陣列的遍歷
    for (var i = 0; i < arr.length; i++){
      alert(arr[i])
    }

  </script>
</head>
<body>

</body>
</html>

7、函式

7.1、函式的兩種定義方式

第一種，可以使用 function 關鍵字來定義函式。

使用的格式如下:
function 函式名(形參列表){
函式體
}

在 JavaScript 語言中，只需要在函式體內直接使用 return 語句返回值即可定義帶有返回值的函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //定義一個無參函式
    function fun(){
      alert("無參函式被呼叫了");
    }
    // 函式呼叫===才會執行
    //fun();

    function fun2(a,b) {
      alert("函式fun2()被呼叫了，a->"+a+",b->"+b);
    }
    //fun2(12,"abc");

    //定義有返回值函式
    function sum(num1,num2) {
      var result=num1+num2;
      return result;
    }
    alert(sum(15,35));
  </script>
</head>
<body>

</body>
</html>

函式的第二種定義方式，格式如下：

var 函式名 = function(形參列表) {
函式體
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun = function (){
            alert("無參函式")
        }
        //fun();
        var fun2 =function (a,b){
            alert("有參函式fun2(),a->"+a+",b->"+b);
        }
        //fun2(1,2);
        var sum = function (num1,num2){
            return num1+num2;
        }
        alert(sum(1,2));
    </script>
</head>
<body>

</body>
</html>

注：在 Java 中函式允許過載。但是在 JS 中函式的過載會直接覆蓋掉上一次的定義

7.2、函式的 arguments 隱形引數（只在 function 函式內）

就是在 function 函式中不需要定義，但卻可以直接用來獲取所有引數的變數。我們管它叫隱形引數。
隱形引數特別像 java 基礎的可變長引數一樣。
那麼 js 中的隱形引數也跟 java 的可變長引數一樣。操作類似陣列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function fun(a) {
            alert(arguments.length);//可看引數個數
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]);
            alert("a = " + a);
            for (var i = 0; i < arguments.length; i++) {
                alert(arguments[i]);
            }
            alert("無參函式 fun()");
        }

        // fun(1,"ad",true);
        //需求：要求 編寫 一個函式。用於計算所有引數相加的和並返回
        function sum(num1, num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof (arguments[i]) == "number") {
                    result += arguments[i];
                }
            }
            return result;
        }

        alert(sum(1, 2, 3, 4, "abc", 5, 6, 7, 8, 9));
    </script>
</head>
<body>

</body>
</html>

8、JS 中的自定義物件

Object 形式的自定義物件

物件的定義：
var 變數名 = new Object(); // 物件例項（空物件）
變數名.屬性名 = 值; // 定義一個屬性
變數名.函式名 = function(){} // 定義一個函式

物件的訪問：
變數名.屬性 / 函式名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var obj = new Object();
    obj.name = "華仔";
    obj.age = 18;
    obj.fun = function () {
      alert("姓名：" + this.name + " , 年齡：" + this.age);
    }

     obj.fun();
  </script>
</head>
<body>

</body>
</html>

{}花括號形式的自定義物件

物件的定義：
var 變數名 = { // 空物件
屬性名：值, // 定義一個屬性
屬性名：值, // 定義一個屬性
函式名：function(){} // 定義一個函式
};

物件的訪問：
變數名.屬性 / 函式名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    var obj = {
      name:"法外狂徒",
      age:18,
      fun : function () {
        alert("姓名：" + this.name + " , 年齡：" + this.age);
      }
    };
    obj.fun();
  </script>
</head>
<body>

</body>
</html>

9、JS中的事件

什麼是事件？事件是電腦輸入裝置與頁面進行互動的響應。我們稱之為事件。

常用的事件：

onload 載入完成事件：頁面載入完成之後，常用於做頁面 js 程式碼初始化操作
onclick 單擊事件：常用於按鈕的點選響應操作。
onblur 失去焦點事件：常用用於輸入框失去焦點後驗證其輸入內容是否合法。
onchange 內容發生改變事件：常用於下拉列表和輸入框內容發生改變後操作
onsubmit 表單提交事件：常用於表單提交前，驗證所有表單項是否合法。

事件的註冊又分為靜態註冊和動態註冊兩種：

什麼是事件的註冊（繫結）？
其實就是告訴瀏覽器，當事件響應後要執行哪些操作程式碼，叫事件註冊或事件繫結。

靜態註冊事件：通過 html 標籤的事件屬性直接賦於事件響應後的程式碼，這種方式我們叫靜態註冊。
動態註冊事件：是指先通過 js 程式碼得到標籤的 dom 物件，然後再通過 dom 物件.事件名 = function(){} 這種形式賦於事件響應後的程式碼，叫動態註冊。

動態註冊基本步驟：

1、獲取標籤物件

2、標籤物件.事件名 = fucntion(){}

9.1、onload 載入完成事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onloadFun() {
      alert("靜態註冊 onload 事件，所有程式碼");
    }
    // onload 事件動態註冊。是固定寫法
    window.onload=function (){
      alert("動態註冊的 onload 事件");
    }
  </script>
</head>
  <!--靜態註冊 onload 事件
     onload 事件是瀏覽器解析完頁面之後就會自動觸發的事件
     <body onload="onloadFun()">
     -->
<body>

</body>
</html>

9.2、onclick 單擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert("靜態註冊 onclick 事件");
        }
        // 動態註冊 onclick 事件
        window.onload = function (){
            // 1 獲取標籤物件
            /*
            * document 是 JavaScript 語言提供的一個物件（文件）
            * getElementById 通過 id 屬性獲取標籤物件
            * */
            var btnObj=document.getElementById("btn01");
            // 2 通過標籤物件.事件名 = function(){}
            btnObj.onclick = function () {
                alert("動態註冊的 onclick 事件")
            }
        }
    </script>
</head>
<body>
    <!--靜態註冊 onClick 事件-->
   <button onclick="onclickFun();">按鈕1</button>
   <button id="btn01">按鈕2</button>
</body>
</html>

9.3、onblur 失去焦點事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    // 靜態註冊失去焦點事件
    function onblurFun() {
      // console 是控制檯物件，是由 JavaScript 語言提供，專門用來向瀏覽器的控制器列印輸出， 用於測試使用
      // log() 是列印的方法
      console.log("靜態註冊失去焦點事件");
    }
    // 動態註冊 onblur 事件
    window.onload = function (){
      //1 獲取標籤物件
      var password = document.getElementById("password");
      //2 通過標籤物件.事件名 = function(){};
      password.onblur = function () {
        console.log("動態註冊失去焦點事件");
      }
    }
  </script>
</head>
<body>
   使用者名稱:<input type="text" onblur="onblurFun();"><br/>
    密碼:<input id="password" type="text" ><br/>
</body>
</html>

9.4、onchange 內容發生改變事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("女神已經改變了");
        }
        window.onload = function () {
            //1 獲取標籤物件
            var selObj = document.getElementById("sel01");
            //2 通過標籤物件.事件名 = function(){}
            selObj.onchange = function () {
                alert("男神已經改變了");
            }
        }
    </script>
</head>
<body>
 <!--靜態註冊 onchange 事件-->
請選擇你心中的女神：
<select onchange="onchangeFun();">
    <option>張三</option>
    <option>李四</option>
    <option>王五</option>
    <option>趙六</option>
</select>

選擇你心中的男神
<select id="sel01">
    <option>劉德華</option>
    <option>黎明</option>
    <option>郭富城</option>
    <option>周潤發</option>
</select>

</body>
</html>

9.5、onsubmit 表單提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onsubmitFun() {
      // 要驗證所有表單項是否合法，如果，有一個不合法就阻止表單提交
      alert("靜態登錄檔單提交事件----發現不合法")
      return flase;
    }
    
    window.onload = function () {
      //1 獲取標籤物件
      var formObj = document.getElementById("form01");
      //2 通過標籤物件.事件名 = function(){}
      formObj.onsubmit = function () {
        alert("動態登錄檔單提交事件----發現不合法");
        return false;
      }
    }
  </script>
</head>
<body>
<!--return false 可以阻止 表單提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
  <input type="submit" value="靜態註冊">
</form>

<form action="http://localhost:8080" id="form01">
  <input type="submit" value="動態註冊">
</form>

</body>
</html>

10、DOM 模型

DOM 全稱是 Document Object Model 文件物件模型，就是把文件中的標籤，屬性，文字，轉換成為物件來管理

10.1、Document 物件

Document 物件的理解：

第一點：Document 它管理了所有的 HTML 文件內容。
第二點：document 它是一種樹結構的文件。有層級關係。
第三點：它讓我們把所有的標籤都物件化
第四點：我們可以通過 document 訪問所有的標籤物件。

那麼 html 標籤要物件化怎麼辦？

<body> 
    <div id="div01">div01</div> 
</body>

模擬物件化，相當於：

class Dom{
private String id; // id 屬性
private String tagName; //表示標籤名
private Dom parentNode; //父親
private List children; // 孩子結點
private String innerHTML; // 起始標籤和結束標籤中間的內容
}

10.2、Document 物件中的方法介紹

document.getElementById(elementId)
- 通過標籤的 id 屬性查詢標籤 dom 物件，elementId 是標籤的 id 屬性值
document.getElementsByName(elementName)
- 通過標籤的 name 屬性查詢標籤 dom 物件，elementName 標籤的 name 屬性值
document.getElementsByTagName(tagname)
- 通過標籤名查詢標籤 dom 物件。tagname 是標籤名
document.createElement( tagName)
- 通過給定的標籤名，建立一個標籤物件。tagName 是要建立的標籤名

getElementById方法示例程式碼：

需求：當用戶點選了較驗按鈕，要獲取輸出框中的內容。然後驗證其是否合法。

驗證的規則是：必須由字母，數字。下劃線組成。並且長度是5 到 12 位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onclickFun() {
      // 1 當我們要操作一個標籤的時候，一定要先獲取這個標籤物件。
      var usernameObj = document.getElementById("username");
      var usernameText = usernameObj.value;
      // 如何 驗證 字串，符合某個規則 ，需要使用正則表示式技術
      var patt = /^\w{5,12}$/;
      /*  test()方法用於測試某個字串，是不是匹配我的規則 ，
       *  匹配就返回 true。不匹配就返回 false.
        */
        var usernameSpanObj = document.getElementById("usernameSpan");
        // innerHTML 表示起始標籤和結束標籤中的內容
        // innerHTML 這個屬性可讀，可寫
      if (patt.test(usernameText)){
        //usernameSpanObj.innerHTML="使用者名稱合法";
          usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"18\" height=\"18\">"
      }else{
        //usernameSpanObj.innerHTML="使用者名稱不合法";
          usernameSpanObj.innerHTML="<img src=\"wrong.png\" width=\"18\" height=\"18\">"
      }
    }
  </script>
</head>
<body>
使用者名稱：<input type="text" id="username" value="www"/>
<span id="usernameSpan" style="color: red"></span>
<button onclick="onclickFun()">校驗</button>
</body>
</html>

getElementsByName 方法示例程式碼:

需求：做三個按鈕實現複選框的全選、全不選和反選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function checkAll() {
      // 讓所有複選框都選中
      // document.getElementsByName();是根據 指定的 name 屬性查詢返回多個標籤物件集合
      // 這個集合的操作跟陣列 一樣
      // 集合中每個元素都是 dom 物件
      // 這個集合中的元素順序是他們在 html 頁面中從上到下的順序
      // checked 表示複選框的選中狀態。如果選中是 true，不選中是 false
      // checked 這個屬性可讀，可寫
      var hobbies = document.getElementsByName("hobby");
      for (var i = 0; i < hobbies.length; i++){
        hobbies[i].checked = true;
      }
    }
    function checkNo() {
      var hobbies = document.getElementsByName("hobby");
      for (var i = 0; i < hobbies.length; i++){
        hobbies[i].checked = false;
      }
    }
    function checkReverse() {
      var hobbies = document.getElementsByName("hobby");
      for (var i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = !hobbies[i].checked;
      }
    }
  </script>
</head>
<body>
    興趣愛好：
      <input type="checkbox" name="hobby" value="cpp">C++
      <input type="checkbox" name="hobby" value="java">Java
      <input type="checkbox" name="hobby" value="js">JavaScript
      <br>
      <button onclick="checkAll()">全選</button>
      <button onclick="checkNo()">全不選</button>
      <button onclick="checkReverse()">反選</button>

</body>
</html>

getElementsByTagName 方法示例程式碼

需求：實現全選

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function checkAll() {
        // document.getElementsByTagName("input");
        // 是按照指定標籤名來進行查詢並返回集合
        // 這個集合的操作跟陣列 一樣
        // 集合中都是 dom 物件
        // 集合中元素順序 是他們在 html 頁面中從上到下的順序。
        var inputs= document.getElementsByTagName("input");
        for (var i =0;i<inputs.length;i++){
            inputs[i].checked=true;
        }
    }

  </script>
</head>
<body>
    興趣愛好：
      <input type="checkbox" value="cpp">C++
      <input type="checkbox" value="java">Java
      <input type="checkbox" value="js">JavaScript
      <br>
      <button onclick="checkAll()">全選</button>

</body>
</html>

注：

1、document 物件的三個查詢方法，如果有 id 屬性，優先使用 getElementById 方法來進行查詢
2、如果沒有 id 屬性，則優先使用 getElementsByName 方法來進行查詢
3、如果 id 屬性和 name 屬性都沒有最後再按標籤名查 getElementsByTagName
以上三個方法，一定要在頁面載入完成之後執行，才能查詢到標籤物件。

createElement 方法示例程式碼：

需求：現在需要我們使用js程式碼來建立 html 標籤，並顯示在頁面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var divObj = document.createElement("div");// 在記憶體中 <div></div>
            var textNodeObj = document.createTextNode("奧利給");// 有一個文字節點物件
            divObj.appendChild(textNodeObj);// <div>奧利給</div>
            // divObj.innerHTML = "奧利給";  //但還是在記憶體中
            // 新增子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

11、節點的常用屬性和方法

方法：

通過具體的元素節點呼叫

getElementsByTagName()
方法，獲取當前節點的指定標籤名孩子節點
appendChild( oChildNode )
方法，可以新增一個子節點，oChildNode 是要新增的孩子節點

屬性：

childNodes
屬性，獲取當前節點的所有子節點
firstChild
屬性，獲取當前節點的第一個子節點
lastChild
屬性，獲取當前節點的最後一個子節點
parentNode
屬性，獲取當前節點的父節點
nextSibling
屬性，獲取當前節點的下一個節點
previousSibling
屬性，獲取當前節點的上一個節點
className
用於獲取或設定標籤的 class 屬性值
innerHTML
屬性，表示獲取/設定起始標籤和結束標籤中的內容
innerText
屬性，表示獲取/設定起始標籤和結束標籤中的文字

練習：DOM 查詢練習

CSS檔案

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查詢</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查詢#bj節點
		document.getElementById("btn01").onclick = function () {
			var bjObj = document.getElementById("bj");
			alert(bjObj.innerHTML);
		}
		//2.查詢所有li節點
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			var lis = document.getElementsByTagName("li");
			alert(lis.length)
		};
		//3.查詢name=gender的所有節點
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			var genders = document.getElementsByName("gender");
			alert(genders.length)
		};
		//4.查詢#city下所有li節點
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1 獲取id為city的節點
			//2 通過city節點.getElementsByTagName按標籤名查子節點
			var lis = document.getElementById("city").getElementsByTagName("li");
			alert(lis.length)
		};
		//5.返回#city的所有子節點
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			//1 獲取id為city的節點
			//2 通過city獲取所有子節點
			alert(document.getElementById("city").childNodes.length);
		};
		//6.返回#phone的第一個子節點
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			// 查詢id為phone的節點
			alert( document.getElementById("phone").firstChild.innerHTML );
		};
		//7.返回#bj的父節點
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			//1 查詢id為bj的節點
			var bjObj = document.getElementById("bj");
			//2 bj節點獲取父節點
			alert( bjObj.parentNode.innerHTML );
		};
		//8.返回#android的前一個兄弟節點
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			// 獲取id為android的節點
			// 通過android節點獲取前面兄弟節點
			alert( document.getElementById("android").previousSibling.innerHTML );
		};
		//9.讀取#username的value屬性值
		var btn09Ele = document.getElementById("btn09");
		btn09Ele.onclick = function(){
			alert(document.getElementById("username").value);
		};
		//10.設定#username的value屬性值
		var btn10Ele = document.getElementById("btn10");
		btn10Ele.onclick = function(){
			document.getElementById("username").value = "國哥你真牛逼";
		};
		//11.返回#bj的文字值
		var btn11Ele = document.getElementById("btn11");
		btn11Ele.onclick = function(){
			alert(document.getElementById("city").innerHTML);
			// alert(document.getElementById("city").innerText);
		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜歡哪個城市?
		</p>

		<ul id="city">
			<li id="bj">北京</li>
			<li>上海</li>
			<li>東京</li>
			<li>首爾</li>
		</ul>

		<br>
		<br>

		<p>
			你喜歡哪款單機遊戲?
		</p>

		<ul id="game">
			<li id="rl">紅警</li>
			<li>實況</li>
			<li>極品飛車</li>
			<li>魔獸</li>
		</ul>

		<br />
		<br />

		<p>
			你手機的作業系統是?
		</p>

		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查詢#bj節點</button></div>
	<div><button id="btn02">查詢所有li節點</button></div>
	<div><button id="btn03">查詢name=gender的所有節點</button></div>
	<div><button id="btn04">查詢#city下所有li節點</button></div>
	<div><button id="btn05">返回#city的所有子節點</button></div>
	<div><button id="btn06">返回#phone的第一個子節點</button></div>
	<div><button id="btn07">返回#bj的父節點</button></div>
	<div><button id="btn08">返回#android的前一個兄弟節點</button></div>
	<div><button id="btn09">返回#username的value屬性值</button></div>
	<div><button id="btn10">設定#username的value屬性值</button></div>
	<div><button id="btn11">返回#bj的文字值</button></div>
</div>
</body>
</html>