<!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. Google C++单元测试框架GoogleTest---AdvancedGuide（译文）上

    本文是gtest高级测试指南的译文,由于文章太长,分上下两部分. 一.简介 本文档将向您展示更多的断言,以及如何构造复杂的失败消息,传播致命的故障,重用和加速您的测试夹具,并在您的测试使用各种标志. ...

  2. 学习ES6生成器（Generator）

    背景 在JS的使用场景中,异步操作的处理是一个不可回避的问题,如果不做任何抽象.组织,只是“跟着感觉走”,那么面对“按顺序发起3个ajax请求”的需求,很容易就能写出如下代码(假设已引入jQuery) ...

  3. IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章

    十年前,笔者还是一个刚毕业的大学生,对IT业只是停留在学校的编程知识领域.刚出社会,有很多需要学习的地方.在这十年间,笔者经历了程序员,技术经理,项目经理,部门经理等职位.本文就是要说说如何从程序员到 ...

  4. Thinking in Java 笔记

    大二就买了这本书,如今再看这本书,看到了一些以前没看的细节,也有了不同的体会.本文使用第4版,整理每章的笔记心得.老外的书有个特点,他会花费大量的文字去阐述一个概念,这比堆代码强多了. 第 1 章 对 ...

  5. 0026 Java学习笔记-面向对象-抽象类、接口

    抽象方法与抽象类 抽象方法用abstract修饰,没有方法体部分,连花括号都不能有: 抽象方法和抽象类都用abstract修饰 包含抽象方法的类一定是抽象类:但不包含抽象方法的类也可以是抽象类 不能创 ...

  6. W3School-CSS 轮廓（Outline)实例

    CSS 轮廓(Outline)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内 ...

  7. Tomcat开机自启动

    需要Tomcat开机自动启动应用: 首先.配置Java环境变量: 然后.新建变量:CATALINA_HOME=你的TOMCAT的根目录 最后.在PATH变量最后加上: ;%CATALINA_HOME% ...

  8. 几款比较好用的C语言的集成开发环境及在windows下用命令行编译C代码

    最近要用到C,所以尝试了这几款windows平台下比较好的IDE. VS2015:比较复杂和庞大,据说从2013版本开始支持C99标准. C-free:轻巧,但是不支持C99. vc++6.0:很多学 ...

  9. 7 COMPELLING REASONS YOU NEED TO START THE BUSINESS YOU’VE ALWAYS WANTED

    原文链接:http://lesseesadvocate.com/7-compelling-reasons-need-start-business-youve-always-wanted/ Don’t ...

  10. php应用jquery做ajax操作

    以下是全部代码: <html> <head> <title>jQuery Ajax 实例演示</title> </head> <scr ...