JavaScript 基礎(三) - Date對象，RegExp對象，Math對象，Window 對象，History 對象，Location 對象，DOM 節點

Date對象創建Date對象 Date對象的方法—獲取日期和時間顯示當前時間 History 對象 history_1.html history_2.html Location 對象 DOM 節點節點(自身)屬性: 導航屬性: 推薦導航屬性： ...

Date對象

創建Date對象

//方法1：不指定參數
    var date_obj = new Date();
    alert(date_obj.toLocaleString())

//方法2：參數為日期字元串
    var date_obj2 = new Date("2019/01/21 15:14");
    var date_obj3 = new Date("2019 01 21 15:14");
    alert(date_obj2.toLocaleString());
    alert(date_obj3.toLocaleString());

//方法3：參數為毫秒數
    var date_obj4 = new Date(5000);
    alert(date_obj4.toLocaleString());
    alert(date_obj4.toUTCString());

Date對象的方法—獲取日期和時間

    var date_obj = new Date();
    console.log(date_obj.getFullYear());            // 獲取完整年份
    console.log(date_obj.getMonth());               // 獲取月（0-11）
    console.log(date_obj.getDate());                // 獲取日
    console.log(date_obj.getDay());                 // 獲取星期
    console.log(date_obj.getHours());               // 獲取小時
    console.log(date_obj.getMinutes());             // 獲取分鐘
    console.log(date_obj.getSeconds());             //  獲取秒
    console.log(date_obj.getMilliseconds());        // 獲取毫秒

顯示當前時間

    function getTime(){
        var date_obj = new Date();
        var year = date_obj.getFullYear();
        var month = date_obj.getMonth();
        var day = date_obj.getDate();
        var hour = date_obj.getHours();
        var minute = date_obj.getMinutes();
        var seconds = date_obj.getSeconds();
        var week = date_obj.getDay();

        return year+"年"+f2(month)+"月"+f(day)+"日"+" "+hour+": "+minute+": "+seconds+" "+num_week(week);
    }

    alert(getTime())

    function num_week(n){
        week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
        return week[n]
    }

    function f(num){
        if (num<10){
            return "0"+num;
        }
        return num;
    }

    function f2(num){
        return num+1;
    }

RegExp對象

// 方式一：
    var re_obj = new RegExp("\d+", "g");
    alert(re_obj.test("asdf324lsdk"));

// 方式二：
    var re_obj2 = /\d+/g;
    alert(re_obj2.test("asdf324lsdk"));

// match 取出所有匹配的內容放到數組裡；search 取出第一個結果的索引值。
    var s = "hello545sg455";
    alert(s.match(/\d+/g));
    alert(s.search(/\d+/g));

// split 取出第一個結果的索引值；replace 取出第一個結果的索引值。
    var s = "hello545sg455";
    alert(s.split(/\d+/g));
    alert(s.replace(/\d+/g, "*"));

Math對象

該對象中的屬性方法和數學有關。

// 獲得隨機數 0~1 不包括1
   alert(Math.random());

// 四捨五入
alert(Math.round(2.3));

// 返回 2 的 4 次冪。
alert(Math.pow(2,4));

Window 對象

// 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
    var ret=confirm("內容是否保存");
    alert(ret);

// 顯示可提示用戶輸入的對話框。
    var ret=prompt("hello");
    alert(ret);

setInterval()：按照指定的周期（以毫秒計）來調用函數或計算表達式。
clearInterval()：取消由 setInterval() 設置的 timeout。
clearTimeout()：取消由 setTimeout() 方法設置的 timeout。
setTimeout()：在指定的毫秒數後調用函數或計算表達式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="clock" style="width: 249px">
<input type="button" value="begin" onclick="begin_click()">
<input type="button" value="End" onclick="End()">
<input type="button" value="timeout" onclick="f1()">


<script>
    function Timeout(){
        alert(123);
    }

    function f1(){
        var ID=setTimeout(Timeout, 1000);
        clearTimeout(ID);
    }


    function begin(){
        var stime = getTime();
        var ret=document.getElementById("clock");
        ret.value=stime;
    }

    var ID;
    function begin_click(){
        if (ID==undefined){
              begin();
              ID = setInterval(begin, 1000);
        }
    }

    function End(){
        clearInterval(ID);
        ID=undefined;
    }

    function getTime(){
        var date_obj = new Date();
        var year = date_obj.getFullYear();
        var month = date_obj.getMonth();
        var day = date_obj.getDate();
        var hour = date_obj.getHours();
        var minute = date_obj.getMinutes();
        var seconds = date_obj.getSeconds();
        var week = date_obj.getDay();

        return year+"年"+f2(month)+"月"+f(day)+"日"+" "+hour+": "+minute+": "+seconds+" "+num_week(week);
    }

    function num_week(n){
        week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
        return week[n]
    }

    function f(num){
        if (num<10){
            return "0"+num;
        }
        return num;
    }

    function f2(num){
        return num+1;
    }
