1 案例1-省市联动

1.1 需求

当用户在选择省下拉框信息时,动态修改市下拉框对应的信息;

1.2 技术分析

1:当页面加载的时候需要给省下拉框绑定一个change事件;
2:当事件触发的时候,获取用户选择的省份对应的编号;
3:使用省份编号作为二维数组的索引,获取对应的一维数组信息;
4:遍历一维数组中的信息,并添加到市对应的下拉框中;

1.3 Jquery操作value属性和元素体

操作value属性专用的方法:
Val方法;
操作元素体(包含子标签):
Html方法
操作纯文本方法:(了解)
Text方法
特点:
3个方法都可以使用空参数的形式,获取信息,使用传参数的形式,设置信息;
练习：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6.     <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
  7.     <script type="text/javascript">
  8.         $(function(){
  9.         //3.1 设置 username的默认值为"许多多"
  10.         $("input[name='username']").val("多多")
  11.         //3.2 获取 username的value属性的值
  12.         var v=$("input[name='username']").val();
  13.         //alert(v)
  14.         //3.3通过html获取div标签体的内容
  15.         var v2=$("div").html();
  16.         //alert(v2)
  17.         //3.4通过html设置div标签体的内容
  18.         $("div").html('<font color="red">已满18,随便进</font>');
  20.         //3.5通过text获取div标签体的内容
  21.         var v3=$("div").text();//只能获取纯文本
  22.         //alert(v3)
  23.         //3.6通过text设置div标签体的内容
  24.         $("div").text('<font color="red">123456</font>');
  26.         //3.7 两者设置值的区别
  27.         //html可以带着标签一起设置,标签会生效,而text方法,标签不会生效,直接以字符串的形式显示
  28.         //3.8 两者获取值的区别
  29.         //html可以带着标签一起获取,而text方法,直接获取字符串纯文本
  32.         });    
  33.     </script>
  34.     <style type="text/css">
  35.         .textClass {
  36.             background-color: #ff0;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  42.     <h3>表单</h3>
  43.     <form action="">
  44.         <table border="1">
  45.             <tr id="tr1">
  46.                 <td><label>姓名</label></td>
  47.                 <td><input type="text" name="username"/></td>
  48.             </tr>
  49.             <tr>
  50.                 <td><span>密码</span></td>
  51.                 <td><input type="password" name="password" /></td>
  52.             </tr>
  53.             <tr>
  54.                 <td>性别</td>
  55.                 <td>
  56.                     <input type="radio" name="gender" value="男" />男
  57.                     <input type="radio" name="gender" value="女" />女
  58.                 </td>
  59.             </tr>
  61.             <tr>
  62.                 <td></td>
  63.                 <td>
  64.                     <button type="button">普通按钮</button>
  65.                     <input type="submit" value="提交按钮" />
  66.                     <input type="reset" value="重置按钮" />
  67.                 </td>
  68.             </tr>
  69.         </table>
  70.     </form>
  73.     <h3>公告信息</h3>
  74.     <div>
  75.         未满18慎进
  76.     </div>
  77.     <span id="sp">外span<a href='#'>内超链</a></span>
  78. </body>
  79. </html>

1.4 Jqeury迭代数组的方式

方式1：使用jquery这个对象的方法;
格式:
$.each(任意数组,function(索引,迭代的元素值){
})
方式2：使用jquery数组对象的方法;
格式:
jquery数组对象.each(function(索引,迭代的元素值){
})
方式3：使用for循环:
for(var i=0;i<数组.length;i++){
…..
}
注意事项:
1:凡是从数组中迭代出来的元素,都是js对象;
2:关于方式2必须是jquery数组对象,如果是js数组对象,语法报错;
练习：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可见性过滤选择器.html</title>

 <script src="../js/jquery-1.11.0.min.js"></script>
 <script type="text/javascript">
     $(function(){
         //1:给两个按钮绑定点击事件
         $("#b1").click(function(){
             //得到的是一个jqeury数组
             var arr =$("input:hidden");
             //在jquery中有两种迭代方式:
             //方式1:直接使用jquery对象的each方法
             $.each(arr,function(i,d){
                 //alert(i+"===>"+d)
                 //一旦从数据中迭代出来的元素,都是js对象
                 //alert(d.value);
                 alert($(d).val())
             });



         });
         $("#b2").click(function(){
             //方式2:直接使用jquery数组对象的each方法
             var arr2 =$("input:hidden");
             arr2.each(function(i,d){
                 alert(d.value)
             });
         });


         /*var arr3=[1,2,5,8];
         arr3.each(function(i,d){
             alert(i+"===>"+d)
         });*/   //这种方式是不行的，因为arr3是js对象，而each方法是jQuery方法。
     });
 </script>
</head>
<body>


  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b1"/>
  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b2"/>
  <br /><br />

  <!--文本隐藏域-->
 <input type="hidden" value="hidden_1">
 <input type="hidden" value="hidden_2">
 <input type="hidden" value="hidden_3">
 <input type="hidden" value="hidden_4">

</body>
</html>

1.5 文档操作

内部插入:
A.append(B) 在A的内部的后面添加一个儿子B
A.prepend(B) 在A的内部的前面添加一个儿子B
外部插入:
A.after(B) 在A的后面添加一个兄弟B
A.before(B) 在A的前面添加一个兄弟B
删除信息:
Empty() 清空所有的儿子;
Remove() 当前元素自杀;
练习：
内部插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>01_内部插入节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $(function(){
        //1.在city的后面内部追加 反恐
        //$("#city").append('<li>新反恐</li>');
        //2.在city的前面内部插入 反恐
    //    $("#city").prepend('<li>新反恐</li>');

        //3:如果使用页面上的元素,那么会是一个移动(剪切)的效果;
        $("#city").append($("#fk"));
    });
    </script>
    </head>

    <body>
         <ul id="city">
              <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>


          <ul id="love">
              <li id="fk" name="fankong">反恐</li>
             <li id="xj" name="xingji">星际</li>
         </ul>

        <div id="foo1">Hello1</div> 

    </body>
</html>

外部插入

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>02_外部插入节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
        //1.在 p2 的后面插入 city
        //$("#p2").after($("#city"));
        //2.在 p2 的前面插入 city
        $("#p2").before($("#city"));
        });
    </script>
    </head>

    <body>
         <ul id="city">
              <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>

         <p  id="p3">I would like to say: p3</p>

         <p  id="p2">I would like to say: p2</p>

         <p  id="p1">I would like to say: p1</p>

    </body>
