- 相关推荐
jQuery定义插件的方法
有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人，直到有一次公司里的技术交流，我才改变了自己对自己的看法。
扩展jquery的时候。最核心的方法是以下两种：
$.extend(object) 可以理解为jquery添加一个静态方法
$.fn.extend(object) 可以理解为jquery实例添加一个方法
$.extend(object)
例子：
/* $.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$.extend({ fun: function () { alert("执行方法一"); } });//定义$.fun();//调用$.fn.extentd(object)/* $.fn.extend 定义与调用* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */$.fn.extend({ fun: function () { alert("执行方法"); } });$(this).fun();//等同于$.fn.fun = function () { alert("执行方法三"); }$(this).fun();
定义jquery插件的基本结构
1． 定义作用域：
为插件定义一个私有作用域。外界代码不能直接访问插件内部。插件内部代码不受外界干扰，也不会污染到全局变量。
//step 定义JQuery的作用域(function ($) {})(jQuery);
2. 为插件添加扩展方法：
//step01 定义JQuery的作用域(function ($) { //step02 插件的扩展方法名称 $.fn.easySlider = function (options) { }})(jQuery);
3. 设置默认值：
//step 定义JQuery的作用域(function ($) { //step-a 插件的默认值属性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的扩展方法名称 $.fn.easySlider = function (options) { //step-b 合并用户自定义属性，默认属性 var options = $.extend(defaults, options); }})(jQuery);
其中：var options = $.extend(defaults, options)的含义了。表示 options 去覆盖了defaults的值，并把值赋给了options。
在插件环境中，就表示用户设置的值，覆盖了插件的默认值；如果用户没有设置默认值的属性，还是保留插件的默认值。
4. 支持jquery选择器：
//step 定义JQuery的作用域(function ($) { //step-a 插件的默认值属性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的扩展方法名称 $.fn.easySlider = function (options) { //step-b 合并用户自定义属性，默认属性 var options = $.extend(defaults, options); //step 支持JQuery选择器 this.each(function () { }); }})(jQuery);
5 ．支持JQuery的链接调用：
为了能达到链接调用的效果必须要把循环的每个元素return
//step 定义JQuery的作用域(function ($) { //step-a 插件的默认值属性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step 插件的扩展方法名称 $.fn.easySlider = function (options) { //step-b 合并用户自定义属性，默认属性 var options = $.extend(defaults, options); //step 支持JQuery选择器 //step 支持链式调用 return this.each(function () { }); }})(jQuery);
6. 插件里的方法：
在插件里定义的方法，外界不能直接调用，我在插件里定义的方法也没有污染外界环境。
//step01 定义JQuery的作用域(function ($) { //step03-a 插件的默认值属性 var defaults = { prevId: ‘prevBtn‘, prevText: ‘Previous‘, nextId: ‘nextBtn‘, nextText: ‘Next‘ //…… }; //step06-a 在插件里定义方法 var showLink = function (obj) { $(obj).append(function () { return "(" + $(obj).attr("href") + ")" }); } //step02 插件的扩展方法名称 $.fn.easySlider = function (options) { //step03-b 合并用户自定义属性，默认属性 var options = $.extend(defaults, options); //step4 支持JQuery选择器 //step5 支持链式调用 return this.each(function () { //step06-b 在插件里定义方法 showLink(this); }); }})(jQuery);
通过以上内容给大家介绍了jQuery定义插件的方法，希望大家喜欢。
【jQuery定义插件的方法】相关文章：
CAD出现形未定义,文字不显示的处理方法09-05
儿童社会工作的定义03-06
工程项目施工管理定义03-29
人的心理的本质和心理学定义06-07
盘点嵌入式名词简单的理解和定义01-30
也谈企业发展战略：战略的定义和价值04-10
跳绳的锻炼方法09-13
古琴的保养方法11-17
激励员工的方法09-03