自定义插件
1.$.extend
作用1:对象继承 $.extend(对象1,对象2)----对象1继承对象2
案例:对象间的继承(两个对象)
//定义一个对象
var person = {"name":"张三","sex":"男"};
var stu = {};
console.log(stu);
$.extend(stu,person);
console.log(stu);
//涉及到三个参数时
//第一个参数的对象会继承后面所有对象的属性
var person = {"name":"张三","sex":"男"};
var age = {"age":"12"};
var stu = {};
console.log(stu);
$.extend(stu,person,age);
console.log(stu);
作用2:扩展jQuery类方法: $.extend({方法名:function(){方法体}})多个方法之间用逗号隔开
案例:扩展$.max()和$.min()方法
$.extend({
// 此处可以通过键值对的形式创建jQuery的类方法 将来可以通过$直接调用
"a":function(){
console.log("a");
},
"b":function(){
console.log("b");
}
});
$.a();
$.b();
// 案例2:扩展$.max()和$.min()方法
$.extend({
// arguments参数 类似一个数组,存储参数的个数
// 扩展求最大值的类方法
"myMax":function(){//最大值
//打擂台的思想
var max = arguments[0];//假设数组的第一个数为最大值
for(var i=0;i<arguments.length;i++){
if(max < arguments[i]){
max = arguments[i];
}
}
return max;
},
"myMin":function(){//最小值
//打擂台的思想
var min = arguments[0];//假设数组的第一个数为最大值
for(var i=0;i<arguments.length;i++){
if(min > arguments[i]){
min = arguments[i];
}
}
return min;
}
});
console.log($.myMax(1,2,3,4,56));
console.log($.myMin(1,23,121,21));
2. $.fn.extend
作用:扩展jQuery对象方法:$.extend({方法名:function(){方法体}})多个方法之间用逗号隔开
案例:扩展复选框的全选和取消全选功能
$.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方式(推荐)
验证及错误信息:
$("表单元素").validate({rules:{字段验证规则},messages:{字段错误信息}})
错误样式
表格元素 label.error{样式}
案例:演示表单验证(用户名,密码,确认年龄,年龄,游戏,网址)
<!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>