jQuery_05

最新推荐文章于 2024-03-14 07:00:00 发布

T279liujie

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量70

点赞数

分类专栏： jQuery java 文章标签： java

本文链接：https://blog.csdn.net/T279liujie/article/details/123724814

版权

java 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

jQuery

11 篇文章 0 订阅

订阅专栏

<title></title>
       
       <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":38};
               //                //开始继承
               //                $.extend(s1,s2);
               //                console.info(s1.name,s1.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;
               //                    }
               //                })
               // $.abcd();
               // console.info($.getMax(10,40)) ;
               //1.3 $.fn.extend()扩展jQuery对象方法
               //案例3：实现全选效果
//                $.fn.extend({
//                    xx: function() {
//                        $(this).each(function(i, ck) {
//                            ck.checked=true;
//                        })
//                    },
//                    yy: function() {
//                        $(this).each(function(i, ck) {
//                            ck.checked=false;
//                        })
//                    }
//                })
//                $("#ok").click(function() {
//                    $(".aaa").xx();
//                })
//                $("#nook").click(function() {
//                    $(".aaa").yy();
//                })
//
// //               复选方式
//                $("#qx").click(function(){
//                    if($(this).prop("checked")){
//                        $(".aaa").xx();
//                    }
//                    else{
//                        $(".aaa").yy();
//                    }
//                })
//                $(".aaa").click(function(){
//                    var f=true;
//                    $(".aaa").each(function(i,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,
                       }
                   },
                   messages:{
                       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" class="aaa" />
       <input type="checkbox" class="aaa" />
       <input type="checkbox" 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="uemali" /><br />
           年龄:<input type="text" name="uage" /><br />
           网址:<input type="text" name="uurl" /><br />
           <input type="submit" name="" id="" value="提交" />
       </form>
   </body>
</html>

T279liujie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_05

<title></title>  <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> ...
复制链接

扫一扫