编写一个简单的 jQuery 插件（模板）

原创于 2012-10-22 16:16:31 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #conflict #javascript

JS/jQuery 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个使用jQuery开发的插件示例，展示了如何通过匿名函数避免冲突、如何为jQuery对象添加自定义方法，并提供了插件的基本结构代码。

//You need an anonymous function to wrap around your function to avoid conflict
(function($){

    //Attach this new method to jQuery
    $.fn.extend({

        //This is where you write your plugin's name
        pluginname: function() {

            //options
            var defaults = {
                option1: "default_value"
            }

            var options = $.extend(defaults, options);

            //a public method
            this.methodName: function () {
                //call this method via $.pluginname().methodName();
            }

            //Iterate over the current set of matched elements
            return this.each(function() {

                var o = options;

                //code to be inserted here

            });
        }
    });

//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )      
})(jQuery);