首页 > Web开发 > 详细

用jQuery写微博发布案例

时间:2020-04-24 15:09:04      阅读:46      评论:0      收藏:0      [点我收藏+]

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>

  技术分享图片

 

用jQuery写微博发布案例

原文:https://www.cnblogs.com/luwn/p/12767421.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!