jquery实现仿微博发布

最新推荐文章于 2022-06-02 12:07:46 发布

原创最新推荐文章于 2022-06-02 12:07:46 发布 · 612 阅读

3 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个简单的微博发布系统实现，利用HTML构建页面结构，CSS进行样式设计，jQuery处理交互逻辑。通过点击发布按钮，将输入框中的内容添加到页面列表中，并清空输入框。

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

HTML

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

CSS

ul li{
    border-bottom: 1px solid #ccc;
    width: 300px;
    list-style: none;
}

jquery

<script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                if($("#txt").val().trim()==0){
                    return;
                }
                // 创建一个li 存放#txt中的内容，添加到#ul
                $("<li></li>").text($("#txt").val()).prependTo("#ul");
                // 清空#txt的内容
                $("#txt").val("");
            });
        });
    </script>