<script type="text/javascript">

</script>

</html>

删除节点

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>03_删除节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
        //1.清空ul
        //$("#city").empty();
        //2.移除天津 remove
        $("#tj").remove();

        });
    </script>
    </head>

    <body>
         <ul id="city">
              <li id="bj" name="beijing">北京<p>海淀区</p></li>
             <li id="tj" name="tianjin">天津<p>河西区</p></li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>
        <p class="hello">Hello</p> how are <p>you?</p> 
    </body>
</html>

1.6 案例步骤与代码实现

1:编写一个页面加载事件,在页面加载事件中给省下拉框绑定一个change事件;
2:当change事件触发的时候,获取省对应的编号;
3:从二维数组中获取对应的一维数组,并迭代一维数组中的信息,
4:将一维数组中的信息拼接成option选项,并添加到市下拉框中;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            // 定义二维数组:
            var arr = new Array(4);
            arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
            arr[1] = new Array("长春市","吉林市","四平市","通化市");
            arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
            arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");
        </script>
    </head>
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
         $(function(){
             /*
              * 1:编写一个页面加载事件,在页面加载事件中给省下拉框绑定一个change事件;
                2:当change事件触发的时候,获取省对应的编号;
                3:从二维数组中获取对应的一维数组,并迭代一维数组中的信息,
                4:将一维数组中的信息拼接成option选项,并添加到市下拉框中;
              */
             //给省下拉框绑定一个change事件;
             $("select[name='pro']").change(function(){
                 //立刻还原市区的下拉框信息
                 $("select[name='city']").html('<option >-请选择-</option> ');


                 //2:当change事件触发的时候,获取省对应的编号;
                 var index=$("select[name='pro']").val();
                 //alert(index)
                 //3:从二维数组中获取对应的一维数组,并迭代一维数组中的信息,
                 var arr2=arr[index];
                 //迭代数组获取每一个市区信息
                 $.each(arr2,function(i,d){
                     //此时的d就是每一个市区的信息名
                     //4:将一维数组中的信息拼接成option选项,
                     var op='<option >'+d+'</option> ';
                     //5:并添加到市下拉框中
                     $("select[name='city']").append(op);
                 });
             });
         });
    </script>
    <body>
        <form action="#" method="get">
            <input type="hidden" name="id" value="007"/>
            姓名:<input name="username" value="xuduoduo"/><br>
            密码:<input type="password" name="password"  value="123" disabled="disabled"><br>
            性别:<input type="radio" name="sex" value="1" checked="checked">男
                <input type="radio" name="sex" value="0">女
                <br>
            爱好:<input type="checkbox" name="hobby" value="eat">吃
                <input type="checkbox" name="hobby" value="drink" checked="checked">喝
                <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
                <br>
            头像:<input type="file" name="photo"><br>
            籍贯:
                <select name="pro">
                    <option >-请选择-</option>
                    <option value="0">黑龙江</option>
                    <option value="1">吉林</option>
                    <option value="2">辽宁</option>
                    <option value="3">河南</option>
                </select>
                <select name="city">
                    <option >-请选择-</option>     
                </select>

            <br>
            自我介绍:
                <textarea name="intr" cols="40" rows="4">good!</textarea>
            <br>
            <input type="submit" value="保存"/>
            <input type="reset" />
            <input type="button" value="普通按钮"/>
        </form>
    </body>
