JQuery-05

回顾上一节:
click 点击事件 mouseover 鼠标移入事件 mouseout 鼠标移出事件

focus 获取焦点事件 blur失去焦点事件 keyup 按键事件

自定义插件:
  // $.extend();   $.fn.extend();

$.extend()实现对象继承:
var person = {"name":"东方不败","sex":"女"};
                var stu = {};
                console.log($.type(stu));
                console.log(stu);
                // 通过$.extend();为stu继承person中的所有属性
                $.extend(stu,person);
                console.log(stu);
测试结果:

 涉及到三个参数的继承:
 第一个参数的对象会继承后面所有对象的属性(wjq会有继承所有的属性):

var person = {"name":"东方不败","sex":"女"};
                var stu = {"age":18};
                var wjq = {};
                console.log(person);
                console.log(stu);
                console.log(wjq);
                console.log("------------------");
                $.extend(wjq,stu,person);
                console.log(person);
                console.log(stu);
                console.log(wjq);
测试结果:

 $.extend()扩展jQuery类方法:
$.extend({
                    // arguments参数 类似一个数组,存储参数的个数
            此处可以通过键值对的形式创建jQuery的类方法  将来可以通过$直接调用
                    "myMax2":function(){
                        // console.log(arguments.length);
                        // 打擂台的思想
                        var max = arguments[0];//假设这个arguments数组中的第一个值为最大值
                        // console.log(arguments[0]);
                        for(var i = 0;i<arguments.length;i++){
                            if(max < arguments[i]){
                                max = arguments[i];
                            }
                        }
                        return max;
                    },
                    "myMin":function(){
                        // console.log(arguments.length);
                        // 打擂台的思想
                        var min = arguments[0];//假设这个arguments数组中的第一个值为最小值
                        // console.log(arguments[0]);
                        for(var i = 0;i<arguments.length;i++){
                            if(min > arguments[i]){
                                min = arguments[i];
                            }
                        }
                        return min;
                    }
                });
 
测试
console.log("12,2,3,56数字中最大值是");
console.log($.myMax2(12,2,3,56));
console.log("22,3,2数字中最小值是");
console.log($.myMin(22,3,2));
测试结果:

 $.fn.extend() 扩展jQuery对象方法:
$.fn.extend({
                    // 全选的对象方法
                    "demo1":function(){
                        // 在对象方法中,$(this)代表将来谁调用了,就代表谁
                        // console.log($(this));
                        // $(this).each(function(){
                        //     $(this).prop("checked",true);
                        // });
                        // jQuery的特性中有一个隐式迭代器
                        $(this).prop("checked",true);
                    },
                    "demo2":function(){
                        $(this).prop("checked",false);
                    }
                });
全选按钮
$("#checkall").click(function(){
                    // 通过获取到复选框  然后调用对象方法demo1 设置所有复选框选中
                     所有复选框
                    $("input:checkbox").demo1();
                });
                $("#qxcheckall").click(function(){
                    // 通过获取到复选框  然后调用对象方法demo1 设置所有复选框选中
                    $("input:checkbox").demo2();
                });
                
 
            })
 第三方插件:表单验证插件:
需要下载 jquery\validate 插件:

 jQuery的表单验证代码:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 设置错误信息样式 */
            #formRegister label {
                color: red;
                background-color: pink;
            }
        </style>
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
    
            $(function() {
                $("#formRegister").validate({
                    rules: {
                        username: {
                            required: true, //判断不为空
                            rangelength: [5, 10] //五到十个字符判断
                        },
                        password: {
 
                            required: true,//判断不为空
                            minlength: 6  //不少于六位
                        },
                        email: {
                            required: true, //判断不为空
                            email: true  //判断邮箱格式
                        },
                        moue:{
                            required: true,//判断不为空
                            dateISO:true   //判断日期输入格式
                        }
                    },
                    //编写自定义错误信息
                    messages: {
                        username: {
                            required: "账号不能为空",
                            rangelength: "账号长度在5-10个字符"
                        },
                        password: {
                            required: "密码不能为空",
                            minlength: "密码不能少于6位数"
                        },
                        email: {
                            required: "邮箱必填",
                            email: "邮箱格式不正确"
                        },
                        moue:{
                            required: "^出生日期不能为空",
                            dateISO:"日期yyyy-mm-dd或者(/)输入格式不正确"
                        }
                    }
 
                })
 
            })
        </script>
    </head>
    <body>
 
        <form id="formRegister" action="index.html" method="get">
 
            账号:<input type="text" name="username">
            <br>
            密码 <input type="password" name="password" />
            <br>
            邮箱 <input type="text" name="email">
            <br>
            出生日期 <input type="text" name="moue">
            <br>
 
            <input type="submit" value="注册">
        </form>
 
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值