Home > Web Front-end > JS Tutorial > body text

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

不言
Release: 2018-08-15 10:33:04
Original
2586 people have browsed it

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');
}
Copy after login

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

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

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
    });
}
Copy after login

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

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template