返回ajax的初步......登陆

ajax的初步应用

世界的背影2019-05-27 10:45:45271

<!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送