<!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. 一次部署HTTPS的相关事件引发的思考

    前言: 上周五快要下班的时候,突然收到通知客户希望了解一下部署HTTPS的流程,这种事情谁听了都会有几分诧异的.因为这件事虽然和工作有一定的相关度,但平时不会走这个方向,实际上也较少接触.此外,客户手 ...

  2. iOS之开发支付功能概述

    前言:本随笔将对IOS开发的支付功能进行一个概述. 内容大纲: 一.常见的支付方案简介 二.第三方支付SDK 三.苹果官方支付方案 四.Web支付方案 正文: 一.常见的支付方案简介 在微信支付中 微 ...

  3. 用UILocalNotification实现一个闹钟（Swift）

    之前项目需求要实现一个闹钟,github上找了半天发现都是很旧的代码了,所以就准备自己写一个,刚好最近在学习Swift,就用Swift写了一个demo放在这里:https://github.com/P ...

  4. SJGestureUnlock快速集成手势解锁

    前言:如果页面显示不完整或图片看不了还请移步:简书 SJGestureUnlock.h 常用自定义属性 @interface SJGestureUnlock : UIView @property (n ...

  5. 【代码笔记】iOS-获得现在的周的日期

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  6. python爬虫—爬取百度百科数据

    爬虫框架:开发平台 centos6.7 根据慕课网爬虫教程编写代码 片区百度百科url,标题,内容 分为4个模块:html_downloader.py 下载器 html_outputer.py 爬取数 ...

  7. IT人经济思维之创业 - 创业与投资系列文章

    前面笔者曾经写过文(IT从业者的职业规划),介绍了IT从业者的职业规划,对职业路做了规划.然后,又写了文(IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章),从技术到管理的一个笔者自己 ...

  8. numpy中matrix的特殊属性

    一.matrix特殊属性解释 numpy中matrix有下列的特殊属性,使得矩阵计算更加容易 摘自 NumPy Reference Release 1.8.1 1.1 The N-dimensiona ...

  9. 机器学习实战笔记(Python实现)-01-K近邻算法(KNN)

    --------------------------------------------------------------------------------------- 本系列文章为<机器 ...

  10. android 获取应用的当前版本号&获取当前android系统的版本号

    (转自:http://www.cnblogs.com/qsl568/archive/2012/03/14/2395636.html) 获取当前应用的版本号: private String getVer ...