jQuery之插件机制

最新推荐文章于 2024-09-08 20:01:49 发布

中单亚索不给就送

最新推荐文章于 2024-09-08 20:01:49 发布

阅读量157

点赞数

文章标签： jQuery 插件

本文链接：https://blog.csdn.net/qq_44829555/article/details/90716854

版权

前言

所谓jQuery的插件机制，实质上是指在实际开发的过程中，由于甲方爸爸的某些特殊需求，需要我们在jQuery的基础上扩展一些方法或者制作一些插件；具体的信息可以查阅相关的帮助文档。

机制

1、jQuery.extend(object)：

扩展jQuery对象本身，主要是用来扩展jQuery全局函数，调用时直接$.函数名(参数)

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			$.extend({
				min: function(a, b) {
					return a < b ? a : b;
				},
				max: function(a, b) {
					return a > b ? a : b;
				}
			});
			var min = $.min(1,2);
			console.log(min);
			var max = $.max(1,2);
			console.log(max);
		</script>
	</head>
	<body>
	</body>
</html>

执行结果：会在控制台输出结果如下
在这里插入图片描述
2、jQuery.fn.extend(object)：

扩展 jQuery 元素集，主要用于制作插件，调用时需要先创建jQuery对象，然后才能调用相应的函数；

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>
			jQuery.fn.extend({
				check:function(){
					this.attr("checked","checked");
				},
				uncheck:function(){
					this.removeAttr("checked");
				}
			})
		</script>
	</head>
	<body>
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		
		<script>
			$("[type='checkbox']").check();
		</script>
	</body>
</html>

执行结果
在这里插入图片描述
因为调用了check（）方法，选中所有的框；

3、再学一手

为了避免自己定义的函数或者变量与外部冲突，对JQuery函数的扩展一般写在自执行匿名函数中

就拿上边2中的例子来做扩展，代码示例见下方：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script>

			(function($){
				$.fn.check=function(){
					this.attr("checked","checked");
				}
				$.fn.uncheck=function(){
					this.attr("checked");
				}
			})(jQuery)
		</script>
	</head>
	<body>
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		
		<script>
			$("[type='checkbox']").check();
		</script>
	</body>
</html>

执行结果与上一步一致；