6.JavaScript中

作者: 芝麻酱的简书 | 来源:发表于2018-06-21 14:43 被阅读51次

6.JavaScript中
6.javascript 函数
6.JavaScript柯里化
6.JavaScript循环（for循环、双重for循环、whi
中中
中中宝宝
周中中，
重逢（中中）
疑惑中！质疑中！不解中
业余中，努力中

JS对象创建：

//        创建对象
        var dog = {
            name:'xiaoming',//属性
            age:10,
            height:120,
            friends:['xioahua','feng'],
            eat:function () {
                console.log(this.name,'吃东西');//this当前对象
            },

            run:function (distance) {
                console.log(this.name+'跑了'+distance+'米');
            }
        };
        console.log(dog, typeof dog);
        dog.eat();
        dog.run(100);

        //       创建一个对象
        var obj = new Object();//创建一个obj对象
        obj.age = 5;
        obj.click = function () {
            alert('我被点击了');
        }
        //      另一种写法
        var obj1 = {
            age: 10,
            click: function () {
                alert('我也被点击了');
            }
        }

JS通过构造函数创建对象：

//        普通函数
        var Dog = function (name) {
            console.log('这是一个普通函数');
            this.name = name;
            this.eat = function (someThing) {
                console.log(this.name+'吃'+someThing);
            };
        }

//        通过new关键字创建对象
        var dog1 = new Dog('ming');
        dog1.eat('汉堡');
        var dog2 = new Dog('feng');

JS内置对象window：

所有的全局变量都是window的属性
所有的全局函数都是window的方法

        <!---->

        var age = 17; //全局变量
        window.age = 18;
        function person() {
            console.log(this)
        }
        person();//打印的是window

        new person();//打印的是person类 不是window

//     第二大作用：动态跳转
        window.alert(0);
        window.location.href = 'http://www.baidu.com';
       //iOS开发拦截url跳转就是这个

document：

可以动态获取网页的中的所有标签（节点）
可以对获取到的标签（节点）进行CRUD（增删改查）

        //写入
        document.write('haha');
//        增加标签
        document.write('<input>');

小练习1：点击按钮更换图片

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

        // 点击修改图片练习
        function clickAction() {
//           拿到图片修改src属性
            var img = document.getElementsByClassName('icon')[0];
//           修改src属性
            img.src = 'newImg.png';
        }
    </script>

</head>

<body>
<img src="../imgs.png" class="icon">
<button onclick="clickAction">点我</button>
</body>

小练习2：切换图片

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var max = 9;
        var min = 1;
        var currentIndex = min;

        //        拿到标签
        var img = document.getElementsByClassName('icon');
        var preBtn = document.getElementsByTagName('button')[0];
        var nextBtn = document.getElementsByTagName('button')[1];
        //        监听按钮点击事件
        preBtn.onclick = function () {

            if (currentIndex == min) {
                currentIndex = max;
            } else {
                currentIndex -= 1;
            }
            img.src = 'imgName_' + currentIndex;
        };
        nextBtn.onclick = function () {
            if (currentIndex == max) {
                currentIndex = min;
            } else {
                currentIndex += 1;
            }
            img.src = 'imgName_' + currentIndex;
        }

    </script>
</head>
<body>
<img src="../imgs.png" name="icon">
<button>上一张</button>
<button>下一张</button>
</body>

定时器：

<body>
<p id="haha">10</p>
<script>
    //        设置定时器
    var p = document.getElementById('haha')[0];
    var timer = setInterval(function () {
        p.innerText -=1;

        if (p.innerText == 0) {
            clearInterval(timer);
        }
    }, 1000); //间隔1000毫秒

</script>
</body>

JS常用事件

    <script>
        //    当页面加载完毕
        window.onload = function() {
            alert('页面加载完毕')

            var img = document.getElementById('haha')[0];
            img.onmousemove = function() {
                console.log('在标签上移动');
            }

            img.onmouseout = function () {
                console.log('离开标签');
            }

            img.onfocus = function () {
                console.log('')
            }
        };

    </script>