jQuery_05 插件

最新推荐文章于 2024-05-31 10:46:10 发布

喔喔。

最新推荐文章于 2024-05-31 10:46:10 发布

阅读量1.2k

点赞数 1

文章标签： java

本文链接：https://blog.csdn.net/weixin_66616840/article/details/124364854

版权

文章目录

1.自定义插件
2.表单插件

1.自定义插件

$.extend

【作用1】对象继承：
$.extend(对象1，对象2)---->对象1继承对象2。可以理解成：对象2中的数据给了对象1，后面的对象数据给了前面对象

案例1：对象间的继承（两个对象和三个对象）

var sa = {"name":"哈哈"};
			var sb = {"name":"呼呼","sex":"男"};
			var sc = {}
			$.extend(sa,sc,sb);
			console.info("sa:"+sa.name+"_"+sa.sex)
			console.info("sb:"+sb.name+"_"+sb.sex)
			console.info("sc:"+sc.name+"_"+sc.sex)

【作用2】扩展jQuery对象方法：$.extend({方法名：function(){ 方法体 }})。注意多个方法之间用逗号隔开

案例2：扩展 $. m a x () 和$ .min()方法

 $.extend({min:function(a,b){return a>b?a:b},max:function(c,d){return c<d?c:d}})
			 console.info($.min(3,4));
			 console.info($.max(3,4));

$. f n . e x t e n d 【作用】扩展 j Q u e r y 元素集提供新方法：$ .fn.extend({方法名：function(){ 方法体
}})。注意多个方法之间用逗号隔开

案例3：扩展多选框的全选和全不选功能【升级之前的版本】

$.fn.extend({
selectAll:function(){
	var cs = $(this);
	cs.each(function(){
		$(this).attr("checked",true)
	})
	},
unselectAll:function(){
	var cs = $(this);
	cs.each(function(){
		$(this).attr("checked",false)
	})
}
})
//调用
 $('.selectAll').click(function(){$('.checkbox').selectAll()})
			 $(".unselectAll").click(function(){$(".checkbox").unselectAll()})

2.表单插件

2.1第三方插件

2.2表单验证

查看API官方文档
插件名：jQuery Validation
使用步骤

【1】.下载jQuery插件验证库jquery.validate.js
【2】.引入页面
【3】.两种方式使用验证
1. HTML标签属性方式
2. JS方式【推荐】
3. 验证及错误信息

$("表单元素").validate({
    rules:{
     字段验证规则
    }，
    messages:{
    字段错误信息
   }
})

错误样式
表格元素 label.error{
样式
}
验证规则说明

2.3 案例4：演示表单验证（用户名、密码、确认密码、年龄）

<html>
	<head>
		<meta charset="utf-8">
		<title>引用插件</title>
	<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
	<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js" type="text/javascript" ></script>
	<style type="text/css">
		#myform label.error{
			color: red;
		}
	</style>
	</head>
	
	
	<body>
		<form id="myform">
			账号：<input type="text" name="uname" /><br>
			密码：<input type="text" name="upwd" id="pwd" /><br>
			确认密码：<input type="text" name="qrpwd" /><br>
			年龄：<input type="text" name="uage"  /><br>
			<button >提交</button>
		</form>
	</body>
	<script type="text/javascript">
		$(function(){
			$("#myform").validate({
			rules:{
				uname:{
					required:true,
					minlength:5
				},
				upwd:{
					required:true,
					rangelength:[5,10]
				},
				qrpwd:{
					required:true,
					equalTo:"#pwd"
				},
				uage:{
					required:true,
					digits:true,
					range:[18,100]
				}
			},
			messages:{
				uname:{
					required:"不能为空",
					minlength:'最少长度为5'
				},
				upwd:{
					required:"不能为空",
					rangelength:'长度为5-10'
				}
			},
			qrpwd:{
				required:"不能为空",
				equalTo:"与密码保持一致"
			},
			uage:{
				required:"不能为空",
				digits:"请输入整数",
				range:'年龄要在18-100'
			}
			})
		})
	</script>
</html>

喔喔。

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_05 插件

文章目录1.自定义插件2.表单插件2.1第三方插件2.2表单验证2.3 案例4：演示表单验证（用户名、密码、确认密码、年龄）1.自定义插件$.extend【作用1】对象继承：$.extend(对象1，对象2)---->对象1继承对象2。可以理解成：对象2中的数据给了对象1，后面的对象数据给了前面对象案例1：对象间的继承（两个对象和三个对象）var sa = {"name":"哈哈"}; var sb = {"name":"呼呼","sex":"男"}; var sc
复制链接

扫一扫