自定义Jquery函数和函数回调

一:使用Jquery自定义函数

1、引入Jquery插件

   <script type="text/javascript" src="jquery-2.1.0.min.js"></script>

2、定义格式

开头:(function($) {

结尾:})(jQuery);

中间体:$.自定义函数名

例如:

//自定义Jquery函数

//开头:格式固定

(function($) {

/**

自定义函数名称

格式:$.自定义函数名称 = function(入参1,入参2 ...)

*/

$.test = function(type,options) {

console.log(type);

console.log(options);

}

//结尾:格式固定

})(jQuery);

3、自定义函数使用

使用格式: $.自定义函数名称(入参1,入参2 ... )

如:

$.test("测试自定义的Jquery函数",{"此参数尚未使用":"此参数尚未使用"});

4、该函数调用后控制台输出结果如下图所示

总结

说白了自定义Jquery函数和普通的函数是以 “ $ “开头,其它的功能与普通的函数区别不是很大。

二:函数回调

此次函数回调以上面的函数上进行封装和测试。

1、自定义一个回调函数

如:

//封装测试参数

var param ={

callFun:function(param1,param2,param3){

console.log(param1);

console.log(param2);

console.log(param3);

}

};

2、回调函数调用

//调用回调函数,实际调用上面的param.callFun 函数

//相当于执行 callFun(param1,param2,param3);

options.callFun.call(this,param1,param2,param3);

3、该函数调用后控制台输出结果如下图所示

三、完整代码

<!DOCTYPE HTML >
<html>
	<head>
		<title>自定义Jquery函数和函数回调</title>
		<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
		<script>
		
		//封装测试参数
		var param ={
			callFun:function(param1,param2,param3){
				console.log(param1);
				console.log(param2);
				console.log(param3);
			}
		};
		
		//自定义Jquery函数
		//开头:格式固定
		(function($) { 
			
			/**
			自定义函数名称
			格式:$.自定义函数名称 = function(入参1,入参2 ...)
			*/
			$.test = function(title,options) {
				console.log(title);
				console.log(options);
				//回调函数测试
				if(title == "函数回调测试"){
					callFunTest(options);
				}
			}
			//函数回调测试
			function callFunTest(options){
				//模拟返回测试数据
				var param1 ="param1";
				var param2 = 123;
				var param3 = {"测试JSON格式数据":"测试JSON格式数据"}
				//调用回调函数,实际调用上面的param.callFun 函数
				//相当于执行 callFun(param1,param2,param3);
				options.callFun.call(this,param1,param2,param3);
			}
			
		//结尾:格式固定
		})(jQuery);
		
		//自定义Jquery函数测试
		function testFunction(){
			$.test("测试自定义的Jquery函数",{"此参数尚未使用":"此参数尚未使用"});
		}
		
		//函数回调测试
		function callBackFunction(){
			$.test("函数回调测试",param);
		}
		
		</script>
	</head>
	<body>
	<!-- 点击DIV 触发测试事件 -->
	<div style ="background:#CCC;width:200px;height:200px;line-height:200px;text-align:center"
		id ="div"	onclick ="testFunction()">自定义Jquery函数测试</div>
	<div style ="background:#666;width:200px;height:200px;line-height:200px;text-align:center"
			onclick ="callBackFunction()">函数回调测试</div>
	</body>
</html>

更多精彩技术分享请浏览本人博客:https://blog.csdn.net/wohiusdashi

猜你喜欢

转载自blog.csdn.net/wohiusdashi/article/details/84026738
今日推荐