选择用户名框失去焦点后框后未跳出用户名不能为空的字样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <table>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" name="username" id="username" />
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" name="pwd" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="登陆" />
                    </td>
                </tr>
            </table>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    /*
        val()用于设置或者获取表单元素的value值
        html()用于设置或者获取标记元素的标签内部的html内容
        css()用于设置选中元素的样式 css("样式名","样式值")
        css({"样式名","样式值"})
    */
    $("#username").blur(function() {
        var inputVal = $(this).val();
        if(inputVal == "") {
            $(".error").html("用户名不能为空");
            $(".error").css({
                "color": "purple",
                "font-size":"30px"
            });
        }
    })

</script>
</html>

你这个error的class框都没在页面上写啊

                     <input type="text" name="username" id="username" />
                        <i class="error"></i>

类名为error的文本框呢？

你的class为error的标签在哪里啊？

后面加上$('body').append(".error")就可以显示了

选择用户名框 失去焦点后 框后未跳出 用户名不能为空的字样

选择用户名框失去焦点后框后未跳出用户名不能为空的字样