回顾上一节:
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>