先上代码，大家贴入看一下

     <body>

         <select id="slc" size="7"></select>

         <input type="submit" id="btn1" value="转换" />

         <input type="text" id="text" />

         <input type="button" id="btn2" value="移除" />

     </body>

CSS

         <style type="text/css">

             #slc {

                 /*float:left;*/

                 width: 500px;

                 height: 200px;

                 /*background-color:red;*/

                 border: 1px solid red;

             }

             #btn1 {

                 /*float:left;*/

                 margin-left: 200px;

                 margin-top: 80px;

                 width: 100px;

                 height: 40px;

                 background-color: red;

             }

             #text {

                 /*float:left;*/

                 margin-left: 200px;

                 margin-top: 80px;

                 width: 300px;

                 height: 40px;

             }

             #btn2{

                 margin-left: 200px;

                 margin-top: 80px;

                 width: 100px;

                 height: 40px;

                 background-color: red;

             }

         </style>

JS

 <script>

     var x = document.getElementById("slc");

     var y = document.getElementById("btn1");

     var z = document.getElementById("text");

     var a = document.getElementById("btn2");

     y.onclick = function() {

         x.innerHTML += "<option>" + z.value + "</option>";

         //        x.value = z.value;

         z.value = "";

     }

     a.onclick=function(){

         x.removeChild(x.selectedOptions[0]);

     }

 </script>

左移效果图

点击转换后

点击移除后

OK   现在咱们开始讲解下这个功能

在很多的娱乐网站上注册账户的时候，会有一个爱好或者是巴拉巴拉选项让你选择，选择后点击某个按钮，实现左右互动互易的功能

那今天咱们就来用基本的DOM操作来实现这个功能

中间的CSS咱们就不讲了，属于前面的基础部分了

OK，简单的逻辑思维咱们一定要具备

首先咱们看到的红色边框，咱们第一时间想到的应该是<select></select>标记，里面放的是<option></option>

PASS:在这里一定要把前面HTML中的标记回忆起来，这个阶段结束后的项目，大家还会用得到，并且在以后的工作中也有可能用到，

　　    既然学过去，咱们就有必要去记住，并且去灵活的运用起来，就像打字时间久了不需要看键盘一样，

　　    不会用、用的不熟，这都是敲的不够多，

　　    在搬砖的过程中一定不要使用辅助工具，比如说软件上的提醒功能，

　　    练习的目的就是熟能生巧，切记！勿忘！！！

OK，左边各是一个select（在这里就用select代替<select></select>,下同），两个button，一个text

在这里咱们给四个标记设置属性一定别忘了id这个属性，

通过id咱们可以设置其样式，最关键的是咱们需要用id去取值

上面有全部的代码，咱们就这么手敲吧，看不懂的上翻

先来第一个select取值

var slc_1 = getElementById("id的值");

那么现在咱们定义的这个变量X就是变成了一个集合，因为select里面放的并不是一个数字或者是一个字符串，而是很多组

text、btn_1、btn_2同理，不去赘述

现在咱们开始用咱们的逻辑思维去想一下，点击转换按钮可以实现在text中输入的字符串移入到左边的select中

也就是说select.value等于text.value，那是不是text.value=" ";也就可以实现视觉上的消失？

实践是真理之母

咱们尝试一下便可以，答案是true

记然咱们说select中相当于一个数组，那咱们暂时先去尝试一下数组当中的[0]，

其实这样是可以的，因为每次移入和移除都是只能选择一个，所以咱们没有必要再去给移入和移除再次定义一个数组，用[0]就可以，

所以这里的[0]就是咱们选中的那个字符串，这一点大家一定要理解清楚

至于option，还不知道什么意思或者是这行代码x.innerHTML += "<option>" + z.value + "</option>";还有不知道什么意思的，请前翻前面课本，还不知道的去度娘哪里回炉

咳咳，很简单的一个逻辑，分层剖析，确实很乏味

PASS：目前咱们接触的计算机语言就是用最直观有效的方式去进行人机沟通，从而为人进行更好的服务

　　　　多去做一些尝试性的拓展或者是熟练性的练习，对代码的了解和编程认知可以有一个更好的提升

　　　　当代码量和熟练度到了一定的程度，那对编程的认知和后期的学习都会有一个质的升华

　　　　同样都是单身狗，没事儿多敲敲代码，多有意思的一件事，更何况敲代码得到的对象可比你千辛万苦追的对象要更符合你，哈哈

