gadget|gadget : jQuery实现发微博案例 gadget:jQuery实现发微博案例

实现点击发送文本框中的内容到指定位置
用到jQuery方法：prepend() slideDown()
代码如下
html

css

*{ margin: 0; padding: 0; } body{ background: rgb(77, 159, 226); } /* box */ #box{ width: 700px; margin: 50px auto 10px; background: #ffffff; padding: 10px; box-sizing: border-box; text-align: right; border-radius: 5px; } #box textarea{ width: 680px; height: 160px; resize: none; } #box button{ width: 80px; height: 30px; } /* ul */ ul{ width: 700px; list-style: none; margin: auto; } ul li{ line-height: 30px; border-radius: 5px; background: #ffffff; box-sizing: border-box; padding-left: 10px; margin-bottom: 10px; }

【gadget|gadget : jQuery实现发微博案例】js

$(function(){ $('button').click(function(){ let val = $('#box textarea').val(); $('#box textarea').val(''); // console.log(val) //当输入框为空时，不能发送 if(val !=''){ var ele =''+val+'' $('ul').prepend(ele); $('ul li:first').hide().slideDown(); }else{ alert('请输入内容！') } }) })