jquery外掛的建立方法有哪些？ jquery外掛程式創建的方法

本篇文章帶給大家的內容是關於jquery外掛的創建方法有哪些？ jquery外掛創建的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一、jQuery外掛的建立可以有三種方法

1.透過$.extend()來擴充jQuery

2.透過$.fn 將新的方法

3.透過$.widget()應用jQuery UI的部件工廠方式創建

方法1太簡單，創建後透過$.myfunction()方式調用，不能對指定元素調用。

方法3相對於方法2太複雜。

方法2就是常用的建立jq外掛的方法。可以對指定元素進行操作。例如$('#title').myfunction();

二、jQuery外掛程式建立格式

$.fn.myfunction = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}

如果想要支援鍊式呼叫只需return一下即可。

$.fn.myfunction = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    return this.css('color', 'red');
}

三、讓jquery插件接受參數，使用$.extend方法

$.fn.myPlugin = function(options) {
    var defaults = {//设置默认值
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改，为了保持变量defaults的值不变应该使用以下代码
    //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

四、物件導向的jquery外掛程式開發

為了以後程式碼維護與可讀性我們可以進行物件導向的方法開發插件。

var Beautifier = function(ele, opt) {
    this.$element = ele,  //获取当前选中的jq对象。
    this.defaults = {
        'color': 'red',
        'fontSize': '12px'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize
        });
    }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
}

相關推薦：

jQuery簡單捲動外掛

jQuery建立外掛程式的程式碼分析_jquery

#詳解jQuery外掛程式開發方式

#10條建議幫助你建立更好的jQuery外掛_jquery

#

以上是jquery外掛的建立方法有哪些？ jquery外掛程式創建的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！