jQuery实现微博发布_实现一个类似微博发布的功能,用户在文本框输入内容,点击发布按钮,内容出现在下方,-CSDN博客

本文链接：https://blog.csdn.net/qq_52108058/article/details/125098090

文章目录

一、案例演示
二、操作步骤
- 1.html代码
- 2.js代码

一、案例演示

在输入框中输入内容，点击发布滑动到输入框下面，输入框内容消失，点击删除可以移除一列。
在这里插入图片描述

二、操作步骤

1.html代码

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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>
	<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
	   //js代码
    </script>
</head>

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

</html>

2.js代码

     $(function() {
			$(".btn").on("click",function(){
				//创建li标签
				var li=$("<li></li>");
				//设置li的值
				li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");
				//添加到ul的前面插入
				$("ul").prepend(li);
				//设置滚动下拉
				li.slideDown();
				//传到下面后输入框值为空
				$(".txt").val("");
			}
			)
			$("ul").on("click","a",function(){
				$(this).parent().slideUp(function(){
					//点击删除a标签
					$(this).remove();
				});
			})
        })