一、JS中for循环遍历测试
for循环遍历有两种
第一种：是有条件的那种，例如 for(var i = 0;i<ele.length;i++){}
第二种：for （var i in li ）{}
现在我们来说一下测试一下第二种（数组和obj的）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <script>
9 var arr = [11,22,33,44,55];
10 var obj = {'username':'zzz','agr':20}; //js中的这个类似字典的不叫字典，而是一个对象
11 for (var i in obj){
12 console.log(i); //拿到的是键
13 console.log(obj[i]) //值
14 }
15 for (var j in arr){
16 console.log(j); //拿到索引
17 console.log(arr[j]) //拿到值
18 }
19 </script>
20 </body>
21 </html>实例
二、获取value属性值
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>获取value值</title>
6 </head>
7 <body>
8 <input type="text" id="c1">
9 <select name="pro" id="s1">
10 <option value="1">河北省</option>
11 <option value="2">河南省</option>
12 <option value="3">北京省</option>
13 </select>
14 <button>show</button>
15 <script>
16 var ele_button=document.getElementsByTagName("button")[0];
17
18 ele_button.onclick=function () {
19 var ele_input=document.getElementById("c1");
20 var ele_select=document.getElementById("s1");
21 console.log(ele_select.value)
22 };
23 </script>
24 </body>
25 </html>View Code
三、表格示例（全选，反选，取消）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>表格示例</title>
6 </head>
7 <body>
8 <button class="select">全选</button>
9 <button class="reserve">反选</button>
10 <button class="cancel">取消</button>
11 <table border="1">
12 <tr>
13 <td><input type="checkbox" class="check"></td>
14 <td>111</td>
15 <td>222</td>
16 <td>333</td>
17 </tr>
18 <tr>
19 <td><input type="checkbox" class="check"></td>
20 <td>111</td>
21 <td>222</td>
22 <td>333</td>
23 </tr>
24 <tr>
25 <td><input type="checkbox" class="check"></td>
26 <td>111</td>
27 <td>222</td>
28 <td>333</td>
29 </tr>
30 <tr>
31 <td><input type="checkbox" class="check"></td>
32 <td>111</td>
33 <td>222</td>
34 <td>333</td>
35 </tr>
36 </table>
37 <script>
38 // 方式一：分别给每个button增加事件
39 var ele_select = document.getElementsByClassName('select')[0];
40 var ele_reserve = document.getElementsByClassName('reserve')[0];
41 var ele_cancel = document.getElementsByClassName('cancel')[0];
42 var ele_input = document.getElementsByClassName('check');
43 //全选
44 ele_select.onclick = function () {
45 for (var i = 0; i < ele_input.length; i++) {
46 //添加一个checked属性
47 ele_input[i].checked = 'checked'
48 }
49 };
50 //取消
51 ele_cancel.onclick = function () {
52 for (var i =0;i<ele_input.length;i++){
53 //删除checked属性，直接设置为空就行了
54 ele_input[i].checked = ''
55 }
56 };
57 //反选
58 ele_reserve.onclick = function () {
59 for (var i = 0; i < ele_input.length; i++) {
60 var ele = ele_input[i];
61 if (ele.checked) {//如果选中了就设置checked为空
62 ele.checked = '';
63 }
64 else {//如果没有就设置checked = checked
65 ele.checked = 'checked';
66 }
67 }
68 };
69
70
71
72
73 //方式二：方式一的优化循环增加事件
74 // var ele_button = document.getElementsByTagName('button');
75 // var ele_input = document.getElementsByClassName('check');
76 // for(var i=0;i<ele_button.length;i++) {
77 // ele_button[i].onclick = function () {
78 // if (this.innerHTML == '全选') {
79 // for (var i = 0; i < ele_input.length; i++) {
80 // //添加一个checked属性
81 // ele_input[i].checked = 'checked'
82 // }
83 // }
84 // else if (this.innerHTML == '取消') {
85 // for (var i = 0; i < ele_input.length; i++) {
86 // //删除checked属性，直接设置为空就行了
87 // ele_input[i].checked = ''
88 // }
89 // }
90 // else {
91 // for (var i = 0; i < ele_input.length; i++) {
92 // var ele = ele_input[i];
93 // if (ele.checked) {//如果选中了就设置checked为空
94 // ele.checked = '';
95 // }
96 // else {//如果没有就设置checked = checked
97 // ele.checked = 'checked';
98 // }
99 // }
100 // }
101 // }
102 // }
103
104
105 </script>
106 </body>
107 </html>View Code
四、模态对话框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .back{
8 background-color: white;
9 height: 2000px;
10 }
11
12 .shade{
13 position: fixed;
14 top: 0;
15 bottom: 0;
16 left:0;
17 right: 0;
18 background-color: grey;
19 opacity: 0.4;
20 }
21
22 .hide{
23 display: none;
24 }
25
26 .models{
27 position: fixed;
28 top: 50%;
29 left: 50%;
30 margin-left: -100px;
31 margin-top: -100px;
32 height: 200px;
33 width: 200px;
34 background-color: wheat;
35
36 }
37 </style>
38 </head>
39 <body>
40 <div class="back">
41 <input class="c" type="button" value="click">
42 </div>
43
44 <div class="shade hide handles"></div>
45
46 <div class="models hide handles">
47 <input class="c" type="button" value="cancel">
48 </div>
49
50
51 <script>
52
53
54 var eles=document.getElementsByClassName("c");
55 var handles=document.getElementsByClassName("handles");
56 for(var i=0;i<eles.length;i++){
57 eles[i].onclick=function(){
58
59 if(this.value=="click"){
60
61 for(var j=0;j<handles.length;j++){
62
63 handles[j].classList.remove("hide");
64
65 }
66
67 }
68 else {
69 for(var j=0;j<handles.length;j++){
70
71 handles[j].classList.add("hide");
72 }
73
74 }
75 }
76 }
77
78 </script>
79
80 </body>
81 </html>View Code
五、搜索框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>模拟placeholder属性的功能</title>
6 </head>
7 <body>
8 <input type="text" placeholder="username" id="submit">
9 <input type="text" value="username" id="submit1">
10 <script>
11 // var ele = document.getElementById('submit1');
12 var ele = document.getElementById('submit1');
13 ele.onfocus = function () {
14 //先获取焦点，点击输入框就获取到焦点，光标一上去就把值设成空
15 this.value=""
16 };
17 ele.onblur = function () {
18 // 当光标不点击那个输入框的时候就失去焦点了
19 //当失去焦点的时候，判断当前的那个值是不是为空，是否含有空格
20 // 如果为空或者有空格，用trim()去掉空格。然后赋值为username
21 if (this.value.trim()==""){
22 this.value='username'
23 }
24 }
25 </script>
26 </body>
27 </html>View Code
六、作用链域
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>作用链域</title>
6 </head>
7 <body>
8 <script>
9 var s = 12;
10 function f() {
11 console.log(s); //undefined
12 var s=12;
13 console.log(s);//12
14 }
15 f();
16 </script>
17 </body>
18 </html>js的作用域
作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。
任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。
作用域
1. 全局作用域(Global Scope)
在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：
(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域
var name="yuan";
function foo(){
var age=23;
function inner(){
console.log(age);
}
inner();
}
console.log(name); // yuan
//console.log(age); // Uncaught ReferenceError: age is not defined
foo(); // 23
inner(); // Uncaught ReferenceError: inner is not defined(2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：
var name="yuan";
function foo(){
age=23;
var sex="male"
}
foo();
console.log(age); // 23
console.log(sex); // sex is not defined变量age拥有全局作用域，而sex在函数外部无法访问到。
(3)所有window对象的属性拥有全局作用域
一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、等等。
2. 局部作用域(Local Scope)
和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.
如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）
作用域链(Scope Chain)
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
示例演示
function bar(age) {
console.log(age);
var age = 99;
var sex="male";
console.log(age);
function age(){
alert(123);
} ;
console.log(age);
return 100;
}
result=bar(5);
一 词法分析过程(涉及参数，局部变量声明，函数声明表达式)：
1-1 、分析参数，有一个参数，形成一个 AO.age=undefine;
1-2 、接收参数 AO.age=5;
1-3 、分析变量声明，有一个 var age, 发现 AO 上面有一个 AO.age ，则不做任何处理
1-4 、分析变量声明，有一个 var sex，形成一个 AO.sex=undefine;
1-5 、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程：
2-1 、执行第一个 console.log(age) 时，当前的 AO.age 是一个函数，所以输出的一个函数
2-2 、这句 var age=99; 是对不 AO.age 的属性赋值， AO.age=99 ，所以在第二个输出的age是 99;
2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。
注意：执行阶段：
function age(){
alert(123)
} ;
不进行任何操作，将执行语句复制给age这部操作是在词法分析时，即运行前完成的。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
