一:使用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>