DOM练手讲解

最新推荐文章于 2019-12-02 08:31:06 发布

a2221111

最新推荐文章于 2019-12-02 08:31:06 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/TheJoker/p/7602118.html

版权

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

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>

 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.οnclick=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：目前咱们接触的计算机语言就是用最直观有效的方式去进行人机沟通，从而为人进行更好的服务

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

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

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

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

咱们下期再见

转载于:https://www.cnblogs.com/TheJoker/p/7602118.html

a2221111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM练手讲解

先上代码，大家贴入看一下1 <body>2 3 <select id="slc" size="7"></select>4 <input type="submit" id="btn1" value="转换" />5 <input type="text" id...
复制链接

扫一扫