zoukankan      html  css  js  c++  java
  • 表单选择器

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

       常规选择器

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

       如html代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单选择器</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <form>
            <input type="text" name="user" value="123" />
            <input type="password" name="pass" value="456" />
        </form>
    </body>
    </html>

       jQuery代码如下:

    alert($("input").size()); //2
    alert($("input").val()); //元素名定位,默认获取第一个
    alert($("input").eq(1).val()); //这种写法语义不清晰
    alert($("input[type=password]").val()); //语义清晰了一点,选择type为password的字段
    alert($("input[name=pass]").val()); //选择name为pass的字段

       那么对于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 选择所有普通按钮,即button元素 集合元素
    :file 选择所有文件按钮,即type=file 集合元素
    :hidden 选择所有不可见字段,即type=hidden 集合元素

       有如下html代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单选择器</title>
        <script type="text/javascript" src="jquery-1.12.3.js"></script>
        <script type="text/javascript" src="demo.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <form>
            <input type="text" name="user" value="123" />
            <input type="password" name="pass" value="456" />
            <input type="radio" name="sex" value="男" checked="checked" /><input type="radio" name="sex" value="女" /><textarea></textarea>
            <select name="city" multiple>
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
            <button></button>
        </form>
    </body>
    </html>

       jQuery代码:

    alert($("input").size()); //4
    alert($(":text").size()); //1

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

    alert($(":input[name=city]").size()); //1
    alert($(":password[name=pass]").size()); //1
    alert($(":radio[name=sex]").last().val()); //女   等价于alert($(":radio[name=sex]").eq(1).val());
    alert($("form :hidden").size()); //返回0,因为文档没有隐藏元素,注意要加空格

       注意一点:对于下拉框<select>

    <select name="city">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

       则默认选中第1条。若加一个属性multiple

    <select name="city" multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

      

       表单过滤器

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

       表单过滤器

    方法名 描述 返回
    :enabled 选取所有可用元素 集合元素
    :disabled 选取所有不可用元素 集合元素
    :checked 选取所有被选中的元素,单选和复选字段 集合元素
    :selected 选取所有被选中的元素,下拉列表 集合元素

       html代码同上不变,jQuery代码如下:

    alert($("form :enabled").size()); //获取可用元素的数量
    alert($("form :disabled").size()); //获取不可用元素的数量
    alert($("form :checked").size()); //获取单选、复选框中被选中的元素数量
    alert($("form :selected").size()); //获取下拉列表中被选中的元素数量
    alert($("form :selected").get(0)); //undefined/[object HTMLOptionElement]
  • 相关阅读:
    HTML5开发手机应用--viewport的作用
    media query(媒体查询)和media type(媒体类型)
    html px em pt长度单位(像素 相对长度 点)知识篇
    Markdown——入门指南
    什么是 BOM头以及如何去掉
    设计网页,常见的宽度是多少像素?或者说应该选择多大的分辨率才更美观,更能提高网站的用户驻足时间!
    CSS中元素水平居中显示的方法
    CSS hack技巧大全
    主流浏览器兼容性问题---专属CSS hack
    兼容浏览器的getElementsByClassName方法
  • 原文地址:https://www.cnblogs.com/yerenyuan/p/5425535.html
Copyright © 2011-2022 走看看