jQuery对象与元素集扩展-优快云博客

本文链接：https://blog.youkuaiyun.com/faithinmyheart/article/details/103097527

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

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

2.jQuery.fn.extend(object)：扩展 jQuery 元素集，主要用于扩展jQuery插件，调用时需要先创建jQuery对象，然后才能调用相应的函数，这个方法就想dom对象调用方法一样(本人理解)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<form>
			<input type="checkbox" name="hobby" value="1" />足球
			<input type="checkbox" name="hobby" value="2" />网球
			<input type="checkbox" name="hobby" value="3" />蓝球
			<input type="checkbox" name="hobby" value="4" />羽毛球
			<input type="button" value="选中的值" />
		</form>
		<script>
			jQuery.fn.extend({
				values:function(){
					var r="";
					this.each(function(){
						if(this.checked){
							r=r+","+this.value;
							
						}
						
					});
					r=r==""?"":r.substring(1);
					return r;
				}
			})
			$("input[value='选中的值']").bind("click",function(){
				console.log($("input[name='hobby']").values());
			});
		</script>
	</body>
</html>

jQuery中的扩展机制