JavaScript 基础(三)

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=" 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>