jQuery实现微博发布界面

知识点

resize: none ：textarea不允许拉动
text-indent ：规定文本块中首行文本的缩进
$.trim(str)：去掉字符串起始和结尾的空格
focus([[data],fn])：当元素获得焦点时，触发 focus 事件
如果只将点击事件绑定在li标签上，新增的li标签不会带有绑定事件。
解决方案：
① 在新增li标签时候，为其增加绑定事件。但代码较为冗余。
② 事件委托。将事件绑定在父级标签上。
语法：
```
父级标签.on(事件,事件源,触发函数)
```
例如：
```
$('.dataList>ul').on('click', 'li', function () {
    $(this).animate({
        'width': '0px'
    }, 1000, function () {
        $(this).remove();
    });
});
```

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {padding: 0;margin: 0;list-style: none;}
        body {background-image: url("images/body_bg.jpg");}
        .box {width: 700px;margin:100px auto;}
        .input {width: 700px;height: 200px;border: 1px solid #cccccc;background-color: white;border-radius: 6px;}
        .input .content {width: 690px;height: 150px;margin: 5px;box-sizing: border-box;border: 1px solid gray;resize: none; outline: none; padding: 10px;}
        .input .submit {width: 100px;height: 30px;float: right;background: orangered;color: white;margin-bottom: 5px;margin-right: 5px; border: none; outline: none;cursor: pointer;}
        .dataList {width: 600px;margin: 50px auto;}
        .dataList>ul>li {width: 100%;height: 40px;line-height: 40px;color: slategray;background: lightblue;margin-bottom: 5px;border-radius: 40px;text-indent: 10px;cursor: pointer;}
    </style>
</head>
<body>
<div class="box">
    <div class="input">
        <textarea class="content"></textarea>
        <button class="submit">发布</button>
    </div>
    <div class="dataList">
        <ul>
            <li>今天的天气很好呀!</li>
            <li>今天的天气很好呀!</li>
            <li>今天的天气很好呀!</li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        // 0. 获取需要的标签
        var $content = $('.content');
        // 1. 监听按钮的点击
        $('.submit').click(function () {
             // 1.1 获取输入的内容
             var content = $content.val();
             // 1.2 容错
             if($.trim(content).length <= 0){
                 alert('请输入内容!');
                 //1.2.1 清空输入框内容
                 $content.val('');
                 // 1.2.2 获得焦点
                 $('.content').focus();
                 return;
             }
             // 1.3 创建节点
            var $newLi = $('<li>' + content  +'</li>');
            /*$newLi.click(function () {
                $(this).animate({
                    'width': '0px'
                }, 1000, function () {
                    $(this).remove();
                });
            });*/
             // 1.4 追加到ul里面
            var $ul = $('.dataList>ul');
            $newLi.prependTo($ul);
            // 1.5 设置追加的动画
            $newLi.hide();
            $newLi.slideDown(500);
            // 1.6 额外的操作
            $content.val('');
            $content.focus();
        });
        // 2. 点击li标签, 删除
        /*$('.dataList>ul>li').click(function () {
             $(this).animate({
                 'width': '0px'
             }, 1000, function () {
                 $(this).remove();
             });
        });*/

       /* $('.dataList>ul').on('click', 'li', function () {
            $(this).animate({
                'width': '0px'
            }, 1000, function () {
                $(this).remove();
            });
        });*/

        $('body').on('click', 'li', function () {
            $(this).animate({
                'width': '0px'
            }, 1000, function () {
                $(this).remove();
            });
        });
    });
</script>
</body>
</html>

运行结果

在这里插入图片描述

KaiSarH

发布了270 篇原创文章 · 获赞 123 · 访问量 1万+

私信关注

jQuery实现微博发布界面

知识点

代码

运行结果

猜你喜欢