jQuery插件

猪大爷爱你
已于 2022-03-15 00:07:51 修改
阅读量59
点赞数
文章标签： jquery javascript 前端
于 2022-03-15 00:04:11 首次发布
本文链接：https://blog.csdn.net/weixin_66116818/article/details/123491836
版权
<!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 type="text/javascript">
			$(function() {
							/* 一、自定义插件 */
							// $.extend() 能够实现继承，能够扩展类方法（类似java的静态方法  直接可通过$工具调用）
							//1.1 $.extend()实现对象继承
							//案例1：两个对象的继承
							// var person = {
							// 	"name":"zhangsan",
							// 	"sex":"男",
							// 	"age":18
							// };
							// console.log($.type(person));
							// var stu = {
							// 	"hobby":"打游戏"
							// };
							// console.log(person);
							// console.log(stu);
							// // 使用$.extend()来实现将stu继承person中的属性
							// $.extend(stu,person);
							// console.log(person);
							// console.log(stu);
							
							//extend(三个参数)
							// 第一个参数的对象继承后面所有参数的对象
							// var tqq = {
							// 	"love":100
							// }
							// console.log(tqq);
							// $.extend(tqq,stu,person);
							// console.log(person);
							// console.log(stu);
							// console.log(tqq);
			
							//1.2 $.extend()扩展jQuery类方法
							// 类方法===java中的静态方法  可以直接通过$.方法（）
							$.extend({
								"mydemo":function(){
									console.log("这就是我编写的类方法");
								}
							});
							
							// 调用拓展的类方法
							$.mydemo();
							//案例2：求最大值(最小值)
							$.extend({
								// 实现最大值的类方法制作
								// "myMax":function(a,b){
								// 	return a>b?a:b;
								// }
								// arguments 数组容器，可以存储函数中的参数个数
								"myMax":function(){
									var max = arguments[0];
									if(arguments.length>0){
										for(var i = 0;i<arguments.length;i++){
											if(arguments[i]>max){
												max = arguments[i];
											}
										}
									}else{
										return arguments.length;
									}
									return max;
								},
								"myMin":function(){
									var min = arguments[0];
									if(arguments.length>0){
										for(var i = 0;i<arguments.length;i++){
											if(arguments[i]<min){
												min = arguments[i];
											}
										}
									}else{
										return arguments.length;
									}
									return min;
								}
								
							});
							
							
							// console.log($.myMax(10,20));
							// console.log($.myMax(10,20,50));
							// console.log($.myMin(10,20,50));
							// console.log($.myMax());
			
							//1.3 $.fn.extend()扩展jQuery对象方法
							$.fn.extend({
								"demo1":function(){
									console.log("拓展的某个对象的方法");
								}
							});
							
							$("#obtn1").click(function(){
								// $(this).demo1();
								$.fn.demo1();
							});
							
							
							
							
							
							//案例3：实现全选效果
							// 通过$.fn.extend()扩展一个对象方法（作用：实现全选）
							$.fn.extend({
								"mycheck":function(){
									// $(this) 所有的复选框
									// console.log($(this));
									$(this).each(function(){
										// console.log($(this).val());
										// 调用prop属性设置选中
										$(this).prop("checked",true);
									});
								},
								"unmycheck":function(){
									$(this).each(function(){
										// console.log($(this).val());
										// 调用prop属性设置选中
										$(this).prop("checked",false);
									});
								}
							});
							
							//为全选按钮设置一个点击事件并调用对象方法
							$("#qx").click(function(){
								// $("input:checkbox") 得到的是所有的复选框
								$("input:checkbox").mycheck();
							});
							// 取消全选
							$("#unqx").click(function(){
								// $("input:checkbox") 得到的是所有的复选框
								$("input:checkbox").unmycheck();
							});
							
							/* 二、第三方插件:表单验证插件 */
							//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
						})
					</script>
		
		
		<!-- 第三方插件（表单验证） -->
				<script type="text/javascript">
					$(document).ready(function(){
						// 获取表单标签调用设置插件的方法
						$("#myForm").validate({
							// 规则rules
							rules:{
								// 账号username
								username:{
									required:true
								},
								// 验证邮箱规则
								myeamil:{
									required:true,
									email:true
								}
							},
							// 自定义错误信息messages
							messages:{
								// 账户的错误信息提示
								username:{
									required:"用户名不能为空"
								},
								myeamil:{
									required:"邮箱不能为空",
									email:"邮箱的格式不满足要求"
								}
							}
						});
					})
				</script>
		
	</head>
	<body>
			<h2>案例3:自定义插件实现全选功能</h2>
				<button id="obtn1">演示</button>
				<hr>
				<button id="qx">全选</button>
				<button id="unqx">取消全选</button>
				<br>
				<input type="checkbox" value = "aa">aa
				<input type="checkbox" value = "bb">bb
				<input type="checkbox" value = "cc">cc
				<input type="checkbox" value = "dd">dd
				<input type="checkbox" value = "ee">ee
				<h2>案例4:使用jQuery validation插件完成表单验证</h2>
				
				<form action="" method="get" id="myForm">
					账号: <input type="text" autocomplete="off" id = "username" name = "username">
					<br>
					邮箱： <input type="email" id = "myeamil" name="myeamil">
					<br>
					密码: <input type="password">
					<br>
					
					<input type="submit" value="注册"/>
				</form>
	</body>
</html>