JavaScript 学习-45.jQuery 表单选择器

前言

jQuery 表单选择器,专门操作表单内容

表单选择器

表单选择器总结

表单项 示例 说明 输入框 $(":input")

查找所有input元素,包含input、textarea、select、button 文本框 $(":text")

查找所有文本框type=”text” 密码框 $(":password")

查找所有密码框type=”password” 单选按钮 $(":radio)

查找所有单选按钮 复选框 $(":checkbox)

查找所有复选框 图片 $(":image")

查找所有图像域 文件 $(":file)

查找所有文件域 按钮 $(":button")

查找所有按钮 提交按钮 $(":submit")

查找所有提交按钮 重置按钮 $(":reset")

查找所有重置按钮

查找示例

    <form id="login-form">
        <div class="form-group">
            <label for="user">&#x7528;&#x6237;&#x540D;</label>
            <input type="text" class="form-control" id="user" name="user" placeholder="&#x8F93;&#x5165;&#x7528;&#x6237;&#x540D;">
        </div>
        <div class="form-group">
            <label for="password">&#x5BC6;&#x7801;</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="&#x8F93;&#x5165;&#x5BC6;&#x7801;">
        </div>
        <div class="form-group">
            <label for="email">&#x90AE;&#x7BB1;</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="&#x8F93;&#x5165;&#x90AE;&#x7BB1;">
        </div>
        <div class="form-group">
            <label for="desc">&#x8BE6;&#x7EC6;</label>
            <textarea class="form-control" id="desc" name="desc" placeholder="&#x8F93;&#x5165;&#x90AE;&#x7BB1;"></textarea>
        </div>
        <div class="form-group">
            <label for="choice">&#x8BF7;&#x9009;&#x62E9;</label>
            <select id="choice">
                <option value="1">python</option>
                <option value="2">selenium</option>
                <option value="3">pytest</option>
            </select>
        </div>
        <div class="form-group">
            <input type="radio" name="sex" value="male" checked><label>&#x7537;</label>
            <input type="radio" name="sex" value="female"><label>&#x5973;</label>
        </div>
        <div class="form-group">
            <input name="subject" type="checkbox" value="Chinese" checked><label>&#x8BED;&#x6587;</label>
            <input name="subject" type="checkbox" value="Math"><label>&#x6570;&#x5B66;</label>
            <input name="subject" type="checkbox" checked="checked" value="English"><label>&#x82F1;&#x8BED;</label>
        </div>

        <div class="form-group">
            <input type="submit" class="btn" value="&#x63D0;&#x4EA4;">
            <button class="btn">&#x91CD;&#x7F6E;&#x6309;&#x94AE;</button>
        </div>
    </form>

查找所有的输入框

$(':input');

总共查找到12个,包含input、textarea、select、button

JavaScript 学习-45.jQuery 表单选择器

查找文本框

$(':text');

只查找type=”text” 的输入框

JavaScript 学习-45.jQuery 表单选择器

查找密码框

$(':password');

只查找type=”password” 的输入框

JavaScript 学习-45.jQuery 表单选择器

查找单选

$(':radio');

查找 type=”radio” 的输入框

JavaScript 学习-45.jQuery 表单选择器

查找复选框

$(':checkbox');

查找 type=”checkbox” 的输入框

JavaScript 学习-45.jQuery 表单选择器

Original: https://www.cnblogs.com/yoyoketang/p/16371168.html
Author: 上海-悠悠
Title: JavaScript 学习-45.jQuery 表单选择器

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/535960/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球