Jquery中微博发布实例

程序员文章站 2024-03-05 19:49:55

...

J q u e r y Jquery Jquery中微博发布实例。

主要利用： o n ( ) on() on()给动态元素绑定事件。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        margin: 100px auto;
        width: 500px;
        height: 300px;
        border: 1px solid blue;
        padding: 10px;
    }

    ul {
        list-style: none;
    }

    textarea {
        width: 400px;
        height: 130px;
        margin-left: 20px;
        resize: none;
        outline: none;
    }

    ul li {
        line-height: 25px;
        border-bottom: 1px dashed #cccccc;
        display: none;
    }

    span {
        display: block;
        text-align: center;
        margin: 10px 0;
    }

    a {
        float: right;
    }
</style>

<body>
    <div class='box'>
        <span>微博发布</span>

        <textarea name="" class='txt' cols="30" rows="10">请输入内容</textarea>
        <button class="btn">发布</button>
        <ul>
            <li>

            </li>
        </ul>
    </div>
</body>
<script src="jquery-3.5.1.js"></script>
<script>
    $(function () {
        $('.btn').on('click', function () {
            if ($('.txt').val() == "") {
                alert("您输入的内容为空！！！"); return false;
            }
            var li = $('<li></li>');
            li.html($('.txt').val() + "<a  href='javascript:;'>删除</a>");
            $('ul').prepend(li);
            li.slideDown();
            $('.txt').val("");
        })
        $("ul").on("click", "a", function () {
            $(this).parent().slideUp(function () { //这个this 是a标签
                $(this).remove();//这个this 是li
            });
        })
    })
</script>

</html>