jQuery05插件

原创已于 2022-03-24 22:01:00 修改 · 67 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

于 2022-03-24 21:46:16 首次发布

本文介绍了如何使用jQuery自定义插件实现复选框全选功能，并结合jQuery Validation插件进行表单字段验证，包括用户名、密码等常见输入要求。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #myForm lable.error{
               color:red;
               font-size:14px;
           }
           </style>
       
       <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
       
       <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>

       <script type="text/javascript">

           /* jQuery第五次课☞插件 */
           /*
           * 区分java的类方法以及对象方法
           *    --类(静态)方法：例如DBHelper.getCon()
           *    --对象方法：StuDao sd = new StuDao(); sd.addStu();
           */

           $(function(){
               /* 一、自定义插件 */
               //1.1 $.extend()实现对象继承
               //案例1：两个对象的继承
//                var s1={};
//                var s2={"name":"小炮","age":28};
//                console.info("继承前:"+s1.name,s1.age);
//                console.info("继承后:"+s2.name,s2.age);
//                // 开始继承
//                $.extend(s1,s2);//s1继承自s2
//                console.info("继承后:"+s1.name,s1.age);
//                console.info("继承后:"+s2.name,s2.age);

               //1.2 $.extend()扩展jQuery类方法
               //案例2：求最大值(最小值)
//                $.extend({
//                    abcd:function(){
//                        alert(1234);
//                    },
//                    getMax:function(a,b){
//                    return a>b?a:b;
//                    },
//                    getMin:function(a,b){
//                        return a<b?a:b
//                    }
//                });
//                var max=$.getMax(10,40);
//                console.info(max);

// console.info($.getMin(10,50));

               //1.3 $.fn.extend()扩展jQuery对象方法
//                $.fn.extend({
//                    xx:function(){
//                        $(this).each(function(i,ck){//下标,ck指的是每一个复选框
//                        ck.checked=true;
//                        })
//                    },
//                    yy:function(){
//                    $(this).each(function(i,ck){//下标,ck指的是每一个复选框
//                    ck.checked=false;
//                    })
//                    }
//                })
               //案例3：实现全选效果
               // 用按钮实现
//                $("#ok").click(function(){
//                $(".aaa").xx();
//                })
//                $("#nook").click(function(){
//                $(".aaa").yy();
//                })
// 用复选框实现
//            $("#qx").on("click",function(){
//                // 判断全选框是否选中
//                // console.info($(this).prop("checked"));
//                // if($(this).prop("checked")){//选中了
//                    if($(this).is(":checkbox")){
//                    $(".aaa").xx();//让其他的复选框也选中
//                }
//                else{
//                    $(".aaa").yy();
//                }
//            })
//            // 给其他复选框添加点击事件
//            $(".aaa").click(function(){
//                var f=true;//假设全选框没有选中的
//                $(".aaa").each(function(i,ck)){//ck指每一个复选框
//                    if(ck.checked==false){//有任何一个复选框没有选中
//                        f=false;
//                    }
//                })
//                $("#qx").prop("checked",f);//改变全选框的状态
//
//            })

               /* 二、第三方插件:表单验证插件 */
               //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
           $("myForm").validate({
               rules:{
                   // 表单字段规则
                   uname:{
                       required:true,
                       rangelength:[6,10]
                   },
                   upwd1:"required",
                   upwd2:{
                       required:true,
                       equalTo:"#upwd1"
                   },
                   uemail:{
                       required:true,
                       email:true
                   },
                   uage:{
                       required:true,
                       range:[1,150]
                   },
                   uurl:{
                       required:true,
                       url:true
                   }

               },
               maessages:{
                   // 错误信息提示
                   uname:{
                       required:"用户名必填",
                       rangelength:"用户名长度必须在6-10位之间"
                   }
                   }
               }
           });

           })

       </script>
   </head>
   <body>
       <h2>案例3:自定义插件实现全选功能</h2>
       <input type="button" value="全选" id="ok"/>
       <input type="button" value="取消全选" id="nook"/>
       <input type="checkbox" id="qx"/>全选
       <input type="checkbox" value="看美女" class="aaa"/>看美女
       <input type="checkbox" value="打王者" class="aaa"/>打王者
       <input type="checkbox" value="上网课" class="aaa"/>上网课
       <h2>案例4:使用jQuery validation插件完成表单验证</h2>
   <form id="myForm">
           用户名:<input type="text" name="uname"/><br/>
           密码:<input type="text" name="upwd1"/><br/>
           确认密码:<input type="text" name="upwd2"/><br/>
           邮箱:<input type="text" name="uemail"/><br/>
           年龄:<input type="text" name="uage"/><br/>
           网址:<input type="text" name="uurl"/><br/>
           <input type="submit" value="提交"/>
           </form>
   </body>
</html>