本文介绍: 大家好,今天是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

大家好,今天是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&gt;
		<h2&gt;案例3:自定义插件实现全选功能</h2&gt;
		<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位之间"
						}
					}
				})

 运行结果如下

 这里博主还写了个样式

就是换了个提示字体颜色大小

知识总结图:

以上就是今天分享的知识点啦,喜欢博主的可以关注博主一波哦

如果对该内容问题的可以随时留言博主交流哈,拜拜!

原文地址:https://blog.csdn.net/weixin_63531940/article/details/123670598

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_45716.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注