<!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. hihoCoder 2 * problem

    1792 模拟,转化为二进制后逐位比较 1819 线段树维护区间加 维护每个数加了多少 每次弹出栈顶元素后栈顶位置注意清空 1792 #include <iostream> #includ ...

  2. [other] Div

    https://www.luogu.org/problemnew/show/U16765 解法一 随机输出一组合法解. 复杂度 O(1) 预计得分 10~??? 解法二 看完题目基本能想到大力贪心,通 ...

  3. Codeforces Round #591

    目录 Contest Info Solutions A. Save the Nature B. Sequence Sorting C. Paint the Tree D. Stack Extermin ...

  4. 启动Django项目报错

    今天一时手欠将电脑名字改成了中文,在启动Django或Flask项目的时候一直报下面的错误 问题描述: 环境配置成功,Django成功pip,运行项目报错,浏览器输入127.0.0.1:8000报错 ...

  5. 基于部标1078视频协议和苏标Adas协议构建主动安全平台

    苏标本身仍然是基于部标808协议的基础上递增起草的,苏标协议是包容808协议的, 不能脱离808协议而独立存在的, 主要基于<JT/T 796 道路运输车辆卫星定位系统平台技术要求>.&l ...

  6. zabbix（12）使用Grafana

    一.Grafana介绍 Grafana是一个跨平台的开源的度量分析和可视化工具,可以通过将采集的数据查询然后可视化的展示,并及时通知.它主要有以下六大特点: 1.展示方式:快速灵活的客户端图表,面板插 ...

  7. 如何设置fvOptions【翻译】

    翻译自:CFD-online 帖子地址:http://www.cfd-online.com/Forums/openfoam-pre-processing/121763-how-set-fvoption ...

  8. 在OpenFOAM中做用户自定义库——编译library【转载】

    转载自:http://openfoam.blog.sohu.com/22041538.html OpenFOAM自己提供的标准类都是以库的形式提供的,并且利用头文件给出了库的应用接口.这样一来,用户的 ...

  9. Jenkins自动化打包（Gitlab）并上传蒲公英

    整个过程详见:https://www.jianshu.com/p/91e8f571fc2b 以下是遇到的问题及解决过程 一.安装homebrew(网速很慢很慢……被墙了) /usr/bin/ruby ...

  10. Go By Example-值类型

    Go By Example-值类型 Go语言的数据类型可以分为值类型和引用类型,这里先说值类型. 值类型 值类型:在Go语言中int.float.bool和string这些类型都属于值类型,使用这些类 ...