jQuery_05 插件

最新推荐文章于 2024-10-07 09:24:46 发布

YY…

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量865

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/m0_64043477/article/details/123673675

版权

今天我们要一起学的内容是jQuery-自定义插件，表单验证，COME ON ！！

一. 自定义插件

1. $.extend

2. $.fn.extend

（案例：对象间的继承）

（案例：拓展$.max ( )和$.min ( )方法）

二. 第三方插件：表单验证

（案例：演示表单验证（用户名，密码））

一. 自定义插件：

小重点：

$ 是jquery

$（“xx”）是jquery 对象

$.extend（对象1，对象2）：对象1继承对象2

$.fn.extend（ { 方法名：function（）{ 方法体 } }）

（案例：对象间的继承）

假如有A，B两个对象，想要让B对象的特性在A对象身上体现，那么可以将A对象继承B对象，相关代码如下所示：

<script>
			var AAA={
				"逃课":function(){
					console.log("正在逃课中....")
				}
			}
			
			var BBB={
				"吃泡面":function(){
					console.log("正在吃泡面....")
				}
			}
			
			// AAA.逃课()
			// BBB.吃泡面()
			
			$.extend(AAA,BBB)
			$.extend($,AAA)
			
			
			AAA.逃课()//本身自带的
			AAA.吃泡面()//从BBB那里继承来的
			
			$.吃泡面()

（案例：拓展$.max ( )和$.min ( )方法）

以下是具备一个可以算出多个数字的最大值的方法：

$.extend({
				max:(...is)=>{
					// ...is 具备多个参数  且是一个数组
					// [1,2,3,4,5,6,7,8,9]
					
					// let a=is[0]//数组的第一位
					let max=-Infinity //Infinity 无穷大
					// 打擂台
					for(let i of is){
						max=max<i?i:max
					}
					// 返回最大值
					return max
				}
			})
			
			console.log().max(1,2,3,4,5,6,7,8,9)
			
			// 拓展的jquery对象
			
			$.fn.extend({
				test:()=>{
					console.log("haha")
				}
			})
			
			// $  是jquery
			// $("xx") 是jquery对象
			
			$("a").test()

运行结果为：9

二. 第三方插件：表单验证：

插件名：jQuery Validation

使用步骤：

1. 下载jQuery插件验证库 jquery.validate.js

2. 将类库引入页面

3. 两种方式使用验证：HTML 标签属性方式 JS 方式【推荐】

js 的方式：

1.  验证及错误信息：

                $（“表单元素”）.validate（{

rules:{

                                               字段验证规则

                                                 },

                          messages：{

                                 字段错误信息

                                        }

                                }）

          2. 错误样式：

  表格元素：label.error{

样式

                        }

（案例：演示表单验证（用户名，密码））

注意：

表单验证插件是基于 jquery 的，在导入插件之前要先导入 jquery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 表单验证 -->
		<!-- 表单验证插件是基于jquery的  在导入插件之前先导入jquery -->
		<script src="js/jquery-3.5.1.js"></script>
		<script src="js/jquery-validation-1.19.0/dist/jquery.validate.js"></script>
		<script src="js/jquery-validation-1.19.0/dist/localization/messages_zh.js"></script>
		<style>
			label.error{
				color:red;
			}
		</style>
		</head>
		<body>
		<form action="">
			<p>
				<input type="text" name="username" placeholder="用户名">
			</p>
			<p>
				<input type="text" name="password" placeholder="用户密码">
			</p>
			<p>
				<button >登录</button>
				<button type="reset">取消</button>
			</p>
		</form>
		<script>
		// 表单验证写完了
			$("form").validate({
				rules:{
					username:{
						required:true,//必填
						email:true,//必须是邮件
						rangelength:[5,10]
					},
					password:"required"
				}
			})
		
		</script>
	
	</body>
</html>

GOOD GOOD STUDY , COME ON ！！