JavaScript（JS）之Javascript对象DOM（五）
https://www.cnblogs.com/haiyan123/p/7653032.html
一、JS中for循环遍历测试
for循环遍历有两种
第一种：是有条件的那种，例如 for(var i = 0;i<ele.length;i++){}
第二种：for （var i in li ）{}
现在我们来说一下测试一下第二种（数组和obj的）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var arr = [11,22,33,44,55]; var obj = {'username':'zzz','agr':20}; //js中的这个类似字典的不叫字典，而是一个对象 for (var i in obj){ console.log(i); //拿到的是键 console.log(obj[i]) //值 } for (var j in arr){ console.log(j); //拿到索引 console.log(arr[j]) //拿到值 } </script> </body> </html> 测试for循环
二、获取value属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="c1"> <select name="pro" id="s1"> <option value="1">北京</option> <option value="2">上海</option> <option value="3">广东</option> <option value="4">湖南</option> </select> <button>show</button> <script> var ele_button = document.getElementsByTagName("button")[0]; ele_button.onclick = function () { var ele_input = document.getElementById("c1"); var ele_select = document.getElementById("s1"); console.log(ele_select.value); ele_input.value = ele_select[ele_select.value - 1].innerText; } </script> </body> </html>
三、二级联动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="provinces"> <option value="">请输入省份</option> <!--<option value="1">北京</option>--> <!--<option value="2">上海</option>--> <!--<option value="3">广东</option>--> <!--<option value="4">湖南</option>--> </select> <select name="" id="citys"> <option value="">请选择城市</option> </select> <script> // var a={name:"alex"}; // var b={"name":"alex"}; // console.log(a.name); // alex // console.log(b["name"]); // alex // data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]}; // console.log(data); // {河北省: Array(2), 山西: Array(2), 陕西: Array(2)} // console.log(typeof data); // object // console.log(data["河北省"]); // (2) ["石家庄", "廊坊"] // console.log(data.河北省); // (2) ["石家庄", "廊坊"] // // for (var i in data) { // console.log(i); // 键 河北省 。。。 // console.log(data[i]); // } data={"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]}; var pro_ele=document.getElementById("provinces"); var city_ele=document.getElementById("citys") for (var i in data) { var ele=document.createElement("option"); ele.innerHTML = i; pro_ele.appendChild(ele); } pro_ele.onchange = function () { console.log(this.selectedIndex); console.log(this.options[this.selectedIndex]); var citys = data[this.options[this.selectedIndex].innerHTML]; console.log(citys); city_ele.options.length=1; // 请选择城市 for (var i = 0; i < citys.length; i++) { var ele=document.createElement("option"); ele.innerHTML = citys[i]; city_ele.appendChild(ele); } } </script> </body> </html>
四、表格示例（全选，反选，取消）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="select" onclick="SelectAll()">全选</button> <button class="reserve" onclick="Reverse()">反选</button> <button class="cancel" onclick="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> function SelectAll() { var inputs = document.getElementsByTagName("input"); for (var i=0; i < inputs.length; i ++) { inputs[i].checked = true; } } function Cancel() { var inputs = document.getElementsByTagName("input"); for (var i=0; i < inputs.length; i ++) { inputs[i].checked = false; } } function Reverse() { var inputs = document.getElementsByTagName("input"); for (var i=0; i < inputs.length; i ++) { inputs[i].checked = !inputs[i].checked; } } </script> </body> </html>
<!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++) { //添加一个checked属性 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> .content{ height: 1800px; background-color: white; } .shade{ position: fixed; top:0; left: 0; right: 0; bottom: 0; background-color: gray; opacity: 0.7; } .model{ width: 200px; height: 200px; background-color: bisque; position: absolute; top:50%; left: 50%; margin-top: -100px; margin-left: -100px; } .hide { display: none; } </style> </head> <body> <div class="content"> <button onclick="show()">show</button> hellohellohellohellohellohellohellohellohellohellohellohello </div> <div class="shade hide"></div> <div class="model hide"> <button onclick="cancel()">cancel</button> </div> <script> function show() { var ele_shade = document.getElementsByClassName("shade")[0]; var ele_model=document.getElementsByClassName("model")[0]; ele_shade.classList.remove("hide"); ele_model.classList.remove("hide"); } function cancel() { var ele_shade = document.getElementsByClassName("shade")[0]; var ele_model= document.getElementsByClassName("model")[0]; ele_shade.classList.add("hide"); ele_model.classList.add("hide"); } </script> </body> </html>
六、搜索框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟placeholder属性的功能</title> </head> <body> <input type="text" placeholder="username" id="submit"> <input type="text" value="username" id="submit1"> <script> // var ele = document.getElementById('submit1'); var ele = document.getElementById('submit1'); ele.onfocus = function () { //先获取焦点，点击输入框就获取到焦点，光标一上去就把值设成空 this.value="" }; ele.onblur = function () { // 当光标不点击那个输入框的时候就失去焦点了 //当失去焦点的时候，判断当前的那个值是不是为空，是否含有空格 // 如果为空或者有空格，用trim()去掉空格。然后赋值为username if (this.value.trim()==""){ this.value='username' } } </script> </body> </html>
js的作用域
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();
（2）所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：
var name="yuan";
function foo(){
age=23;
var sex="male"
}
foo();
console.log(age); // 23
console.log(sex); // sex is not defined
（3）所有window对象的属性拥有全局作用域
一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、window.top等等。
2. 局部作用域(Local Scope)
和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.
如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）
