发布微博,体现增删查改
css
*{margin: 0; padding: 0;list-style: none;} div{width: 500px;border:1px solid #ccc;margin:50px auto;padding: 10px 0 20px 10px;} ul{padding-left: 70px;} li{border-bottom:1px dashed #ccc;line-height: 40px;} li a{width: 48px;height: 23px;border-radius:4px;margin-top: 12px;text-align: center;line-height: 23px;background-color:pink;cursor: pointer;float:right;margin-right: 6px;text-decoration: none;color:black;} li:hover a{color:red;} textarea{width: 360px;height: 270px;resize: none;}
html
<div> <span>微博内容</span> <textarea></textarea> <button>发布</button> <ul></ul> </div>
js
$('button').click(function(event) { var txt = $('textarea').val(); var tx = $('textarea'); var l = $('<li><span>'+txt+'</span><a href="javascript:;" class="aa">删除</a></li>'); if($.trim(txt)==''){ alert('请输入内容'); tx.focus().val(''); }else{ if($.trim(txt)==$('li:first span').text()){ //判断第一条来确认是否重复提交了 alert('请勿重复提交'); tx.focus().val(''); } else{ $('ul').prepend(l); $('li:first').hide().slideDown(300); tx.focus().val(''); } } }); $(document).on('click', '.aa', function(event) { var Mythis = $(this); $(this).parent().slideUp(300); setTimeout(function(){ $(Mythis).parent().remove(300); },300) });