<!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. 关于SharePoint 2013的工作流（二）

    摸索完了如何画流程实现功能接下来,就是如何配置和部署了.在添加工作流之前,肯定需要一个审批人的配置以及阀值等等的配置. 这个的实现基本上和以前的工作流一致.写法却不一样了,模板自带的都是用js实现的. ...

  2. React Native知识6-NavigatorIOS组件

    NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...

  3. iOS开发之第三方库的学习--hpple的使用

    前言:因为在开发中很可能会遇到html解析,如果后台提供的数据只有html数据,或者开发的app需要从web前端的html里获取数据,就需要html解析工具了. 关于HTML解析库,可以阅读:收集几个 ...

  4. 5、软件架构师要阅读的书籍 - IT软件人员书籍系列文章

    软件架构师在项目中的地位是不言而喻的,其对于项目的需求要相对比较了解,然后对项目代码的结构需要做到覆盖全面.本文就说说作为一个软件架构师需要阅读的一些书籍. 当然,这些书籍都来源于网络,是笔者收集整理 ...

  5. union和union all用法

    工作中,遇到同事之前写的oracle语句中有一个union all,并且很多地方都用到了.便在网上查了一下用法,以下是自己的理解. union  (联合)将两个或者多个结果集合并. 在使用时,两个结果 ...

  6. DbVisualizer连接hbase

    1.添加phoneix驱动 (1).点击Tools--->Driver Manager- (2).新建一个驱动,名称为phoenix(名称随意),选择phoenix的客户端驱动,驱动类如图所示 ...

  7. 002.php安装(lnmp)

    搭建lnmp环境时,需要先安装mysql,再安装php,而nginx安装顺序无所谓,nginx与php之间的联系需要手动配置 一.php下载和配置“安装环境“ [root@huh ~]# cd /us ...

  8. Memcached在windows下安装与使用

    建议:windows系统下仅为测试所有,生产环境下服务端应使用Linux系统. 本文最后更新于:2014-08-03 18:24 原文:http://www.yaosansi.com/post/mem ...

  9. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  10. (转)String、StringBuffer与StringBuilder之间区别

    原文地址: http://www.cnblogs.com/A_ming/archive/2010/04/13/1711395.html 关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺 ...