1、JQ的遍历操作方式一： 1 $(function(){ 2 //全选/全不选 3 $("#checkallbox").click(function(){ 4 var isChecked=this.checked; 5 ...
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='/images/loading.gif' data-original="../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='/images/loading.gif' data-original="../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>在谷歌浏览器内运行，效果如下：
原标题：jQuery学习(六)——使用JQ完成省市二级联动
关键词：jquery
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
