用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: "邮箱格式不正确"
}
}
});
});
更多知识 可以参考下方这张表