2016.3.18__ JavaScript基础_2__第十三天-CSDN博客

本文链接：https://blog.csdn.net/mr_lp/article/details/50924491

2016.3.18__ JavaScript基础2_第十三天

如果您觉得这篇文章还不错，可以去H5专题介绍中查看更多相关文章。

这里写图片描述

今日课程预览

这里写图片描述

1.for循环

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

当然，我们可以一遍遍的重复代码。

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

但是我们程序猿是最讨厌重复性操作的人，让我们写这么多不是逼疯我们么。

所以我们要使用循环。（下面是对循环结构的详细说明，有一定基础的同学可以跳过）

for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}

1.1 循环详解

下面是对循环结构的详细说明，有一定基础的同学可以跳过。

循环体的结构

for(定义一个循环增量；循环条件；循环增量自加/自减){
    循环体
}

分析一下这个循环结构：

循环增量：在这里定义一个循环增量，并赋初值（一般是 0 或者 1）
循环条件：这是一个条件表达式，用来判断循环调试是不是满足
循环增量自加：在这里，每次循环，之前定义的循环增量都会增加1次
循环体：在循环条件成立的前提下，会不断重复循环体中的内容，直至循环条件不成立

注意：写循环的时候一定要注意给出正确的循环条件，否则会造成死循环。

    <!DOCTYPE html>
    <html>
    <body>

    <script>
    cars=["BMW","Volvo","Saab","Ford"];
    for (var i=0;i<cars.length;i++)
    {
    document.write(cars[i] + "<br>");
    }
    </script>

    </body>
    </html>

1.2 跳出循环、中止循环

1.2.1 break

那如果我们想要我们的程序当循环到一个特定的人的时候，不继续进行了，该怎么办？

我们需要使用我们的 break，去跳出当前的循环。

    <script>
        for (var i=0;i<10;i++)
        {
            alert(i);

            if(i > 5){
                break;
            }
        }
    </script>

当 i <= 5 之前，每次循环都去打印 i 的值，当 i > 5的时候，就直接跳出当前循环。继续向后执行。

1.2.2 continue

当我们想循环到某一个次数之后，我们就不对当前循环内的某些内容执行的时候，我们就可以使用 continue 去跳出当前的循环，继续下一次的循环。

    <script>
        for (var i=0;i<10;i++)
        {
            alert(i);

            if(i > 5){

                alert("执行了continue")；

                continue;
            }
            alert("没有执行continue")；
        }
    </script>

前5次循环，都打印计数并显示没有执行continue，五次之后就显示执行了continue。

注意：

break是停止整个循环，不管你执行到第几次，直接结束。

continue是跳出当前循环计数时的循环，就好像当我们循环到第5次的时候，执行了 continue，程序会直接结束当前的这次循环，去执行第6次循环。

这一点一定一定要注意！

1.3 其他类型循环

除了for循环（循环代码块一定的次数）之外，还有三种常见循环。

for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

因为其他循环方法，使用场景不多，在这里不做更多介绍。

1.4 for..in.. 循环（拓展）

for..in..循环是 for 循环的一个变种，

它的作用主要是将一个对象的所有属性依次循环出来。

    var o = {
        name: "larra",
        age:20,
        sex:"girl"
    };

    for(var key in o){

        alert(key); //'name','age','sex'

    }

2. input 的 checked 属性

我们在之前的学习过程中已经介绍过了，input 标签设置了类型 checkbox 属性之后，

就变成了一个复选框，选中状态时，checked 属性为 true ，未选中为 false。

那如果我们想要通过点击一个按钮就能去更改是否选中，我们该怎么做呢？

    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>

        <body>
            <input type="button" name="" id="button_1" value="切换" style="width: 50px; height: 10px;"/>
            <input type="checkbox" name="" id="change_1" value="" style="width: 30px; height: 30px; border: 1px solid blue;"/>
        </body>

        <script type="text/javascript">
            var button_1 = document.getElementById("button_1");
            var change_1 = document.getElementById("change_1");

            button_1.onclick = function(){
                if(change_1.checked){
                    change_1.checked = false;
                }
                else{
                    change_1.checked = true;
                }
            }
        </script>
    </html>

可以看见我们点击按钮，我们复选框的属性就发生了改变，很神奇对吧。

