04 JQuery的使用
01 对网站首页优化--定时弹出广告
1 <!-- 2 作者：offline 3 时间：2018-09-09 4 描述：在使用JQ前要导入jquery-1.11.0.min.js包 5 注意区分js和jq的对象 6 --> 7 8 9 <!DOCTYPE html> 10 <html> 11 <head> 12 <meta charset="UTF-8"> 13 <title>网站首页</title> 14 <style> 15 #bodyDiv{ 16 border: 1px solid blue; 17 width: 90%px; 18 } 19 .logoDiv{ 20 border: 1px solid blue; 21 width: 33%; 22 float: left; 23 height: 50px; 24 } 25 .clear{ 26 clear: both; 27 } 28 #menuDiv{ 29 width: 100%; 30 height: 50px; 31 border: 1px solid blue; 32 background-color: black; 33 } 34 35 #imgDiv{ 36 width: 100%; 37 border: 1px solid blue; 38 } 39 40 .productClass{ 41 width: 100%; 42 border: 1px solid blue; 43 } 44 .contentClass{ 45 width: 100%; 46 border: 1px solid blue; 47 } 48 .contentClass font{ 49 font-size: 30px; 50 color: black; 51 } 52 53 #menuDiv a{ 54 font-size: 20px; 55 color: white; 56 } 57 <!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题--> 58 </style> 59 <script src="js/jquery-1.11.0.min.js"></script> <!--引入jQuery--> 60 <script> 61 var time=3000; 62 $(function(){ 63 //设定一个3秒钟显示广告的方法 64 time=setInterval("showAd()",3000); 65 }); 66 67 function showAd(){ 68 //获得元素,并显示出来 69 $("#adDiv").show(); 70 //$("#adDiv").show(2000);缓慢进入 71 //$("#adDiv").slideDown(2000);向下滑动进入 72 clearInterval(time); 73 //在设置定时隐藏 74 time=setInterval("hide()",3000) 75 } 76 77 function hide(){ 78 $("#adDiv").hide(); 79 //$("#adDiv").hide(2000);缓慢出 80 //$("#adDiv").slideUp(2000);向上滑动消失 81 clearInterval(time); 82 } 83 </script> 84 </head> 85 <body> 86 <!--整体的DIV--> 87 <div id="bodyDiv"> 88 <div id="adDiv" style="width: 100%;display: none;"> 89 <img src="img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" /> 90 </div> 91 <!--首行分为三个小块--> 92 <div class="logoDiv"> 93 <img src="../01静态界面/img/logo2.png" height="48"/> 94 </div> 95 <div class="logoDiv"> 96 <img src="../01静态界面/img/header.png" height="48" /> 97 </div> 98 <div class="logoDiv"> 99 <a href="">登录</a> 100 <a href="">注册</a> 101 <a href="">购物车</a> 102 </div> 103 <div class="clear"></div> 104 </div> 105 <!--第二行的div--> 106 <div id="menuDiv"> 107 <a href="">首页</a> 108 <a href="">电脑办公</a> 109 <a href="">手机数码</a> 110 <a href="">烟酒糖茶</a> 111 </div> 112 <!--第三行，滚动的图片--> 113 <div id="imgDiv"> 114 <img src="../01静态界面/img/1.jpg" width="100%" /> 115 </div> 116 <!--第四行，热门商品的Div--> 117 <div class="productClass"> 118 <!--文字部分的Div--> 119 <div class="contentClass"> 120 <font>热门商品</font> 121 <img src="../01静态界面/img/title2.jpg" /> 122 </div> 123 <!--商品展示图片部分Div--> 124 <div style="width: 100%;border: 1px solid blue;"> 125 <div style="width: 15%;height: 460px;border: 1px solid blue;float: left;"> 126 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/> 127 </div> 128 <div style="width: 84%;height: 460px;border: 1px solid blue;float: left;"> 129 <div> 130 <div style="border: 1px solid blue;width: 48%;float: left;height: 228px;"> 131 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" /> 132 </div> 133 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 134 <img src="../01静态界面/img/small03.jpg" /> 135 </div> 136 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 137 <img src="../01静态界面/img/small03.jpg" /> 138 </div> 139 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 140 <img src="../01静态界面/img/small03.jpg" /> 141 </div> 142 </div> 143 <div> 144 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 145 <img src="../01静态界面/img/small03.jpg" /> 146 </div> 147 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 148 <img src="../01静态界面/img/small03.jpg" /> 149 </div> 150 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 151 <img src="../01静态界面/img/small03.jpg" /> 152 </div> 153 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 154 <img src="../01静态界面/img/small03.jpg" /> 155 </div> 156 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 157 <img src="../01静态界面/img/small03.jpg" /> 158 </div> 159 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 160 <img src="../01静态界面/img/small03.jpg" /> 161 </div> 162 </div> 163 </div> 164 </div> 165 </div> 166 167 <!--广告的Div--> 168 <div style="width: 100%;border: 1px solid blue;"> 169 <img src="../01静态界面/img/ad.jpg" width="100%" height="80" /> 170 </div> 171 <!--最新商品的Div--> 172 <div class="productClass"> 173 <!--文字部分的Div--> 174 <div class="contentClass"> 175 <font>最新商品</font> 176 <img src="../01静态界面/img/title2.jpg" /> 177 </div> 178 <!--商品展示图片部分Div--> 179 <div style="width: 100%;border: 1px solid blue;"> 180 <div style="width: 15%;height: 460px;border: 1px solid blue;float: left;"> 181 <img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/> 182 </div> 183 <div style="width: 84%;height: 460px;border: 1px solid blue;float: left;"> 184 <div> 185 <div style="border: 1px solid blue;width: 48%;float: left;height: 228px;"> 186 <img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" /> 187 </div> 188 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 189 <img src="../01静态界面/img/small03.jpg" /> 190 </div> 191 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 192 <img src="../01静态界面/img/small03.jpg" /> 193 </div> 194 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 195 <img src="../01静态界面/img/small03.jpg" /> 196 </div> 197 </div> 198 <div> 199 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 200 <img src="../01静态界面/img/small03.jpg" /> 201 </div> 202 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 203 <img src="../01静态界面/img/small03.jpg" /> 204 </div> 205 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 206 <img src="../01静态界面/img/small03.jpg" /> 207 </div> 208 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 209 <img src="../01静态界面/img/small03.jpg" /> 210 </div> 211 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 212 <img src="../01静态界面/img/small03.jpg" /> 213 </div> 214 <div style="border: 1px solid blue;width: 16%;float: left;height: 228px;"> 215 <img src="../01静态界面/img/small03.jpg" /> 216 </div> 217 </div> 218 </div> 219 </div> 220 </div> 221 222 <!--页脚的Div--> 223 <div style="width: 100%;border: 1px solid blue;"> 224 <img src="../01静态界面/img/footer.jpg" width="100%" /> 225 </div> 226 227 <!--友情链接的Div--> 228 <div> 229 <center> 230 联系我们 招贤纳士 法律声明<br /> 231 Copyright © 2005-2016 传智商城 版权所有 232 </center> 233 </div> 234 </body> 235 </html>
02 对后台管理界面
数据界面显示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--链接格式设置--> 7 <link rel="stylesheet" href="css/style.css" /> 8 <script src="js/jquery-1.11.0.min.js"></script> 9 <script> 10 $(function(){ 11 //$("tr:odd").addClass("odd");普通的隔行换色 12 //$("tr:even").addClass("even"); 13 $("thead tr:odd").addClass("odd"); 14 $("tbody tr:even").addClass("even"); 15 }); 16 </script> 17 </head> 18 <body> 19 <table border="1" width="80%" align="center"> 20 <thead> 21 <tr> 22 <td>分类的ID</td> 23 <td>分类的名称</td> 24 <td>分类的描述</td> 25 <td>操作</td> 26 </tr> 27 </thead> 28 <tbody> 29 <tr> 30 <td>1</td> 31 <td>手机数码</td> 32 <td>手机数码</td> 33 <td><a href="">修改</a>|<a href="">删除</a></td> 34 </tr> 35 <tr> 36 <td>2</td> 37 <td>电脑办公</td> 38 <td>电脑办公</td> 39 <td><a href="">修改</a>|<a href="">删除</a></td> 40 </tr> 41 <tr> 42 <td>3</td> 43 <td>烟酒糖茶</td> 44 <td>烟酒糖茶</td> 45 <td><a href="">修改</a>|<a href="">删除</a></td> 46 </tr> 47 <tr> 48 <td>4</td> 49 <td>鞋靴箱包</td> 50 <td>鞋靴箱包</td> 51 <td><a href="">修改</a>|<a href="">删除</a></td> 52 </tr> 53 </tbody> 54 </table> 55 </body> 56 </html>
数据界面显示--复选
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--链接格式设置--> 7 <link rel="stylesheet" href="css/style.css" /> 8 <script src="js/jquery-1.11.0.min.js"></script> 9 <script> 10 //表格隔行换色 11 $(function(){ 12 //$("tr:odd").addClass("odd");普通的隔行换色 13 //$("tr:even").addClass("even"); 14 $("thead tr:odd").addClass("odd"); 15 $("tbody tr:even").addClass("even"); 16 }); 17 /*这个重在理解，下面有一个简化版本 18 //复选框设置 19 $(function(){ 20 var $selectAll=$("#selectAll"); 21 $selectAll.click(function(){ 22 //alert($selectAll.prop("checked")); 测试语句 23 if($selectAll.prop("checked")==true){ 24 //说明复选框已经被选中 25 $(":checkbox[name='ids']").prop("checked",true); 26 }else{ 27 $(":checkbox[name='ids']").prop("checked",false); 28 } 29 }); 30 }); 31 */ 32 33 //复选框设置简化版本，因为下面的属性和首行属性完全相同，可以从这里入手简化 34 $(function(){ 35 $("#selectAll").click(function(){ 36 $(":checkbox[name='ids']").prop("checked",this.checked); 37 }); 38 }); 39 </script> 40 </head> 41 <body> 42 <table border="1" width="80%" align="center"> 43 <thead> 44 <tr> 45 <td><input type="checkbox" id="selectAll" /> </td> 46 <td>分类的ID</td> 47 <td>分类的名称</td> 48 <td>分类的描述</td> 49 <td>操作</td> 50 </tr> 51 </thead> 52 <tbody> 53 <tr> 54 <td><input type="checkbox" name="ids" /> </td> 55 <td>1</td> 56 <td>手机数码</td> 57 <td>手机数码</td> 58 <td><a href="">修改</a>|<a href="">删除</a></td> 59 </tr> 60 <tr> 61 <td><input type="checkbox" name="ids" /> </td> 62 <td>2</td> 63 <td>电脑办公</td> 64 <td>电脑办公</td> 65 <td><a href="">修改</a>|<a href="">删除</a></td> 66 </tr> 67 <tr> 68 <td><input type="checkbox" name="ids" /> </td> 69 <td>3</td> 70 <td>烟酒糖茶</td> 71 <td>烟酒糖茶</td> 72 <td><a href="">修改</a>|<a href="">删除</a></td> 73 </tr> 74 <tr> 75 <td><input type="checkbox" name="ids" /> </td> 76 <td>4</td> 77 <td>鞋靴箱包</td> 78 <td>鞋靴箱包</td> 79 <td><a href="">修改</a>|<a href="">删除</a></td> 80 </tr> 81 </tbody> 82 </table> 83 </body> 84 </html>
数据界面显示--鼠标变色并修改数据
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--链接格式设置--> 7 <link rel="stylesheet" href="css/style.css" /> 8 <!--版本太高和手册上的函数有些可能对不上 9 <script src="js/jquery-1.11.0.min.js"></script> 10 --> 11 <script src="js/jquery-1.8.3.min.js"></script> 12 <script> 13 //表格隔行换色 14 $(function(){ 15 //$("tr:odd").addClass("odd");普通的隔行换色 16 //$("tr:even").addClass("even"); 17 $("thead tr:odd").addClass("odd"); 18 $("tbody tr:even").addClass("even"); 19 }); 20 /*这个重在理解，下面有一个简化版本 21 //复选框设置 22 $(function(){ 23 var $selectAll=$("#selectAll"); 24 $selectAll.click(function(){ 25 //alert($selectAll.prop("checked")); 测试语句 26 if($selectAll.prop("checked")==true){ 27 //说明复选框已经被选中 28 $(":checkbox[name='ids']").prop("checked",true); 29 }else{ 30 $(":checkbox[name='ids']").prop("checked",false); 31 } 32 }); 33 }); 34 */ 35 36 //复选框设置简化版本，因为下面的属性和首行属性完全相同，可以从这里入手简化 37 $(function(){ 38 $("#selectAll").click(function(){ 39 $(":checkbox[name='ids']").prop("checked",this.checked); 40 }); 41 }); 42 43 //时间切换函数 44 $(function(){ 45 /*//点击一下就添加样式，再点击一下就取消样式 46 $("tbody tr").toggle(function(){ 47 $(this).addClass("selected"); 48 },function(){ 49 $(this).removeClass("selected") 50 });*/ 51 //鼠标一放就改变样式 52 $("tbody tr").hover(function(){ 53 $(this).addClass("selected"); 54 },function(){ 55 $(this).removeClass("selected") 56 }); 57 }); 58 </script> 59 </head> 60 <body> 61 <table border="1" width="80%" align="center"> 62 <thead> 63 <tr> 64 <td><input type="checkbox" id="selectAll" /> </td> 65 <td>分类的ID</td> 66 <td>分类的名称</td> 67 <td>分类的描述</td> 68 <td>操作</td> 69 </tr> 70 </thead> 71 <tbody> 72 <tr> 73 <td><input type="checkbox" name="ids" /> </td> 74 <td>1</td> 75 <td>手机数码</td> 76 <td>手机数码</td> 77 <!-- 在此处进行链接--> 78 <td><a href="edit.html">修改</a>|<a href="">删除</a></td> 79 </tr> 80 <tr> 81 <td><input type="checkbox" name="ids" /> </td> 82 <td>2</td> 83 <td>电脑办公</td> 84 <td>电脑办公</td> 85 <td><a href="">修改</a>|<a href="">删除</a></td> 86 </tr> 87 <tr> 88 <td><input type="checkbox" name="ids" /> </td> 89 <td>3</td> 90 <td>烟酒糖茶</td> 91 <td>烟酒糖茶</td> 92 <td><a href="">修改</a>|<a href="">删除</a></td> 93 </tr> 94 <tr> 95 <td><input type="checkbox" name="ids" /> </td> 96 <td>4</td> 97 <td>鞋靴箱包</td> 98 <td>鞋靴箱包</td> 99 <td><a href="">修改</a>|<a href="">删除</a></td> 100 </tr> 101 </tbody> 102 </table> 103 </body> 104 </html>
数据修改部分
1 <!DOCTYPE html> 2 <!-- 3 作者：offline 4 时间：2018-10-31 5 描述：配合data03数据修改使用，是数据修改界面 6 --> 7 <html> 8 <head> 9 <meta charset="UTF-8"> 10 <title></title> 11 <!-- 引入JQuery--> 12 <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script> 13 <script> 14 /* 15 //传统方法JS方法 16 window.onload=function(){ 17 //添加到右侧 18 document.getElementById("addRight").onclick=function(){ 19 //获得左侧的下拉列表 20 var selectLeft =document.getElementById("selectLeft"); 21 //遍历左侧列表中的所有option元素 22 for(var i=selectLeft.options.length-1;i>=0;i--){ 23 //判断元素是否被选中 24 if(selectLeft.options[i].selected==true){ 25 document.getElementById("selectRight").appendChild(selectLeft.options[i]); 26 } 27 } 28 } 29 //全部添加到右侧 30 document.getElementById("addAll").onclick=function(){ 31 //获得左侧的下拉列表 32 var selectLeft =document.getElementById("selectLeft"); 33 //遍历左侧列表中的所有option元素 34 for(var i=selectLeft.options.length-1;i>=0;i--){ 35 document.getElementById("selectRight").appendChild(selectLeft.options[i]); 36 } 37 } 38 } 39 */ 40 //使用JQuery方式 41 //JQuery 入口函数 42 $(function(){ 43 // 添加左侧选中的元素到右侧 44 $("#addRight").click(function(){ 45 //获得左侧被选中的option元素 46 $("#selectLeft option:selected").appendTo("#selectRight"); 47 }); 48 49 // 添加左侧所有元素到右侧 50 $("#addAll").click(function(){ 51 //获得左侧被选中的option元素 52 $("#selectLeft option").appendTo("#selectRight"); 53 }); 54 55 //移除右侧被选中的元素到左侧 56 $("#removeLeft").click(function(){ 57 $("#selectRight option:selected").appendTo("#selectLeft"); 58 }); 59 60 //移除右侧所有元素到左侧 61 $("#removeAll").click(function(){ 62 $("#selectRight option").appendTo("#selectLeft"); 63 }); 64 65 //双击左侧的某个元素移动到右侧 66 $("#selectLeft").dblclick(function(){ 67 $("option:selected",this).appendTo("#selectRight"); 68 }); 69 //双击右侧的某个元素移动到左侧 70 $("#selectRight").dblclick(function(){ 71 $("option:selected",this).appendTo("#selectLeft"); 72 }); 73 }); 74 75 </script> 76 </head> 77 <body> 78 <form> 79 <table border="1" width="450" align="center"> 80 <tr> 81 <td>分类名称</td> 82 <td><input type="text" name="cname" value="手机数码" /> </td> 83 </tr> 84 <tr> 85 <td>分类描述</td> 86 <td><textarea name="cdesc" cols="20" rows="4">手机数码</textarea></td> 87 </tr> 88 <tr> 89 <td>分类商品</td> 90 <td> 91 <span style="float: left;"> 92 已有商品<br/> 93 <select id="selectLeft" multiple="multiple"> <!--显示下拉列表中所有内容--> 94 <option>苹果</option> 95 <option>小米</option> 96 <option>华为</option> 97 </select> 98 <p id="addRight">>></p> 99 <p id="addAll">>>></p> 100 </span> 101 102 <span style="float: right;"> 103 未有商品<br/> 104 <select id="selectRight" multiple="multiple"> 105 <option>三星</option> 106 <option>HTC</option> 107 <option>锤子</option> 108 </select> 109 <p id="removeLeft"><<</p> 110 <p id="removeAll"><<<</p> 111 </span> 112 </td> 113 </tr> 114 <tr> 115 <td><input type="submit" value="确定"> </td> 116 </tr> 117 </table> 118 </form> 119 </body> 120 </html>
03 表单校验
1 <!-- 2 作者：offline 3 时间：2018-09-05 4 描述：通常在CSS中使用类选择器，在JS中使用id选择器,两者区分开。 5 在页面跳转时要先把要跳转的页面用浏览器打开，不然页面无法跳转. 6 在测试时还发现火狐有时候无法完成跳转功能，但用360浏览器就可以完成跳转。 7 【步骤一】：引入注册页面 8 【步骤二】：引入JQ的js. 9 【步骤三】：为必填项添加一个 * 10 【步骤四】：获得表单中的所有的输入项,为所有的输入项添加一个blur事件. 11 【步骤五】：判断当前输入项是什么(用户名，密码，邮箱) 12 【步骤六】：为不同的输入项做不同的校验. 13 【步骤七】：为表单元素添加一个submit事件. 14 【步骤八】：执行之前的blur函数.查找错误信息的长度,如果长度>0 有错误 不能提交. 15 --> 16 <!DOCTYPE html> 17 <html> 18 <head> 19 <meta charset="UTF-8"> 20 <title>注册界面</title> 21 <!--引入样式--> 22 <link rel="stylesheet" href="css/main.css" /> 23 <link rel="stylesheet" href="css/style2.css" /> 24 <style> 25 div{ 26 border: 1px solid blue; 27 } 28 .bodyDiv{ 29 width:90%; 30 } 31 32 .bodyDiv > div{ 33 width: 100%; 34 } 35 36 .logoDiv{ 37 width: 33%; 38 height: 50px; 39 float: left; 40 } 41 42 .clear{ 43 clear: both; 44 } 45 46 ul li{ 47 display: inline; 48 } 49 </style> 50 <script src="js/jquery-1.11.0.min.js"></script> 51 <script> 52 //定义数组,采用了另一种方法 53 var citys=[ 54 ["杭州市","绍兴市"], 55 ["南京市","苏州市"], 56 ["武汉市","襄阳市"], 57 ["唐山市","保定市"] 58 ]; 59 60 $(function(){ 61 //获得省份的下拉列表 62 $("#province").change(function(){ 63 //alert(this.value);用来检验代码，这个this是Js对象 64 //alert($(this).val());采用JQ对象使用 65 var $city=$("#city");//根据id获得city对象 66 $city.get(0).options.length=1;//每次都要把option的长度更新 67 68 var val=this.value;//获得省份的值 69 //获得的n是每个省份中包含的市的个数，即第二层数组的长度 70 $.each(citys, function(i,n) { 71 if(i==val){ 72 //Jq对象,得到第二层数组的对象 73 $(n).each(function(j,m){ 74 //alert(j+" "+m); 75 $city.append("<option>"+m+"</option>"); 76 }); 77 } 78 }); 79 }); 80 }); 81 </script> 82 <!-- 83 后面的就是在原有的基础上修改的代码 84 --> 85 <script> 86 //表单校验的操作 87 $(function(){ 88 //步骤一：为必填项添加*号 89 $("form input.required").each(function(){ 90 //获得他的父元素 91 $(this).parent().append("<b class='high'>* </b>") 92 }); 93 //步骤二：获得表单中的所有的输入项,为所有的输入项添加一个blur事件 94 $("form input").blur(function(){ 95 //获得父元素 96 var $parent=$(this).parent(); 97 //将原有的信息清除掉--找到所有formtips 并清除掉 98 $parent.find(".formtips").remove(); 99 //确定点击的输入项是谁 100 if($(this).is("#username")){ 101 //判断用户名是否为空 102 if(this.value==""){ 103 //向文本框后添加一个错误提示 104 $parent.append("<span class='formtips onError'>用户名不能为空</span>") 105 }else{ 106 //向文本框中添加一个正确的提示 107 $parent.append("<span class='formtips onSuccess'>用户名输入正确</span>") 108 } 109 } 110 111 if($(this).is("#password")){ 112 //判断用户名是否为空 113 if(this.value==""){ 114 //向文本框后添加一个错误提示 115 $parent.append("<span class='formtips onError'>密码不能为空</span>") 116 }else{ 117 //向文本框中添加一个正确的提示 118 $parent.append("<span class='formtips onSuccess'>密码输入正确</span>") 119 } 120 } 121 //下面的用来实现动态改变 122 }).keyup(function(){ 123 $(this).triggerHandler("blur"); 124 }).focus(function(){ 125 $(this).triggerHandler("blur"); 126 }); 127 128 //为表单添加一个submit事件，当有错误时不让提交 129 $("form").submit(function(){ 130 //执行表单中的blur事件--因为一开始没有错误信息也会提交 131 $("form:input").trigger("blur"); 132 //获得错误信息长度 133 var errorLength=$(".onError").length; 134 if(errorLength>0){ 135 return false; 136 } 137 }); 138 }); 139 </script> 140 </head> 141 <body> 142 <!--整体的div--> 143 <div class="bodyDiv"> 144 <div> 145 <div class="logoDiv"> 146 <img src="../01静态界面/img/logo2.png" height="50" /> 147 </div> 148 <div class="logoDiv"> 149 <img src="../01静态界面/img/header.png" height="50"/> 150 </div> 151 <div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;"> 152 <a href="">登录</a> 153 <a href="">注册</a> 154 <a href="">购物车</a> 155 </div> 156 <div class="clear"></div> 157 </div> 158 </div> 159 <div style="height: 50px;background-color: black;"> 160 <ul> 161 <li>首页</li> 162 <li>首页</li> 163 <li>首页</li> 164 <li>首页</li> 165 </ul> 166 </div> 167 <div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);"> 168 <div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px;width: 600px;"> 169 <!--点击注册所提交到的界面--> 170 <form action="02网站界面图片滚动.html" method="post" > 171 <table border="0" width="100 %" cellspacing="10"> 172 <tr> 173 <td>用户名</td> 174 <!-- 此处的class在样式中并无定义，只是为了查找这一类元素才定义的--> 175 <td><input type="text" id="username" name="username" class="required" > 176 177 </td> 178 </tr> 179 <tr> 180 <td>密码</td> 181 <td><input type="password" id="password" name="password" class="required"> 182 183 </td> 184 </tr> 185 <tr> 186 <td>确认密码</td> 187 <td><input type="password" id="repassword" name="repassword" class="required"></td> 188 </tr> 189 <tr> 190 <td>性别</td> 191 <td> 192 <input type="radio" name="sex" value="男">男 193 <input type="radio" name="sex" value="女">女 194 </td> 195 </tr> 196 <tr> 197 <td>籍贯</td> 198 <td> 199 <select id="province" name="province" > 200 <option>--请选择--</option> 201 <option value="0">浙江省</option> 202 <option value="1">江苏省</option> 203 <option value="2">湖北省</option> 204 <option value="3">河北省</option> 205 </select> 206 <select id="city" name="city"> 207 <option>--请选择--</option> 208 </select> 209 </td> 210 </tr> 211 <tr> 212 <td>爱好</td> 213 <td> 214 <input type="checkbox" name="hobby" value="篮球">篮球 215 <input type="checkbox" name="hobby" value="足球">足球 216 <input type="checkbox" name="hobby" value="排球">排球 217 <input type="checkbox" name="hobby" value="羽毛球">羽毛球 218 </td> 219 </tr> 220 <tr> 221 <td>邮箱</td> 222 <td><input type="text" id="email" name="email"></td> 223 </tr> 224 <tr> 225 <td colspan="2"><input type="submit" value="注册" /> </td> 226 </tr> 227 </table> 228 </form> 229 </div> 230 </div> 231 <!--最下面的两行--> 232 <div> 233 <img src="../01静态界面/img/footer.jpg" width="100%" /> 234 </div> 235 <div> 236 <center> 237 联系我们 招贤纳士 法律声明<br /> 238 Copyright © 2005-2016 传智商城 版权所有 239 </center> 240 </div> 241 </body> 242 </html>
