1.插件
1.自定义插件
①$.extend
【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2
【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体 } } )
注意多个方法之间用逗号隔开
②$.fn.extend
【作用】扩展jQuery对象方法：$.fn.extend( {方法名：function(){ 方法体 } } )
注意多个方法之间用逗号隔开
2.第三方插件
①表单验证
插件名：jQuery Validation
②使用步骤
【1】.下载jQuery插件验证库
jquery.validate.js
【2】.将类库引入页面
【3】.两种方式使用验证：
①HTML标签属性方式
②JS方式【推荐】
①验证及错误信息：
$("表单元素").validate({
rules:{
字段验证规则
}，
messages:{
字段错误信息
}
})②错误样式：
表格元素 label.error{
样式
}
③验证规则说明
见jQueryValidate规则.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 设置错误信息的方式 */
#formRegister label{
color:red;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 倒入jQuery插件 表单验证 -->
<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* jQuery第五次课☞插件 */
/*
* 区分java的类方法以及对象方法
* --类(静态)方法：例如DBHelper.getCon()
* --对象方法：StuDao sd = new StuDao(); sd.addStu();
*
* $.each(); 类方法
* $("#oDiv").show() 对象方法
*
* $("#oDiv").each(); 可以的
*/
$(function() {
/* 一、自定义插件 */
// $.extend(); $.fn.extend();
//1.1 $.extend()实现对象继承
//案例1：两个对象的继承
// 定义一个人类对象，属性：name，sex
// var person = {"name":"东方不败","sex":"女"};
// var stu = {};
// console.log($.type(stu));
// console.log(stu);
// // 通过$.extend()；为stu继承person中的所有属性
// $.extend(stu,person);
// console.log(stu);
// 涉及到三个参数
// 第一个参数的对象会继承后面所有对象的属性。
// 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);
//1.2 $.extend()扩展jQuery类方法
$.extend({
// 此处可以通过键值对的形式创建jQuery的类方法 将来可以通过$直接调用
"sb":function(){
console.log("这是我自定义的类方法");
},
"nb":function(){
console.log(123);
}
});
// $.sb();
// $.nb();$.extend();
//案例2：求最大值(最小值)
$.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));
//1.3 $.fn.extend()扩展jQuery对象方法
//案例3：实现全选效果
$.fn.extend({
// 扩展jQuery对象方法
"mydemo":function(){
console.log("这是jQuery对象方法");
// alert(123);
}
})
// 如何调用jQuery对象方法
// $.fn.extend() 存储在加载函数内 作用域
// $.fn.mydemo();
// console.log($("#oDiv").mydemo());
$.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();
});
})
/* 二、第三方插件:表单验证插件 */
//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
$(function(){
// 获取表单标签调用插件激活的方法
$("#formRegister").validate({
// 插件的使用：2个模块，规则模块，错误信息模块
rules:{
// 账号必须有，不能为空
username:{
required:true,
minlength:10
},
email:{
required:true,
email:true
}
},
// 编写自定义错误信息
messages:{
// 账号必须有，不能为空
username:{
required:"账号不能为空",
minlength:"账号必须10以上"
},
email:{
required:"必填",
email:"邮箱格式不正确"
}
}
});
});
</script>
</head>
<body>
<button id = "oDiv">按钮</button>
<h2>案例3:自定义插件实现全选功能</h2>
<button id="checkall">全选</button>
<button id="qxcheckall">取消全选</button>
<input type="checkbox" value = "1">1
<input type="checkbox" value = "2">2
<input type="checkbox" value = "3">3
<input type="checkbox" value = "4">4
<input type="checkbox" value = "5">5
<h2>案例4:使用jQuery validation插件完成表单验证</h2>
<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="date">
<br>
<input type="submit" value = "注册">
</form>
</body>
</html>
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
