前言
Hello!!!最近疫情挺严重的，同志们不要乱跑，
注意安全，上次分享了jQuery的事件和动画特效，今天九歌来分享jQuery插件。上思维导图：
看了思维导图应该明白今天的分享大致分为两个部分：自定义插件 和 第三方插件。
下面是正文
一、自定义插件
自定义插件分为$.extend和$.fn.extend 两种。这两种方法就类似于类方法和对象方法。
1、$.extend()
作用：1.对象继承：$.extend(对象1，对象2) 。对象一会继承对象二
$(function(){
//继承前
var s1 = {};
var s2 = {"name":"欧阳干翔","sex":"女"};
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
//开始继承
$.extend(s1,s2);
//继承后
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
})
** 效果图：**
2.用于扩展jQuery方法（类似于类方法）
$(function(){
$.extend({
abcd:function(){
alert(1234);
},
getMax:function(a,b){
return a>b?a:b;
},
getMin:function(a,b){
return a<b?a:b;
}
});
//调用类方法
var max = $.getMax(3,7);
console.info(max);
console.info($.getMin(22,34));
$.abcd();
})
我们先用$.abcd()会发现根本没有这个方法，但是我们定义完后就会出现我们逍遥的效果。
同时，完成一个案例
自定义比较两个数的最大值最小值的两个方法。
** 效果图：**
2、$.fn.extend()
作用：扩展jQuery方法（类似对象方法），$.fn.extend({方法名:function(){方法体}})，多个方法之间用逗号隔开
$(function(){
$.fn.extend({
xx:function(){
//遍历
$(this).each(function(i,ck){//ck指的是每一个复选框
ck.checked = true;//让其选中
})
},
yy:function(){
//遍历
$(this).each(function(i,ck){//ck指的是每一个复选框
ck.checked = false;//让其选中
})
}
})
//案例3：实现全选效果
//按钮实现全选
$("#ok").click(function(){
$(".aaa").xx();
})
$("#nook").click(function(){
$(".aaa").yy();
})
//用复选框完成全选
$("#qx").on("click",function(){
//让其他复选框的状态跟全选框一致
// console.info($("#qx").prop("checked"));
// if($(this).prop("checked")){//说明全选框选中
if($(this).is(":checked")){//说明全选框选中
$(".aaa").xx();
}
else{
$(".aaa").yy();
}
})
//完善全选
$(".aaa").click(function(){
var f = true;//假设复选框是选中的
//遍历
$(".aaa").each(function(i,ck){//ck是每一个复选框
if(ck.checked==false){
f = false;
}
})
$("#qx").prop("checked",f);
})
})
<body>
<input type="button" name="" id="ok" value="全选" />
<input type="button" name="" id="nook" value="取消全选" />
<input type="checkbox" name="" id="qx" value="全选" />全选
<input type="checkbox" class="aaa" id="" value="躺着上网课" />躺着上网课
<input type="checkbox" class="aaa" id="" value="吃辣条" />吃辣条
<input type="checkbox" class="aaa" id="" value="玩soul" />玩soul
<input type="checkbox" class="aaa" id="" value="嗯哼" />嗯哼
</body>
实现全选和取消全选，使用这种方法的好处是，可以在很多地方调用。而不是仅限于这一处
二、第三方插件
第三方插件挺多的，但是今天只讲官方插件的表单验证
1.插件名：jQuery validation
2.使用步骤：下载插件----->引入库
3.验证的规则要看validate的规则。
4.验证的方式推荐使用js方式，所以今天只讲js方式
验证以及错误提示：
$("").validate({
** ruels:{**
** 字段验证**
** },**
** messages:{**
** 信息错误提示 **
** }**
})
错误信息提示的样式 label.error{
样式}
$(function(){
$("#myf").validate({
/* 定义规则 */
rules: {
/* 一一去写对应的框的规则 */
/* 只有一个规则的写法 user:"required"*/
user: {
required: true,
rangelength: [2, 4]
},
pwd: {
required: true,
rangelength: [3, 3]
},
pwd1: {
equalTo: "#mypwd"
},
email: {
required: true,
email: true
}
},
/* 不满足规则时的错误信息 */
messages: {
user: {
required: "必须要填写",
rangelength: "2-4位数"
},
pwd: {
required: "必须要填写",
rangelength: "3位数"
},
pwd1: {
equalTo: "密码输入不一样"
},
email: {
required: "必须要填写",
email: "格式不正确"
}
}
});
})
<body>
<form action="a.html" id="myf">
用户名：<input type="text" name="user" /><br>
密码:<input type="password" name="pwd" id="mypwd" /><br>
确认密码:<input type="password" name="pwd1" /><br>
邮箱:<input type="text" name="email" /><br>
<input type="submit" value="登录" />
</form>
</body>
总结：
今天的分享就到这里啦，今天分享的表单验证插件个人感觉好用，比自己写方便，还有很多的插件能用，感兴趣的小伙伴可以去下载并使用。jQuery部分的学习分享就告一段落了，准被学习JavaWeb了，如果这篇文章对你有帮助的话可以点个赞，接下来九歌会持续分享，敬请期待！
本文转载自: https://blog.csdn.net/qq_62331938/article/details/123661329
版权归原作者 安离九歌 所有， 如有侵权，请联系我们删除。
版权归原作者 安离九歌 所有， 如有侵权，请联系我们删除。