jq的DOM操作与事件操作02的有感记录

看小猪老师写的行云流水甚是羡慕

但是咱得老老实实弄清楚到底是咋回事

• this关键字指代当前的标签input
• 其次我打印了$(this).next()[0]的信息，发现 这个tagName 是标签的大写
• 最后注意的点就是 insertAfter 是兄弟元素的新增，而append是追加子元素

    const user = $("input[name='username']");
    user.blur = function(){
        // console.log("sss");
        let tip = "";
        //用户列表
        const users = ["admin", "peter", "zhu"];
        // console.log($(this).val().length);
        if ($(this).val().length === 0) {
             tip = "用户名不能为空";
             $(this).focus();
        }
        console.log($(this).next());
        //显示提示信息到页面中
        if ($(this).next()[0].tagName !== "SPAN") {
               $("<span></span>").html(tip).css({
                            color: "red",
                            fontSize: "14px",
                        }).insertAfter($(this));
                }
    }
    //on('事件类型'，回调函数)
    //事件监听 addEventListener()
    //input 检测用户的输入内容
    //当时输入后的blur会产生span标签，这里搞一个判断
            user.on("input", function () {
                if ($(this).next()[0].tagName === "SPAN") {
                    $(this).next().remove();
                }
            });