當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
网页前端：JavaScript编程
生活随笔
收集整理的這篇文章主要介紹了
网页前端：JavaScript编程
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 前言
- 具體操作
- 總結(jié)
前言
實(shí)驗(yàn)?zāi)康?#xff1a; 1.熟悉掌握J(rèn)avaScript中內(nèi)置對(duì)象的使用方法。 2.熟悉掌握J(rèn)avaScript中DOM對(duì)象的操作方法。 實(shí)驗(yàn)內(nèi)容： 按照要求完成以下實(shí)驗(yàn)內(nèi)容：設(shè)計(jì)兩組列表對(duì)象：待選名單，參選名單，如下圖所示。選中“待選名單”中的數(shù)據(jù)，單擊“移入”，可以把選中的數(shù)據(jù)移入“參選名單”中。選中“參選名單”中的數(shù)據(jù)，單擊“移出”，可以把選中的數(shù)據(jù)移出到“待選名單”中。 整個(gè)操作使用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;//遍歷每一個(gè)class為active的復(fù)選框，其中選中的執(zhí)行函數(shù)$('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;//遍歷每一個(gè)名字為active的復(fù)選框，其中選中的執(zhí)行函數(shù)$('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庫(kù)，關(guān)于它的下載與介紹請(qǐng)參考以下文章
https://blog.csdn.net/qq_51917985/article/details/121462896
JavaScript編程.html
目錄結(jié)構(gòu)
實(shí)驗(yàn)結(jié)果
總結(jié)
本文部分代碼引用此博客，感謝博主的貢獻(xiàn)
https://www.cnblogs.com/a475334705/archive/2012/07/26/2610454.html
總結(jié)
以上是生活随笔為你收集整理的网页前端：JavaScript编程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： php项目安装器,php服务器环境安装及
- 下一篇： JS原生读取 本地 JSON