jQuery插件机制

最新推荐文章于 2022-11-15 14:39:39 发布

QBjie

最新推荐文章于 2022-11-15 14:39:39 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/QBjie/article/details/107709648

版权

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	</head>
	<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);
	</script>
</html>

结果为：1

2.jQuery.fn.extend(object)：扩展 jQuery 元素集，主要用于扩展jQuery插件，调用时需要用jQuery对象调用相应的函数，例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></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>
	<script>
		$.fn.extend({
			values:function(){
				var result = "";
				this.each(function(){//此this为jQuery对象
					if(this.checked){//此this为Dom对象
						result = result+","+this.value;
					}
				});
				return result.substring(1);
			}
		})
		
		var result = $("[name='hobby']").values();
		console.log(result);
	</script>
</html>

结果为：1，3

QBjie

关注

0
点赞
踩
0

收藏

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

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

扫一扫