jQuery05(插件）_jquery 5.0-CSDN博客

本文链接：https://blog.csdn.net/SLKLl0808/article/details/123675577

jQuery05(插件）

大家好，今天是jQuery插件知识的分享,今天的知识有点少，分享完这个后，就会分享JavaWeb的知识，慢慢期待吧！

一、自定义插件

1.1.1 $.extend()实现对象继承

先看案例：（注：所有的案例，博主源代码中都调用了外部js,另起了script）

案例1：两个对象的继承
$(function(){
 var s1={};
var s2={"name":"aa","sex":"男"}
//继承前
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
//开始继承
$.extend(s1,s2);//s1继承自s2
//继承后
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
})

1.1.2 $.extend()扩展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(10,56);
console.info(max);

			console.info($.getMin(22,34));
			
			$.abcd()

)}

1.2.1 $.fn.extend()扩展jQuery对象方法
$(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：实现全选效果

（注意上面那个$fn.extend里面的方法xx那段不要注掉哦）
$("#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部分代码如下：

<body>
		<h2>案例3:自定义插件实现全选功能</h2>
		<input type="button"value="全选" id="ok" />
		<input type="button" value="取消全选" id="nook" />
		<input type="checkbox" id="qx" />全选
		<input type="checkbox"class="aaa" value="躺着上网课很心累" />躺着听网课很心累
		<input type="checkbox"class="aaa" value="疫情隔离心很闷" />疫情隔离心很闷
		<input type="checkbox"class="aaa" value="整个人都很烦怎么办" />整个人都很烦怎么办
</body>

有个是按钮的点击事件并没有包括那格全选

还有个是点击全选复选框，其他复选框跟全选复选框保持一致被选中的状态

大家可以试着尝试

二、第三方插件:表单验证插件

比较实用

有个默认效验规则：

大家可以参考

在使用之前要先下载jQuery插件验证库

访问 https://jqueryvalidation.org/ 下载最新版的jQuery Validate插件就可以了

然后将类库引入页面

接下来就看案例吧！

案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
/* 二、第三方插件:表单验证插件 */

	//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
				$("#myForm").validate({
					rules:{
						//字段规则部分
						uname:{
							required:true,
							rangelength:[6,10]
						},
						upwd1:"required",
						upwd2:{
							required:true,
							equalTo:"#upwd1"
						},
						uemail:{
							required:true,
							email:true
						},
						uage:{
							required:true,
							range:[1,150]
						},
						uurl:{
							required:true,
							url:true
						}
					},
					messages:{
						//错误信息提示部分
						uname:{
							required:"用户名必填",
							rangelength:"长度要在6-10位之间"
						}
					}
				})