jQuery-插件

最新推荐文章于 2024-08-11 18:40:36 发布

权-

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量1.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Q_3344/article/details/124367562

版权

jQuery-插件

思维导图

请添加图片描述

jQueryValidate规则图

请添加图片描述

自定义插件案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自定义插件的两种方式</title>
	</head>
	<script type="text/javascript"src="js/jquery-3.3.1.js">	</script>
	<!-- <script type="text/javascript"src="js/jquery-1.7.2.js">	</script> -->
	<script type="text/javascript"src="js/check.js"></script>
	<body>
		<table border="1px" width="500px">
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
				<td><input type="checkbox" class="checkbox" /></td>
			</tr>
		</table>
		<center>
			<button class="selectAll">全选</button>
			<button class="unselectAll">取消全选</button>
		</center>
	</body>
	<script type="text/javascript">
		$(function(){
			// 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)

			//自定义方法

              // $.extend({demo:function(){console.info("demo1测试")},demo2:function(){console.info("demo2测试")}});
			 // $.demo();
			 // $.demo2();
			 // $.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));
			 $('.selectAll').click(function(){$('.checkbox').selectAll()})
			 $(".unselectAll").click(function(){$(".checkbox").unselectAll()})
		})
	</script>
</html>

以下是外部js文件代码：

$.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)
	})
}
})

第三方插件案例

先导入下载好的表单插件任何在在html里面把插件导入到html里面接下来就是以下代码了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引用插件</title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></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>

权-

关注

0
点赞
踩
0

收藏

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

jQuery-插件思维导图jQueryValidate规则图自定义插件第三方插件思维导图jQueryValidate规则图自定义插件<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>自定义插件的两种方式</title> </head> <script type="text/javascript"src="js/jquer
复制链接

扫一扫