用jQuery写微博发布案例

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
	<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 #ccc;
	}
	input {
		float: right;
	}
</style>
</head>
<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>
	<script src="jquery-1.12.4.js"></script>
	<script>
		$(function(){
			$("#btn").click(function(){
				if ($("#txt").val().length == 0 ) {
					return;
				}
      			//就是文本框的值				
				$("<li></li>").text($("#txt").val()).prependTo("#ul");
				$("#txt").val();
			})
		})
	</script>
</body>
</html>

　　

 

posted @ 2020-04-24 14:50  迷幻天空岛  阅读(251)  评论(0)    收藏  举报