好了，今儿先到这里，板书的不是特别的清晰，这个题逻辑层面还有不懂的可以留言

咱们下期再见

DOM练手讲解的更多相关文章

  1. 10个有趣的Python教程，附视频讲解+练手项目。

    从前的日色变得慢,车.马.邮件都慢 一生只够爱一门编程语言 从前的教程也好看,画面精美有样子 你看了,立马就懂了 Python最性感的地方,就在于它的趣味性和前沿性,学习Python,你总能像科技节的 ...

  2. webpack练手项目之easySlide（一）：初探webpack （转）

    最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力.     webpack是一个前端的打包管理工具,大家可以前往:http:/ ...

  3. webpack练手项目之easySlide（一）：初探webpack

    最近在学习webpack,正好拿了之前做的一个小组件,图片轮播来做了下练手,让我们一起来初步感受下webpack的神奇魅力.     webpack是一个前端的打包管理工具,大家可以前往:http:/ ...

  4. web前端学习部落22群分享给需要前端练手项目

    前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...

  5. webpack练手项目之easySlide（三）：commonChunks（转）

    Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...

  6. webpack练手项目之easySlide（二）：代码分割（转）

    在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack ...

  7. Python之路【第二十四篇】：Python学习路径及练手项目合集

      Python学习路径及练手项目合集 Wayne Shi· 2 个月前 参照:https://zhuanlan.zhihu.com/p/23561159 更多文章欢迎关注专栏:学习编程. 本系列Py ...

  8. Java学习路径及练手项目合集

    Java 在编程语言排行榜中一直位列前排,可知 Java 语言的受欢迎程度了. 实验楼上的[Java 学习路径]中将首先完成 Java基础.JDK.JDBC.正则表达式等基础实验,然后进阶到 J2SE ...

  9. webpack练手项目之easySlide（三）：commonChunks

    Hello,大家好. 在之前两篇文章中: webpack练手项目之easySlide(一):初探webpack webpack练手项目之easySlide(二):代码分割 与大家分享了webpack的 ...

随机推荐

  1. UVA11324 The Largest Clique

    嘟嘟嘟 很自然的想到先tarjan把强联通分量缩点,因为对于一个强联通分量,要么不选,要么全选,所以可看成一个点. 然后转化成了求DAG上的一条最长路(每一个点都有权值).刚开始我想用dijkstra ...

  2. C/C++——存储

    关于各内存空间: 栈(stack):变量,数组.栈的大小是2M(也有的是1M),反正不大,一般递归写错了,没有出口,都会报错stack overflow. 全局区(静态区):全局变量.数组,静态变量. ...

  3. 【BBS】BBS论坛项目各个页面的工作流程图

    1论坛整体结构 2数据库结构 3登录页面 4论坛首页(显示各个板块) 5显示板块对应的内容 6文章内容页 7新增板块.发表文章.回复 8版面管理.用户管理.发帖排行

  4. Linux环境安装Nexus

    Linux环境安装Nexus Nexus可以做Maven私服,私服不是Maven的核心概念,它仅仅是一种衍生出来的特殊的Maven仓库.有三种专门的Maven仓库管理软件可以用来帮助大家建立私服: N ...

  5. ant design 修改tab样式

    .ant-tabs-ink-bar{ background-color: transparent !important; } .ant-tabs-top .ant-tabs-ink-bar-anima ...

  6. Genymotion集成到Eclipse

    在Eclipse中使用Genymotion Google的ADT中自带的模拟器速度太慢,可以使用Genymotion代替.关于Genymotion的安装方法,可以直接访问官网,需要注册账号,因为创建模 ...

  7. jquery css选择器

    1. $('node+next') == $('node').next() 2. $('node~siblings') == $('node').nextAll(); 3. :gt(index)大于i ...

  8. 查看apache当前并发访问数和进程数

    1.查看apache当前并发访问数: netstat -an | grep ESTABLISHED | wc -l 对比httpd.conf中MaxClients的数字差距多少. 2.查看有多少个进程 ...

  9. ES6读书笔记(三)

    前言 前段时间整理了ES6的读书笔记:<ES6读书笔记(一)>,<ES6读书笔记(二)>,现在为第三篇,本篇内容包括: 一.Promise 二.Iterator和for of循 ...

  10. Oracle分析函数巧妙使用

    在 Oracle中使用Sql必须弄懂分析函数 Oracle开发专题之:分析函数(OVER) 1 Oracle开发专题之:分析函数2(Rank, Dense_rank, row_number) 6 Or ...