网页前端：JavaScript编程

sky-stars

已于 2022-11-01 20:21:22 修改

阅读量1.4k

点赞数 4

分类专栏：网页前端文章标签： html css html5

于 2021-11-22 00:48:32 首次发布

本文链接：https://blog.csdn.net/qq_51917985/article/details/121463442

版权

网页前端专栏收录该内容

7 篇文章 5 订阅

订阅专栏

文章目录

前言
具体操作
总结

前言

实验目的：
1.熟悉掌握JavaScript中内置对象的使用方法。
2.熟悉掌握JavaScript中DOM对象的操作方法。
实验内容：
按照要求完成以下实验内容：
    设计两组列表对象：待选名单，参选名单，如下图所示。
    选中“待选名单”中的数据，单击“移入”，可以把选中的数据移入“参选名单”中。
    选中“参选名单”中的数据，单击“移出”，可以把选中的数据移出到“待选名单”中。
整个操作使用JavaScript编写完成。

具体操作

JavaScript编程.css

li {
    font-size: 30px;
}

button {
    font-size: 30px;
    display: block;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
}

input {
    zoom: 200%;
}

div {
    float: left;
}

.center {
    padding: 70px 0px;
    text-align: center;
}

JavaScript编程.js

$(document).ready(function () {
    $("#btn1").click(function () {/*为btn1绑定单击事件*/
        var value;
        //遍历每一个class为active的复选框，其中选中的执行函数
        $('input[class="active"]:checked').each(function () {
            value = $(this).val();//将选中的值添加到value中
            $(this).parent().attr("class", "actived");//将选中的input的父元素的class改为actived
            $("#Candidat").html(function (i, origText) {/*为Candidat下的li，增加input*/
                return origText + "<li class='active1'><input type='checkbox' class='active1' value=" + value + ">" + value + "</input></li>";
            });
        });
        $("li").remove(".actived");
    });


    $("#btn2").click(function () {/*为btn2绑定单击事件*/
        var value;
        //遍历每一个名字为active的复选框，其中选中的执行函数
        $('input[class="active1"]:checked').each(function () {
            value = $(this).val();//将选中的值添加到value中
            $(this).parent().attr("class", "actived");//将选中的input的父元素的class改为actived
            $("#wait").html(function (i, origText) {/*为wait下的li，增加input*/
                return origText + "<li class='active'><input type='checkbox' class='active' value=" + value + ">" + value + "</input></li>";
            });
        });
        $("li").remove(".actived");
    });
});

html代码中使用到了jQuery库，关于它的下载与介绍请参考以下文章
https://blog.csdn.net/qq_51917985/article/details/121462896
JavaScript编程.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../css/JavaScript编程.css">
    <!--引用jQuery-->
    <script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="left">
    <h1>待选名单</h1>
    <ul id="wait">
        <li class="active"><input type="checkbox" value="小智" class="active">小智</input></li>
        <li class="active"><input type="checkbox" value="小美" class="active">小美</input></li>
        <li class="active"><input type="checkbox" value="小明" class="active">小明</input></li>
        <li class="active"><input type="checkbox" value="小刚" class="active">小刚</input></li>
    </ul>
</div>

<div class="center">
    <button id="btn1">移入 >>>>
    </button>
    <button id="btn2"><<<< 移出
    </button>
</div>

<div class="right">
    <h1>参选名单</h1>
    <ul id="Candidat">
        <li class="active1"><input type="checkbox" value="小华" class="active1">小华</input></li>
        <li class="active1"><input type="checkbox" value="小李" class="active1">小李</input></li>
    </ul>
</div>

</body>
<script type="text/javascript" src="../js/JavaScript编程.js"></script>
</html>

目录结构
在这里插入图片描述

实验结果
在这里插入图片描述

总结

本文部分代码引用此博客，感谢博主的贡献
https://www.cnblogs.com/a475334705/archive/2012/07/26/2610454.html

sky-stars

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
5
评论
网页前端：JavaScript编程

实验目的：1.熟悉掌握JavaScript中内置对象的使用方法。2.熟悉掌握JavaScript中DOM对象的操作方法。实验内容：按照要求完成以下实验内容：设计两组列表对象：待选名单，参选名单，如下图所示。选中“待选名单”中的数据，单击“移入”，可以把选中的数据移入“参选名单”中。选中“参选名单”中的数据，单击“移出”，可以把选中的数据移出到“待选名单”中。整个操作使用JavaScript编写完成。
复制链接

扫一扫