1、JQ的遍歷操作
方式一：
1 $(function(){ 2 //全選/全不選 3 $("#checkallbox").click(function(){ 4 var isChecked=this.checked; 5 //使用對象訪問的方式進行遍歷，語法$().each(function(){}) 6 $("input[name='hobby']").each(function(){ 7 this.checked=isChecked; 8 }); 9 }); 10 });
$后面的括號里是被遍歷的對象，是一個集合。
方式二：
1 $.each( [0,1,2] , function(i , n ){ 2 alert( "Item #" + i + ": " + n ); 3 });
each后面的中括號是被遍歷的對象
function后面的i是角標，n是被遍歷后的內容。
2、文檔處理操作
追加內容
apend: A.append(B) 將B追加到A的內容的末尾處
appendTo: A.appendTo(B) 將A加到B內容的末尾處。
3、步驟分析：
第一步：確定事件(change事件),在綁定的函數里面獲取用戶選擇的省份
第二步：創建二維數組來存儲省份和城市
第三步：遍歷二維數組中的省份(與用戶選擇的省份進行比較)【使用JQ的遍歷操作】
第四步：接着遍歷數組中的城市
第五步：創建一個城市文本節點
第六步：創建option元素節點
第七步：將文本節點添加到元素節點中【使用JQ的文檔操作方法】
第八步：獲取第二個下拉列表並將option元素節點添加進去
第九步：清除第二個下拉列表的option內容
4、具體代碼實現：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注冊頁面重新布局</title> 6 <style type="text/css"> 7 #contanier{ 8 border: 1px solid red; 9 width: 99%; 10 height: 600px; 11 position: relative; 12 } 13 #content{ 14 border: 5px solid gray; 15 width: 50%; 16 height: 60%; 17 position: absolute; 18 top: 100px; 19 left: 300px; 20 background-color: white; 21 padding-top: 50px; 22 } 23 </style> 24 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> 25 <script> 26 $(function(){ 27 //2.創建一個二維數組用於存儲省份和城市 28 var cities=new Array(3); 29 cities[0]=new Array("武漢市","宜昌市","黃岡市","襄陽市"); 30 cities[1]=new Array("長沙市","岳陽市","株洲市","郴州市"); 31 cities[2]=new Array("石家庄市","邯鄲市","廊坊市","保定市"); 32 cities[3]=new Array("鄭州市","洛陽市","開封市","安陽市"); 33 34 $("#province").change(function(){ 35 //10.清除第二個下拉列表 36 $("#city").empty(); 37 38 //1.獲取用戶選擇的省份 39 var val=this.value; 40 //alert(val); 41 //3.遍歷二維數組中的省份 42 $.each(cities,function(i,n){ 43 //alert(i+":"+n); 44 //判斷用戶選擇的省份和遍歷的省份 45 if(val==i){ 46 //5.遍歷該省份下的所有城市 47 $.each(cities[i],function(j,m){ 48 //alert(m); 49 //6.創建城市文本節點 50 var textNode=document.createTextNode(m); 51 //7.創建option元素節點 52 var opEle=document.createElement("option"); 53 //8.將城市文本節點添加到option元素節點中去 54 $(opEle).append(textNode); //opEle前加$是為了將DOM對象轉換成JQuery對象 55 //9.將option元素節點追加到第二個下拉列表中 56 $("#city").append($(opEle)); 57 }); 58 } 59 }); 60 }); 61 }); 62 </script> 63 </head> 64 <body> 65 <!--中間注冊表單部分div--> 66 <div id="contanier"> 67 <div id="content"> 68 <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white"> 69 <form method="get" action="#" onsubmit="return checkForm()"> 70 <tr> 71 <td colspan="2" align="center"> 72 <font size="5">會員注冊</font> 73 </td> 74 75 </tr> 76 <tr> 77 <td> 78 用戶名 79 </td> 80 <td> 81 <input type="text" name="username" id="username"/> 82 </td> 83 </tr> 84 <tr> 85 <td>密碼</td> 86 <td> 87 <input type="password" name="password" id="password"/> 88 </td> 89 </tr> 90 <tr> 91 <td>確認密碼</td> 92 <td> 93 <input type="password" name="repassword" /> 94 </td> 95 </tr> 96 <tr> 97 <td>email</td> 98 <td> 99 <input type="text" name="email" id="email" /> 100 </td> 101 </tr> 102 <tr> 103 <td>姓名</td> 104 <td> 105 <input type="text" name="name" /> 106 </td> 107 </tr> 108 <!--1.編寫HTML文件部分的內容--> 109 <tr> 110 <td>籍貫</td> 111 <td> 112 <!--2.確定事件，通過函數傳參的方式拿到改變后的城市--> 113 <select id="province"> 114 <option>--請選擇--</option> 115 <option value="0">湖北</option> 116 <option value="1">湖南</option> 117 <option value="2">河北</option> 118 <option value="3">河南</option> 119 </select> 120 <select id="city"> 121 122 </select> 123 </td> 124 </tr> 125 <tr> 126 <td>性別</td> 127 <td> 128 <input type="radio" name="sex" value="男"/>男 129 <input type="radio" name="sex" value="女"/>女 130 </td> 131 </tr> 132 <tr> 133 <td>出生日期</td> 134 <td> 135 <input type="text" name="birthday" /> 136 </td> 137 </tr> 138 <tr> 139 <td>驗證碼</td> 140 <td> 141 <input type="text" name="yanzhengma" /> 142 <img src="../img/yanzhengma.png" /> 143 </td> 144 </tr> 145 <tr> 146 <td colspan="2" align="center"> 147 <input type="submit" value="注冊" /> 148 </td> 149 </tr> 150 </form> 151 </table> 152 </div> 153 </div> 154 </div> 155 </body> 156 </html>
在谷歌瀏覽器內運行，效果如下：
