自定义Jquery函数和函数回调

╰半橙微兮° 2022-04-17 04:48 234阅读 0赞

# 一：使用Jquery自定义函数 #

## 1、引入Jquery插件 ##

## 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、该函数调用后控制台输出结果如下图所示 ##

![20181113121004653.png][]

# 总结 #

**说白了自定义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、该函数调用后控制台输出结果如下图所示 ##

![2018111312083883.png][]

# 三、完整代码 #

<!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 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][https_blog.csdn.net_wohiusdashi] ###

[20181113121004653.png]: /images/20220417/0652cde8d33a4a489317802601305999.png
[2018111312083883.png]: /images/20220417/91547a56e67449d69a7732e967ba32fd.png
[https_blog.csdn.net_wohiusdashi]: https://blog.csdn.net/wohiusdashi