简述jQuery扩展机制（插件）

最新推荐文章于 2022-11-16 20:49:16 发布

肥胖的企鹅

最新推荐文章于 2022-11-16 20:49:16 发布

阅读量286

点赞数

分类专栏： JavaScript 文章标签： jQuery JavaScript

本文链接：https://blog.csdn.net/weixin_43457668/article/details/103073527

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

介绍

我们在使用jQuery库内函数时，有时会遇到库内函数不能满足需求的问题，此时就需要我们扩展jQuery库函数，即添加插件。一般来说，jQuery提供了两种扩展其库函数的方法，区别就在于它们分别扩展了JQ对象本身和JQ元素集，因此在调用方式上，前者可直接使用‘$’符号调用，而后者需要先创建JQ对象后再调用，下面分别来介绍这两种方式。

详析

1、jQuery.extend(object)

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

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插件机制</title>
		<script src="js/jquery-3.3.1.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插件，调用时需要先创建jQuery对象，然后才能调用相应的函数

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form>
			<input type="checkbox" name="num" value="1" />001
			<input type="checkbox" name="num" value="2" />002
			<input type="checkbox" name="num" value="3" />003
			<input type="checkbox" name="num" value="4" />004
			<input type="button" value="获取勾选项值" onclick="getvalue()" />
		</form>
		<script>
			jQuery.fn.extend({
				values:function(){
					var result="";
					this.each(function(){//此处this代指调用此方法的JQ对象
						if(this.checked){
							result=result+","+this.value;
						}
					});
					result = result==""?"":result.substring(1);
					return result;
				}
			});
			
			function getvalue(){
				var result = $("[name='num']").values();
				alert(result);
			}
		</script>
	</body>
</html>

肥胖的企鹅

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
简述jQuery扩展机制（插件）

介绍我们在使用jQuery库内函数时，有时会遇到库内函数不能满足需求的问题，此时就需要我们扩展jQuery库函数，即添加插件。一般来说，jQuery提供了两种扩展其库函数的方法，区别就在于它们分别扩展了JQ对象本身和JQ元素集，因此在调用方式上，前者可直接使用‘$’符号调用，而后者需要先创建JQ对象后再调用，下面分别来介绍这两种方式。详析1、jQuery.extend(object)...
复制链接

扫一扫