表单作为HTML 中一种特殊的元素，操作方法较为多样性和特殊性

开发者不但可以使用之前的常规选择器或过滤器，也可以使用jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素。

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

$('input').val(); //元素名定位，有多个input的情况下默认获取第一个input的val
$('input').eq(1).val(); //同上，获取第二个
$('input[type=password]').val(); //选择type 为password 的字段，不唯一，可以有很多类型为password的input
$('input[name=user]').val(); //选择name 为user 的字段，相对唯一。多选框或者单选框的name是相同的

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

　　

　　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          //alert($(':input').size()); //获取所有表单字段元素包括所有input、textarea、select 和button 元素
        //alert($(':text').size());//获取单行文本框元素
        //alert($(':password').size()); //获取密码栏元素
        //alert($(':password[name=pass]').size()); //获取密码栏并且name为pass的元素
        //alert($(':radio').size()); //获取单选框元素
        //alert($(':radio[name=sex]').size()); //获取单选框并且name为sex的元素
        //alert($(':radio[name=sex]').eq(1).val()); //获取单选框并且name为sex的第二个元素的val值
        //alert($(':radio[name=sex]').last().val()); //获取单选框并且name为sex的最后一个元素的val值
        //$(':checkbox').size(); //获取复选框元素
        //$(':submit').size(); //获取提交按钮元素
        //$(':reset').size(); //获取重置按钮元素
        //$(':image').size(); //获取图片按钮元素
        //$(':file').size(); //获取文件按钮元素
        //$(':button').size(); //获取普通按钮元素

        //alert($(':hidden').size()); //获取隐藏字段元素这里有5个分别是body,head,title,html,meta这五个隐藏的标签元素
        alert($('form:hidden').size());//做了限定范围获取form下的隐藏标签
   });
</script>
</head>
<body>
<form>
    <input type="text" value="123"/>
    <input type="password" value="123"/>
    <input type="password" value="456"/>
    <input type="password" name="pass" value="123"/>
    <select></select>
    <button></button>
    <input type="radio" name="sex" value="男"/>男
    <input type="radio" name="sex" value="女"/>女

    <input type="radio" name="yes" value="是"/>是
    <input type="radio" name="yes" value="否"/>否
</form>
</body>

　　

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

　　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          //alert($('form :enabled').size()); //获取可用元素    form后面有空格
        //alert($('form :disabled').size()); //获取不可用元素    form后面有空格

        //alert($(':checked[name=sex]').val()); //获取单选、复选框中被选中的元素
        alert($(':selected').val()); //获取下拉列表中被选中的元素 ,要找到select元素，择为父元素这里找到的是option
   });
</script>
</head>
<body>
<form>
    <input type="text" disabled value="123"/>
    <input type="password" value="123"/>
    <input type="password" value="456"/>
    <input type="password" name="pass" value="123"/>
    <select></select>
    <button></button>
    <input type="radio" name="sex" checked value="男"/>男
    <input type="radio" name="sex" value="女"/>女

    <input type="radio" name="yes" checked value="是"/>是
    <input type="radio" name="yes" value="否"/>否

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

JQuery_表单选择器的更多相关文章

  1. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  2. jquery表单选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器

    1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...

  4. jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  5. jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  6. jQuery学习笔记（一）——基础选择器、过滤选择器、表单选择器

    $()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...

  7. 009 jquery过滤选择器-----------（表单对象属性过滤选择器 与 表单选择器）

    1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  8. jQuery的表单选择器

    1.常规选择器选择表单标签 $(function () { // var a = $("input").eq(0).val() // alert(a) // // var b = ...

  9. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

随机推荐

  1. iOS第三方库管理工具

    作者:彷徨iOS 原文地址1:http://iostree.sinaapp.com/?p=78 原文地址2:http://blog.csdn.net/wzzvictory/article/detail ...

  2. 敏捷项目开源管理软件ScrumBasic（2）- 多项目支持

    1.加入Project对象模型 public class Project { [Key] [MaxLength(32)] public string ID { get; set; } public s ...

  3. Qt timer学习

    QTimer(重复和单发计时器) 应用QTimer时,先创建一个QTimer类,利用connect将timeout()与对应槽函数连接,在调用start()函数设置定时器时间间隔,每经过设置时间后,定 ...

  4. php 读取json数据文本所遇到的问题

    json数据属于特殊的字符串,一般自己写的json数据不要误加空格,回车,换行, 若是从其他文件读取过来的json数据很有可能带有空格,回车,换行等符号,导致使用json_decode()转诚数组失败 ...

  5. java context 讲解

    在 java 中, 常见的 Context 有很多, 像: ServletContext, ActionContext, ServletActionContext, ApplicationContex ...

  6. DKIM对发送邮件的好处及使用方法

    关于DKIM: What is DKIM? 简单的来说dkim有益于增加邮件服务供应商中的反垃圾邮件系统评分,减少邮件内容被评为垃圾邮件的概率. 但使用它不等同于不会被评为垃圾邮件.另外,邮件的发送次 ...

  7. ADB简单基础命令

    1.查看设备 adb devices 这个命令是查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 2.安装软件 adb install adb install :这个命令将 ...

  8. 手机APP功能测试经验分享2016.06.06

    1.登录时,Android和IOS同样的操作,提示信息不一致: 2.注册等页面切换成横屏容易不兼容.把内存卡去掉,再发送图片.音频.视频容易出错. 3.Android和IOS同样的功能,同样的原型图, ...

  9. 勇者斗恶龙UVa11292 - Dragon of Loowater

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24&page=s ...

  10. AngularJS 后台交互

    我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对 ...