JQuery插件

最新推荐文章于 2024-09-11 15:33:18 发布

钟意

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量1.1k

点赞数 1

文章标签： javascript jquery

本文链接：https://blog.csdn.net/m0_61857264/article/details/123663524

版权

自定义插件

$.extend

作用一：对象继承

$.extend(对象一，对象二)

对象一包含对象二的所有方法

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" >
			
		</script>
	</head>
	<body>
		<script type="text/javascript">
		// 对象继承 $.(对象1,对象2)对象1继承对象2 对象中包含对象二的方法
			// let a={
			// 	a1: function (){
			// 		console.log("正在睡觉")
			// 	}
			// }
			// let a2={
			// 	 a3: function (){
			// 		 console.log("正在吃饭")
			// 	 }
			// }
			// $.extend(a2,a)

				 // $.extend(a,a2)
				 // 	a.a3()
					// $.extend($,a)
					// $.a1()
		</script>
	</body>
</html>

作用二：扩展JQuery方法

有时候jQuery功能不是我们所预期的,这时候就可以使用这个方法拓展jQuery,令其具备我们编写的东西

$.extend({方法名:function(){方法体}})

例子：写一个最大值的方法给JQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" >
			
		</script>
	</head>
	<body>
		<script type="text/javascript">
					// 拓展javaquery类方法
					$.extend({max:(...a)=>{ //...a是可以接收多个参数包括数组
						var max=a[0]//从第一个开始
						for(let i of a){
							max=max>i?max:i//遍历数组a并且打擂台把最大值付给max
						}
						return max
					}
						
					})
					
					console.log($.max(1,23,4,5,67,6,89))//输出值为89
					
					
					
		</script>
	</body>
</html>

$.fn.extend

作用：扩展JQuery对象方法

$.fn.extend({方法名:function(){方法体}})

注意多个方法之间用逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js" >
			
		</script>
	</head>
	<body>
		<script type="text/javascript">
					
					
					// 拓展的javaquery 对象上
					$.fn.extend({
						test:()=>{
							console.log("正在吃饭")
						}
					})
                  $是JQuery
                  $("xx")是JQuery对象
					$("a").test()
		</script>
	</body>
</html>

第三方插件

插件名：JQuery Validation

是一款前端验证js插件，可以验证必填字段、邮件、URL、数字范围等，在表单中应用非常广泛。

注意：在引用第三方插件的时候也需要引用jQuery

使用步骤：

使用步骤

1.下载jQuery插件验证库(jQuery.Validation.js)

前往官方网站:https://jqueryvalidation.org/

将网页翻译成中文后找到以下位置，点击下载

在底部找到资产,点击jquery_validation.zip文件,即可下载完成

引用插件

将下载好的插件复制到项目中

在html中引用 <script src="js/jquery-validation-1.19.0/dist/jquery.validate.js"></script>

使用插件完成表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.5.1.js">
		
		</script>
	  <script src="js/jquery-3.5.1.js"></script>
	    <!--表单验证插件是基于jquery的 再导入插件之前需要先导入jquery-->
	    <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_TW.js"></script>
		<style type="text/css">
			label.error{
				color: red;
			}
		</style>
	</head>
	<body>
		<form action="" method="">
			<p><input type="" name="uname" id="" value=""  placeholder="请输入用户名"/></p>
			<p><input type="" name="upwd" id="" value="" placeholder="请输入密码"/></p>
			<p><button >登录</button> 
			<button type="reset">取消</button></p>
		</form>
	</body>
	<script type="text/javascript">
		$("form").validate({
			rules:{
				uname :{
					 required: true, //必填
					                rangelength:[5,10]
				},
				upwd:"required"
			},
			 messages:{
			            uname:{
			                required:"不能为空",
							rangelength:"changu"
			            }
			        }
		})
	</script>
</html>

JQuery教学持续更新中