js基础知识3

1.路由的跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#/home">首页</a>
    <a href="#/course">课程</a>
    <div id="app"></div>
    <script>
        window.onhashchange = function(){
            console.log(location.hash);
            switch(location.hash){
                case "#/home":
                    document.getElementById("app").innerHTML = "<h2>我是首页</h2>"
                    break;
                case "#/course":
                    document.getElementById("app").innerHTML = "<h2>我是课程</h2>"
                    break;
                default:
                    break;
            }
        }
    </script>
</body>
</html>

View Code

2.选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            #tab{
                width: 480px;
                margin: 20px auto;
                border: 1px solid red;
            }
            ul{
                width: 100%;
                overflow: hidden;
            }
            ul li{
                float: left;
                width: 160px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #cccccc;
            }

            ul li a{
                text-decoration: none;
                color:black;
            }
            li.active{
                background-color: red;
            }
            p{
                display: none;
                height: 200px;
                text-align: center;
                line-height: 200px;
                background-color: red;
            }
            p.active{
                display: block;

            }

    </style>
</head>
<body>
    <div id="tab">
        <ul>
            <li class="active">
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">新闻</a>
            </li>
            <li>
                <a href="#">图片</a>
            </li>
        </ul>
        <p class="active">首页内容</p>
        <p>新闻内容</p>
        <p>图片内容</p>
    </div>
    <script type="text/javascript">
        //变量提升
        // var a;
        // console.log(a);//undefined
        // a = 2;
        // console.log(a);//2
        // var a;
        // console.log(a);
        // {
        //     a = 3;
        //     console.log(a);
        // }
        // console.log(a);
        var oLis = document.getElementsByTagName("li");
        var oPs = document.getElementsByTagName("p");
        for(var i = 0;i < oLis.length;i++){
            oLis[i].index = i;
            oLis[i].onclick = function () {
                for (var j = 0;j < oLis.length;j++){
                    oLis[j].className = "";
                    oPs[j].className = "";
                }
                this.className = "active";
                oPs[this.index].className = "active";
            }
        }
    </script>
</body>
</html>

View Code

3.用es6的let解决选项卡的问题

let olis = document.getElementsByTagName('li');
        let oPs = document.getElementsByTagName('p');

        
        for(let i = 0; i < olis.length; i++){

            olis[i].onclick = function() {
                for(let j = 0; j < olis.length; j++){
                    olis[j].className = '';
                    oPs[j].className = ''
                } 
                this.className = 'active';
                 oPs[i].className = 'active';
            }

View Code

4.DOM的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        abc{
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <p id="child1">qing</p>
    </div>
    <script>
        var oDiv = document.getElementById("box");
        var oP = document.getElementById("child1");

        // var oP1 = document.createElement("abc");
        // oDiv.appendChild(oP1);
        var oP2 = document.createElement("p");
        oP2.innerText = "qingqing";
        oDiv.insertBefore(oP2,oP);
    </script>
</body>
</html>

View Code

5.定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="start">开启定时器</button>
    <button id="clear">清除定时器</button>
    <div id="box"></div>

    <!--定时器
    1.一次性定时器
        可以做异步
    2.循环周期定时器
        可以做动画

        js和python都有垃圾回收机制
        但是定时器对象，回收不了

        开一次性定时器：
         var timer = setTimenout(fn,1000);
         开循环定时器:
         var timer = setInterval(fn,1000);
         clearTimeout()
         clearInterval()
    -->

    <script>
        var timer = null;
        document.getElementById("start").onclick = function(){
            timer = setTimeout(function(){
                console.log(11111);
            },1000);
            console.log(222222);
        };
        document.getElementById("clear").onclick = function () {
            clearTimeout()
        }


        // var count = 0;
        // var timer = null;
        // document.getElementById("start").onclick = function(){
        //     var oDiv = document.getElementById("box");
        //     clearInterval(timer);
        //     timer = setInterval(function(){
        //         count+=10;
        //         oDiv.style.marginLeft = count + "px";
        //     },1000)
        // }
    </script>
</body>
</html>

View Code

6.面向对象

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

</head>
<body>
    <script>
        //1使用Object()内置的构造函数来创建对象
        // var person = new Object();
        // person.name = "qing";
        // person.age = 18;
        // person.fav = function () {
        //     console.log(this.name)
        // };
        // person.fav();
        //字面量方式创建对象
        // var person = {
        //     name:"qing",
        //     age:18,
        //     fav:function () {
        //         console.log(this.name);
        //     }
        // };
        // person.fav();

        function createPerson() {
            var person = new Object();
            person.name = "qing";
            person.age = 18;
            person.fav = function(){
                console.log(this.name);
            };
            return person;
        }
        function createFruit() {
            var furit =  new Object();
            furit.name = "zhang";
            furit.age = 18;
            furit.fav = function () {
                console.log(this.name);
            };
            return furit;
        }
        var p1 = createPerson();
        var f1 = createFruit();
        console.log(p1 instanceof Object);
        console.log(f1 instanceof Object);
    </script>
</body>
</html>

View Code

7.构造函数创建对象

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

</head>
<body>
    <script>
        //var arr = new Array();
        //console.log(arr);
        //自定义构造函数,和普通函数的区别就是首字母大写
        function Person(name,age){
            this.name = name;
            this.age = age;
            this.fav = function () {
                console.log(this.name)
            }
        }

        function Furit(name,age) {
            this.name = name;
            this.age = age;
            this.fav = function () {
                console.log(this.name)
            }
        }
        var p1 = new Person("qing",18);
        var f1 = new Furit("zhang",17);
        console.log(p1 instanceof Object);
        console.log(f1 instanceof Object);
        console.log(p1 instanceof Person);
        console.log(f1 instanceof Furit);
    </script>
</body>
</html>

View Code

8.原型的模式来创建对象

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

</head>
<body>
    <script>
        function Person(name,age){
            this.name = name;
            this.age = age;
        }
        //Person.prototype 是Person的父类
        Person.prototype.showName = function () {
            console.log(this.name)
        };
        var p1 = new Person("qing",20);
        p1.showName();
    </script>
</body>
</html>

View Code

9.BOM

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

</head>
<body>
    <a href="./index.html">下一页</a>
    <script>
        // //在5秒之后打开百度
        // setTimeout(function () {
        //     window.open("http://www.baidu.com","_block")//_self是在本窗口打开，_block或者不写是在新窗口打开
        // },5000);
        // console.log(window.location);
        // window.location.href = "http://www.baidu.com";
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">上一页</button>
    <script>
        alert(1);
        document.getElementById("btn").onclick = function () {
            //后退
            history.go(-1);
            //history.go(0);
            //尽量少用是全局刷新  局部刷新（ajax）
            window.location.reload();
        }
    </script>
</body>
</html>

View Code

猜你喜欢