目录
1.自定义插件;
2.第三方插件;
3.表单验证插件的案例;
好,我们今天来看看在jQuery里面如何去自定义一个插件,以及后面Leaf用一个案例来带大家看看如何运用别人写好了的插件,也就是第三方插件:
1.1 $.extend()
【作用一】实现对象继承
接下来我们就用一个案例来诠释这一作用点:
案例1:两个对象的继承;
//首先定义两个对象
var s1 = {};
var s2 = {"name":"邓正威","sex":"男"};
//继承前
console.info(s1.name,s1.sex);//未定义
console.info(s2.name,s2.sex);//邓正威 男
//使用extend开始继承
$.extend(s1,s2)//s1继承自s2
//继承后
console.info(s1.name,s1.sex);//邓正威 男
console.info(s2.name,s2.sex);//邓正威 男
【作用二】扩展jQuery类方法
咱们依然还是用一个案例来看看:
案例2:求最大值(最小值);
//最大值/最小值
$.extend({
getMax:function(a,b){
return a>b?a:b;
},
getMin:function(a,b){
return a
1.1 $.fn.extend():扩展jQuery对象方法
我们也用一个案例来看看如何扩展jQuery对象方法
案例1:实现全选效果
$.fn.extend({
qx:function(){
//遍历
$(".aaa").each(function(i,ck){//ck--->每一个复选框
ck.checked = true;//选中
})
},
bqx:function(){
//遍历
$(".aaa").each(function(i,ck){//ck--->每一个复选框
ck.checked = false;//不选中
})
}
})
//复选框实现全选
$("#qx").click(function(){
//让其他复选框的状态和全选框保持一致
//方式一
/* if($("#qx").prop("checked")){
$(".aaa").qx();//让其他全选框选中
}else{
$(".aaa").bqx();//让其他全选框不选中
} */
//方式二
if($("#qx").is(":checked")){
$(".aaa").qx();//让其他全选框选中
}else{
$(".aaa").bqx();//让其他全选框不选中
}
})
//完善全选
$(".aaa").click(function(){
var f = true;//假设全选框是选中的
//遍历
$(".aaa").each(function(i,ck){//ck--->每一个复选框
if(ck.checked==false){
f = false;
}
})
//给全选框重新赋值
$("#qx").prop("checked",f);
})
好啦,接下来让我们来看看第三方插件是怎么运用的。
这是一个官方网站的表单验证插件的案例,让我们一起来看看:
步骤1:下载jQuery插件验证库: jquery.validate.js;
步骤2:将类库引入页面;
步骤2:两种方式使用验证;
【1】JS方式【推荐】
验证及错误信息
$("表单元素").validate({
rules:{
字段验证规则
},
messages:{
字段错误信息
}
})
【2】 HTML标签属性方式
错误样式
表格元素 label.error{
样式
}
放上代码:
/* 第三方插件:表单验证插件 */
//表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
$("#myForm").validate({
rules:{
//字段规则部分
uname:{
required:true,//验证不能为空
rangelength:[6,10]
},
upwd1:"required",
upwd2:{
required:true,
equalTo:"#upwd1"//必须要设置密码1的id为:"upwd1"才可以
},
uemail:{
required:true,
email:true
},
uage:{
required:true,
range:[1,150]
},
uurl:{
required:true,
url:true
}
},
messages:{
//错误信息提示部分
uname:{
required:"用户名必填!",//可自定义错误提示
rangelength:"长度要在6-10位之间!"
},
}
})
好啦,以上就是Leaf给大家带来的关于插件的一些知识笔分享!
希望可以给有需要的人带来帮助,互相学习!
抗击疫情,我们在家敲代码支持!!!