Share about jQuery plug-in examples

Classification of jquery plug-ins

jQueryThere are many plug-ins, including UI classes, Form validation, input classes, special effects classes,Ajax classes, sliding classes, navigation classes, tool classes, animation classes, etc.

jQuery plug-ins are mainly divided into three categories:

1、封装对象方法的插件：也就是基于某个DOM元素的jQuery对象，局部性
2、封装全局函数的插件：将独立的函数添加到jquery的命名空间之下。jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。
3、选择器插件：扩充自己喜欢的一些选择器。类似于.toggle()

Basic points of plug-ins

 1. 插件的文件名推荐为 jquery.[插件名].js，例如jquery.validate.js
 2. 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
 3. 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素
 4. 可以通过this.each来遍历所有元素
 5. 所有的方法或函数插件，都应当以分号结尾，否则压缩时可能出问题，有的为了更加稳妥些，在插件的开始处加上一个分号
 6. 插件应该返回一个jQuery对象，这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等
 7. 尽量利用闭包技巧历来避免变量名的冲突
 8. 引入的自定义插件必须在jQuery库后面

Plug-in development methods

jQuery There are three main methods of plug-in development:

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jquery ui的部件工厂方式创建

Usually we use the second method for simple plug-in development, and the first method is to add in the jQuery namespace A static method does not allow us to select a DOM element and then call the method. The third type is not commonly used and is more complicated.

The structure of the plug-in

When starting to write the jQuery plug-in, we need to understand the basic structure of the plug-in. All The jQuery plugins are declared as methods of the jQuery.fn object:

jQuery.fn.showPlugin = function () {
      //code here
};

We use the following code to use the plugin:

$("#plugin").showPlugin();

Here, I do $ is not used. This is to avoid naming conflicts. If you want to use $, you can encapsulate the plug-in code in a self-executing anonymous function as follows , and then pass in the parameters jQuery

(function($){
    jQuery.fn.showPlugin = function () {
        //code here
    };
})(jQUery);

$.extend

.extend() allows you to extend the base object using one or more objects , the way of expansion is to merge the objects on the right to the base object (the first object on the left) in sequence.

;(function($){
    $.extend({
        'nav' : function () {

        }
    })
})(jQuery);

We use this global method as follows:

$.nav();

Earlier (see: A brief analysis of the overall jQuery framework and implementation (Part 1)) we said, $.extend is global, and $.fn.extend is local. The reason why a semicolon is added in front is to prevent the js file introduced before from not adding points. The number

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

this refers to the collection returned by the jQuery selector. this in the plug-in has undergone some encapsulation processing, and this represents the jQuery object. There is no need to use $() for packaging again

Chain call

To make the plug-in implement chain call, you only need to returnthe object That's it:

$.fn.myPlugin = function() {
    this.css('color', 'red');
    return this.each(function() {
        //对每个元素进行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

Use return this.each(function () {} This realizes our chain operation.

Receive When calling multiple parameters

$.fn.myPlugin = function(options) {    //经常用options表示有多个参数。
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

, the font size will use the default value in the plug-in:

$('a').myPlugin({
    'color': '#2C9929'
});

The above is the detailed content of Share about jQuery plug-in examples. For more information, please follow other related articles on the PHP Chinese website!