Mr.J-- jQuery学习笔记(二十一)--模拟微博页面

最新推荐文章于 2021-04-17 00:41:05 发布

原创最新推荐文章于 2021-04-17 00:41:05 发布 · 376 阅读

1 ·

CC 4.0 BY-SA版权

jQuery学习专栏收录该内容

33 篇文章

订阅专栏

本文是jQuery学习笔记的第二十一部分，主要介绍如何使用jQuery模拟微博页面的功能，包括输入内容、发布、顶、踩和删除操作，以及显示发布时间。通过实例展示了节点操作和事件处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看之前的节点操作方法：Mr.J-- jQuery学习笔记(二十)--节点操作方法

Mr.J-- jQuery学习笔记(五)--属性及属性节点

Mr.J-- jQuery学习笔记(十一)--事件委托： delegate()方法

页面样式

主要写一下实现各种功能的方法

JS-demo

输入内容

判断是否输入了内容

让按钮可用

让按钮不可用

$("body").delegate(".comment","propertychange input", function () {
        // 判断是否输入了内容
        if($(this).val().length > 0){
            // 让按钮可用
            $(".send").prop("disabled", false);
        }else{
            // 让按钮不可用
            $(".send").prop("disabled", true);
        }
    });

发布内容

拿到用户输入的内容

根据内容创建节点

插入内容

    $(".send").click(function () {
        // 拿到用户输入的内容
        var $text = $(".comment").val();
        // 根据内容创建节点
        var $csdn_msg = createEle($text);
        // 插入内容
        $(".messageList").prepend($csdn_msg);
    });

顶，踩，删除

    $("body").delegate(".infoTop", "click", function () {
        $(this).text(parseInt($(this).text()) + 1);
    });

    $("body").delegate(".infoDown", "click", function () {
        $(this).text(parseInt($(this).text()) + 1);
    });

    $("body").delegate(".infoDel", "click", function () {
        $(this).parents(".info").remove();
    });

创造节点进行顶，踩，删除的实现

function createEle(text) {
        var $csdn_msg = $("<div class=\"info\">\n" +
            "            <p class=\"infoText\">"+text+"</p>\n" +
            "            <p class=\"infoOperation\">\n" +
            "                <span class=\"infoTime\">"+formartDate()+"</span>\n" +
            "                <span class=\"infoHandle\">\n" +
            "                    <a href=\"javascript:;\" class='infoTop'>0</a>\n" +
            "                    <a href=\"javascript:;\" class='infoDown'>0</a>\n" +
            "                    <a href=\"javascript:;\" class='infoDel'>删除</a>\n" +
            "                </span>\n" +
            "            </p>\n" +
            "        </div>");
        return $csdn_msg;
    }

发布时间

使用数组获得值，然后使用join连接。最后返回值

function formartDate() {
        var date = new Date();
        // 2018-4-3 21:30:23
        var arr = [date.getFullYear() + "-",
            date.getMonth() + 1 + "-",
            date.getDate() + " ",
            date.getHours() + ":",
            date.getMinutes() + ":",
            date.getSeconds()];
        return arr.join("");

    }