jQuery实现消息发送框

案例效果如下：

实现思路：

动态监听输入框，获取到用户输入的文本，然后点击发布按钮新文本框出现在下边，并且时间也要同步

代码实现：

1、首先我们用到了事件委托的方式动态监听文本框，他的固定写法如下：

// 1、实时监听输入框(通过事件委托的方式)$(\'body\').delegate(\'.text\', \'propertychange input\', function () {})

.text是该文本框
propertychange input 是实现该方法是主要事件

2、获取到了用户的文本，所以接下来动态创建文本添加

创建一个函数，然后把所要显示在页面的内容的HTML结构以字符串的形式用jQuery赋值给一个变量，最后返回该变量

function createEle(text) {var $weibo = $(\'<div class=\"info\">\\n\' +\'                    <!-- 微博内容 -->\\n\' +\'                    <p class=\"infoText\">\' +text+\'</p>\\n\' +\'                    <p class=\"infoOperation\">\\n\' +\'                        <span class=\"infoTime\">\'+formartDate()+\'</span>\\n\' +\'                        <span class=\"infoHandle\">\\n\' +\'                            <a href=\"javascript:;\" class=\"infoTop\">0</a>\\n\' +\'                            <a href=\"javascript:;\" class=\"infoDown\">0</a>\\n\' +\'                            <a href=\"javascript:;\" class=\"infoDel\">删除</a>\\n\' +\'                        </span>\\n\' +\'                    </p>\\n\' +\'                \\n\' +\'                </div>\')return $weibo}

监听发布按钮send添加点击事件，获取到用户文本$text，用createEle方法创建节点，最后将上面写好的文本添加到messageList的最前面

$(\'.send\').click(function () {// 2.1拿到用户输入的内容var $text = $(\'.text\').val()// 2.2根据内容创建节点var $weibo = createEle($text)// 2.3将微博插入$(\'.messageList\').prepend($weibo)})

3、时间的动态显示

创建一个数组，将获取到的日期传入
注意：最后的arr是字符串，所以要用join字符串转换下格式并返回

function formartDate() {// 实例化一个日期对象var date = new Date()// 创建一个数组来保存日期var arr = [date.getFullYear() + \'-\',date.getMonth()+1,\'-\'+date.getDate(),\'-\'+date.getHours(),\':\'+date.getMinutes(),\':\'+date.getSeconds()]// arr是一个字符串，转化一下格式return arr.join(\'\')}

案例源码如下：

<div class=\"center\"><!-- 输入框 --><textarea class=\"text\"></textarea><!-- 发布按钮 --><div class=\"send\">发布</div><!-- 消息展示 --><div class=\"messageList\"><!-- 每条微博 --><div class=\"info\"></div></div></div>

.center{width: 600px;float: left;position: relative;overflow: hidden;}.center>.text{width: 100%;height: 150px;background-color: rgb(241, 241, 241);outline: none;font-size: 16px;resize: none;border: none;}.center>.send{width: 100px;height: 40px;background-color: orange;position: absolute;top: 110px;right: 0;font-size: 14px;color: white;text-align: center;line-height: 40px;cursor: pointer;}.center>.messageList {width: 600px;float: left;}.center>.messageList>.info {background-color: white;padding: 10px 20px;}.center>.messageList>.info>.infoText{line-height: 25px;margin-bottom: 10px;}.center>.messageList>.info>.infoOperation{overflow: hidden;width: 100%;}.center>.messageList>.info>.infoOperation>.infoTime{float: left;font-size: 14px;color: #ccc;}.center>.messageList>.info>.infoOperation>.infoHandle{float: right;font-size: 14px;}.center>.messageList>.info>.infoOperation>.infoHandle>a{color: #ccc;text-decoration: none;margin-left: 10px;}

$(function () {// 1、实时监听输入框(通过事件委托的方式)$(\'body\').delegate(\'.text\', \'propertychange input\', function () {// console.log($(this).val())})// 2、监听发布按钮的点击$(\'.send\').click(function () {// 2.1拿到用户输入的内容var $text = $(\'.text\').val()// 2.2根据内容创建节点var $weibo = createEle($text)// 2.3将微博插入$(\'.messageList\').prepend($weibo)})// 监听顶按钮$(\'body\').delegate(\'.infoTop\',\'click\',function () {$(this).text(parseInt($(this).text()) +1)})// 监听踩按钮$(\'body\').delegate(\'.infoDown\',\'click\',function () {$(this).text(parseInt($(this).text()) +1)})// 监听删除按钮$(\'body\').delegate(\'.infoDel\',\'click\',function () {$(this).parents(\'.info\').remove()})// 3、创建节点方法function createEle(text) {var $weibo = $(\'<div class=\"info\">\\n\' +\'                    <!-- 微博内容 -->\\n\' +\'                    <p class=\"infoText\">\' +text+\'</p>\\n\' +\'                    <p class=\"infoOperation\">\\n\' +\'                        <span class=\"infoTime\">\'+formartDate()+\'</span>\\n\' +\'                        <span class=\"infoHandle\">\\n\' +\'                            <a href=\"javascript:;\" class=\"infoTop\">0</a>\\n\' +\'                            <a href=\"javascript:;\" class=\"infoDown\">0</a>\\n\' +\'                            <a href=\"javascript:;\" class=\"infoDel\">删除</a>\\n\' +\'                        </span>\\n\' +\'                    </p>\\n\' +\'                \\n\' +\'                </div>\')return $weibo}// 4、更新时间方法function formartDate() {// 实例化一个日期对象var date = new Date()// 创建一个数组来保存日期var arr = [date.getFullYear() + \'-\',date.getMonth()+1,\'-\'+date.getDate(),\'-\'+date.getHours(),\':\'+date.getMinutes(),\':\'+date.getSeconds()]// arr是一个字符串，转化一下格式return arr.join(\'\')}})