</script>
</body>
</html>

History 對象

back()      // 載入 history 列表中的前一個 URL。
forward()   // 載入 history 列表中的下一個 URL。
go()        // 載入 history 列表中的某個具體頁面。

history_1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="前進" onclick="func1();">
<a href="histroy_2.html">lesson2</a>


<script>
    func1(){
        history.forward();
        //history.go(1);
        }
</script>

</body>
</html>

history_2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="後退" onclick="func2();">



<script>

    function func2(){
        history.back();
        //history.go(-1);
    }

</script>
</body>
</html>

Location 對象

reload()    // 重新載入當前文檔。
href        //設置或返回完整的 URL。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="button" value="重載" onclick="location.reload();">
<input type="button" value="百度" onclick="location.href='http://www.baidu.com'">
</body>
</html>

DOM 節點

節點(自身)屬性:

attributes // 節點（元素）的屬性節點
nodeType   // 節點類型。以數字值返回指定節點的節點類型。如節點是元素節點，則返回 1；如節點是屬性節點，則返回 2。
nodeValue  // 節點值
nodeName   // 節點名稱
innerHTML  // 節點（元素）的文本值

導航屬性:

parentNode  // 節點（元素）的父節點 (推薦)
firstChild  // 節點下第一個子元素
lastChild   // 節點下最後一個子元素
childNodes  // 節點（元素）的子節點

推薦導航屬性：

parentElement            // 父節點標簽元素
children                 // 所有子標簽
firstElementChild        // 第一個子標簽元素
lastElementChild         // 最後一個子標簽元素
nextElementtSibling      // 下一個兄弟標簽元素
previousElementSibling   // 上一個兄弟標簽元素

通過 Id 定位 HTML 元素

<div id="div1">
    <div>hello div</div>
    <p>hello p</p>

</div>


<script>
    var ele = document.getElementById("div1");

    console.log(ele.nodeName);
    console.log(ele.nodeType);
    console.log(ele.nodeValue);

</script>

<div id="div1">
    <div>hello div</div>
    <p>hello p</p>
</div>

<script>
    var ele = document.getElementById("div1");
    var ele3 = ele.parentNode;
    alert(ele3.nodeName);
</script>

<div id="div1">
    <div>hello div</div>
    <p>hello p</p>
</div>

<script>
    var ele = document.getElementById("div1");
    var ele_son = ele.firstElementChild;
    var ele_son2 = ele.lastElementChild;
    alert(ele_son.nodeName);
    alert(ele_son2.nodeName);
</script>

<div id="div1">
    <div>hello div</div>
    <p>hello p</p>
</div>

<script>
    var ele = document.getElementById("div1").firstElementChild;
    var sib = ele.nextElementSibling;
    alert(ele);
    alert(sib.nodeName);
</script>

通過 ClassName 定位 HTML 元素

<div id="div1"> hello
    <div class="div2">hello 2</div>
    <div class="div3">hello 3</div>
</div>

<script>
    var ele = document.getElementsByClassName("div2")[0];
    var ele2 = ele.nextElementSibling;
    alert(ele2.nodeName);
</script>

通過 tag 定位 HTML 元素

<div id="div1"> hello
    <div class="div2">hello 2</div>
    <div class="div3">hello 3</div>
    <p>hello p</p>
</div>
<script>
    var tag = document.getElementsByTagName("p");
    alert(tag[0].innerHTML);
</script>

局部定位 HTML 元素
1.局部查找可以通過 getElementsByClassName() 和 getElementsByTagName() 方法
2.局部查找不可以通過getElementsByName() 和 getElementById() 方法

<div id="div1"> hello
    <div class="div2">hello 2</div>
    <div class="div3" name="klvchen">hello 3
        <p>hello inner</p>
    </div>
    <p>hello p</p>
</div>
<script>
    var ele = document.getElementsByClassName("div3")[0];
    var ele2 = ele.getElementsByTagName("p")[0];
    alert(ele2.innerHTML);
</script>