jq - 增加、删除节点例子（一）

知识点：
	1、事件委托，监听内容的实时输入
	2、监听发布按钮点击，创建方法，动态增加显示节点
	3、a标签里动态加数字，parseInt取整数
	4、创建节点方法，动态传递text值，要注意书写格式，会有点繁琐
	5、动态的显示时间，转换时间的显示格式

<script type="text/javascript">
    $(function() {
        // 0、事件委托，监听内容的实时输入
        $('body').delegate('.text', 'propertychange input', function() {
             //console.log($(this).val()); //打印 .text中的值

            // 0.1判断是否输入内容
            if ($(this).val().length > 0) {
                // 0.2-1 让按钮可用 ， prop 返回一个 true 或者 false
                $('.m-send').prop('disabled', false);
            }else {
                // 0.2-2 让按钮不可用
                $('.m-send').prop('disabled', true);
            }
        });

        // 1、监听发布按钮的点击；
        $('.m-send').click(function() {
            // 1.1 拿到用户输入的内容
            var $text = $('.text').val();
            // 1.2 根据内容创建节点，  把$(text)的内容传入给  crearEles()方法
            var $weibo = crearEles($text);
            // 1.3 插入节点
            $('.m-content-info').prepend($weibo);
        });

        //2、监听infoTop点击事件,监听即要用到事件委托
        $('body').delegate('.infoTop','click', function() {  // infoTop 监听 click事件
            //console.log(parseInt($(this).text()));
            $(this).text(parseInt($(this).text()) + 1);
        })

        //3、监听infoDow点击事件
        $('body').delegate('.infoDown','click', function() {  // infoTop 监听 click事件
            //alert('top');
            $(this).text(parseInt($(this).text()) + 1);
        })
        
        //4、监听infoDel点击事件
        $('body').delegate('.infoDel','click', function() {  // infoTop 监听 click事件
            //alert('top');
            $(this).parents('.info-box').remove();   //parents- 祖先级，删除的标签向上找到info-box祖先元素
        })

        //如果格式不对，后台的json中包含特殊字符导致无法解析，创建节点方法
        function crearEles(text) {
            var $weibo = $("<div class=\'info-box\'>\n"+
                "<div class=\'m-info-type\'>" + text + "</div>\n" +
                "<div class=\'m-info-item clearfix\'>\n"+
                "<div class=\'m-left-img\'>\n"+
                "<span>" + formartTime() + "</span>\n"+
                "</div>\n"+
                "<div class=\'m-right-img\'>\n"+
                "<a href=\'javascript:;\' class=\'infoTop\'>0</a>\n"+
                "<a href=\'javascript:;\' class=\'infoDown\'>0</a>\n"+
                "<a href=\'javascript:;\' class=\'infoDel\'>0</a>\n"+
                "</div>\n"+
                "</div>\n"+
                "</div>");
            return $weibo;
        };
        // 生成时间方法
        function formartTime() {
            var date = new Date();
            // console.log(date); // 打印时间

            //拼接时间
            var arr = [date.getFullYear() + "-",
                date.getMonth() + 1 + "-",
                date.getDate() + " ",
                date.getHours() + ":",
                date.getMinutes() + ":",
                date.getSeconds()
            ];
            return arr.join(''); //数字转换字符串
        }

    })
</script>

<div class="contaniner">
    <div class="content">
        <div class="m-centent-title">
            <textarea class="text"></textarea>
            <input type="button" class="m-send" name="" value="立即发布" disabled>
        </div>
        <div class="m-content-info">
            <div class="info-box">
                <div class="m-info-type">111</div>
                <div class="m-info-item clearfix">
                    <div class="m-left-img">
                        <span>2019-01-08</span>
                    </div>
                    <div class="m-right-img">
                        <a href="javascript:;">0</a>
                        <a href="javascript:;">0</a>
                        <a href="javascript:;">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .clearfix {
        zoom: 1;
    }
    .clearfix:after {
        content: '.';
        display: block;
        height: 0;
        clear: both;
        line-height: 0;
        overflow: hidden;
        visibility: hidden;
    }
    /* ===============    圣杯布局   ====================*/
    .contaniner {
        position: relative;
        padding: 0 200px;
        zoom: 1;
        overflow: hidden;
        background: #fff;
    }
    .contaniner > div {
        float: left;
    }
    .contaniner .content {
        position: relative;
        width: 100%;
        min-height: 400px;
        background: #fff;
    }
    .left {
        position: relative;
        left: -200px;
        width: 200px;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
        margin-left: -100%;
        background: #ffcc00;
    }

    .right {
        position: relative;
        right: -200px;
        width: 200px;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
        margin-left: -200px;
        background: #ffbcc8;
    }
/* end */
    .m-content-info {
        padding: 15px;
    }

    .m-info-item {
        width: 100%;
        overflow: hidden;
    }

    .m-left-img {
        float: left;
        font-size: 14px;
    }

    .m-right-img {
        float: right;
        font-size: 14px;
    }

    .m-right-img a {
        display: inline-block;
        padding-left: 30px;
        min-height: 30px;
        margin: 0 10px;
        line-height: 2.2;
        color: #999;
        background: url('./img/css_sprites.png') no-repeat 0 0;
        background-size: 40px;
    }

    .m-right-img a:nth-child(1) {
        background-position: -5px -5px;
    }
    .m-right-img a:nth-child(2) {
        background-position: -5px -45px;
    }
        .m-right-img a:nth-child(3) {
        background-position: -5px -85px;
    }

    .m-centent-title {
        padding: 15px;
        text-align: right;
        border: 1px solid #ddd;
    }

    .m-centent-title .text {
        width: 100%;
        height: 80px;
        text-align: left;
        resize: none;
        outline: none;
    }

    .m-send {
        display: inline-block;
        padding: 10px 30px;
        margin: 15px 0;
        border: none;
        color: #fff;
        background: #ffd300;
    }

</style>