jQuery05(插件)

小阿飞_

已于 2023-02-05 16:59:57 修改

阅读量1k

点赞数 8

于 2022-03-21 23:33:17 首次发布

本文链接：https://blog.csdn.net/yifei_345678/article/details/123649371

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

自定义插件

$.extend：对象间继承

$.extend(对象1,对象2)：对象1继承对象2的属性和与属性相关的函数

$.extend($,对象)：让jquery继承对象的属性，函数

$.extend({方法名：function(){方法体} })：多个方法之间用逗号隔开

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<script src="./js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
		/*jquery功能拓展：*/
			// 声明两个对象变量
			 var 小明 = {
				 '上课': function () {
					 console.log('正在上课中...')
				 }
			 }			
			var 小红 = {
			        "吃饭": function () {
			            console.log("正在吃饭……")
			        }
			}
		    // 两个对象本身自带的：
			     小明.上课()
			     小红.吃饭()
			// extend对象间继承
			// $.extend(小明,小红)//小明会继承小红的属性和属性对应的函数
			// 因此小明有了小红的函数
			     小明.吃饭()
		</script>
	</body>
</html>

jquery拓展

有时候jquery功能中没有你想要用的功能，就需要拓展 jquery (让jquery具备自己编写的东西)，比如上述代码中想让jquery拥有自定义的小明的上课的方法:

//让jquery继承小明这个对象
$.extend($,小明)
$.上课()

拓展jquery类方法

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

$.extend({aa:function(){console.log('aa')}})//让jquery具备自定义方法aa
$.aa()//可以调用自己写的这个方法

拓展$max()与$min()方法

例：让jquery具备一个求最大值/最小值的方法

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<script src="./js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
			$.extend({//jquery继承一个对象{}
				//对象中的属性，函数:
				max:(...is)=>{//属性值是函数
				// ...is:具备多个参数,且是一个数组,is=[1,2,3,4,5,6,7,8,9]	
				var max=is[0]//打擂台,默认最大值为数组第一位
				// 或者用负无穷大：let max = -Infinity //Infinity 无穷大
				//和它比较：
				for(var i of is){
					max=max<i ? i:max
				 }
				 return max// 返回最大值
			   }
			})
			// console.log($.max(1,2,3,4,5,6,7,8,9))//继承了就有这个对象中的函数
			// $.min同理
		</script>
	</body>
</html>

以上代码是让jquery继承即具备了自定义的对象，且这个自定义对象中具有一个max属性，在这个max属性中具有一个求最大值的函数，之后就可以用jquery调用这个函数了：($.min同理)

console.log($.max(1,2,3,4,5,6,7,8,9))//继承了就有这个对象中的函数

运行结果如下：

$.fn.extend

$.fn.extend({方法名：function(){方法体} })：是拓展在jquery对象的方法,不是拓展在jquery上的方法

$ 是jquery

$("xx") 是jquery对象

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<script src="./js/jquery-3.5.1.js"></script>
		<script type="text/javascript">
	     $.fn.extend({
			        test:()=>{
			            console.log("haha")
			        }
			    })
			// 在jquery上的方法的调用：$.test()
			// 但是这里是jquery对象的方法的调用：任意放一个值
			     $('a').test()
		</script>
	</body>
</html>

运行如下：

第三方插件

运用：表单验证

插件名：jQuery Validation

使用步骤：

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

https://jqueryvalidation.org/https://jqueryvalidation.org/2，将类库引入页面

3，两种方式使用验证：

a，表单中验证及错误信息：

$("表单元素").validate({rules：{字段验证规则}

messages：{字段错误信息} })

b，输入错误时提示的样式：

表格元素,要写在style属性里面： label.error{ 样式 }

验证规则说明(仅供参考) ：

注：第三方插件也是基于jquery的，使用之前要先导入jquery文件!

ONE EXAMPLE：

<!DOCTYPE html>
<html>
	<head></head>
	<body>
		<!-- 导入一个第三方插件之前要先导入jquery文件!-->
		<script src='./js/jquery-3.5.1.js'></script>
		<script src="jquery-validation-1.19.0/dist/jquery.validate.js"></script>
		<!-- 让提示变成中文 -->
  <script src='jquery-validation-1.19.0/dist/localization/messages_zh.js'></script>
		<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>
		<!-- 更改提示颜色 -->
		<style>
		        label.error{
		            color: red;
		        }
		</style>
		<script type="text/javascript">
			// 表单验证：导入jquery里面没有的插件：
			// $('form').validate({//validate中要填一个对象{}
			// 	rules:{
			// 		username:"required",//具备必填规则,未填则会自动提示
			// 		password:"required"
			// 	}
			// })
			
			$("form").validate({
				rules:{
				username: {
					required:true,
					rangelength:[5,10]// 长度限制
				 },				
				password:"required"
			   }
			})
		</script>
	</body>
</html>

运行如下：

感谢阅读 ^_^

小阿飞_

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery05(插件)

jquery拓展$.extend：对象间继承$.extend(对象1,对象2)：对象1继承对象2的属性和与属性相关的函数$.extend($,对象2)$.extend({让jquery继承的对象{对象的属性函数}})让jquery继承它没有的方法和函数<!DOCTYPE html><html> <head></head> <body> <script src="./js/jquery-3.5.1.js"..
复制链接

扫一扫

专栏目录