蓝鸥原生JS：js中的程序控制语句拓展


蓝鸥零基础学习HTML5—html+css基础

http://11824614.blog.51cto.com/11814614/1852769


拓展：for...in循环

for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：

var o = {

    name: 'Jack',

    age: 20,

    city: 'Beijing'

};for (var key in o) {

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

}

input的checked属性

　　在学习HTML是我们都知道：把input标签的type设置为checkbox后，就是一个复选框了，如果checked属性是true，那么选框被选中；如果checked属性设置为false，则选框是取消选中状态。下边，我们使用js来设置选框的状态.

　　示例代码：通过点击切换按钮，实现选框的选中】取消选中效果

<!DOCTYPE html><html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <input type="button" value="切换" id="btn1" />

        <input type="checkbox" id="ch1" />

    </body>

    <script type="text/javascript">

        var btn1 = document.getElementById("btn1");

        var ch1 = document.getElementById("ch1");

 

        btn1.onclick = function (){

 

            if (ch1.checked){

                ch1.checked = false;

            }else{

                ch1.checked = true;

            }

 

        }

    </script></html>

　　练习:实现类似购物车的“全选”、“反选”效果

　　示例代码如下：

<!DOCTYPE html><html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <input type="button" value="全选" id="btn1" />

        <input type="button" value="反选" id="btn2" />

        <input type="checkbox" id="ch1" />

        <ul id="ul1">

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

            <li><input type="checkbox" /></li>

            <li><input type="checkbox" /></li>

        </ul>

    </body>

    <script type="text/javascript">

        var btn1 = document.getElementById("btn1");

        var btn2 = document.getElementById("btn2");

        var ch1 = document.getElementById("ch1");

        var ul1 = document.getElementById("ul1");

        var inputs = ul1.getElementsByTagName("input");//        alert(inputs.length);

 

        btn1.onclick = function (){

 

            for (var i=0; i<inputs.length; i++){

 

                inputs[i].checked = true;

            }

            ch1.checked = true;

        }

        btn2.onclick = function (){

            var num = 0;

            for (var i=0; i<inputs.length; i++){

                if (inputs[i].checked==false){

                    num++;

                }

                inputs[i].checked = !inputs[i].checked;

            }

            if (num == inputs.length){

                alert("ok");

            }

        }

 

    </script></html>

while循环

for循环在已知循环的初始和结束条件时非常有用。而上述忽略了条件的for循环容易让人看不清循环的逻辑，此时用while循环更佳。

while循环只有一个判断条件，条件满足，就不断循环，条件不满足时则退出循环。比如我们要计算100以内所有奇数之和，可以用while循环实现：

var x = 0;var n = 99;while (n > 0) {

    x = x + n;

    n = n - 2;

}

x; // 2500

　　在循环内部变量n不断自减，直到变为-1时，不再满足while条件，循环退出。

do ... while循环

do { ... } while()循环，它和while循环的唯一区别在于，不是在每次循环开始的时候判断条件，而是在每次循环完成的时候判断条件：

var n = 0;do {

    n = n + 1;

} while (n < 100);

n; // 100

　　用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。