标签：数组 省份 inpu float line append end position 双击
今天由于除夕以及各种乱七八糟的事，并没有学习完JQ的知识。下面是我学习到的案例：
首先，了解了使用JQ的遍历操作。在JQ中，有两种遍历方法，这里采用的是第二种方法。通过JQ重写了JS的省市二级联动。下面是代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成省市二级联动</title> 6 <style type="text/css"> 7 .top { 8 border: 1px solid red; 9 width: 32.9%; 10 height: 50px; 11 float: left; 12 } 13 14 #clear { 15 clear: both; 16 } 17 18 #menu { 19 border: 1px solid blue; 20 width: 99%; 21 height: 40px; 22 background-color: black; 23 } 24 25 #menu ul li { 26 display: inline; 27 color: white; 28 font-size: 19px; 29 } 30 31 #bottom { 32 text-align: center; 33 } 34 35 #contanier { 36 border: 1px solid red; 37 width: 99%; 38 height: 600px; 39 background: url(../img/regist_bg.jpg); 40 position: relative; 41 } 42 43 #content { 44 border: 5px solid gray; 45 width: 50%; 46 height: 60%; 47 position: absolute; 48 top: 100px; 49 left: 300px; 50 background-color: white; 51 padding-top: 50px; 52 } 53 </style> 54 <script src="../js/jquery-1.8.3.js"></script> 55 <script> 56 $(function(){ 57 // 2.创建二维数组用于存储省份和城市 58 var cities = new Array(3); 59 cities[0]= new Array("武汉市","黄冈市","襄阳市","荆州市"); 60 cities[1]= new Array("长沙市","郴州市","苏州市","岳阳市"); 61 cities[2]= new Array("石家庄市","邯郸市","廊坊市","保定市"); 62 cities[3]= new Array("郑州市","洛阳市","开封市","安阳市"); 63 64 $("#province").change(function(){ 65 // 10.清除第二个下拉列表的内容 66 $("#city").empty(); 67 // 1.获取用户选择的省份 68 var val = this.value; 69 // alert(val); 70 // 3.遍历二维数组中的省份 71 $.each(cities,function(i,n){ 72 //alert(i+":"+n); 73 //4.判断用户选择的省份与遍历的省份 74 if(val==i){ 75 //5.遍历该省份下的所有城市 76 $.each(cities[i],function(j,m){ 77 // alert(m); 78 //6.创建城市文本节点 79 var textNode = document.createTextNode(m); 80 // 7.创建option元素节点 81 var opEle = document.createElement("option"); 82 // 8.将文本节点添加到元素节点中去 83 $(opEle).append(textNode); 84 //9.将option元素节点追加到第二个下拉列表 85 $(opEle).appendTo($("#city")); 86 }) 87 } 88 }); 89 }); 90 }); 91 </script> 92 93 </head> 94 <body> 95 <div> 96 97 <!--1.logo部分的div--> 98 <div> 99 <!--切分为3个小的div--> 100 <div class="top"> 101 <img src="../img/logo2.png" height="47px" /> 102 </div> 103 <div class="top"> 104 <img src="../img/header.png" height="47px" /> 105 </div> 106 <div class="top" style="padding-top: 15px;height: 35px;"> 107 <a href="#">登录</a> 108 <a href="#">注册</a> 109 <a href="#">购物车</a> 110 </div> 111 </div> 112 <!--清除浮动--> 113 <div id="clear"> 114 115 </div> 116 <!--2.导航栏部分的div--> 117 <div id="menu"> 118 <ul> 119 <li>首页</li> 120 <li>电脑办公</li> 121 <li>手机数码</li> 122 <li>孕婴保健</li> 123 <li>鞋靴箱包</li> 124 </ul> 125 </div> 126 <!--3.中间注册表单部分div--> 127 <div id="contanier"> 128 <div id="content"> 129 <table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white"> 130 <form method="get" action="#" onsubmit="return checkForm()"> 131 <tr> 132 <td colspan="2" align="center"> 133 <font size="5">会员注册</font> 134 </td> 135 136 </tr> 137 <tr> 138 <td> 139 用户名 140 </td> 141 <td> 142 <input type="text" name="username" id="username" onfocus="showTips(‘username‘,‘必须以字母开头‘)" onblur="check(‘username‘,‘用户名不能为空‘)" /><span 143 id="usernamespan"></span> 144 </td> 145 </tr> 146 <tr> 147 <td>密码</td> 148 <td> 149 <input type="password" name="password" id="password" onfocus="showTips(‘password‘,‘密码长度不能低于6位！‘)" onblur="check(‘password‘,‘密码不能为空！‘)" /><span 150 id="passwordspan"></span> 151 </td> 152 </tr> 153 <tr> 154 <td>确认密码</td> 155 <td> 156 <input type="password" name="repassword" /> 157 </td> 158 </tr> 159 <tr> 160 <td>email</td> 161 <td> 162 <input type="text" name="email" id="email" /> 163 </td> 164 </tr> 165 <tr> 166 <td>姓名</td> 167 <td> 168 <input type="text" name="name" /> 169 </td> 170 </tr> 171 <!--1.编写HTML文件部分的内容--> 172 <tr> 173 <td>籍贯</td> 174 <td> 175 <!--2.确定事件，通过函数传参的方式拿到改变后的城市--> 176 <select id="province"> 177 <option>--请选择--</option> 178 <option value="0">湖北</option> 179 <option value="1">湖南</option> 180 <option value="2">河北</option> 181 <option value="3">河南</option> 182 </select> 183 <select id="city"> 184 185 </select> 186 </td> 187 </tr> 188 <tr> 189 <td>性别</td> 190 <td> 191 <input type="radio" name="sex" value="男" />男 192 <input type="radio" name="sex" value="女" />女 193 </td> 194 </tr> 195 <tr> 196 <td>出生日期</td> 197 <td> 198 <input type="text" name="birthday" /> 199 </td> 200 </tr> 201 <tr> 202 <td>验证码</td> 203 <td> 204 <input type="text" name="yanzhengma" /> 205 <img src="../img/yanzhengma.png" /> 206 </td> 207 </tr> 208 <tr> 209 <td colspan="2"> 210 <input type="submit" value="注册" /> 211 </td> 212 </tr> 213 </form> 214 </table> 215 </div> 216 </div> 217 <!--4.广告图片的div--> 218 <div id=""> 219 <img src="../img/footer.jpg" width="99%" /> 220 </div> 221 <!--5.超链接与版权信息的div--> 222 <div id="bottom"> 223 <a href="#">关于我们 </a> 224 <a href="#">联系我们 </a> 225 <a href="#">招贤纳士 </a> 226 <a href="#">法律声明</a> 227 <a href="#">友情链接</a> 228 <a href="#">支付方式</a> 229 <a href="#">配送方式 </a> 230 <a href="#">服务声明 </a> 231 <a href="#">广告声明 </a> 232 <p>Copyright © 2005-2016 传智商城 版权所有 </p> 233 </div> 234 </div> 235 </body> 236 </html>
可以看到，JQ对于代码省略了很多的内容，并且遍历操作十分的简单。需要注意的是JQ对象和DOM对象不是一个概念，DOM对象转换成JQ对象需要加$(),
之后，实现了下拉列表左右选择，对于JQ选择器的知识点得到进一步的巩固。下面是JS部分代码：
1 <script src="../js/jquery-1.8.3.js"></script> 2 <script> 3 $(function(){ 4 // 1.选中单击去右边 5 $("#selectOneToRight").click(function(){ 6 $("#left option:selected").appendTo($("#right")); 7 }); 8 9 // 2.单击击全部去右边 10 $("#selectAllToRight").click(function(){ 11 $("#left option").appendTo($("#right")); 12 }); 13 // 3.选中双击去右边 14 $("#left").dblclick(function(){ 15 $("#left option:selected").appendTo($("#right")); 16 }); 17 }); 18 </script>
可以看到，这个案例中JQ的实现方式非常简单。在这里我们使用了JQ中的添加方法，A append B和A appendTo B 前者是把B添加到A里 后者是把A添加到B中。
明日任务：过年，看书。
标签：数组 省份 inpu float line append end position 双击
原文地址：https://www.cnblogs.com/wushenjiang/p/12232666.html
