jQuery插件

萧磊y

已于 2022-04-23 17:25:57 修改

阅读量1k

点赞数

文章标签： javascript java 前端

于 2022-04-23 17:24:10 首次发布

本文链接：https://blog.csdn.net/m0_63223374/article/details/124366275

版权

jQuery插件

1.思维导图
2.jQueryValidate规则图
3.自定义插件
4.第三插件
- 4.1 使用步骤
- 4.2表单验证案例

接着上个博客继续，本来和上个博客是一个的因为合在一起写太多了所有分开写成两个博客

1.思维导图

还是一样的先看思维导图接着上个博客的思维导图继续观看，建议理顺思路在浏览以下内容
请添加图片描述

2.jQueryValidate规则图

先把图片放出来语法使用方法请观看下方
请添加图片描述

3.自定义插件

$.extend

作用1：对象继承：$.extend(对象1，对象2)------>对象1继承对象2。可以理解成：对象2中的数据给了对象1，后面的对象数据给了前面对象
作用2：扩展jQuery对象方法：$.extend({方法名：function(){方法体}})。注意多个方法之间用逗号隔开如图：

$.fn.extend

作用：扩展jQuery元素集提供新方法：$.fn.extend({方法名:function(){方法体}})

		<title>自定义插件</title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="da">
			这里是div
		</div>
	</body>
	<script type="text/javascript">
	//案例一：
		$(function() {
			var da = {
				"name": "旺财"
			};
			var dc = {};
			var db = {
				"name": "来福",
				"sex": "公"
			};

			//对象da继承对象dc，dc继承db
			 $.extend(da,dc.db);
			//因为它和传递一样所以db传给dc，dc传给da所以dc打印出来是没有被定义的
			 console.info("da对象__name："+da.name+",sex:"+da.sex);
			 console.info("dc对象__name："+dc.name+",sex:"+dc.sex);
			 console.info("db对象__name："+db.name+",sex:"+db.sex);

			//自定义方法
			//方式1：$.extend
			 $.extend({demo1:function(){
			 	console.info("测试");
			 },}
			 );

			// $("#da").demo1();//这里不可以使用这种方式调用		以上这种方法不可以使用这种方式调用
			//调用demo1方法
			$.demo1();
			
		//案例二：
			//定义max和min方法
			$.extend({
				max: function(a, b) {
					return a > b ? a : b;
				},
				min: function(c, d) {
					return c < d ? c : d;
				}
			})
			var ma = $.max(3, 4);
			console.info(ma);
			var mb = $.min(4, 3);
			console.info(mb);

		})
	</script>

下面是外部js文件里的代码

$.fn.extend({
	//全选
	checkAll:function(){
		//获取所有的复选框
		//$(this):表示获取的所有复选框
		var cs=$(this);
		//遍历cs
		cs.each(function(){
			//$(this):每个复选框
			$(this).attr("checked",true);
		})
	},
	//取消全选
	unCheckAll:function(){
		var cs=$(this);
		cs.each(function(){
			$(this).attr("checked",false);
		})
	}
})

4.第三插件

今天的话就给大家讲解个表单验证吧

插件名：jQuery Validation

4.1 使用步骤

先下载jQuery插件验证库：
jQuery.validate.js
引入界面
两种方式使用验证

HTML标签属性f方式
JS方式（推荐使用这个）
验证及错误信息：

错误格式：

4.2表单验证案例

先把 jQuery.validate.js导入到js
在这里插入图片描述

		<title>表单验证插件分析</title>
		<!-- 1.引入jQuery库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 2.将表单验证插件导入到项目的js目录里面 -->
		<!-- 3.将表单验证插件的js文件引入到页面 -->
		<script src="js/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<!-- 给提示添加字体颜色 -->
		<style type="text/css">
			#myform label.error{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<form id="myform">
			<!-- 非空，长度必须大于5 -->
			账号:<input type="text" name="uname" /><br>
			<!-- 非空，长度必须大于5-10 -->
			密码:<input type="text" name="upwd" id="pwd" /><br>
			确认密码:<input type="text" name="qrupwd" /><br>
			年龄:<input type="text" name="uage" /><br>
			<button>提交</button>
		</form>
	</body>
	<script type="text/javascript">
		$(function() {
			$("#myform").validate({
				/*编写规则*/
				rules: {
					/*账号*/
					uname: {
						required: true, //非空
						minlength: 5 //最小长度为5			因为后面不写东西了所以不用打逗号

					},
					/*密码*/
					upwd: {
						required: true, //非空
						rangelength: [5, 10] //长度必须在5-10
					},
					/*确认密码*/
					qrupwd: {
						required: true, //非空
						equalTo: "#pwd" //和第一次输入的密码保持一致
					},
					/*年龄*/
					uage: {
						required: true, //非空
						digits: true, //必须是整数
						range: [18, 100] //18-100岁之间

					}
				},
				/*编写提示信息*/
				messages: {
					/*账号*/
					uname: {
						required: "账号不能为空！", //非空
						minlength: "账号的最小长度为5" //最小长度为5			因为后面不写东西了所以不用打逗号

					},
					/*密码*/
					upwd: {
						required: "密码不能为空！", //非空
						rangelength: "密码的长度在5-10！" //长度必须在5-10
					},
					/*确认密码*/
					qrupwd: {
						required: "确认密码不能为空！", //非空
						equalTo: "两次密码输入要保持一致！" //和第一次输入的密码保持一致
					},
					/*年龄*/
					uage: {
						required: "年龄不能为空", //非空
						digits: "年龄必须是整数", //必须是整数
						range: "年龄范围必须在18-100之间!" //18-100岁之间

					}
				}
			})
		})

	</script>