</html>
<!--

-->

2 案例2-左右选择

2.1 需求

当用户点击相应按钮的时候,将选中的选项或全部选项移动到对面去;

2.2 技术分析

1:当页面加载的时候,给6个按钮分别绑定点击事件;
2:在点击事件中获取用户选择的这些选项并移动到对面的下拉框中;

2.3 表单属性过滤选择器

Checked选择器：选择页面上选中的单选框和多选框的个数;
格式:
$(“input:checked”)
Selected选择器：选择页面中下拉框选中的个数:
格式:
$(“select option:selected”)
练习

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>08-表单对象属性过滤选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
     $(function(){
         $("#btn1").click(function(){
             //对表单内 可用input 赋值操作
             $("input:enabled").val("新添加的值.............");
         })
         $("#btn2").click(function(){
             //对表单内 不可用input 赋值操作
             $("input:disabled").val("新添加的值.............");
         })
         $("#btn3").click(function(){
             //获取多选框选中的个数
             var l=$("input:checked").length;
             alert(l)
         })
         $("#btn4").click(function(){
             var v2=$("select option:selected").length;
             alert(v2)
         })
     });
 </script>
</head>
<body>
  <h3> 表单对象属性过滤选择器.</h3>
    <button type="reset">重置所有表单元素</button>
    <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    
    <br /><br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button>
  <button id="btn3">获取多选框选中的个数.</button>
  <button id="btn4">获取下拉框选中的个数.</button>

  <br /><br />

     可用元素：<input name="add" value="可用文本框"/>  <br/>
     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     可用元素： <input name="che" value="可用文本框" /><br/>
     不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
     <br/>
     多选框：<br/>
     <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     <input type="checkbox" name="newsletter" value="test2" />test2
     <input type="checkbox" name="newsletter" value="test3" />test3
     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     <input type="checkbox" name="newsletter" value="test5" />test5
     <div id="checkboxDivId"></div>

     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     下拉列表1：<br/>
    <select name="test" multiple="multiple" style="height:100px">
        <option>浙江</option>
        <option selected="selected">湖南</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>

     <br/><br/>
     下拉列表2：<br/>
     <select name="test2" >
    <option>浙江</option>
    <option>湖南</option>
    <option selected="selected">北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
    </select>
    <br/><br/>
  </body>
</html>

2.4 事件切换

