jQuery初体验

效果预览

对jQuery选择器和事件的简单应用

HTML代码

<form>
    <table cellpadding="0px" cellspacing="0px">
        <tr>
            <td>商品添加</td>
            <td></td>
        </tr>
        <tr>
            <td>所属类别</td>
            <td>
                <select>
                    <option>小说</option>
                    <option>文学</option>
                    <option>新闻</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>图书名称</td>
            <td>
                <input type="text" id="bookName"/>
                <span id="showName"></span>
            </td>
        </tr>
        <tr>
            <td>作者</td>
            <td>
                <input type="text" id="bookAuthor"/>
                <span id="showAuthor"></span>
            </td>
        </tr>
        <tr>
            <td>出版社</td>
            <td>
                <input type="text" id="publish"/>
                <span id="showPublish"></span>
            </td>
        </tr>
        <tr>
            <td>市场价格</td>
            <td>
                <input type="text" id="marketPrice"/>
                <span id="showMarketPrice"></span>
            </td>
        </tr>
        <tr>
            <td>热卖价</td>
            <td>
                <input type="text" id="hotPrice"/>
                <span id="showHotPrice"></span>
            </td>
        </tr>
        <tr>
            <td>图像</td>
            <td>
                <select>
                    <option>123</option>
                    <option>456</option>
                    <option>789</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>是否为推荐</td>
            <td><input type="checkbox"/></td>
        </tr>
        <tr>
            <td>是否为热门</td>
            <td><input type="checkbox"/></td>
        </tr>
        <tr>
            <td>简单描述</td>
            <td>
                <textarea cols="23px" rows="5px">
                </textarea>
            </td>
        </tr>
    </table>
    <input type="button" id="add" value="添加"/>
</form>

JavaScript代码

<script>
    $("#add").click(function () {
        var show = $("table input:lt(5)");
        var isNull = false;
        for (var i = 0; i < show.length; i++) {
            if (show.eq(i).val() == "") {
                $("td>span").text("此项为必填").css("color", "red");
                isNull = false;
            } else {
                $("td>span").text(" ").css("color", "white");
                isNull = true;
            }
        }
        if (isNull) {
            alert("提交成功")
        } else {
            alert("请完善信息")
        }
    })
</script>

CSS代码

<style>
        table, td {
            border: 1px solid black;
        }
        #add {
            width: 80px;
            height: 30px;
            background-color: grey;
            border: 1px dotted white;
            border-radius: 5px;
            align-self: center;
        }
    </style>

相关效果图