jQuery插件机制

最新推荐文章于 2020-07-31 12:48:28 发布

liulu璐

最新推荐文章于 2020-07-31 12:48:28 发布

阅读量103

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43566612/article/details/107709701

版权

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

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

如下例子：

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

2.jQuery.fn.extend(object)：扩展 jQuery 元素集，主要用于扩展jQuery插件，调用时需要先创建jQuery对象，然后才能调用相应的函数

如下例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<input type="checkbox" name="hobby" id="1" value="1" checked="checked" />篮球
		<input type="checkbox" name="hobby" id="2" value="2" />乒乓球
		<input type="checkbox" name="hobby" id="3" value="3" />足球
		<script type="text/javascript">
		$.fn.extend({
			values:function(){
				var data="";
				this.each(function(){//此时this为$("[name='hobby']")
					if(this.checked){
						data=data+","+this.value;
					}
				});
				return data.substring(1);
			}
		});
		
		var result=$("[name='hobby']").values();
		console.log(result);
		</script>
	
	</body>
</html>

liulu璐

关注

0
点赞
踩
0

收藏

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

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

扫一扫