前言

实验目的：
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

网页前端：JavaScript编程相关推荐

全栈工程师之路（二）—— JavaScript（网页前端脚本语言）
javascript 是可以运行在网页前端的脚本语言,可以基于 html 之上实现更丰富的交互(网页内容的交互显示).异步回调.多线程.定时器.动画等. hello_world.html <ht ...
网页前端设计-作业三(JavaScript)
参考教材:HTML5网页前端设计(第2版 ) 作者:周文洁 1 . 普通 (2分)如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值? 使用Math.round()方法. 2 . 普 ...
前端代码编码和设计规范系列——JavaScript编程规范
1文档信息条目内容项目编号通用项目名称通用标题 JavaScript编程规范类别规范文档当前试用草稿摘要当前版本 V1.0 日期 2015/11/9 作者徐维坚(xuwei ...
前端网页三剑客------JavaScript基础
前端网页三剑客------JavaScript基础一.基础语法 1.引入方式行内JS:在标签内部编写JS代码,配合事件使用.<input type="button" val ...
webstorm打开网页_网页前端之HTML+CSS+JS
古柏高枝银杏实,几千年物到而今. 玉纤雪腕白相照,烂银壳破玻璃明. 银杏(学名:Ginkgo biloba),落叶乔木,树冠圆锥形,枝轮生,叶互生,在长枝上散生,二歧状分叉叶脉,果具长梗,下垂,倒卵圆 ...
前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述
前言作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...
天瑞地安集团：JavaScript编程小技巧让“菜鸟”编程变得更轻松!
JavaScript是最常用和使用最广泛的编程语言之一.今天要给大家分享的是天瑞地安资深程序员达达在工作中积累的一些技巧,希望对各位喜欢编程的朋友们有所帮助,这些JS开发工具不仅为程序员提供了更多可能 ...
Unity导出的WebGL、网页前端、服务端以及硬件四级交互结构的实现（简单3d建模网页端物联网）
本文代码基于一个智慧楼宇项目: 前提:(Unity应该使用尽量最新的版本,2020年的应该就行,2019年的未知',2018年的好像就不行了) 模式简介: 1.服务端处理楼宇发送的信息,把处理过的信息 ...
【笔记-面试】《imooc -前端跳槽面试技巧》、《imooc- 揭秘一线互联网企业前端javaScript高级面试》、《imooc-前端javascript面试技巧》
20190204:<imooc -前端跳槽面试技巧> 第01章课程介绍 01-01 课程导学一.一面知识点 1.面试技巧页面布局类 2.css盒模型dom事件类 3.http协议类 ...
html5网页前端设计当当,HTML5网页前端设计实战
本书是一本从零开始学习的Web前端开发教材,无需额外的基础.本书以项目驱动为宗旨,详细介绍了HTML5.CSS3与JavaScript的基础知识与使用技巧.本书包含例题228个,均在浏览器中调试通过. ...

网页前端：JavaScript编程

文章目录

前言

具体操作

总结

网页前端：JavaScript编程相关推荐

最新文章

热门文章