深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习
1、定义插件的方法
对象级别的插件扩展,即为jQuery类的实例增加方法,
调用:(选择器).函数名(参数);(‘#id’).myPlugin(options);
定义的方式:
1 2 3 4 5 6 7 8 9 10 11 12 13 | $.fn.extend({ "函数名" : function (自定义参数){ //这里写插件代码 } }); //或者是 $.fn.函数名 = function (options){ //这里写插件代码 } |
类级别的方法,就是扩展jQuery类本身的方法,为它增加新的方法,
调用:.函数名(arguments);.add(3,4);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $.extend({ "函数名" : function (自定义参数){ //这里写插件代码 } }); //或者是 $.函数名= function (自定义参数){ //这里写插件代码 } |
你会发现他们的区别仅仅是少了一个fn而已,而jQuery.fn = jQuery.prototype,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。
如果A.prototype = new B();就相当于A.prototype是B的实例,A可以使用B中的所有方法。
那么在我们这里,不就正是扩展了对象的方法么,使对象能够使用我们所定义的方法。
关于prototype,可以参考这篇文章:JS中的prototype
那么extend又是什么意思呢?在我们这里extend就只有一个参数,
12345"函数名:
function
(自定义参数){
//这里写插件代码
}
此时,我们的这个函数就被合并到jquery的全局对象中去,就相当于扩展了jQuery类的方法。
因为,extend是有多个参数的,extend的所用就是合并参数到一个新的参数中,例如
12345var
result=$.extend({},{name:
"Tom"
,age:21},{name:
"Jerry"
,sex:
"Boy"
});
//结果就是
result={name:
"Jerry"
,age:21,sex:
"Boy"
}
关于extend可以参考这篇文章:jQuery.extend 函数详解
以上还参考:jquery的extend和fn.extend
2、实例分析,定义一个带参数的插件。
一般我们都会在很多地方看到,不要js污染全局环境,其实也对,要不然你定义一个变量,在你引用别人的插件中也定义了,那就冲突了,这就涉及到了js作用域的问题,我们得“封装”作用域,于是我们知道一个函数的作用域仅仅在一个函数中,但函数执行完毕,变量也就会被注销。
于是这里我们得用到立即执行函数,用一个函数将我们定义的插件代码包裹起来,这样就形成了一个局部的作用域,从而不会影响到全局的环境,关于立即执行函数,可以参考这篇:js中(function(){…})()立即执行函数写法理解
那么,我们的写法将是:
1 2 3 4 5 6 7 8 9 10 11 | ( function ($){ $.fn.extend({ 函数 : function (options){ } }); })(jQuery); |
我想自定义一个弹出层插件,可以设置背景颜色,宽和高,不设置即为默认的。
首先,在html元素中,我想设置按钮点击,
1 2 | < a id="dialog">点击弹出层</ a > < div class="dialog"></ div > |
其实这里的div.dialog是可以动态创建的,在这里就没有。动态创建可参考:jQuery – 添加元素
1 | $( 'body' ).append($( '<div></div>' ).addClass( 'dialog' )); //后面有疑问 |
css样式当然最初是隐藏的
1 2 3 4 5 6 7 8 9 | .dialog{ width : 300px ; height : 200px ; background : green ; position : absolute ; left : 50% ; top : 30% ; margin-left : -150px ; display : none ; } |
最后就是定义插件的js
1 2 3 4 5 6 7 8 9 10 11 | ( function ($){ $.fn.extend({ dialog : function (options){ //$('body').append($('<div></div>').addClass('dialog')); //此处有疑问,我如果在这里动态创建元素后,为什么要点击2次才能看到效果?不理解,求告知。 var setting = $.extend({}, {background: 'green' , width:300, height:200}, options); return this .css({ 'width' :setting.width, 'height' :setting.height, 'background' :setting.background}).show( 'slow' ); } }); })(jQuery); |
这里的return this的作用是使我们定义的插件方法可以链式调用,也就是维护链接性。
插件内部的this指向的是jQuery对象,而非普通的DOM对象。因为DOM对象是没有css()方法的,这是jQuery对象的方法,那么,jQuery对象的写法不应该是(this)吗?在这里我们把this换成(this)一样可以用,关于$(this)和this的区别,可以参考:jQuery中this与$(this)的区别,但我还是不清楚这里用this和$(this)为什么是一样的?
最后调用初始化就可以了。
1 2 3 4 5 6 7 | $( '#dialog' ).click( function (){ $( '.dialog' ).dialog({ background: 'red' , width:500, height:100 }); }); |
效果可以查看代码演示,上面的疑问希望给出解释。
以上还参考:创建一个自定义 jQuery 插件
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析