jQuery发布微博案例

主要功能
1,点击发布,动态创建 li 元素 , 获取textarea的值,添加到 li 中去.
也动态创建了 a ,主要用来删除操作
2,给 a 元素,绑定点击操作,点击之后把当前的 l i 删除.

代码

 <div class="box">
        <textarea cols="30" rows="10"></textarea>
        <button class="btn">发布</button>
        <ul></ul>
    </div>
    <script>
        $(function() {
            //点击动态生成 li 然后获取textarea的值添加到 li 中
            $('.btn').on('click', function() {
                    var li = $("<li></li>");
                    li.html($('textarea').val() + '<a href ="JavaScript:;">删除</a>')
                    $('ul').prepend(li);
                    li.slideDown();
                    //添加后把textarea的值清空
                    $('textarea').val('');
                })
                //给删除操作注册事件
            $('ul').on('click', 'a', function() {
                $(this).parent('li').slideUp(function() {
                    $(this).remove()
                })

            })

        })
    </script>

简单实用