用于简化鼠标移入和移出事件的方法:
Hover
格式:
Jquery对象.hover(移入时触发的函数对象,移出时触发的函数对象);
用于让按钮轮流执行方法的方法（最后一个函数执行完再点就执行函数1）:
Toggle
格式:
Jquery对象.toggle(函数1,函数2…..);
练习：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                 //1:给div绑定一个鼠标移入和移出事件;(可以使用hover方法替代两个事件)
                 $("#divId").hover(function(){
                     //修改div的元素体
                     $("#divId").html('<font color="red">客官不可以</font>');
                 },function(){
                     $("#divId").html('<font color="red">谢谢...</font>');
                 });

                 //2:给按钮绑定轮流执行的事件
                 $("#bid").toggle(function(){
                     alert("第一个事件");
                 },function(){
                     alert("第2个事件");
                 },function(){
                     alert("第3个事件");
                 });
             });
        </script>
    </head>
    <body>

        <input type="button" id="bid" value="点击查看" /><br>
        <div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
    </body>
</html>

2.5 案例步骤与实现

1:当页面加载的时候,给6个按钮分别绑定点击事件;
2:选择用户选中的下拉项,并将这些下拉项移动对对面的下拉框中即可;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>左右选中.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                 /*
                  * 1:当页面加载的时候,给6个按钮分别绑定点击事件;
                    2:选择用户选中的下拉项,并将这些下拉项移动对对面的下拉框中即可;
                  */
                     $("#toRight1").click(function(){
                             //选择用户选中的下拉项中的第一个
                             $("#right").append($("#left option:selected:first"));
                     })
                     $("#toRight2").click(function(){
                         //选择用户选中的下拉项中的所有
                             $("#right").append($("#left option:selected"));
                     })
                     $("#toRight3").click(function(){
                         //左侧的下拉项中的所有
                             $("#right").append($("#left option"));
                     })
             });
        </script>
    <style>
        input[type='button']{
            width:50px;
        }
    </style>
    </head>

    <body>
        <table>
            <tr>
                <td>
                    <select id="left" multiple="true" style="width:100px" size="10">
                        <option>環</option>
                        <option>芈</option>
                        <option>琅</option>
                        <option>琊</option>
                        <option>爨</option>
                        <option>甄</option>
                        <option>槑</option>
                        <option>夔</option>
                    </select>
                </td>
                <td>
                    <input type="button" value=">" id="toRight1"><br>
                    <input type="button" value=">>" id="toRight2"><br>
                    <input type="button" value=">>>" id="toRight3"><br><br>
                    <input type="button" value="<" id="toLeft1"><br>
                    <input type="button" value="<<" id="toLeft2"><br>
                    <input type="button" value="<<<" id="toLeft3">
                </td>
                <td>
                    <select id="right" multiple="true" style="width:100px" size="10">

                    </select>
                </td>
            </tr>
        </table>
    </body>

</html>

3 案例3-表单校验

3.1 需求

当用户离开输入框的时候,对用户输入的值,进行校验,如果合法,不进行任何提示,如果不合法,则在输入框的后面以文字的形式提示;

3.2 技术分析

使用jquery提供的表单检验插件即可完成表单校验的功能;

3.3 Validate插件概述（菜鸟教程里能查到 ）

Validate是在jquery的基础上,进一步封装之后,得出的一个专门用于表单校验的小工具;
使用步骤:
1:从网上下载并解压validate插件; (会得到js文件)
2:将jquery.js和validate.js文件引入到html页面中;(注意:必须是jquery先引入,validate后引入)
3:(可选的)引入一个国际化的中文js文件,可以提示中文;
关于validate的内容介绍:
image.png
使用格式:
使用jquery的方式选中表单对象.validate({
//规则
rules:{
表单项的name属性的值1:{
校验器名称1:校验器的值1,
校验器名称2:校验器的值2,
……..
},
表单项的name属性的值2:{
校验器名称1:校验器的值1,
校验器名称2:校验器的值2,
……..
},
….
},
Messages:{
表单项的name属性的值1:{
校验器名称1:信息提示值1,
校验器名称2:信息提示值2,
……..
},
表单项的name属性的值2:{
校验器名称1:信息提示值1,
校验器名称2:信息提示值2,
……..
},
….
}
});
validate使用练习：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <!--validate校验库-->
        <script type="text/javascript" src="../js/jquery.validate.js" ></script>
        <!--国际化库，中文提示-->
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script type="text/javascript">
            $(function(){
                 //选中一个表单对象,并调用validate方法
                 $("#formId").validate({
                     //规则
                     rules:{
                         //表单项的name属性值
                         username:{
                             //校验器名称
                             required:true
                         },
                         password:{
                             required:true,
                             number:true
                         },
                         repassword:{
                             equalTo:"input[name='password']"
                         },
                         zuixiaozhi:{
                             min:10
                         },
                         shuzhiqujian:{
                                 range:[2,4]
                         }
                     }

                 });
             });
        </script>
        <style>
            /*
             * 为了让提示显示为hongse,手动编写一个error样式
             */
            .error{
                color: red;
            }
        </style>
    </head>
    <body> 
        <form id="formId" action="">
            必填：<input type="text" name="username"/> <br/>
            必填数字：<input type="text" name="password"/> <br />
            必填重复：<input type="text" name="repassword"/> <br />
            最小值：<input type="text" name="zuixiaozhi"/> <br />
            区间：<input type="text" name="shuzhiqujian"/> <br />
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

