<!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. 后缀数组 1031: [JSOI2007]字符加密Cipher

    /*1031: [JSOI2007]字符加密Cipher Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4926 Solved: 2020[Submit ...

  2. linux系列（十五）：tail命令

    1.命令格式: tail[必要参数][选择参数][文件] 2.命令功能: 用于显示指定文件末尾内容,不指定文件时,作为输入信息进行处理.常用查看日志文件. 3.命令参数: -f 循环读取 -q 不显示 ...

  3. nodejs+supertest+mocha 接口测试环境搭建

    系统接口自动化测试 该框架用于对系统的接口自动化测试(nodejs+supertest+mocha)Homebrew 安装: ruby -e "$(curl -fsSL {+}https:/ ...

  4. python 小数处理

    modf() 分别取整数部分和小数部分 math模块函数import mathn = 3.75print(math.modf(n))>>> (0.75, 3.0)n = 3.25pr ...

  5. 使用Redis sorted set实现集合设置member过期

    在我们日常工作中,有许多这种逻辑 例如需要得到最近三分钟的cache list. 例如我们监控系统需要查询最近一分钟的数据. 总结说来就是 需要一个list存储对象,并且这个对象会无限制增长,需要设置 ...

  6. 一篇文章彻底搞懂base64编码原理

    开始 在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理又了解多少?今天这篇文章带领大家了解一下Base64的底层实现. base64是什么东东呢? Base64 ...

  7. UNIX网络编程 环境搭建

    配置好动态链接库或者静态链接库 1,下载UNIX网络编程书的头文件及示例源码unpv13e 2    按照readme来编译 Execute the following from the src/ d ...

  8. ResultMap和ResultType在使用中的区别、MyBatis中Mapper的返回值类型

    在使用mybatis进行数据库连接操作时对于SQL语句返回结果的处理通常有两种方式,一种就是resultType另一种就是resultMap,下面说下我对这两者的认识和理解 resultType:当使 ...

  9. jQuery之编写插件

    一.学习插件编写背景 作为一名前端人员,应该注重前端复用性及组件化,更应该考虑前端的性能优化,做到代码简洁有序,不冗余.特别是在大型团队中,如果一个团队中存在多个功能相似的组件,举个栗子,拿分页组件举 ...

  10. fdisk创立主分区过程

    [root@localhost ~]# fdisk /dev/sdb …省略部分输出… Command (m for help): p #显示当前硬盘的分区列表 Disk /dev/sdb: 21.5 ...