jquery插件的编写

最新推荐文章于 2019-02-28 09:33:48 发布

影天

最新推荐文章于 2019-02-28 09:33:48 发布

阅读量728

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/xwlyun/article/details/44018241

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

以下是一个编写基于jquery的插件实例：

<!DOCTYPE html>
<html>
<head>
	<title>jquery自定义插件</title>
	<script type="text/javascript" src="../js/jquery_172.js"></script>
</head>
<body>

<div>
	<script type="text/javascript">
	
	console.log("****** 一般形式的function定义及调用 ******");
	// 定义
	function func1(arg){
		console.log(arg);
	}
	// 调用
	func1("hi,func demo1")

	console.log("****** 匿名函数的定义及调用 ******");
	// 定义
	var afunc1 = function(arg){
		console.log(arg);
	}
	// 调用
	afunc1("hi,anonymous func");

	console.log("****** 匿名函数的定义，同时调用 ******");
	(function (arg){
		console.log(arg);
	})("hi,go anonymous func");	// 后接参数，会直接调用

	console.log("****** 匿名函数达成闭包效果 ******");
	var afunc2 = function(index){
		return function (){
			// index被操作，afunc2未被销毁，所以index会被记录
			console.log(index++);
		}
	}(1);
	afunc2();	// 1
	afunc2();	// 2

	// 书写jquery插件时，常用的$.extend
	(function ($){
		// 自定义一个jquery全局function
		$.extend({
			hi: function(){
				console.log("hi");
			}
		});

		// 将hi方法合并到jquery的对象中去
		$.fn.extend({
			hi: function(){
				console.log($(this).html());
			}
		});
	})(jQuery);

	// 一个插件例子
	var data1 = "[{id:'001',name:'xwl',age:20},{id:'002',name:'will',age:22}]";
	var data2 = "[{id:'003',name:'lwx',age:21},{id:'004',name:'ci',age:8}]";
	(function ($){

		// 默认设置
		var defaults = {
			title: 'default title',
		};

		// 为jquery对象新增mytable方法
		$.fn.mytable = function (options){
			options = $.extend(defaults,options);	// 合并设置
			var data = eval("("+options.data+")");
			$(this).append("<table width='100%' border='0' cellspacing='0' cellpadding='0'></table>");
			$("table",this).append("<tr><td colspan='3'>"+options.title+"</td></tr>");
			var o = this;
			$.each(data,function (k,v){	// 遍历传入的data数组
				$("table",o).append("<tr><td>"+v.id+"</td><td>"+v.name+"</td><td>"+v.age+"</td></tr>");
			});
			return this;
		}
	})(jQuery);

	$(document).ready(function(){

		// 调用jquery对象上的自定义方法
		$("#div1").mytable(
			{title: 'hi,mytable title',data: data1}
			);

		console.log("****** 调用jquery自定义方法 ******");
		$.hi();

		console.log("****** 调用jquery对象上的自定义方法 ******");
		$("#div1").hi();

	});

	</script>

	<div id="div1"></div>
	<div id="div2"></div>

</div>

</body>
</script>