validate使用-自定义提示信息练习：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <!--validate校验库-->
        <script type="text/javascript" src="../js/jquery.validate.js" ></script>
        <!--国际化库，中文提示-->
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script type="text/javascript">
            $(function(){
                 //选中一个表单对象,并调用validate方法
                 $("#formId").validate({
                     //规则
                     rules:{
                         //表单项的name属性值
                         username:{
                             //校验器名称
                             required:true
                         },
                         password:{
                             required:true,
                             number:true
                         },
                         repassword:{
                             equalTo:"input[name='password']"
                         },
                         zuixiaozhi:{
                             min:10
                         },
                         shuzhiqujian:{
                                 range:[2,4]
                         }
                     },
                     messages:{
                         username:{
                             //校验器名称
                             required:"亲,必填喲..."
                         },
                         password:{
                             required:"写点啥吧",
                             number:"只认数字"
                         }

                     }

                 });
             });
        </script>
        <style>
            /*
             * 为了让提示显示为hongse,手动编写一个error样式
             */
            .error{
                color: red;
            }
        </style>
    </head>
    <body> 
        <form id="formId" action="">
            必填：<input type="text" name="username"/> <br/>
            必填数字：<input type="text" name="password"/> <br />
            必填重复：<input type="text" name="repassword"/> <br />
            最小值：<input type="text" name="zuixiaozhi"/> <br />
            区间：<input type="text" name="shuzhiqujian"/> <br />
            <input type="submit" value="提交"/>
        </form>
    </body>
</html>

3.4 案例代码部分实现（邮箱校验和日期）

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
    <script type="text/javascript" src="../js/jquery.validate.js" ></script>
    <script type="text/javascript" src="../js/messages_zh.js" ></script>
    <script>
        $(function(){
             //给表单绑validate方法
             $("#formid").validate({
                 rules:{
                     email:{
                         email:true
                     },
                     birthday:{
                         dateISO:true
                     }
                 }
             });
         });
    </script>
    <style>

    </style>
    <body>
        <form action="#" method="get" id="formid">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">会员注册USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">用户名:</td>
                    <td width="80%"><input type="text" name="username" id="username"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" id="password"></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex" value="男"> 男
                        <input type="radio" name="sex" value="女" />女
                        <!--<label for="sex" class="error"></label>-->
                    </td>

                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="birthday">

                    </td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

3.5 自定义校验器

当validate提供的校验器不能解决我们的需求时,可以自定义一个校验器,然后使用;
格式:
$.validator.addMethod(“校验器的名称”,function(表单输入项的值,这个表单项对象,使用校验器时传递的参数值){},信息提示);
练习：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
        <script type="text/javascript" src="../js/jquery.validate.js" ></script>
        <script type="text/javascript" src="../js/messages_zh.js" ></script>
        <script>
            //1:先自定义一个校验器
            $.validator.addMethod("myCard",function(val,dom,par){
                //val就是用户在输入框中填写的值
                //dom就是这个输入框对象
                //par就是使用校验器的人传递的参数
                if(par){    //说明使用校验器的人想校验
                    if(val==""||(val.length!=15&&val.length!=18)){
                        //说明不合法
                        return false;
                    }else{
                        return true;//代表该输入的值经过校验是合法的
                    }
                }else{    //说明使用校验器的人不想校验
                    return true;//代表该输入的值永远合法
                }
            },"亲,身份证号的长度必须是15位或18位");

            //2:使用自定义校验器
            $(function(){
                $("#f").validate({
                    rules:{
                        idCard:{
                            myCard:true
                        }
                    }
                });
            })

        </script>
    </head>
    <body>
        <form id="f">
            身份证号:<input type="text" name="idCard" />
            <br />
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

