【JavaScript】純js獲取元素-小案例：簡易對話

来源:http://www.cnblogs.com/qiuyueding/archive/2017/11/15/7839165.html
-Advertisement-
Play Games

案例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=" ...


案例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()    獲取類數組


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前後端分手大師——MVVM 模式
    之前對 MVVM 模式一直只是模模糊糊的認識，正所謂沒有實踐就沒有發言權，通過這兩年對 Vue 框架的深入學習和項目實踐，終於有了撥開雲霧見月明的感覺。在此記錄一下，算是拋磚了。 ...
  • koa-route模塊
    const Koa = require('koa'); const route = require('koa-route'); const app = new Koa(); const about = ctx => { ctx.response.body = 'Hello World111'; };... ...
  • 邏輯思維和編程的關係
    無數遍的被問到一個問題，沒有邏輯思維是不是學不了編程？“邏輯思維”這個詞，很多人會對它敬而遠之。因為大多人，也包括我在內，我們這些並沒有天生才智的人來說，似乎總認為這是自己不擅長的領域。 ...
  • 圖片載入完成再執行事件
    應用場景：一些圖片較多的頁面，一些需要加上進度條或者百分比讀取等載入效果的頁面，一般移動端頁面用得比較多 ...
  • JavaScript中常見的10個BUG及其修複方法
    如今網站幾乎100%使用JavaScript。JavaScript看上去是一門十分簡單的語言，然而事實並不如此。它有很多容易被弄錯的細節，一不註意就導致BUG。 1. 錯誤的對this進行引用 在閉包或則回調中，this關鍵字的作用域很容易弄錯。舉個例子： Game.prototype.restar ...
  • CSS3基礎知識
    CSS3基礎 1 樣式表的使用 1.內聯樣式表。 隻影響單個元素，常用於標簽。 <p style="color: aqua;font-size: 20px">This is CSS.</p> 2.內部樣式表。 對本頁面元素起作用，一般寫在<head></head>中，用<style></style> ...
  • 淺析js的函數的按值傳遞參數
    js的函數傳參的方式是按值傳遞，正常情況下，改變函數參數的值，並不會對函數外部的變數造成影響。例如： 這是因為js的函數在接收參數時，會生成一個副本變數，該副本變數等於參數的值，可以分析js這樣運行的： 但是當函數的參數傳遞的是一個對象呢？ 發現函數內部居然改變了函數外部變數的值，那這又是為什麼呢？ ...
  • java web 前端實戰項目記錄（1）
    在網上找到一個練手項目，記錄一下自己的實現過程和遇到的問題 附上鏈接 前端練手項目-先定一個小目標，做他一個天貓官網 前端練手項目-天貓官網 先確定一下需要幾個頁面 首先要有公共頁面 其次是 步驟 1 : 首頁 步驟 2 : 分類頁 步驟 3 : 查詢結果頁 步驟 4 : 產品頁 步驟 5 : 結算 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類