JSDOM练习

crainyday

前端 / JS

发布于：2019年4月6日

字数：1k字

时长：5分钟

JS DOM实现切换图片、多选框全选

一.图片切换

CSS样式:

*{
    margin: 0;
    padding: 0;
}
.img{
    width: 500px;
    margin: 50px auto;
    padding: 10px;
    text-align: center;
    background-color: yellowgreen;
}

html的body:

<body>
    <div class="img">
        <p id="info"></p>
        <img src="img/1.jpg" alt="冰棍"/>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

分析: 想要实现点击按钮时图片的切换, 只需给按钮添加一个点击事件, 点击时修改一下img标签的src就好了.

图片:

JS实现图片切换:

window.onload = function(){
    //获取相应元素
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var img = document.getElementsByTagName("img")[0];
    var info = document.getElementById("info");
    //添加图片的src
    var imgSrcs = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
    var index = 0;
    var str = "一共"+imgSrcs.length+"张图片,当前第";
    info.innerHTML = str + (index+1) + "张";
    //点击上一张的事件
    prev.onclick = function(){
        if(--index==-1){
            index = imgSrcs.length-1;
        }
        img.src = imgSrcs[index];
        info.innerHTML = str + (index+1) + "张";
    };
    //点击下一张的事件
    next.onclick = function(){
        if(++index==imgSrcs.length){
            index = 0;
        }
        img.src = imgSrcs[index];
        info.innerHTML = str + (index+1) + "张";
    };
};

二.全选练习

html的body:

<body>
    <form method="post" action="">
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>
</body>

注意: 网页中的checkedAllBox多选框, 当点击选中它时, 下面的所有多选框也选中, 当点击取消选中它时, 下面的所有多选框也取消选中; 还得保证, 如果下面的多选框全部选中, 则checkedAllBox也选中, 如果下面的多选框没有全部选中, 则它也不选中.

1.全选按钮

通过W3School离线手册查询JS对象里的HTML对象<input> checkbox, 可知它有属性checked表示现在多选框的选中状态.

window.onload = function() {
    //获取全选按钮
    var allBtn = document.getElementById("checkedAllBtn");
    //获取所有多选框
    var items = document.getElementsByName("items");
    //获取checkedAllBox多选框
    var checkedAllBox = document.getElementById("checkedAllBox");
    allBtn.onclick = function(){
        for(var i = 0;i < items.length;i ++){
            items[i].checked = true;
        }
        //选中checkedAllBox
        checkedAllBox.checked = true;
    };
}

2.全不选按钮

window.onload = function() {
    //获取全不选按钮
    var noBtn = document.getElementById("checkedNoBtn");
    //获取所有多选框与checkedAllBox,共用之前的代码
    var items = document.getElementsByName("items");
    var checkedAllBox = document.getElementById("checkedAllBox");
    noBtn.onclick = function(){
        for(var i = 0;i < items.length;i ++){
            items[i].checked = false;
        }
        //取消选中checkedAllBox
        checkedAllBox.checked = false;
    };
}

3.反选

window.onload = function() {
    //获取反选按钮
    var revBtn = document.getElementById("checkedRevBtn");
    //获取所有多选框与checkedAllBox,共用之前的代码
    var items = document.getElementsByName("items");
    var checkedAllBox = document.getElementById("checkedAllBox");
    revBtn.onclick = function(){
        var flag = 0;
        for(var i = 0; i < items.length; i++) {
            items[i].checked = !items[i].checked;
            flag += items[i].checked;
        }
        //如果所有多选框选中,选中checkedAllBox
        if(flag==4)checkedAllBox.checked = true;
        else checkedAllBox.checked = false;
    };
}

4.提交

点击提交按钮时, 弹出选中的value属性值

window.onload = function() {
    //获取提交按钮
    var submitBtn = document.getElementById("sendBtn");
    //获取所有多选框,共用之前的代码
    var items = document.getElementsByName("items");
    submitBtn.onclick = function() {
        for(var i = 0; i < items.length; i++) {
            if(items[i].checked){
                alert(items[i].value);
            }
        }
    };
}

5.checkedAllBox

window.onload = function() {
    //获取所有多选框与checkedAllBox,共用之前的代码
    var items = document.getElementsByName("items");
    var checkedAllBox = document.getElementById("checkedAllBox");
    checkedAllBox.onclick = function(){
        //同步所有多选框
        for(var i = 0; i < items.length; i++) {
            items[i].checked = this.checked;
        }
    };
}

6.点击多选框

window.onload = function() {
    //获取所有多选框与checkedAllBox,共用之前的代码
    var items = document.getElementsByName("items");
    var checkedAllBox = document.getElementById("checkedAllBox");
    for(var i = 0; i < items.length; i++) {
        //给每个多选框绑定单击响应函数
        items[i].onclick = function(){
            //点击多选框时,同步checkedAllBox
            checkedAllBox.checked = true;
            for(var j = 0; j < items.length; j++) {
                if(!items[j].checked){
                    checkedAllBox.checked = false;
                    break;
                }
            }
        };
    }
}