总结jQuery插件机制

最新推荐文章于 2019-11-12 08:10:12 发布

我是真的囟

最新推荐文章于 2019-11-12 08:10:12 发布

阅读量155

点赞数 1

本文链接：https://blog.csdn.net/qq_42154576/article/details/90751259

版权

为了扩展jQuery库函数，jQuery提供了两种方式：

一、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>
	</head>
	<body>
		<script>
			jQuery.extend({
				max:function(a,b){
					return a>b?a:b;
				},
				min:function(a,b){
					return a>b?b:a;
				}
			});
			console.log($.max(1,3));
			console.log($.min(1,3));
		</script>
	</body>
</html>

输出结果

二、jQuery.fn.extend(object)：扩展 jQuery 元素集，主要用于扩展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>
			$.fn.extend({
				values:function(){
					var result="";
					this.each(function(){
						if(this.checked){
							result =result+","+this.value;
						}
					});
					if(result!=""){
						result=result.substr(1);
					}
					return result;
				}
			});
			$(function(){
				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>

输出结果

我是真的囟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
总结jQuery插件机制

为了扩展jQuery库函数，jQuery提供了两种方式：一、jQuery.extend(object)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数，调用时直接$.函数名(参数)，范例如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title...
复制链接

扫一扫