Jquery李炎恢——15表单选择器

    xiaoxiao2025-01-18  11

    学习要点: 1.常规选择器

    2.表单选择器

    3.表单过滤器

    表单作为HTML中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以使用之前的常规选择器或过滤器,也可以使用Jquery为表单专门提供的选择器和过滤器来准确的定位表单元素。

    一、常规选择器

    我们可以使用id、类(class)和元素名来获取表单字段,如果是表单元素,都必须含有name属性,还可以结合属性选择器来精准定位。

    $("input").size();                    //input的个数

    $("input").val();                     //元素名定位,默认获取第一个

    $("input").eq(1).val();            //同上,获取第二个

    $("input[type=password]").val();        //选择type为password的字段

    $("input[name=user]").val();              //选择name为user的字段

    那么对于id和类(class)用法比较类似,也可以结合属性选择器来精确的定位,在这里我们不再重复。对于表单中的其他元素名比如:textarea,select和button等,原理一样,不再重复。

    二、表单选择器

    虽然可以使用常规选择器来对表单的元素进行定位,但有时还是不能满足开发者灵活多变的需求。所有,jquery为表单提供了专门的选择器。

    :input :选择所有input、textarea、select和button元素,返回元素集合

    :text:选择所有单行文本框,即type=text,返回元素集合

    :password:选择所有密码框,即type=password,返回元素集合

    :radio:选择所有单选框,即type=radio,返回元素集合

    :checkbox:选择所有复选框,即type=checkbox,返回元素集合

    :submit:选择所有提交按钮,即type=submit,返回元素集合

    :reset:选择所有重置按钮,即type=reset,返回元素集合

    :image:选择所有图像按钮,即type=image,返回元素集合

    :button:选择所有普通按钮,即type=button,返回元素集合

    :file :选择所有文件按钮,即type=file,返回元素集合

    :hidden:选择所有不可见字段,即type=hidden,返回元素集合

     

    $(":input").size();            //获取所有表单字段元素

    $(":text").size();              //获取单行文本框元素

    $(":password").size();    //获取密码栏元素

    $(":radio").size();           //获取单选框元素

    $(":checkbox").size();    //获取复选框元素

    $(":submit").size();         //获取提交按钮元素

    $(":reset").size();           //获取重置按钮元素

    $(":image").size();         //获取图片按钮元素

    $(":file").size();              //获取文件按钮元素

    $(":button").size();         //获取普通按钮元素

    $(":hidden").size();        //获取隐藏字段元素

    $("form:hidden").size();   //获取form中所有表单字段元素

    注意:这些选择器都是返回元素集合,如果想获取某一个指定的元素,最好结合一下属性选择器。比如:

    $(":text[name=user]").size(); //获取单行文本框name=user的元素

    三、表单过滤器

    jquery提供了四种表单过滤器,分别在是否可以用、是否选定来进行表单字段的筛选过滤。

    :enabled:选取所有可用元素,返回集合元素

    :disabled:选取所有不可用元素,返回集合元素

    :checked:选取所有被选中的元素,单选和复选字段,返回集合元素

    :selected:选取所有被选中的元素,下拉列表,返回集合元素

    转载请注明原文地址: https://ju.6miu.com/read-1295592.html
    最新回复(0)