jQuery留言板小案例

最新推荐文章于 2024-04-19 17:05:38 发布

谢去非

最新推荐文章于 2024-04-19 17:05:38 发布

阅读量3.3k

点赞数 8

分类专栏：前端文章标签： javascript jquery css html js

本文链接：https://blog.csdn.net/ryyzxf/article/details/107812979

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery留言板小案例

看效果
上代码

看效果

在这里插入图片描述

上代码

下面展示一些 内联代码片。

// html
<body>
    <div class="box" id="weibo">
        <span>留言板</span>
        <textarea name="" class="txt" cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul>
        </ul>
    </div>
</body>

// css
<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;
        display: none;
    }
    
    input {
        float: right;
    }
    
    ul li a {
        float: right;
    }
</style>

// javascript
<script src="jquery.min.js"></script>//记得要引入jQuery文件
<script>
    $(function () {
        $(".btn").on("click",function () {
            if ($(".txt").val() != ""){//当文本域为空时，不进行发布
                var li = $("<li></li>");//创建li
                li.html($(".txt").val() + " <a href='javascript:;'>删除</a>"  );//将留言内容赋给li,且添加一个“删除”
                $("ul").prepend(li);//将创建的li添加到ul中，且置顶
                li.slideDown();//动画效果，滑下
            }
            $(".txt").val("");//留言发布完成后，清空文本域
        });
        $("ul").on("click","a",function () {//注意用on，on可以给动态创建的元素绑定事件，单纯用click做不到应有的效果
            $(this).parent().slideUp(function () {
                $(this).remove();
            });
        })
    })
</script>