jQuery-05

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

昂761

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

阅读量727

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_65088316/article/details/123709031

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       
       <style type="text/css">
           #myForm label.error{
               color:red;
               font-size:14px;
           }
           </style>
       <script type="text/javascript" src="js/jquery-3.3.1.js"></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};
// //                console.info("继承前": "+s1.name,s1.age");
//                console.info("继承前": "+s2.name,s2.age");
//
               // 开始继承
//                $.extend(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;
//                    }
//                });
               // $.abcd();
               // $.getMax(10,40);
//                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.   checked=true;
//                    })
//                    },
//                    yy:function(){
//                    $(this).each(function(i,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(":checked")){
//                    $(".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
                       }
                   },
                   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" 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" id="upwd1" /></br>
           确认密码 :<input type="text" name="upwd2 /></br>
           邮箱 : <input type="text" name="uemail" /></br>
           年龄 :<input type="text" name="uage" /></br>
           网址 :<input type="text" name="uunrl" /></br>
           <input type="sumbit" value="提交" />
       </form>
   </body>
</html>

昂761

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-05

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title>  <style type="text/css"> #myForm label.error{ color:red;...
复制链接

扫一扫