<!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. Manthan, Codefest 19

    目录 Contest Info Solutions A. XORinacci B. Uniqueness C. Magic Grid D. Restore Permutation E. Let The ...

  2. Mac cpu过高问题分析及解决

    1.mds.mds_stores.mdworker 关闭: sudo mdutil -a -i off 打开: sudo mdutil -a -i on

  3. 为什么会选择redis数据库？

    因为redis支持主从同步,而且数据都是缓存在内存中,所以基于redis的分布式爬虫,对请求和数据的高频读取效率非常高

  4. Tkinter 之主窗口参数

    一.常用参数 语法 作用 window= tk.TK() 创建窗口 window['height'] = 300 设置高 window['width'] = 500 设置宽 window.title( ...

  5. 【零基础】神经网络优化之L1、L2

    一.序言 前面的文章中,我们逐步从单神经元.浅层网络到深层网络,并且大概搞懂了“向前传播”和“反向传播”的原理,比较而言深层网络做“手写数字”识别已经游刃有余了,但神经网络还存在很多问题,比如最常见的 ...

  6. hadoop 2.7.3伪分布式环境运行官方wordcount

    hadoop 2.7.3伪分布式模式运行wordcount 基本环境: 系统:win7 虚机环境:virtualBox 虚机:centos 7 hadoop版本:2.7.3 本次以伪分布式模式来运行w ...

  7. HADOOP回顾

    1. hadoop 分为四大模块 common  其他组件的公共一来模块 HDFS 分布式模块提供高吞吐量的数据访问 mapreduce 分布式计算模块 yarn 作业调度和集群资源管理模块 2. 安 ...

  8. 动画之Evaluator

    Evaluator就是通过监听器拿到当前动画对对应的具体数值,作用在于从插值器返回的数值进行转换成对应的数值.简单来说就是转换器 Evaluator返回值的类型更加动画中值决定的,所以在使用的时候注意 ...

  9. ubuntu 12.04 以固定 IP 地址连接网络并配置DNS

    sudo vim /etc/network/interfaces auto eth0 iface eth0 inet static address 192.168.2.155 netmask 255. ...

  10. PAT 甲级 1063 Set Similarity (25 分) （新学，set的使用，printf 输出%，要%%）

    1063 Set Similarity (25 分)   Given two sets of integers, the similarity of the sets is defined to be ...