表单作为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. NoSql 中Mongodb数据库的使用

    1.NoSql数据库简介 2.MongoDB数据库的简介 3.MongoDB下Windows下的安装

  2. 我的第二个FluentNHibernate例子with Knockout

    在上一篇我的第一个FluentNHibernate例子的基础上,我们用上knockoutjs 1用nuget添加knockoutjs包 2用nuget添加json.net包 3..在Index.csh ...

  3. getPhysicalNumberOfCells 与 getLastCellNum的区别

    用org.apache.poi的包做excel导入,无意间发明若是excel文件中有空列,空列后面的数据全部读不到. 查来查去本来是HSSFRow供给两个办法:getPhysicalNumberOfC ...

  4. sdk、jdk、jre、jvm、jdt、cdt分别都是什么东西

    1.sdk是什么 sdk,全称是 software development kit 中文译为软件开发工具包.kit 在英文中有工具箱,设备包,成套工具的意思. 从名字就可以看出sdk作为一个工具箱,其 ...

  5. Install Mono on Linux

    Debian, Ubuntu, and derivatives Add the Mono Project GPG signing key and the package repository to y ...

  6. jQuery入门教程

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ .网站上有对应每一 ...

  7. eclispe或者myeclispe maven jar包不能部署到tomcat下

    我们在做web开发是,经常都要在eclipse或者myeclipse中搭建web服务器,并将开发中的web项目部署到web服务器进行调试,在此,我选择的是tomcat服务器.之前部署web项目到tom ...

  8. 数据终端设备与无线通信模块之间串行通信链路复用协议（TS27.010）在嵌入式系统上的开发【转】

    转自:http://blog.csdn.net/hellolwl/article/details/6164449 目录(?)[-] 协议介绍 模块协议介绍 1            命令包格式 2   ...

  9. input失去隐藏光标（移动端）

    <input type="text" readonly name='lbinput' onfocus="lbinput.blur()">

  10. 通过jquery获取天气的方法

    代码为: $.getScript('http://int.dpool.sina.com/iplookup/iplookup.php?format=js',function(_result){ if(r ...