JavajQuery扩展机制

最新推荐文章于 2022-03-24 22:18:44 发布

Happy_syy

最新推荐文章于 2022-03-24 22:18:44 发布

阅读量167

点赞数

本文链接：https://blog.csdn.net/Happy_syy/article/details/103101106

版权

1.为了扩展jQuery库函数，jQuery提供了两种方式：
jQuery.extend(object)：扩展jQuery对象本身，主要是用来扩展jQuery全局函数，调用时直接$.函数名(参数)，如下例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>插件机制</title>
		<script src="js/jquery-3.3.1.js"></script>
		<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);
			var max = $.max(1,2);
			console.log(max);
		</script>
	</head>
	<body>
	</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>

3.为了避免自己定义的函数或者变量与外部冲突，对JQuery函数的扩展一般写在自执行匿名函数中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插件机制</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript">
			(function($) {
				$.min = function(a, b) {
					return a < b ? a : b;
				}
				$.max = function(a, b) {
					return a > b ? a : b;
				}
			})(jQuery)
			var min = $.min(1, 2);
			console.log(min);
			var max = $.max(1, 2);
			console.log(max);
		</script>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插件机制</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="checkbox" id="hobby" />足球 <input type="checkbox" id="hobby" />篮球
		<script type="text/javascript">
			(function($) {
				$.fn.check=function() {
					return this.each(function() {
						this.checked = true;
					});
				}
				$.fn.uncheck=function() {
					return this.each(function() {
						this.checked = false;
					});
				}
			})(jQuery)
			$("input[id=hobby]").check();
		</script>
	</body>
</html>