jQuery两种插件机制

JAVAnuonuo

于 2020-07-31 11:28:44 发布

阅读量206

点赞数

本文链接：https://blog.csdn.net/weixin_46383723/article/details/107709264

版权

本文介绍了jQuery的两种插件机制，包括使用jQuery.extend()扩展jQuery全局函数，以及使用jQuery.fn.extend()来扩展jQuery元素集，实现自定义插件。通过这两种方式，开发者可以便捷地为jQuery增加新的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/jscript" 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(2,7);
			console.log(min);
			var max = $.max(3,6);
			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>
		<script>
			$.fn.extend({
				values: function() {//获取选中复选框value属性的属性值
					var result = "";
					this.each(function() {
						if(this.checked){
							result =result+ ","+this.value;
						}
					});
					if(result != ""){
						result = result.substr(1);
					}
					return result;
				}
			});
			$(function(){//调用时首先创建jQuery对象$("input[type=checkbox]")
				var result = $("input[type=checkbox]").values();
				console.log(result);
			});
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="1" checked="checked"/>足球
		<input type="checkbox" name="hobby" value="2"/>篮球
		<input type="checkbox" name="hobby" value="3" checked="checked"/>乒乓球
	</body>
</html>