首页 > > 网页制作 > Javascript >

【JavaScript】纯js获取元素-小案例：简易对话

2018-06-24 00:48:27来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

案例1：效果

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 5     <title>添加对话</title>
 6     <style type="text/css">
 7         body,ul,p{margin: 0;padding: 0;}
 8         ul{list-style: none;}
 9         img{border: 0; vertical-align: middle;}
10         .box{
11             float: left;
12             width: 400px;
13             margin: 50px;
14             border: 2px solid black;
15         }
16         .box .title{
17             position: relative;
18             width: 100%;
19             height: 30px;
20             background-color: black;
21             line-height: 30px;
22             color: white;
23         }
24         .box .title #btn{
25             position: absolute;
26             right: 10px;
27             background: none;
28             border: 0;
29             font-size: 25px;
30             color: white;
31             cursor: pointer;
32         }
33         .box .title span{
34             margin: 0 10px;
35         }
36         .box .title #conin{
37             vertical-align: middle;
38         }
39         .box .title #add{
40             background-color: orange;
41             border: 0;
42             color: white;
43             cursor: pointer;
44             vertical-align: middle;
45         }
46         .box .title #textbox{
47             display: none;
48             /*display: inline-block;*/
49         }
50         .box ul p{
51             margin: 0 10px;
52             padding: 2px 0;
53             border-bottom: 1px solid #eee;
54             font-size: 14px;
55         }
56     </style>
57 </head>
58 <body>
59    <div class="box">
60        <div class="title">
61            <span>最新动态</span>
62            <div id="textbox">
63                 <input type="text" id="conin" class="conin" />
64                 <input type="button" id="add" value="添加" />
65            </div>
66            <button title="新建" id="btn" >+</button>
67        </div>
68        <ul id="body">
69        </ul>
70    </div>
71    <script type="text/javascript">
72    //box
73         var Otxtbox = document.getElementById("textbox");
74         var Oin = document.getElementById("conin");
75         var Oadd = document.getElementById("add");
76 
77         var Obtn = document.getElementById("btn");
78 
79         var Obody = document.getElementById("body");
80         //显示输入框
81         Obtn.onclick = function(){
82             Otxtbox.style.display = "inline-block";
83         };
84         //新建li，清空输入框
85         Oadd.onclick = function(){
86             var txt = Oin.value;
87             if(txt){
88                 Obody.innerHTML += "<li><p>" + txt + "</p></li>";
89                 Oin.value = "";
90             }else{
91                 alert("请输入！");
92             }
93         };
94    </script>
95 </body>
96 </html>
View Code

原理：

这里有两个点击事件，首先看第一个：点击+号显示输入框；

1、获取+这个元素，id为btn，同时获取输入框，id为textbox；给btn添加onclick事件，事件直接控制输入框的样式display即可。

2、获取添加按钮，id为add，给按钮添加onclick事件，点击新增列表项，依次添加到列表ul的innerHTML中即可。列表项中的文字用输入框内的value值代替。

 案例2：效果

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>添加对话</title>
    <style type="text/css">
        body,ul,p{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{border: 0; vertical-align: middle;}
        .box2{
            float: left;
            width: 300px;
            margin: 50px;
        }
        .box2 .top{
            width: 100%;
            height: 100px;
            padding: 10px;
            background-color: #ddd;
            border-radius: 4px;
        }
        .box2 .top .txt{
            height: 60px;
            width: 98%;
            margin-bottom: 10px;
            resize: none;
        }
        .box2 .top span{
            display: inline-block;
            width: 25px;
            height: 25px;
            background: url("images/emoji3.png") no-repeat center center/cover;
            cursor: pointer;
        }
        .box2 .top span.other{
            background:url("images/emoji1.png") no-repeat center center/cover;
        }
        .box2 .top .send{
            float: right;
            padding: 2px 15px;
            background-color: orange;
            border: 0;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
        .box2 ul li{
            margin-top: 10px;
            padding-bottom: 2px;
            border-bottom: 1px solid #eee;
        }
        .box2 ul li img{
            width: 25px;
            height: 25px;
        }
        .box2 ul li span{
            vertical-align: middle;
            font-size: 14px;
        }
    </style>
</head>
<body>
   <div class="box2">
       <div class="top">
           <textarea class="txt" id="txt"></textarea>
           <span id="photo"></span>
           <input type="button" value="发送" class="send" id="send"/>
       </div>
       <ul id="messages">
       </ul>
   </div>
   <script type="text/javascript">
    //box2
        var Otxt = document.getElementById("txt");
        var Osend = document.getElementById("send");
        var Omes = document.getElementById("messages");

        var Ophoto = document.getElementById("photo");
        //图片路径数组
        var aImg = ["images/emoji1.png","images/emoji3.png"];
        //记录当前图片
        var nNum = 1;

        //图片切换
        Ophoto.onclick = function(){
            if(nNum){
                nNum--;
                this.setAttribute("class", "other");
            }else{
                nNum++;
                this.removeAttribute('class');
            }
        }
        //新增消息列表项li
        Osend.onclick = function(){
            if(Otxt.value){
                Omes.innerHTML += "<li><img src='" + aImg[nNum] + "' alt='images'/><span>"
                 + Otxt.value + "</span></li>";
                Otxt.value = "";
            }else{
                alert("请输入信息！");
            }
        }
   </script>
</body>
</html>
View Code

原理：

页面中两个出发事件都为点击事件：

1、点击发送按钮，给ul添加列表项li，其中图片为当前输入框中的图片，文本为输入框中的value；

2、输入框中图片点击切换，采用给不同样式设置不同背景图片，用js更改class名称来实现。

3、采用计数器来记录当前图片号num，将图片路径存储到一个数组中，每次切换图片的时候更改num值。新建列表项时用num来取当前图片。

注意：

　　　获取元素时：

　　　 * ID获取时，前缀必须是  document.
            * 其他方法获取时，前缀可以是某一个节点对象，表明不是从所有节点里面找，而是只从该节点子元素里面找，节省资源。


            通过ID获取
                document.getElementById()

            通过class获取，不兼容IE8及以下
                .getElementsByClassName()
                获取的是个 类数组 （类似于数组，可以用下标，可以用.length）

            通过 标签名 获取
                .getElementsByTagName()
                获取的是个 类数组

            通过 name 获取
                .getElementsByName()
                获取的是个 类数组


            通过 选择器 找，不兼容IE7及以下
                .querySelector()       直接获取单个节点对象
                .querySelectorAll()    获取类数组

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：图解Fiddler如何抓手机APP数据包过滤抓取

下一篇：js导出Excel表格超出26位英文字符解决方案ES6

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签