$(document).ready()可以简写成
$(function(){
//执行的代码
});
基本过滤选择器
选取第一个元素：$("li:first")
选取最后一个元素：$("li:last")
选取索引为偶数的元素：$("li:even")
选取索引为奇数的元素：$("li:odd")
选取索引等于index的元素：$("li:eq(index)")
选取索引大于index的元素：$("li:gt(index)")
选取索引小于index的元素：$("li:lt(index)")
使用jQuery进行表单验证
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery验证框架制作表单</title> 6 <link type="text/css" rel="stylesheet" href="../css/demo1.css" /> 7 </head> 8 <body> 9 <!-- action表单连接页面，onsubmit事件，当type=submit提交时触发 --> 10 <form action="success.html" method="post" > 11 <table> 12 <tr> 13 <td> 14 <span>*</span> 用户名：</td> 15 <td> 16 <input type="text" name="uname" /> 17 </td> 18 </tr> 19 20 <tr> 21 <td> 22 <span>*</span> 密码：</td> 23 <td> 24 <input id="upwd" type="password" name="upwd" /> 25 </td> 26 </tr> 27 28 <tr> 29 <td> 30 <span>*</span> 确认密码：</td> 31 <td> 32 <input type="password" name="apwd" /> 33 </td> 34 </tr> 35 36 <tr> 37 <td> 38 <span>*</span> 年龄：</td> 39 <td> 40 <input type="number" name="uage" /> 41 </td> 42 </tr> 43 44 <tr> 45 <td> 46 <span>*</span> 手机号：</td> 47 <td> 48 <input type="number" name="uphone" /> 49 </td> 50 </tr> 51 52 <tr> 53 <td> 54 <span>*</span> 邮箱：</td> 55 <td> 56 <input type="email" name="uemail" /> 57 </td> 58 </tr> 59 60 <tr> 61 <td> 62 <span>*</span> 性别：</td> 63 <td> 64 <input type="radio" name="usex" id="usex1" value="男"/><label for="usex1">男</label> 65 <input type="radio" name="usex" id="usex2" value="女" /><label for="usex2">女</label> 66 <!--注意：加上label标签为name属性的值，加上class类样式，加上自动生成generated的信息，这样提示的错误信息不会显示在中间--> 67 <label for="usex" class="error" generated="true"></label> 68 </td> 69 </tr> 70 71 <tr> 72 <td> 73 <span>*</span> 爱好：</td> 74 <td id="listlike"> 75 <input type="checkbox" name="ulike" id="ulike1" value="看小说" onclick="creturn()"/><label for="ulike1">看小说</label> 76 <input type="checkbox" name="ulike" id="ulike2" value="看电影" onclick="creturn()" /><label for="ulike2">看电影</label> 77 <input type="checkbox" name="ulike" id="ulike3" value="吃零食" onclick="creturn()"/><label for="ulike3">吃零食</label> 78 <input type="checkbox" name="ulike" id="ulike4" value="打麻将" onclick="creturn()" /><label for="ulike4">打麻将</label> 79 <!--注意：加上label标签为name属性的值，加上class类样式，加上自动生成generated的信息，这样提示的错误信息不会显示在中间--> 80 <label class="error" for="ulike" generated="true"></label> 81 </td> 82 </tr> 83 <tr> 84 <td></td> 85 <td> 86 <input type="radio" name="choose" id="c1" /><label for="c1" >全选</label> 87 <input type="radio" name="choose" id="c2" /><label for="c2" >全不选</label> 88 <input type="radio" name="choose" id="c3" /><label for="c3" >反选</label> 89 </td> 90 </tr> 91 <tr> 92 <td></td> 93 <td><input type="submit" value="提交注册" /> 94 <input type="reset" value="重置注册"/></td> 95 </tr> 96 </table> 97 </form> 98 </body> 99 <script src="../js/jquery.min.js"></script><!-- 引入jQuery框架 --> 100 <script src="../js/jquery.validate.min.js"></script><!-- 引入jQuery验证框架 --> 101 <script src="../js/demo1.js"> 102 </script> 103 </html>
1 $(function(){//当页面加载完成后，需要做的事情 2 $("form").validate({ 3 rules:{ 4 uname:{ 5 required:true,//表示用户名不能为空 6 rangelength:[5,20]//表示用户名必须是5到20位之间 7 }, 8 upwd:{ 9 required:true,//表示密码不能为空 10 rangelength:[6,30]//表示密码的长度必须在6到30位之间 11 }, 12 apwd:{ 13 required:true,//表示确认密码不能为空 14 equalTo:"#upwd"//表示两次密码必须相同， 15 }, 16 uage:{ 17 required:true, 18 range:[1,130], 19 digits:true //表示必须是整数 20 }, 21 uphone:{ 22 required:true, 23 range:[13000000000,19999999999] 24 }, 25 uemail:{ 26 required:true, 27 email:true 28 }, 29 usex:{ 30 required:true 31 }, 32 ulike:{ 33 required:true 34 } 35 }, 36 messages:{ 37 uname:{ 38 required:"用户名不能为空！", 39 rangelength:"用户名的长度必须在5到20位之间" 40 }, 41 upwd:{ 42 required:"密码不能为空", 43 rangelength:"密码长度必须在6到30位之间" 44 }, 45 apwd:{ 46 required:"确认密码不能为空", 47 equalTo:"两次密码必须一致" 48 }, 49 uage:{ 50 required:"年龄不能为空", 51 range:"年龄必须在1到130岁之间", 52 digits:"必须是整数" 53 }, 54 uphone:{ 55 required:"手机号不能为空", 56 range:"手机号非法" 57 }, 58 uemail:{ 59 required:"邮箱不能为空", 60 email:"邮箱格式不正确" 61 }, 62 usex:{ 63 required:"性别不能为空" 64 }, 65 ulike:{ 66 required:"爱好至少选中一个" 67 } 68 } 69 }); 70 <!--全选--> 71 $("#c1").click(function(){ 72 <!--$("[name='ulike']").attr("checked",true);--><!--也可以--> 73 <!--$("[type='checkbox']").prop("checked",$(this).is(":checked"));--><!--也可以--> 74 $("[name='ulike']").prop("checked",true);<!--也可以--> 75 }); 76 <!--全不选--> 77 $("#c2").click(function(){ 78 <!--$("[type='checkbox']").removeAttr("checked");--><!--也可以--> 79 $("[type='checkbox']").attr("checked",false);<!--也可以--> 80 }); 81 <!--反选--> 82 $("#c3").click(function(){ 83 $("#listlike :checkbox").each(function(){ 84 $(this).prop("checked",!$(this).prop("checked")); 85 }); 86 }); 87 88 89 }); 90 function creturn(){<!--判断反选、全选、全不选--> 91 var l = $("[name='ulike']").length; 92 var l2 = $("[name='ulike']:checked").length; 93 if(l2==0){$("#c2").prop("checked",true);}else{$("#c2").prop("checked",false);} 94 if(l==l2){$("#c1").prop("checked",true);}else{$("#c1").prop("checked",false);} 95 }
1 .error{/*jQuery提示样式*/ 2 color:red; 3 } 4 form{ 5 width:800px; 6 height:400px; 7 margin:50px auto; 8 color:white; 9 background-color:#777; 10 border-radius:50px; 11 } 12 table{ 13 padding:50px 60px 50px 100px; 14 }