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>

簡單實用