jQuery-表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单.html</title>
    <style>
        .orange{
            background: orange;
        }
        .widthsize{
            width: 100px;
        }
        .size{
            font-size: 100px;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>昵称</td>
            <td><input type="text" placeholder="请输入昵称"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="radio" checked="checked" name="aa">男 
                <input type="radio"  name="aa">女
            </td>
        </tr>
        <tr>
            <td>喜好</td>
            <td><input type="checkbox" name="bb">打架
                <input type="checkbox" name="bb">防火
                <input type="checkbox" name="bb">救灾
            </td>
        </tr>
        <tr>
            <td><input type="reset" value="重置"></td>
            <td><input type="submit" value="提交"></td>
        </tr>
        <tr>
            <td>
                <input type="file">
            </td>
        </tr>
        <tr>
            <td>
                <select name="" id="" multiple="multiple">
                    <option value="">张三</option>
                    <option value="">李四</option>
                    <option value="">王五</option>
                    <option value="">赵六</option>
                </select>
                <td>
                    <input type="button" value="hide" id="bvc">
                </td>
            </td>
        </tr>

    </table>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(":input").addClass("orange");//选中所有的input元素

        $(":text").addClass("widthsize");//选中所有文本类型的input元素

        $(":password").addClass("widthsize");//选中所有密码类型的input元素

        $(":radio").addClass("size");//选中所有的单选按钮
        $(":checkbox").addClass("size");//选中所有的复选框元素
        $(":submit").addClass("orange");//选中所有的提交按钮
        $(":image").addClass("orange");//选中所有的图片按钮
        $(":reset").addClass("orange");//选中所有的重置按钮
        $(":button").addClass("orange");//选中所有的button元素
        $(":file").addClass("orange");//所有的的文件选择器

        $("bvc").on("click",function(){
            $(":selected").hide();//下拉列表中的所有被选中的列表项
        })
    </script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容