<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .comment{
            width: 570px;
            height: 73px;
            resize: none;
        }
    </style>
</head>
<body>
    <div>
        <label>请输入内容：</label>
        <textarea class="comment"></textarea>
        <input type="button" class="send" value="发布" style="width: 82px;height:30px" disabled>
    </div>

    <label>message：</label>
    <div class="messageList">
        <div class="info">
            <p class="infoText">一定要拉伸！肱三头肌、三角肌后束、股二头肌（大腿后侧）、股四头肌（大腿前侧）、髂腰肌、臀大肌的对应拉伸动作，运动过后一定肌的拉伸，可以加速乳酸代谢、减缓肌肉延迟性
                酸痛、有利于肌肉恢复，每个动作静态拉伸30秒左右，后背挺直，保持均匀呼吸一定要拉伸
                ！肱三头肌、三角肌后束、股二头肌（大腿后侧）、股四头肌（大腿前侧）、髂腰肌、臀大肌的对应拉伸动作，运动过后一定肌的拉伸，可以加速乳酸代谢、减缓肌肉延迟性酸痛、有利于肌肉恢复，每个动作静态拉伸30秒左右，后背挺直，保持均匀呼吸一定要拉伸！肱三头肌、三角肌后束、股二头肌（大腿后侧）、股四头肌（大腿前侧）、髂腰肌、臀大肌的对应拉伸动作，运动过后一定肌的拉伸，可以加速乳酸代
                谢、减缓肌肉延迟性酸痛、有利于肌肉恢复，每个动作静态拉伸30秒左右，后背挺直，保持均匀呼吸</p>
            <p class="infoOperator">
                <span>"+2018-1-1+"</span>
                <input type="button" class="del"><a href="javascript:;">删除</a>
            </p>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
        //    监听内容的实时输入,change方法在元素失去焦点的时候才会触发反应；
        //     $('.commen').change(function () {
        //         console.log(this.value);
        //     })

        //    进行事件委托   实时监听输入数据
            $('body').delegate('.comment','propertychange input',function () {
                // console.log($(this).val());
            //    判断是否输入了内容
                if( $(this).val().length>0){
                    $('.send').prop('disabled',false)
                }else {
                    $('.send').prop('disabled',true)
                }
            });

        //    1监听发布按钮的提交
            $('.send').click(function () {
            //    拿到用户输入的内容
                var $text=$('.comment').val();
            //    根据内容创建节点
                var $weibo= createEle($text);
            //    插入微博
                $('.messageList').prepend($weibo);
            });

        //    2监听顶按钮
            $('body').delegate('')
        //    3监听踩按钮
        //    4监听删除按钮
            $('body').delegate('.del','click',function () {
                $(this).parents('.info').remove();
            })

        //    创建节点方法
            function createEle(text){/*jquery内部需要使用双引号*/
                var $weibo=$("<div class=\"info\">\n" +
                    "            <p class=\"infoText\">"+text+"</p>\n" +
                    "            <p class=\"infoOperator\">\n" +
                    "                <span>"+time()+"</span>\n" +
                    "                <span class='del'><a href=\"javascript:;\">删除</a></span>\n" +
                    "            </p>\n" +
                    "        </div>");
                return $weibo;
            };
            //生成时间的方法
            function time() {
                var data= new Date();
                var arr=[data.getFullYear()+"-",data.getMonth()+1+"-",data.getDate()+' '];
                return arr.join(" ");
            }
        })
    </script>
</body>
</html>

jquery实现微博输入和发布的更多相关文章

  1. jQuery 3.0最终版发布，十大新特性眼前一亮

    jQuery 3.0在日前发布了最终的全新版本.从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的到来,终于在2016年6月他们迎来了这一个最终板 ...

  2. jquery删除添加输入文本框

    效果体验:http://hovertree.com/texiao/jquery/67/ 效果图: 参考:http://hovertree.com/h/bjaf/traversing_each.htm ...

  3. jquery 实现邮箱输入自动提示功能：（二）

    上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...

  4. jQuery实现用户输入自动完成功能

    jQuery实现用户输入自动完成功能 利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝.京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显 ...

  5. jQuery WeUI V0.4.2 发布

    http://www.oschina.net/news/71590/jquery-weui-v0-4-2 jQuery WeUI V0.4.2 发布了! jQuery WeUI 中使用的是官方WeUI ...

  6. 分享一个仅0.7KB的jQuery文本框输入提示插件

    由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提 ...

  7. JQuery动画插件Velocity.js发布：更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  8. 微博输入相关js 代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery QQ微博

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Linux操作系统常用命令合集——第四篇-文件系统权限操作(5个命令)

    1.umask [命令作用] 文件或目录创建时的遮罩码 [命令语法] umask     [选项]    [参数] [常用选项] -p  --输出的权限掩码可直接作为指令来执行 -s  --以符号方式 ...

  2. （3）打鸡儿教你Vue.js

    vue.js是一套构建用户界面的渐进式框架 vue关注视图层,采用自底向上增量开发的设计 <div id="app"> <p>{{ message }}&l ...

  3. Codeforces Round #566 (Div. 2)题解

    时间\(9.05\)好评 A Filling Shapes 宽度为\(3\),不能横向填 考虑纵向填,长度为\(2\)为一块,填法有两种 如果长度为奇数则显然无解,否则\(2^{n/2}\) B Pl ...

  4. Hadoop 安装(本地、伪分布、分布式模式)

    本地模式 环境介绍 一共三台测试机 master   192.168.4.91 slave1   192.168.4.45 slave2   192.168.4.96 操作系统配置 1.Centos7 ...

  5. zabbix (11) 监控TCP连接数

    对TCP的监控可以采用ss.netstat./proc/net/tcp这三个不同的方案来实现.其中ss是最快的 (1)ss命令 [root@manager1 script_py ::]#time ss ...

  6. weui-wxss框架实现博远企信小程序

  7. 解决跨操作系统平台JSON中文乱码问题

    解决跨操作系统平台JSON中文乱码问题 LINUX统一使用utf-8编码,WINDOWS却不是. LINUX中间件,传输JSON给WINDOWS程序,会乱码. 解决办法: 对JSON字段是字符串类型的 ...

  8. 调用百度地图API的总结

    因为项目要用到百度地图,所以先摸索了一下,各种功能官方都有文档,点击可查看,文章的话我就直接写我用到的功能例子了,要用可以直接复制粘贴~ 一.主要涉及到的几个接口(先申请密钥): 1.技术一:坐标转换 ...

  9. vue+Typescript初级入门

    Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 PS ...

  10. Visual studio 正在从以下位置加载符号：Microsoft符号服务器 尝试取消禁用后续符号加载

    正在从以下位置加载符号:Microsoft符号服务器   尝试取消禁用后续符号加载 进入VS---工具---选项----调试----符号,看右边有个“Microsoft符号服务器”,将前面的勾去掉,( ...