【前端_表单选择器】

╰+哭是因爲堅強的太久メ 2024-04-06 13:42 29阅读 0赞

#### 表单选择器 ####

![表单选择器][5c86d16dd8ff49299110b6d8401bccde.png]

**加粗为常用**

*  **:text 文本框**
 *  **:password 密码框**
 *  **:radio 单选按钮**
 *  **:checkbox 复选框**
 *  **:submit 提交按钮**
 *  **:reset 重置按钮**
 *  **:button 按钮**
 *  :image image按钮
 *  :hidden 选取所有不可见元素
 *  ：file 文件域
 *  :input 所有input

##### 指定状态的表单元素（ 过滤表单选择器） #####

![过滤表单选择器][66978660c42f4cdb8b41c28d79393c80.png]

*  ：enabled 所有启用的 和 选取**可用元素**
 *  :disable 选取**所有不可用元素**
 *  :selected 选取select中**被选中**的option元素
 *  :checked 选中的**单选和多选元素**

##### 案例 #####

<form method="POST" action="">
            <label>
                username:
                    <input type="text" name="userneme" id="username">
            </label>
            <br>
            <label>
                password:
                    <input type="password" name="password" id="pwd">
            </label>
            <br>
            <label>
                email:
                    <input type="text" name="email" id="email">
            </label>
            <br>
            <label>
                submit
                    <input type="submit" name="submit" id="submit">
            </label>
            
        </form>
        <script type="text/javascript">
        $(document).ready(
            function() {     
              $(":submit").css("color","red");
            }
        );

[5c86d16dd8ff49299110b6d8401bccde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/efdc9e2be2954d63850bff1339edc763.png
[66978660c42f4cdb8b41c28d79393c80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b1b8e3e827c44c2b9767566bec91c8d0.png