<!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. asp.net mvc 中 一种简单的 URL 重写

    asp.net mvc 中 一种简单的 URL 重写 Intro 在项目中想增加一个公告的功能,但是又不想直接用默认带的那种路由,感觉好low逼,想弄成那种伪静态化的路由 (别问我为什么不直接静态化, ...

  2. JAVA适配器模式（从现实生活角度理解代码原理）

    说道JAVA中的适配器模式,不得不引用该设计模式的固定表述"适配器模式(Adapter ):将一个类的接口转换成客户希望的另外一个接口,适配器模式使得原本由于接口不兼容而不能一起工作的那些类 ...

  3. Linux2.6内核--进程调度理论

    从1991年Linux的第1版到后来的2.4内核系列,Linux的调度程序都相当简陋,设计近乎原始,见0.11版内核进程调度.当然它很容易理解,但是它在众多可运行进程或者多处理器的环境下都难以胜任. ...

  4. IOS开发基础知识--碎片46

    1:带中文的URL处理 // http://static.tripbe.com/videofiles/视频/我的自拍视频.mp4 NSString *path = (__bridge_transfer ...

  5. ButterKnife 8.2.1 大圣归来

    零.前言 ButterKnife是一个视图注入的框架,主要帮我们解决无脑的findViewById.设置监听事件等等体力劳动. 一.引入 好消息是ButterKnife终于使用apt生成代码了,首先在 ...

  6. ViewController生命周期

    alloc -> initWithNibName -> loadView -> viewDidLoad -> viewWillAppear -> viewDidAppea ...

  7. Android开发--异步加载

    因为移动端软件开发思维模式或者说是开发的架构其实是不分平台和编程语言的,就拿安卓和IOS来说,他们都是移动前端app开发展示数据和用户交互数据的数据终端,移动架构的几个大模块:UI界面展示.本地数据可 ...

  8. Windows 10 IoT Serials 3 - Windows 10 IoT Core Ardunio Wiring Mode

    Maker社区和智能硬件的朋友一定知道Arduino,很多3D打印机都是用它做的.为了迎合这一大块市场,微软在基于Intel Galileo的Windows 8.1 IoT中就是使用这种基于Ardui ...

  9. [Java入门笔记] 面向对象三大特征之：继承

    理解什么是继承 首先我们知道,面对对象有三大特征: 封装:解决了数据的安全性问题 继承:解决了代码的重用问题 多态:解决了程序的扩展问题 上一篇博客中,我们了解了一下封装,现在我了再来看看什么是继承. ...

  10. android 让一个Activity停留几秒后再跳转

    有时候我们需要在某个 Activity 停留几秒种,然后再跳到下一个 Activity.那么这个怎么实现呢? 一个方法是可以使用 Thread 的 sleep 函数,这个我们在 用Handler实现线 ...