表单作为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. Djunit工作记录Mock时出现为null的情况setReturnValueAt|MockObjectManager.addReturnValue不起作用

    最近工作要对代码进行局部测试并编写测试文档,可是偶的环境还没搞好哦(开始不太乐意直接请教前辈,还是选择自己先搞一下了)经过电脑重装jdk ,eclipse,djunit工具包ver***,等等确定不是 ...

  3. 【数学】Jersey Politics

                                                            Jersey Politics Time Limit: 1000MS   Memory ...

  4. python之在线PK游戏（第六天）

      本节作业: 熟练使用类和模块,写一个交互性强.有冲突的程序. 故本次写了一个文字回合制的PK游戏,系统主程序为根目录下的:game_menu.py 1. 系统功能模块: 第六天的作业:文字游戏程序 ...

  5. Clouda聊天室实践

    1.Clouda说明 Clouda是简单,可依赖的实时Javascript框架.对一个想开发移动webapp的开发者来说,可以使用clouda开发框架,实现一个功能和体验与native app齐平的轻 ...

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

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

  7. Java 把 InputStream 转换成 String 的几种方法

    我们在 Java 中经常会碰到如何把 InputStream 转换成 String 的情形,比如从文件或网络得到一个 InputStream,需要转换成字符串输出或赋给别的变量. 未真正关注这个问题之 ...

  8. list中的中文转换编码显示

    for i in range(1,sheet.nrows): row=sheet.row_values(i,0,sheet.ncols) row=str(row).replace('u\'','\'' ...

  9. php读取大文件

    高效率计算文件行数 function count_line($file) { $fp=fopen($file, "r"); $i=0; while(!feof($fp)) { // ...

  10. this的问题

    javascript this可以绑定到:全局对象,自己定义的对象,用构造函数生成的对象,通过call或者apply更改绑定的对象    1.全局对象  1 2 3 4 5 function glob ...