那我们接下来配合上面的循环去做个练习，我们来模仿下购物车的原理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            input{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <input type="button" name="" id="button_1" value="全选" />
        <input type="button" name="" id="button_2" value="反选" />
        <input type="checkbox" name="" id="change_1" value=""   />
        <ul id="ul_1">
            <!--li*8>input[type=checkbox]-->
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
            <li><input type="checkbox" /></li>
        </ul>
    </body>
    <script type="text/javascript">
        var button_1 = document.getElementById("button_1");
        var button_2 = document.getElementById("button_2");
        var change_1 = document.getElementById("change_1");
        var ul_1 = document.getElementById("ul_1");
        var inputs = ul_1.getElementsByTagName("input");

        button_1.onclick = function(){
            for(var i = 0;i < inputs.length; i++){
                inputs[i].checked = true;
            }
            change_1.checked = true;
        }
        button_2.onclick = function(){
            var number = 0;
            for (var i = 0; i< inputs.length;i++) {
                if(inputs[i].checked == false){
                    number ++;
                }
                inputs[i].checked = !inputs[i].checked;
            }
        }
    </script>
</html>

当然，我写的并不严谨，只是为了让大家有一个基础的概念。更完善的就等大家回去自己尝试了。

3. className 属性

我们也可以通过 className 属性给元素绑定一个class 类型的CSS样式.

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            #button_1{
                width: 200px;
                height: 100px;
                background-color: #ccc;
            }
            .active{
                width: 200px;
                height: 200px;
                background-color: #ddd;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <input type="button" id="button_1" value="显示隐藏" />
        <div id="div_1"></div>
    </body>
    <script type="text/javascript">
        var button_1 = document.getElementById("button_1");
        var div_1 = document.getElementById("div_1");

        button_1.onclick = function(){
            if(div_1.className ==""){
                div_1.className = "active";
            }
            else{
                div_1.className = "";
            }
        }
    </script>
    </html>

4. this 指针

JS 中的 this 指针使用到函数中，首先需要分析 this 所在的函数是被当做哪个对象的方法去调用的。

也就是说，this 存在哪个函数中，谁调用函数就指代谁（即指针指向原对象的地址）。

相当于 Object-C 中的 self。

示例一:

    var obj = {}; 

    obj.x = 100; 

    obj.y = function(){

        alert( this.x ); 

    }; 

    obj.y(); //弹出 100

这段代码非常容易理解，当执行 obj.y() 时，函数是作为对象obj的方法调用的，因此函数体内的this指向的是obj对象，所以会弹出100。

示例二:

    //ul1是id对应的一个ul列表对象

    ul1.onmouseleave = function(){

   //此处这里面的this就指代ul1对象（this谁调用，就指代谁）
   this.style.display = "none";

    }

同时我们也可以将之前的代码进行一下替换，

    <script type="text/javascript">
        var button_1 = document.getElementById("button_1");
        var change_1 = document.getElementById("change_1");

        button_1.onclick = function(){
            if(this.checked){
                this.checked = false;
            }
            else{
                this.checked = true;
            }
        }
    </script>

我们发现我们的代码并没有出错，这也证明了我们之前所说的 哪个元素绑定了某个函数，这个函数中的 this 关键字就指代哪个元素。

5. 综合练习

预计实现效果：
这里写图片描述

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            .active{
                background-color: #ddd;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: red;
                font-size: 50px;
                color: white;
                display: none;  
            }
            .show{
                display: block;
            }
        </style>
    </head>
    <body>
        <input class="active" type="button" value="按钮1" />
        <input type="button" value="按钮2" />
        <input type="button" value="按钮3" />
        <div class="show">A</div>
        <div>B</div>
        <div>C</div>
    </body>
    <script type="text/javascript">
        //获取所有的切换按钮
        var inputs = document.getElementsByTagName("input");
        //获取所有的 div
        var divs = document.getElementsByTagName("div");
        //遍历所有的按钮，给点击事件绑定函数
        for (var i=0; i<inputs.length;i++) {
            inputs[i].onclick = function(){
                //遍历按钮，找到用户点击的是哪一个按钮
                for (var i=0; i<inputs.length; i++) {
                    //如果第 i 个元素被点击了，则通过 className 属性来绑定对应的 CSS 样式表
                    //这里的 this 代指用户当前点击的按钮
                    if(this == inputs[i]){
                        inputs[i].className = "active";
                        divs[i].className = "show";
                    }
                    //如果不是，就取消所有的样式
                    else{
                        inputs[i].className = "";
                        divs[i].className = "";
                    }
                }
            }
        }
    </script>
    </html>