今天由于除夕以及各种乱七八糟的事，并没有学习完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对于代码省略了很多的内容，并且遍历操作十分的简单。需要注意的是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中。
明日任务：过年，看书。
原文地址：https://www.cnblogs.com/wushenjiang/p/12232666.html
时间： 2024-11-09 04:17:24