<!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. @ResponseBody 中文乱码 问题

    这篇博文针对的是以下的情形: 当@ResponseBody 的对象是个蕴含中文的实体对象时,一切正常,当@ResponseBody 的对象是个中文String时,接收到乱码. (如果连前半句话的情况都 ...

  2. lightgbm用于排序

    一. LTR(learning to rank)经常用于搜索排序中,开源工具中比较有名的是微软的ranklib,但是这个好像是单机版的,也有好长时间没有更新了.所以打算想利用lightgbm进行排序, ...

  3. c++ 将字符串转换为数字

    int string2int(string x); int string2int(string x){ int a; string res=x; stringstream ss; ss << ...

  4. vue日常学习

    1.$refs可以用来进行父子级间通信.ref被用于作为子组件的索引ID,用以方便的在js中直接访问子组件.用法如下parent.$refs.idname 使用方法: 在父级元素上加上ref属性 &l ...

  5. [TJOI2019]唱、跳、rap和篮球——NTT+生成函数+容斥

    题目链接: [TJOI2019]唱.跳.rap和篮球 直接求不好求,我们考虑容斥,求出至少有$i$个聚集区间的方案数$ans_{i}$,那么最终答案就是$\sum\limits_{i=0}^{n}(- ...

  6. Beta冲刺（2/4）

    队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11990570.html 作业博客 : https://edu.cnblogs.com/campus/ ...

  7. 文件CRC和MD5校验

    文件CRC和MD5校验 CRC和MD5用于文件和数据的传输校验,以确认是否接收成功. unit CRCMD5; interface { 获取文件CRC校验码 } function GetFileCRC ...

  8. 贝济埃曲线quadTo与传统的手势轨迹平滑度对比分析

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  9. Java多线程中thread.getname（）和thread.currentThread().getName();的去别

    首先要明白 this.XXX 的使用场景 使用Thread.currentThread().getName()和使用this.getName()和对象实例.getName(),都可以得到线程的名称,但 ...

  10. 10--STL无序容器（Unordered Containers）

    一:无序容器简介 Unordered Containers也是一种关联式容器.其中元素是分散,没有定性的排列(不是图中那样松散).其中元素可能在某一次操作后改变原来的位置. 哈希表的链地址法,更能表现 ...