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

  1.      <body>
  2.  
  3.          <select id="slc" size="7"></select>
  4.          <input type="submit" id="btn1" value="转换" />
  5.          <input type="text" id="text" />
  6.          <input type="button" id="btn2" value="移除" />
  7.  
  8.      </body>

CSS

  1.          <style type="text/css">
  2.              #slc {
  3.                  /*float:left;*/
  4.                  width: 500px;
  5.                  height: 200px;
  6.                  /*background-color:red;*/
  7.                  border: 1px solid red;
  8.              }
  9.  
  10.              #btn1 {
  11.                  /*float:left;*/
  12.                  margin-left: 200px;
  13.                  margin-top: 80px;
  14.                  width: 100px;
  15.                  height: 40px;
  16.                  background-color: red;
  17.              }
  18.  
  19.              #text {
  20.                  /*float:left;*/
  21.                  margin-left: 200px;
  22.                  margin-top: 80px;
  23.                  width: 300px;
  24.                  height: 40px;
  25.              }
  26.              #btn2{
  27.                  margin-left: 200px;
  28.                  margin-top: 80px;
  29.                  width: 100px;
  30.                  height: 40px;
  31.                  background-color: red;
  32.              }
  33.  
  34.          </style>

JS

  1.  <script>
  2.      var x = document.getElementById("slc");
  3.      var y = document.getElementById("btn1");
  4.      var z = document.getElementById("text");
  5.      var a = document.getElementById("btn2");
  6.      y.onclick = function() {
  7.          x.innerHTML += "<option>" + z.value + "</option>";
  8.          //        x.value = z.value;
  9.          z.value = "";
  10.      }
  11.      a.onclick=function(){
  12.          x.removeChild(x.selectedOptions[0]);
  13.      }
  14.  </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. Odoo工作流

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9281264.html 一:工作流 工作流是与业务流程相关联的模型,可用于跟踪工序的动态演变过程. 工作流.活动 ...

  2. Word 2019 for mac更新喽！

    新的Word2019添加了许多的新功能,提供了新的文档处理方式,如改进的数字笔功能.焦点模式.学习工具和翻译,为用户提供了用于创建专业而优雅的高效文档工具,帮助用户节省时间,并得到优雅美观的结果,有效 ...

  3. Win7电脑无法安全删除硬件并弹出媒体的解决方法

    有很多用户经常会在win7系统中使用移动硬盘或U盘来拷贝数据,而当使用完了之后,一般为了数据能够更安全,都会右击选择安全删除硬件进行退出,可是有win7系统用户却发现要弹出设备的还好无法安全删除硬件并 ...

  4. PAT——1047. 编程团体赛

    编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...

  5. 软工之404 Note Found 队选题报告

    目录 NABCD分析引用 N(Need,需求): A(Approach,做法): B(Benefit,好处): C(Competitors,竞争): D(Delivery,交付): 初期 中期 个人贡 ...

  6. Mysql实现主从同步

    根据网上众多参考案例,继续在VM虚拟机里实现MySQL主从同步功能.步骤如下: * 首先明确下环境 主库本地windows ip192.168.0.103 从库虚拟机mysql5.6 ip192.16 ...

  7. MySQL5.7.19 免安装配置 + Navicat for MySQL安装和破解（附全部资源）

    近段时间因为工作原因安装了好多次本地MySQL,安装过程也是时有曲折,索性记录一下. 环境: Win10 家庭版 MySQL5.7.19   (链接:https://pan.baidu.com/s/1 ...

  8. Web | JavaScript的引用数据类型强制转换类型

    我在这里主要的想提下的是JavaScript中的引用类型进行强制转换类型.因为对于基本数据类型的变换大多都是雷同的,很容易熟知,但是引用数据类型有一点小插曲. JavaScript的引用类型主要为对象 ...

  9. nodejs的事件轮询机制

    1.timers定时器阶段 执行定时器到点的回调函数(所有定时器setTimeout / setInterval的回调函数都在这个阶段执行) 2.idle prepare 准备阶段 TCP错误回调 3 ...

  10. javascript的执行机制—Event Loop

    既然今天要谈的是javascript的事件循环机制,要理解事件循环,首先要知道事件循环是什么. 我们先从一个例子来看一下javascript的执行顺序. <script> setTimeo ...