简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > TodoList的实战——2019年1月17日
Blogger Information
Blog 40
fans 1
comment 0
visits 32437
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
TodoList的实战——2019年1月17日
李明伟的博客
Original
583 people have browsed it

Todolist的实战（微博，聊天框等的基本原理构造）

    第一步——构建DOM结构

<h3>请留言</h3>
<input type="text">
<ul></ul>

    第二步——获取input与ul的结点（附带光标的聚焦）

var comment = document.querySelector('input'); //获取input的结点
var ul = document.getElementsByTagName('ul')[0]; //获取ul的结点
comment.focus();//光标的聚焦

    第三步——检测键盘输入的是否是回车（或自定义的提交按键）

comment.onkeydown = function (event) {
if (event.keyCode === 13)

    第四步——创建一个新的li结点，并给其赋值

var li = document.createElement('li'); //生成新的li结点
li.innerHTML = comment.value;

    第五步——判断是否是第一条聊天信息

if (ul.childElementCount === 0) {

    第六步——

            1.如果是第一条，直接将li作为子元素添加给ul

ul.appendChild(li);

            2.如果不是，获取第一条的结点，将现在的li的结点插入到它的前面

var first = ul.firstElementChild; //ul下第一个子元素的结点
ul.insertBefore(li, first);

    第七步——清空数组，重新进行光标聚焦

comment.value = "";
commemt.focus();// comment.value = "";//清空input中的值

实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>

<body>
    <h3>请留言</h3>
    <input type="text">
    <ul></ul>
</body>

</html>
<script>
    var comment = document.querySelector('input'); //获取input的结点
    var ul = document.getElementsByTagName('ul')[0]; //获取ul的结点
    comment.focus();
    comment.onkeydown = function (event) {
        if (event.keyCode === 13) {
            var li = document.createElement('li'); //生成新的li结点
            li.innerHTML = comment.value+"<a href='javascript:;' onclick='del(this)'>删除</a>";
            //执行一段空白的javascript语句，返回空或者false值，从而防止链接跳转。跟当前a标签无关，这段代码始终都会执行。
            //如果按的是回车
            //Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
            if (ul.childElementCount === 0) {
                ul.appendChild(li);
            } else {
                var first = ul.firstElementChild; //ul下第一个子元素的结点
                ul.insertBefore(li, first);
            }
            comment.value = "";
            commemt.focus();// comment.value = "";//清空input中的值
        }
    }

    function del(eve) {
        if(confirm('是否删除？'))
        {
            // 获取要删除的元素
            var li = eve.parentNode;//获取父结点
            //一定要在被删除元素的父结点上调用
            li.parentNode.removeChild(li);
        }
        return false;
    }
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


总结：涉及到大量的函数，需要记忆.

所用函数：变量名.querySelector('标签名')//用css的方式获取该类标签的第一个元素的结点

                 变量名.getElementsByTagName('标签名')//获取一个数组，其中的所有元素是该类标签的结点

                 变量名.focus()//光标聚焦

                 变量名.onkeydown//设置键盘按下的事件

                 事件（event）//Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标                     按 钮的状态。

                 事件.keyCode//字符数字键的键码值

                 变量名.creatElement('标签名')//生成一个新该类标签的结点   

                 标签.childElementCount//获得该标签下的子结点

                 父标签.apendchild(标签名)//在父标签下生成子标签

                 父标签.firstElementChild//取父标签下的第一个子结点

                 父标签.insertBefore(插入的标签内容,选择的结点)//将所需内容插入结点位置

                  结点.parentNode//获取当前结点的父结点

                  结点.childNode//获取当前结点的子结点

                 父结点.removeChild(子结点)//移除当前父结点下的子结点





Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！