<!DOCTYPE html>

 <html>

 <head>

   <style>

   body, select { font-size:14px; }

   form { margin:5px; }

   p { color:red; margin:5px; }

   b { color:blue; }

   </style>

   <script src="http://code.jquery.com/jquery-latest.js"></script>

 </head>

 <body>

   <p><b>Results:</b> <span id="results"></span></p>

   <form>

     <select name="single">

       <option>Single</option>

       <option>Single2</option>

     </select>

     <select name="multiple" multiple="multiple">

       <option selected="selected">Multiple</option>

       <option>Multiple2</option>

       <option selected="selected">Multiple3</option>

     </select><br/>

     <input type="checkbox" name="check" value="check1" id="ch1"/>

     <label for="ch1">check1</label>

     <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>

     <label for="ch2">check2</label>

     <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>

     <label for="r1">radio1</label>

     <input type="radio" name="radio" value="radio2" id="r2"/>

     <label for="r2">radio2</label>

   </form>

 <script>

   function showValues() {

     var fields = $(":input").serializeArray();

     $("#results").empty();

     jQuery.each(fields, function(i, field){

       $("#results").append(field.value + " ");

     });

   }

   $(":checkbox, :radio").click(showValues);

   $("select").change(showValues);

   showValues();

 </script>

 </body>

 </html>

从表单获取值，遍历并将其显示出来

:input:选择所有 input, textarea, select 和 button 元素.

$(':checkbox') 等同于 $('[type=checkbox]')。如同其他伪类选择器（那些以“:”开始）建议前面加上一个标记名称或其他选择器;否则，默认使用通用选择("*")。换句话说$(':checkbox') 等同于 $('*:checkbox')，所以应该使用$('input:checkbox')来提升效率。

$(':radio')等价于$('[type=radio]')。如同其他伪类选择器（那些以“:”开始），建议使用此类选择器时，跟在一个标签名或者其它选择器后面，默认使用了全局通配符选择器 "*"。换句话说$(':radio') 等同于 $('*:radio')，所以应该使用$('input:radio')。

jQuery.each( collection, callback(indexInArray, valueOfElement) )

一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

$.each([52, 97], function(index, value) {

  alert(index + ': ' + value);

});

//1:52

//1:97
var obj = {

  "flammable": "inflammable",

  "duh": "no duh"

};

$.each( obj, function( key, value ) {

  alert( key + ": " + value );

});

//flammable: inflammable

//duh: no duh
<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery.each demo</title>

  <style>

  div {

    color: blue;

  }

  div#five {

    color: red;

  }

  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>

<body>

<div id="one"></div>

<div id="two"></div>

<div id="three"></div>

<div id="four"></div>

<div id="five"></div>

<script>

var arr = [ "one", "two", "three", "four", "five" ];

var obj = { one: 1, two: 2, three: 3, four: 4, five: 5 };

jQuery.each( arr, function( i, val ) {

  $( "#" + val ).text( "Mine is " + val + "." );

  // Will stop running after "three"

  return ( val !== "three" );

});

jQuery.each( obj, function( i, val ) {

  $( "#" + i ).append( document.createTextNode( " - " + val ) );

});

</script>

</body>

</html>
Mine is one. - 1
Mine is two. - 2
Mine is three. - 3
- 4
- 5

【jQuery示例】遍历表单数据并显示的更多相关文章

  1. SQL Server遍历表的几种方法

    在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易懂,但是它不符合面向集合操作的原则,而且性能也比面向集合低.当然,从面向集合操作的 ...

  2. SQL Server遍历表的几种方法 转载

    SQL Server遍历表的几种方法 阅读目录 使用游标 使用表变量 使用临时表 在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易 ...

  3. jQuery对的表单数据序列化和校验

    jQuery对的表单数据序列化和校验 表单序列化 如果想让表单通过ajax异步提交,那么首先我们要通过js获取到每个表单中输入的值,如果表单项比较多的话,是一件很麻烦,很痛苦的事情,那么我们可以通过j ...

  4. SQL2005 遍历表插入

    /* sql2005遍历表(方法1) insert into 数据表(userid,adddate) values((select userid from 用户表),date); */ /*sql20 ...

  5. jquery easyui datebox 时间控件默认显示当前日期的实现方法

    jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以

  6. jquery easyUI 日期格式化，DateBox只显示年

    jquery easyUI 日期格式化,DateBox只显示年 >>>>>>>>>>>>>>>>> ...

  7. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  8. 页面通过Jquery取值然后传值到后台显示underfined是怎么回事？

    页面通过Jquery取值然后传值到后台显示underfined是怎么回事? 一般情况下第一个如果用jQuery取值的,末尾要用val(),如果用$符号取值的,末尾要加上val. eg: busines ...

  9. 5.用JQuery实现选中select里面的option显示对应的div

    用JQuery实现选中select里面的option显示对应的div HTML: <select name=""  onchange="select(this)&q ...

随机推荐

  1. C# 在執行程式目錄下產生文件夾

    //產生一個Log文件夾string appPath = Application.StartupPath; if (!Directory.Exists(appPath + "/log&quo ...

  2. SharePoint 2013 Excel Services REST API介绍

    前言:Excel Services 中的 REST API 是 Microsoft SharePoint Server 2010 的新增项.利用 REST API,可通过 URL 直接访问工作簿部件或 ...

  3. EA（企业架构）落地之道

    随着业务和IT的不断融合,企业业务.信息系统和技术结合日益紧密,企业对信息系统及技术的敏捷性要求越来越高.如何在多变的环境下快速创新产品或服务并推向市场是企业面临的日益紧迫的压力.企业架构作为连接和匹 ...

  4. [转]Android应用程序框架思路整理

    一．一般Android应用程序架构(Book,购彩,Market). 普通的应用程序由于只需要用到Android的联网与显示的功能,所以应用程序大体上是呈现为UI(Activities)与网络(Net ...

  5. 浅谈RecyclerView(完美替代ListView,GridView)

    Android RecyclerView 是Android5.0推出来的,导入support-v7包即可使用. 个人体验来说,RecyclerView绝对是一款功能强大的控件. 首先总结下Recycl ...

  6. iOS流行的开源代码库

    本文介绍一些流行的iOS的开源代码库 1.AFNetworking 更新频率高的轻量级的第三方网络库,基于NSURL和NSOperation,支持iOS和OSX.https://github.com/ ...

  7. mysql的DATE_FORMAT用法

    DATE_FORMAT(date,format) date 参数是合法的日期.format 规定日期/时间的输出格式. mysql的DATE_FORMAT用法 %a 缩写星期名 %b 缩写月名 %c ...

  8. YARN与MRv1的对比

    YARN与MRv1的对比 转载请注明出处:http://www.cnblogs.com/BYRans/ Hadoop 1.0存在的问题 由于Hadoop 1.0的良好特性,Hadoop 1.0被应用到 ...

  9. linux

    托瓦兹跟BBS上面一堆工秳师一样, 他发现Minix虽然真癿很棒,但是谭宁邦教授就是丌愿意迚行功能癿加强,导致一堆工秳师在操作系统功能上面癿欲求丌满! 这个时候年轻癿托瓦兹就想:『既然如此,那我何丌自 ...

  10. linux 排序命令sort

    sort [选项] [文件] 选项: -b:忽略每行前面开始出的空格字符: -c:检查文件是否已经按照顺序排序: -d:排序时,处理英文字母.数字及空格字符外,忽略其他的字符: -f:排序时,将小写字 ...