What are the methods to create jquery plug-in? How to create jquery plug-in

What this article brings to you is what are the methods for creating jquery plug-ins? The method of creating jquery plug-in has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. There are three ways to create a jQuery plug-in

1. Extend jQuery through $.extend()

2. Add new ones to jQuery through $.fn Method

3. Use jQuery UI's component factory method to create through $.widget()

Method 1 is too simple. It is called through $.myfunction() after creation and cannot be called on the specified element. .

Method 3 is too complicated compared to method 2.

Method 2 is the commonly used method to create jq plug-ins. Can operate on specified elements. For example $('#title').myfunction();

2. jQuery plug-in creation format

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

If you want to support chain calls, just return it.

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

3. Let the jquery plug-in accept parameters and use the $.extend method

$.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. Object-oriented jquery plug-in development

For future code maintenance and readability, we Plug-ins can be developed using an object-oriented approach.

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();
}

Related recommendations:

jQuery simple scrolling plug-in

Code analysis of jQuery creation plug-in_jquery

Detailed explanation of jQuery plug-in development methods

10 suggestions to help you create better jQuery plug-ins_jquery

The above is the detailed content of What are the methods to create jquery plug-in? How to create jquery plug-in. For more information, please follow other related articles on the PHP Chinese website!