jQuery操作dom简易留言板

最新推荐文章于 2023-12-13 11:44:21 发布

lu__lala

最新推荐文章于 2023-12-13 11:44:21 发布

阅读量1.4k

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/lu__lala/article/details/121021210

版权

这篇博客介绍了如何利用jQuery进行DOM操作，以创建一个简单的留言板功能，并且包括了添加留言和删除留言的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.编写内容实现留言并加删除键如下

2.实现删除

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery.js"></script>
</head>
<body>
<h1>简易留言板</h1>
<input type="text" onblur="val()" onfocus="fval()" /> <button onclick="dianji()">留言</button>
<div>

</div>
</body>
<script>



    $(function () {
    $("html").keydown(function (event) {
      if(event.keyCode==13){
          dianji();
      }
    })
    })

    function val() {
    $("input").attr("placeholder","请输入留言")
    }

    function fval() {
        $("input").attr("placeholder","")
    }

    function dianji() {
        var li=$("<li></li>")
      li.html( $("input").val()+"<a href='#' onclick='dele(this)'>删除</a>") ;
        $("div").append(li);
        li.slideDown();
        $("input").val("")
    }
    function dele(ob){
        $(ob).parent().remove();
    }

</script>
</html>