jQuery—插件机制之两种扩展机制

最新推荐文章于 2021-07-24 17:05:21 发布

脊椎类哺乳动物

最新推荐文章于 2021-07-24 17:05:21 发布

阅读量168

点赞数

分类专栏：网页文章标签： jQuery 网页前端

本文链接：https://blog.csdn.net/Kiwi_no/article/details/103017770

版权

网页专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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

如下例子：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插件</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<script>
			
			//2
			var obj = {
				max:function(a,b){
					return a>b ? a:b;
				},
				min:function(a,b){
					return a>b ? b:a;
				}
			};
			jQuery.extend(obj);
			console.log($.max(234,123));    //结果为234
		</script>
		
		
	</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(){
				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>

console页面显示：

1，3

脊椎类哺乳动物

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery—插件机制之两种扩展机制

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

扫一扫