JS小案例分析 - 爱码网

a、微博输入删除小案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
            width: 450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
        }

        input {
            float: right;
        }
    </style>
</head>
<body>
<div class="box" ;
        li.appendChild(input);
        input.onclick = function () {
            this.parentNode.parentNode.removeChild(this.parentNode);
        }
    }

</script>


解题思路：

1. 先获得要操作的对象，文本域，发布按钮,ul
2. 给发布按钮注册单击事件
3. 点击发布按钮的时候，判断用户输入的内容是否为空，也就是判断文本域内容是否为空，为空则return，不再往下执行。
4. 动态的创建元素li,然后追加到ul中
5. 将用户输入的内容做为li的文本
6. 动态的创建删除按钮(input)，并添加对应的属性(type=button,value='删除')并追加到li中
7. 判断ul中是否有子元素，如果有则将创建的新的li往前插入(insertBefore)，如果是第一个li则是给ul追加(appendChild)
8. 给创建的input(删除按钮)注册单击事件，当点击删除按钮的时候，从ul中删除对应的li

b、模拟百度输入框小案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 400px;
            margin: 200px auto;
            /*border: 1px solid #000;*/
        }

        #txtSearch {
            width: 300px;
        }

        #pop {
            width: 300px;
            border: 1px solid red;
            padding: 0px;
        }

        #pop ul {
            list-style-type: none;
            margin: 5px;
            padding: 0px;
        }

        #pop ul li {

        }
    </style>
</head>
<body>
<div );
        ul.appendChild(li);
        li.innerHTML=arr[j];
    }

}
</script>
解题思路：

1. 当键盘按下并抬起的时候触发事件
2. 根据用户输入的内容去数组当中查找以用户输入的内容开头的数据
3. 将遍历到的以用户输入的内容为开头的数据放到一个新的数组当中
4. 动态创建元素div,ul等，然后追加，并设置样式
5. 循环遍历新数组，根据新数组中的元素个数，创建li,并追加到ul中
6. 根据新输入的数据在生成Div之前，看是否能够通过ID获得div,如果有的话，则在创建新元素之前删除之前的div
7. 如果数组元素为空的话，加return关键字，不再往下执行代码
8. 如果文本框的输入为空的话，加return关键字,也不再往下执行代码