jq 模拟微博发布练习
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
#outer{
margin:0 auto;
border:solid 1px;
width:760px;}
textarea{
margin-left:10px;}
li{
border-bottom:1px dashed #ccc;
line-height: 30px;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div id="outer">
<p>微博内容</p>
<textarea rows="10" cols="100"></textarea>
<button>微博发布</button>
<ul>
</ul>
</div>
<script>
$(document).ready(function(e) {
$("button").click(function(){
//添加
$("ul").prepend("<li>"+$("textarea").val()+"</li>");
//做动画
$("ul li:first").hide().slideDown(500);
//清空
$("textarea").val("");
});
});
</script>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15288038/3029491
页:
[1]