標籤：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 body, select { font-size:14px; } 6 form { margin:5px; } 7 p { color:red; margin:5px; } 8 b { color:blue; } 9 </style>10 <script src="http://code.jquery.com/jquery-latest.js"></script>11 </head>12 <body>13 <p><b>Results:</b> <span id="results"></span></p>14 15 <form>16 <select name="single">17 <option>Single</option>18 <option>Single2</option>19 20 </select>21 <select name="multiple" multiple="multiple">22 <option selected="selected">Multiple</option>23 <option>Multiple2</option>24 25 <option selected="selected">Multiple3</option>26 </select><br/>27 <input type="checkbox" name="check" value="check1" id="ch1"/>28 29 <label for="ch1">check1</label>30 <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>31 32 <label for="ch2">check2</label>33 <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>34 35 <label for="r1">radio1</label>36 <input type="radio" name="radio" value="radio2" id="r2"/>37 38 <label for="r2">radio2</label>39 </form>40 <script>41 function showValues() {42 var fields = $(":input").serializeArray();43 $("#results").empty();44 jQuery.each(fields, function(i, field){45 $("#results").append(field.value + " ");46 });47 }48 49 $(":checkbox, :radio").click(showValues);50 $("select").change(showValues);51 showValues();52 </script>53 54 </body>55 </html>
從表單擷取值，遍曆並將其顯示出來
:input:選擇所有 input, textarea, select 和 button 元素.
$(‘:checkbox‘) 等同於 $(‘[type=checkbox]‘)。如同其他偽類別選取器（那些以“:”開始）建議前面加上一個標記名稱或其他選取器;否則，預設使用通用選擇("*")。換句話說$(‘:checkbox‘) 等同於 $(‘*:checkbox‘)，所以應該使用$(‘input:checkbox‘)來提升效率。
$(‘:radio‘)等價於$(‘[type=radio]‘)。如同其他偽類別選取器（那些以“:”開始），建議使用此類別選取器時，跟在一個標籤名或者其它選取器後面，預設使用了全域萬用字元選取器 "*"。換句話說$(‘:radio‘) 等同於 $(‘*:radio‘)，所以應該使用$(‘input:radio‘)。
一個通用的迭代函數，它可以用來無縫迭代對象和數組。數組和類似數組的對象通過一個長度屬性（如一個函數的參數對象）來迭代數字索引，從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. - 1Mine is two. - 2Mine is three. - 3- 4- 5
【jQuery樣本】遍曆表單資料並顯示
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
