jQuery插件

用JQuery写插件时,最核心的方法有如下两个: 代码如下:$.extend(object) 可以理解为JQuery 添加一个静态方法。 $.fn.extend(object) 可以理解为JQuery实例添加一个方法。 基本的定义与调用:

$.extend(object) 实现继承

$(function() {
				/* 一、自定义插件 */
				//1.1 $.extend()实现对象继承
				//案例1:两个对象的继承
				//定义一个人类对象,属性:name,sex
				var person={"name":"琉璃","sex":"女"};
				var b1={};
				$.extend(b1,person);//第一个参数的对象继承后面所有的对象的属性
				// console.log(b1)

				//1.2 $.extend()扩展jQuery类方法
				$.extend({
					"sb":function(){
						console.log("extend()扩展类方法")
					},
					"nb":function(){
						console.log("extend()扩展类方法02")
					}
				})
				$.sb();
				$.nb();

 $.extend()扩展jQuery类方法

作用:扩展jQuery对象方法:$.extend({方法名:function(){方法体}})多个方法之间用逗号隔开

案例:求最大最小值

 $.extend({
                    // arguments参数 类似一个数组,存储参数的个数
                    // 扩展求最大值的类方法
                    "myMax1": function(a, b) {
                        return a > b ? a : b;
                    },
                    "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($.myMax2(12, 2, 3, 56));
                console.log($.myMax2(1));
                console.log($.myMax2());
                console.log($.myMax2(1, 2, 3, 4, 5, 6, 6, 7));
                console.log($.myMin(22, 3, 2));

案例:全选和取消全选

 $.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();
                });

第三方插件

1.插件名:jQuery Validation

2.使用步骤

2.1下载jQuery插件验证库 jquery.validate.js

2.2将类库引入页面

2.3两种方式使用验证

HTML标签属性方式

JS方式(推荐)

案例:表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)

  // 获取表单标签调用插件激活的方法
            $("#formRegister").validate({
                // 插件的使用:2个模块,规则模块,错误信息模块
                rules: {
                    // 账号必须有,不能为空
                    username: {
                        required: true,//required 必填字段
                        minlength: 10
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                // 编写自定义错误信息
                messages: {
                    // 账号必须有,不能为空
                    username: {
                        required: "账号不能为空",
                        minlength: "账号必须10以上"
                    },
                    email: {
                        required: "必填",
                        email: "邮箱格式不正确"
                    }
                }
            });
        });

更多知识 可以参考下方这张表

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值