jQuery05-插件

最新推荐文章于 2022-10-31 19:06:39 发布

飓风.

最新推荐文章于 2022-10-31 19:06:39 发布

阅读量315

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_62981121/article/details/123698095

版权

一、自定义插件

$.extend
   【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2
   案例1：对象间的继承（两个对象）
   【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体 } } )
注意多个方法之间用逗号隔开
   案例2：扩展$.max()和$.min()方法

// $.extend() 实现对象继承
				var stu={"name":"吴大龙","sex":"妖"};
				
				var stu2={};
				console.log(stu);
				console.log(stu2);
				console.log("---------------------")
				$.extend(stu2,stu);
				console.log(stu);
				console.log(stu2);
				
				// 1个对象继承2个
				var stu={"name":"吴大龙","sex":"妖"};
				var stu1={"age":12};
				var stu2={};
				
				var stu2={};
				console.log(stu);
				console.log(stu1);
				console.log(stu2);
				console.log("---------------------")
				$.extend(stu2,stu1,stu);
				console.log(stu);
				console.log(stu1);
				console.log(stu2);
				
				// $.extend() 扩展 jQuery  类方法
				
				$.extend({
					"aa":function(){
						alert("自定义函数");
					},
						
					"bb":function(){
						alert("bb");
					}
					
				});
				// 通过  $ 符 调用
				$.aa();
				$.bb();

案例：最大值和最小值

	// 最大值
				
				$.extend({
					"max":function(){
						var max=arguments[0];
						for(var i=0;i<arguments.length;i++){
							if(max<arguments[i]){
								max=arguments[i];
							}
						}
						return max;
					},
					// 最小值
					"min":function(){
						var min=arguments[0];
						for(var i=0;i<arguments.length;i++){
							if(min>arguments[i]){
								min=arguments[i];
							}
						}
						return min;
					}
					
				});
				
				console.log($.max(234,43,3));
				console.log($.min(234,43,3));

案例：全选按钮

	

        $.fn.extend({
                    
					"checkAll":function(){
						$(this).prop("checked",true);
					},
                    
					"qxcheck":function(){
						$(this).prop("checked",false);
					}
				})
				
        //全选
	    $("#all").click(function(){
					$("input:checkbox").checkAll();
				});
        //取消全选
		$("#check").click(function(){
					$("input:checkbox").qxcheck();
				})

二、第三方插件

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

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			label{
				color: red;
			}
		</style>
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
				
			$(function(){
				$("#ff").validate({
					rules:{
						Emalia:{
							required:true,
							email:true
						},
						username:{
							required:true,
							minlength:10
						},
						pwd:{
							required:true,
							minlength:6
						}
						
					},
					
				messages:{
					username:{
						required:"昵称不能为空",
						minlength:"账号必须10位以上"
					},
					pwd:{
						required:"密码不能为空",
						minlength:"密码必须6位以上"
					},
					Emalia:{
						required:"邮箱不能为空",
						email:"邮箱格式不正确"
					}
				}
				});
				
			});
			
		</script>
		
	</head>
	<body>
		
		<form id="ff" action="index.html" method="get">
			Emali:<input type="text" name="Emalia" id="" value="" />
			<br>
			账号：<input type="text" name="username" id="" value="" />
			<br>
			密码：<input type="password" name="pwd" id="" value="" />
			<br>
			<input type="submit" value="注册"/>
		</form>
		
	</body>
</html>