4 扩展内容-筛选

筛选信息相关的方法:

4.1 查找

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可见性过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="../js/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" />   
  <script type="text/javascript">
      $(function(){
        /*
         *  <input type="button" value=" 选择 id=two 所有子元素"  id="b1"/>
          <input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/>
          <input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/>
          <input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/>
          <input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/>
          <input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/>
          <input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/>
          <input type="button" value=" 选择 id=two 父元素"  id="b8"/>
         */
        $("#b1").click(function(){
            $("#two").children().css("background-color","red")
        });
        $("#b2").click(function(){
            $("#two").children("[title='other']").css("background-color","red")
        });
        $("#b3").click(function(){
            $("#two").next().css("background-color","red")
        });
        $("#b4").click(function(){
            $("#two").nextAll().css("background-color","red")
        });
        $("#b5").click(function(){
            $("#two").prev().css("background-color","red")
        });
        $("#b6").click(function(){
            $("#two").prevAll().css("background-color","red")
        });
        $("#b7").click(function(){
            $("#two").siblings().css("background-color","red")
        });
        $("#b8").click(function(){
            $("#two").parent().css("background-color","red")
        });
    });

  </script>
</head>
<body>
  <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
  <br/><br/>
  <input type="button" value=" 选择 id=two 所有子元素"  id="b1"/>
  <input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/>
  <input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/>
  <input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/>
  <input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/>
  <input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/>
  <input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/>
  <input type="button" value=" 选择 id=two 父元素"  id="b8"/>
  <br /><br />

  <!--文本隐藏域-->
 <input type="hidden" value="hidden_1">
 <input type="hidden" value="hidden_2">
 <input type="hidden" value="hidden_3">
 <input type="hidden" value="hidden_4">

  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

4.2 过滤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可见性过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="../js/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" />   
  <script type="text/javascript">
      $(function(){
        $("#b1").click(function(){
            var v=$("div[class='hide']").next().is("span");
            alert(v)
        });
    });

  </script>
</head>
<body>
  <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
  <br/><br/>

  <input type="button" value=" 判断样式为hide的div 下一个兄弟是否是span"  id="b1"/>

  <br /><br />

  <!--文本隐藏域-->
 <input type="hidden" value="hidden_1">
 <input type="hidden" value="hidden_2">
 <input type="hidden" value="hidden_3">
 <input type="hidden" value="hidden_4">

  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

4.3 扩展案例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            /*
             * 1:当页面加载的时候,给所有的span绑定点击事件,并让a标签隐藏;
             * 2:当触发点击事件的时候,获取sapn的兄弟,并判断是否已经显示了;
             * 3:根据span兄弟的状态,进行相应的操作;
             */
            $("a").hide();
            $("span").click(function(){
                //如何确定是哪一个span触发的事件,   答:使用this
                var arr = $(this).nextAll();
                var flag=arr.is(":hidden");
                if(flag){
                    //说明已经隐藏了
                    arr.show();
                }else{
                    arr.hide();
                }
            });
        });
    </script>

    <style type="text/css">
        div *{
            display:block;
            width:200px;
        }
        div span{
            background-color : #0f0;
        }
    </style>
</head>
<body>

        <div>
            <span>三国好友</span>
            <a>曹操</a>
            <a>刘备</a>
            <a>周瑜</a>
        </div>
        <div>
            <span>笑傲好友</span>
            <a>东方不败</a>
            <a>向问天</a>
            <a>任我行</a>
        </div>
        <div>
            <span>水浒好友</span>
            <a>行者武松</a>
            <a>豹子头</a>
            <a>急先锋</a>
        </div>

</body>
</html>