表单作为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. 在nginx日志的access log中记录post请求的参数值

    背景:有时程序偶出现参数少了或没有提交到下一个链接Url里后出现问题,如何查呢,最好的办法是在nginx上的加post参数,以定位到问题才有可能对某个UIR的代码出现的问题进行排查. og_forma ...

  2. linux mysql root密码重置

    MySQL安装解决方法:重改密码 先停止 Mysql # stop mysql 重要:输入下面的代码# mysqld_safe --user=mysql --skip-grant-tables --s ...

  3. VS2013打开项目Web加载失败

    今天打开一个好久没打开过的老项目,发现web加载失败,如图: 然后重新加载项目,提示: 一开始直接在网上找答案,结果看的答案都不靠谱,只好自己动手了, 先看了 这里面是基础配置:大概看过后,又去看了提 ...

  4. yield 用法分析

    yield 关键字向编译器指示它所在的方法是迭代器块.编译器生成一个类来实现迭代器块中表示的行为.在迭代器块中,yield 关键字与 return 关键字结合使用,向枚举器对象提供值.这是一个返回值, ...

  5. 一个section刷新 一个cell刷新

    一个section刷新   一个cell刷新 //一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2]; [tabl ...

  6. Java8函数式编程

    在Java8的 java.util.function中包含以下几个接口 1.Function,先上源码 /* * Copyright (c) 2010, 2013, Oracle and/or its ...

  7. ［转］iOS学习笔记（2）－－Xcode6.1创建仅xib文件无storyboard的hello world应用

    转载地址:http://www.mamicode.com/info-detail-514151.html 由于Xcode6之后,默认创建storyboard而非xib文件,而作为初学,了解xib的加载 ...

  8. 简述id，instancetype和__kindof的区别

    id: 好处:可以调用任何对象方法 坏处:不能进行编译检查 + (id)person; instancetype 好处:自动识别当前类的对象 坏处:不会提示返回的类型 + (instancetype) ...

  9. 面向对象day1

    一.什么是面向对象 之前我们学习过面向过程和函数式编程,在讲函数的时候有说过之所以有函数式编程是因为面向过程编程是根据业务逻辑从上到下垒代码,会出现大量代码的重用和臃肿,so,函数式编程将同一功能的代 ...

  10. Node.js怎么处理数据库中日期类型

    问题描述:在数据库里存储时间的时候明明显示的是类如2016-12-22的形式,读取出来后却变成了大概是这样的:Fri May 17 2016 14:12:33 GMT+0800 (中国标准时间) 处理 ...