蓝鸥原生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循环则可能一次都不执行。
