0
点赞
收藏
分享

微信扫一扫

JQuery 继承,自定义方法,插件

热爱生活的我一雷广琴 2022-04-23 阅读 171
java

自定义方法,继承

<!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>

插件

<!DOCTYPE html>
<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>

举报

相关推荐

0 条评论