表格示例(取消,全选,反选)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格示例</title>
</head>
<body>
<button class="select">全选</button>
<button class="reserve">反选</button>
<button class="cancel">取消</button>
<table border="1">
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox" class="check"></td>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
<script>
// 方式一：分别给每个button增加事件
// var ele_select = document.getElementsByClassName('select')[0];
// var ele_reserve = document.getElementsByClassName('reserve')[0];
// var ele_cancel = document.getElementsByClassName('cancel')[0];
// var ele_input = document.getElementsByClassName('check');
//全选
// ele_select.onclick = function () {
// for (var i = 0; i < ele_input.length; i++) {
// ele_input[i].checked = 'checked'
// }
// };
// //取消
// ele_cancel.onclick = function () {
// for (var i =0;i<ele_input.length;i++){
// //删除checked属性，直接设置为空就行了
// ele_input[i].checked = ''
// }
// };
// //反选
// ele_reserve.onclick = function () {
// for (var i = 0; i < ele_input.length; i++) {
// var ele = ele_input[i];
// if (ele.checked) {//如果选中了就设置checked为空
// ele.checked = '';
// }
// else {//如果没有就设置checked = checked
// ele.checked = 'checked';
// }
// }
// };
//方式二：方式一的优化循环增加事件
var ele_button = document.getElementsByTagName('button');
var ele_input = document.getElementsByClassName('check');
for(var i=0;i<ele_button.length;i++) {
ele_button[i].onclick = function () {
if (this.innerHTML == '全选') {
for (var i = 0; i < ele_input.length; i++) {
//添加一个checked属性
ele_input[i].checked = 'checked'
}
}
else if (this.innerHTML == '取消') {
for (var i = 0; i < ele_input.length; i++) {
//删除checked属性，直接设置为空就行了
ele_input[i].checked = ''
}
}
else {
for (var i = 0; i < ele_input.length; i++) {
var ele = ele_input[i];
if (ele.checked) {//如果选中了就设置checked为空
ele.checked = '';
}
else {//如果没有就设置checked = checked
ele.checked = 'checked';
}
}
}
}
}
</script>
</body>
</html>
模态对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: white;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: grey;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
200px;
background-color: wheat;
}
</style>
</head>
<body>
<div class="back">
<input class="c" type="button" value="click">
</div>
<div class="shade hide handles"></div>
<div class="models hide handles">
<input class="c" type="button" value="cancel">
</div>
<script>
var eles=document.getElementsByClassName("c");
var handles=document.getElementsByClassName("handles");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){
if(this.value=="click"){
for(var j=0;j<handles.length;j++){
handles[j].classList.remove("hide");
}
}
else {
for(var j=0;j<handles.length;j++){
handles[j].classList.add("hide");
}
}
}
}
</script>
</body>
</html>
模态对话框
作用域：
<script>
var s = 12;
function f() {
console.log(s); //undefined
var s=12;
console.log(s); //12
}
f();
</script>
<script>
var s = 12;
function f() {
console.log(s); //12
var t=12;
console.log(s); //12
}
f();
</script>
<script>
function func() {
console.log(num); //输出：undefined，而非报错，因为变量num在整个函数体内都是有定义的
var num = 1; //声明num 在整个函数体func内都有定义
console.log(num); //输出：1
}
func();
</script>
相当于：
<script>
function func() {
var num // 定义了num
console.log(num); //输出：undefined，而非报错，因为变量num在整个函数体内都是有定义的
num = 1; //num 赋值 1
console.log(num); //输出：1
}
func();
</script>
function bar() {
function age() {
console.log("1")
}
age() //2
function age(){
console.log("2")
}
age() //2
}
result=bar();
<script>
function bar(age) {
console.log(age); //原因age在下面的函数声明了，当发现下面代码中声明了函数，function age(){},此时age别覆盖为函数代码
var age = 99;
var sex= 'male';
console.log(age);
function age() { //函数声明
alert(123)
};
var age = function (){ // 属于函数表达式，赋值运算，和函数声明不一样
alert(123)
}
console.log(age);
return 100;
}
result=bar(5);
</script>
预解析：
<script>
var fun = 1
function fun() {
console.log("11")
}
fun()
</script>
解释：为啥会报错，在预解析的时候，先var fun(var fun = 1 得来的)，由于有函数声明，var fun = fun(){} 函数代码，结束预编译，当代码执行到var fun = 1 的时候，var fun 有被赋值了，所以 fun() 会报错，fun不是一个函数(相当于将函数调到最开头的地方)
例题：
<script>
num = 1;
function fun() {
console.log(num) //1
}
fun()
console.log(num) //1
</script>
===============================================
<script>
fun()
var num = 1;
function fun() {
console.log(num) //undefined
}
console.log(num) //1
</script>
=============================================
<script>
fun()
num = 1;
function fun() {
console.log(num) //报错，原因是num = 1 并没有生成 var num 声明 num
}
console.log(num) //1
</script>
解释：如果在函数内部打印某个参数，首先从函数里面找，如果函数里面有定义了参数，如果参数在console.log（）下面定义的，那个结果为undefined，否则，打印函数里面的参数值，如果函数里面
没有定义，则在调用函数的地方的局域里找，如果在调用函数的下面有定义，则结果为undefined，否则，为调用函数的地方上面定义的值，如果都没有，在出去找，一层一层
下面定义 结果为 undefined， 上面定义， 为 结果
<script>
var a = 11
function abd() {
console.log(a) //undefind
var a = 1
}
abd()
</script>
==============================
<script>
var a = 11
function abd() {
console.log(a) // 11
}
abd()
</script>
<script>
a = "dd"
var a
console.log(a) //dd
</script>
===================================
<script>
var a = "dd"
var a
console.log(a) //dd
</script>
==================================
<script>
function fun(){
a = "dd"
var a
}
fun()
console.log(a) //报错
</script>
==================================
<script>
function fun(){
a = "dd"
}
fun()
console.log(a) /dd
</script>
<script>
fun()
console.log(a) //报错
console.log(b) //b=9 隐式全局变量
console.log(c) //c=9
function fun(){
var a = b =c = 9 //var a=9 b=c=9
console.log(a)
console.log(b)
console.log(c)
}
</script>
<script>
f()
var f = function () {
console.log("1")
}
</script>
//会报错，原因是这段代码相当
<script>
var f
f() //f不是一个函数
f = function () {
console.log("1")
}
</script>
=========================================
f()
function f(){
console.log("此时不会报错")
}
原因欲解析的时候 变成了这样
function f(){
console.log("此时不会报错")
}
f()