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循环
View Code

二、获取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>
View Code

三、二级联动

<!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>
实例1
<!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>
实例2

五、模态对话框

<!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没有自己的作用域）

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xiangtingshen/p/10558871.html