$(document).ready()可以简写成
$(function(){
//执行的代码
});
将DOM对象转换为jQuery对象
工厂函数：$()就可以。
DOM对象转jQuery对象：
使用函数$()进行转换：$(DOM对象)
var t = document.getElementById("txtName");//DOM对象
var $t = $(t);//jQuery对象
jQuery对象通常用$开头，在事件中$(this)，this表示触发事件的对象
jQuery对象转DOM对象
var $t=$("#tname");//jQuery对象
var t = $t[0];//DOM对象
也可以使用get(index)方法得到DOM对象
var t = $("#tname").get(0);//DOM对象
常用语法：
示例：$("#current").addClass('current')//为标签添加类样式
css('属性','属性值')//为标签设置css样式的值
removeClass()//为标签移除类样式
next()//获取标签其后紧邻的同辈标签
attr('标签属性','属性值')//为标签属性设置值
示例：$("#img").attr("src","img/tupian.png");//给ID为Img的标签设置src属性的值
$("#img").attr("src");//获取id为img的标签的src的值
基本过滤选择器
选取第一个元素：$("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 }