jqueryプラグインを作成するにはどのような方法がありますか? jqueryプラグインの作成方法

この記事では、jquery プラグインを作成する方法について説明します。 jqueryプラグインの作成方法は参考になると思います。

1. jQuery プラグインを作成するには 3 つの方法があります

1. $.extend() を使用して jQuery を拡張します

2. $.widget() を使用して新しいメソッドを追加します。 ) jQuery UI のウィジェット ファクトリ メソッドを作成する

メソッド 1 は、作成後に $.myfunction() を通じて呼び出されるため、指定された要素に対して呼び出すことができません。

方法 3 は方法 2 に比べて複雑すぎます。

方法 2 は、jq プラグインを作成するために一般的に使用される方法です。指定された要素を操作できます。例: $('#title').myfunction();

2. jQuery プラグイン作成形式

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

チェーン呼び出しをサポートしたい場合は、そのまま返します。

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

3. 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
    });
}

4. 将来のコードのメンテナンスと読みやすさを考慮して、オブジェクトを使用してプラグインを開発できます。指向のメソッド。

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 plugin_jquery

以上がjqueryプラグインを作成するにはどのような方法がありますか? jqueryプラグインの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。