表单作为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. shell: bad interpreter: No such file or directory

    执行shell脚本    错误提示如下:    bash: ./back : bad interpreter:No such file or directory 因为操作系统是windows,在win ...

  2. 裁剪Tessdata

    一个项目只需要tesseract traineddata 中的数字部分. 实现过程简单说就是解包,去掉多余,再打包.利用了tesseract的dawg2wordlist  /  wordlist2da ...

  3. Azure VM上传小文件

    因为需要传一些脚本到Azure的VM里,有个简单方法可以实现,如下 编辑这个rdp文件 点击确定,连接远程计算机 可以在我的电脑里看到本地硬盘

  4. s5pv210编译qt

    undefined reference to `rpl_malloc' 编译tslib,执行make时提示undefined reference to `rpl_malloc' 是因为config.h ...

  5. 分布式入门之5：paxos

    paxos是去中心化协议,较难理解.   proposer, accepter是其中的主要角色.前者发起投票,后者批准投票. 核心思想是,一旦超过半数的accepter同意某个投票,整个流程结束,批准 ...

  6. 解决AndroidStudio中文乱码问题

    File→Settings Appearance.将Theme(皮肤)选为Windows.

  7. 使用openssl的一些问题

    openssl编译后,会生成bin,include,lib文件夹: 写了一个简单的例子:#include <openssl/md5.h> #include <openssl/evp. ...

  8. 通过shell命令编辑xml文件--sed工具

    1.修改如下xml文件的value值:

  9. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

  10. 解决项目中.a文件的冲突

    .a文件是静态文件,有多个.o文件组合而成的,在ios项目开发中,当引用第三方库的时候,时不时的会碰到诸如库冲突.库包含了某些禁用的API等问题,而这些库往往都被打包成了静态库文件(即 .a文件)来使 ...