欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery实现微博发布界面

程序员文章站 2024-03-05 15:27:01
...

知识点

  1. resize: none :textarea不允许拉动
  2. text-indent :规定文本块中首行文本的缩进
  3. $.trim(str):去掉字符串起始和结尾的空格
  4. focus([[data],fn]):当元素获得焦点时,触发 focus 事件
  5. 如果只将点击事件绑定在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>

运行结果

jQuery实现微博发布界面

相关标签: # jQuery