微博发布模拟面板

以下是微博发布模拟面板的案例，就是在文本框内输入文字然后点击发布按钮把在文本框内输入的文字发送到文本框外，就像聊天界面一样，以下开始我们的学习

设置好微博发布模拟面板的元素

<div class="box" id="weibo">

        <span>微博发布</span>

        <textarea name="" id="txt" cols="30" rows="10"></textarea>

        <button id="btn">发布</button>

        <ul id="ul">

        </ul>

</div>

设置好微博发布模拟面板所需元素的属性

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

带入jQuery插件

<script src="~/Content/js/jquery-3.2.1.min.js"></script>

<script>

        //微博发布模拟

        $(function () {

把按钮带入点击事件

            $("#btn").click(function () {

                if ($("#txt").val().trim().length == 0) {

                    return;

                }

设置发布出去的文字格式

                $("<li></li>").text($("#txt").val()).prependTo("#ul");

清空文本框内的文字

                $("#txt").val("");

            })

        });

    </script>

总结：此次使用到的开发工具是Visual Studio 2019，主要的技术是我们熟知的jQuery，关于此次案例所使用到的也只是在我们平常的点击事件使用jQuery方法完成的，关键的是点击发布按钮后文字的格式，注意prependTo（）本意是发送到…；这是我所学到的案例，所以我要分享给你们，希望可以帮助到你们。以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！