jQuery插件

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

且行且珍惜101

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

阅读量742

点赞数

分类专栏： jQuery 文章标签： jquery 前端

本文链接：https://blog.csdn.net/qq_64286752/article/details/123670287

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

                                                                            插件
       自定义插件
           $.extend
               【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2

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

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

                                                                 第三方插件
           表单验证
               查看API官方文档
               插件名：jQuery Validation
               使用步骤
                   【1】.下载jQuery插件验证库
                       jquery.validate.js
                   【2】.将类库引入页面
                   【3】.两种方式使用验证
                       HTML标签属性方式
                       JS方式【推荐】
                           验证及错误信息
                               $("表单元素").validate({
rules:{
字段验证规则
}，
messages:{
字段错误信息
}
})
                           错误样式
                               表格元素 label.error{
样式
}
               验证规则说明
                   见jQueryValidate规则.png

代码（演示）

身体（代码演示

<head>
		<meta charset="utf-8" />
		<title>插件</title>
		<style type="text/css">
				/* 设置错误信息的方式 */
					#formRegister label{
						color:red;
					}
				</style>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<!-- 导入jQuery插件 表单验证 -->
		<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
	
	
	<script type="text/javascript">
			/* jQuery第五次课☞插件 */
					/*
					 * 区分java的类方法以及对象方法
					 * 	--类(静态)方法：例如DBHelper.getCon()
					 * 	--对象方法：StuDao sd = new StuDao(); sd.addStu();
					 * 
					 * $.each();  类方法
					 * $("#oDiv").show()  对象方法
					 * 
					 * 	$("#oDiv").each();  可以的
					 */
					$(function(){
					//1. 自定义插件
					// $.extend  $.fn.extend();
				
						var person = {"name":"且行且珍惜","sex":"女"};
						var stu ={};
						console.log(stu);
						// 通过$.extend()；为stu继承person中的所有属性
						$.extend(stu,person);
						console.log(stu);
						
						var person = {"name":"且行且珍惜","sex":"女"};
						var stu ={"age":18};
						var zz = {};
						$.extend(zz,stu,person);
						console.log(zz);
						
						// $.extend()扩展jQuery类方法
						
						$.extend({
							"a":function(){
								console.log("奥")
							},
							"b":function(){
								console.log("ao")
							}
						});
						
						$.a();
						$.b();
						
						
					
						$.extend({
								// arguments参数 类似一个数组，存储参数的个数
								// 扩展求最大值的类方法
								"MAX":function(){
									var max =arguments[0];//假设这个arguments数组中的第一个值为最大值
									for(var i =0;i<arguments.length;i++){
										if(max<arguments[i]){
											max=arguments[i];
										}
									}
									return max;
								},
								"MIN":function(){
									var min =arguments[0];//假设这个arguments数组中的第一个值为最大值
									for(var i =0;i<arguments.length;i++){
										if(min<arguments[i]){
											min=arguments[i];
										}
									}
									return min;
								},	
						})
						console.log($.MAX(12,2,3,56));
						console.log($.MIN(22,3,2));
						
						
						$.fn.extend({
							"demo1":function(){
							// 在对象方法中，$(this)代表将来谁调用了，就代表谁
							// jQuery的特性中有一个隐式迭代器
							$(this).prop("checked",true);		
							},
							
							"demo2":function(){
							$(this).prop("checked",false);
							}
						});
						$("#checkall").click(function(){
						// 通过获取到复选框  然后调用对象方法demo1 设置所有复选框选中
						$("input:checkbox").demo1();
						});
						$("#qxcheckall").click(function(){
						// 通过获取到复选框  然后调用对象方法demo1 设置所有复选框选中
						$("input:checkbox").demo2();
						});
					});
					//外部插件
						
						$(function(){
							$("#formRegister").validate({
							// 插件的使用：2个模块，规则模块，错误信息模块	
							
						//规则模块
					rules:{
						//昵称
						nc:{
							required :true ,
							maxlength:5
						},
						//账号
						username:{
							required:true,
							minlength:10
						},
						//密码
						password:{
							required:true,
							digits:true,//必须是整数
							min:6,//必须大于6
							maxlength:6 //最大6个字符
							
						},
						//确认密码
						qrmm:{
							required:true,
							equalTo:"#a" //两次输入的密码必须一样
						},
						//年龄
						nl:{
							required:true,
							number:true  ,//只能输入合法的数字
							digits:true//必须是整数
						},
						//邮箱
						email:{
								required:true,//不能为空
								email:true
								},	
						//网址
							wz:{
								required:true,
								url:true   //必须输入正确的网址
							},
							},
						//错误提示模块
							// 编写自定义错误信息
							messages:{
								//昵称自定义提示
								nc:{
									required:"必填",
									maxlength:"呢称不能大于5个字符"
									
								},
								//账号自定义提示
								username:{
									required:"账号不能为空",
									minlength:"账号必须10以上",
								},
								
								//密码自定义提示
								
								password:{
									required:"不能为空",
									digits:"必须为整数",//必须是整数
									min:"最小6位",//必须大于6
									maxlength:"最大6位" //最大6个字符
								},
								//确认密码自定义提示
								qrmm:{
									required:"不能为空",
									equalTo:"两次输入的密码不一致"
								},
								//年龄自定义提示
								nl:{
									required:"不能为空",
									number:"只能输入合法的数字比如 11、12、2等等", //只能输入合法的数字
								    digits:"必须是整数"//必须是整数
								},
								//邮箱自定义提示
								email:{
									required:"必填",
									email:"邮箱格式不正确",
									
								},
							//网址自定义提示
							wz:{
								required:"不能为空",
								url:"必须输入正确的网址"//必须输入正确的网址
							},  
							},
								
							});
							
							
							
						});
					
					
					
					
	</script>
	
	
	
	
	</head>
	<body>

部分）

尾部（代码演示

<body>
		<button id = "oDiv">按钮</button>
				
				<h2>案例3:自定义插件实现全选功能</h2>
				<button id="checkall">全选</button>
				<button id="qxcheckall">取消全选</button>
				<input type="checkbox" value = "1">1
				<input type="checkbox" value = "2">2
				<input type="checkbox" value = "3">3
				<input type="checkbox" value = "4">4
				<input type="checkbox" value = "5">5
				
				<h2>案例4:使用jQuery validation插件完成表单验证</h2>
				
				<form id="formRegister" action="index.html" method = "get">
					昵称：<input type="text" name="nc" />
					<br>
					账号：<input type="text" name = "username">
					<br>
					密码 <input type="password" name = "password" id="a"/>
					<br>
					确人密码：<input type="password" name="qrmm" />
					<br>
					年龄：<input type="text" name="nl" />
					<br>
					邮箱 <input type="text" name = "email">
					<br>
					网址 <input type="text" name = "wz">
					<br>
					<!-- 网上 搜索日期插件 -->
					<input type="date">
					<br>
					<input type="submit" value = "注册">
				</form>
	</body>

部分）