<!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.min.js"></script>
<script>
$(function(){
// 创建元素 添加元素 将文本区域内容拿出来给赋值给li 清空文本区域内容
// 写法一： 利用父级监听，如果在内部使用this 此时的this是btn元素也就是触发的元素
$('#weibo').on('click','.btn',function(){
$('ul').append($('<li></li>'));
$('li').html($('.txt').val()+' <a href="javascript:;">删除</a>').slideDown() ;
})
// 写法二： 这里的触发元素直接就是btn按钮， 此时的this 返回值也是btn只不过是写法不同
$('.btn').on('click',function(){
$('ul').append($('<li></li>'));
// 这里的slideDown()是向下滑动
$('li').html($('.txt').val()+' <a href="javascript:;">删除</a>').slideDown() ;
})
// 绑定事件在ul上 触发事件a
// 这里还用了on()可以给未来动态创建的元素绑定事件的特性
$('ul').on('click','a',function(){
// 这里的触发事件是a 此时的this 返回值的a元素
// 这里的slideUp() 是向上滑动 ，但并非删除元素，内部的回调函数是为了滑动之后删除元素
$(this).parent().slideUp(function(){
$(this).remove()
});
})
})
</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>