jQuery插件

王真教掌门

已于 2022-03-22 05:19:00 修改

阅读量1.3k

点赞数 3

文章标签： html

于 2022-03-22 05:18:28 首次发布

本文链接：https://blog.csdn.net/WZJ278/article/details/123650801

版权

jQuery插件

什么jQuery的拓展插件？

就是觉得jQuery的封装方法没有符合自己要求的可以自己写方法让jQuery来继承

两种写法

$.extend

1.对象继承$.extend(对象1，对象2)对象1继承对象2

2.扩展直接jQuery的方法$.extend({方法名:function(){方法体}})多个方法使用逗号隔开

$.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>
	</body>
	<script type="text/javascript">
	//定义两个方法输出
		let test={
			print:function(){
				console.log("HELLO WORLD");
			}
		}
		let test1={
			print1:function(){
				console.log("Hello earth");
			}
		}
		//让test继承test1得到它的方法
		$.extend(test,test1);
		test.print();
		test.print1();
		//写一个返回最大值的方法直接继承
		$.extend({
			max:function(...is){
				let max=-Infinity;
                //定义一个负无穷大的数字再用三元运算符计算大小返回最大值  最小值则相反
				for(let i of is){
					max=max<i?i:max;
				}
				return max;
			}
		})
		//调用最大值方法
		console.log($.max(1,1,1,12,321,321,2222,8888));
		//对象继承函数
		$.fn.extend({text3:()=>{
			console.log("你好")
		}})
		$("a").text3();
	</script>
</html>

结果图

第三方插件(表单验证)：

插件名：jQuery Validation

官方网站：https://jqueryvalidation.org/

下载完成后将类库引用到页面

表单验证的插件在jquery-validation文件夹下的dist文件夹内,其文件为jquery.validate.js（也可以使用jquery.validate.min.js）

使用JS方法进行表单验证：

验证及错误信息：$(“表单元素”).validate({
rules:{ 字段验证规则 },

messages:{ 字段错误后的提示信息 }

})

修改样式：表单元素 label.error{ 样式 }

验证规则：

方法解析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 先到入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 type="text/css">
			label.error{
				/* 插件设置样式 将字体设为红色 */
				color: red;
			}
		</style>
	</head>
	<body>
		<form action="" method="">
			<p><input type="text" name="username" value="" /></p>
			<p><input type="password" name="userpwd"  value="" /></p>
			<p><button type="button">提交</button></p>
		</form>
	</body>
	<script >
		$("form").validate({
			rules:{
				username:{
					required:true,//设置必填
					rangelength:[5,10]//必须在5到10个之间
					//多个设置需用逗号隔开
				},
				userpwd:"required"
			}
		})
	</script>
</html>

效果图

王真教掌门

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件

jQuery插件什么jQuery的拓展插件？就是觉得jQuery的封装方法没有符合自己要求的可以自己写方法让jQuery来继承两种写法$.extend1.对象继承$.extend(对象1，对象2)对象1继承对象22.扩展直接jQuery的方法$.extend({方法名:function(){方法体}})多个方法使用逗号隔开$.fn.extend()让jQuery的对象继承方法$.fn.extend({方法名:function(){方法体}})多个方法使用逗号隔开
复制链接

扫一扫