jQuery插件开发初探-白红宇

最简单的插件

$.fn.changeStyle = function (colorStr) {    $(this).css('color',colorStr);}

应用如下：

jquery插件开发

Hello jQuery!

但是如果想连续使用，就不好用了，比如：

jquery插件开发

Hello jQuery!

这里的设置字体大小就没有效果了。

需要简单处理一下上面的拓展程序。

$.fn.changeStyle = function (colorStr) {    this.css('color',colorStr);    return this;}

加上return this;就可以了。

进一步扩展

(function ($) {    $.fn.changeStyle = function (colorStr) {        this.css('color',colorStr);        return this;    }}(jQuery));

这样处理会更加安全，防止被污染

支持更多参数

(function ($) {    $.fn.changeStyle = function (colorStr,fontSize) {        this.css('color',colorStr).css('font-size',fontSize);        return this;    }}(jQuery));

这里传递了两个参数

jquery插件开发

Hello jQuery!

灵活处理参数

(function ($) {    $.fn.changeStyle = function (option) {        this.css('color',option.colorStr).css('font-size',option.fontSize);        return this;    }}(jQuery));

这里用json对象传递参数,更加灵活。

jquery插件开发

Hello jQuery!

支持默认参数处理

(function ($) {    $.fn.changeStyle = function (option) {        var defaultSetting = {colorStr:'blue',fontSize:'12px'};        var setting        = $.extend(defaultSetting,option);        this.css('color',setting.colorStr).css('font-size',setting.fontSize);        return this;    }}(jQuery));

这里会合并给定的参数和默认的参数,

如果只传一个参数，就会启用默认的参数。

jquery插件开发

Hello jQuery!

后记

也可以这样处理

(function ($) {    $.fn.extend({        changeStyle:function (option) {            var defaultSetting = {colorStr:'blue',fontSize:'12px'};            var setting        = $.extend(defaultSetting,option);            this.css('color',setting.colorStr).css('font-size',setting.fontSize);            return this;        }    });}(jQuery));

`$.fn $.fn.extend $.extend 的理解`

(function ($) {    $.fn.extend({        changeStyle: function (option) {            var defaultSetting = {colorStr: 'blue', fontSize: '12px'};            var setting = $.extend(defaultSetting, option);            this.css('color', setting.colorStr).css('font-size', setting.fontSize);            return this;        }    });    // 静态方法，直接通过$调用，不可以通过元素调用    $.extend({        min: function (a, b) {            return a < b ? a : b;        },        max: function (a, b) {            return a > b ? a : b;        }    });    // 可以通过元素调用    $.fn.extend({        min: function (a, b) {            return a < b ? a : b;        },        max: function (a, b) {            return a > b ? a : b;        }    });}(jQuery));

调用如下，

jquery插件开发

Hello jQuery!

1. $.fn 和 $.fn.extend 都是针对成员进行扩展的，$.extend扩展的是静态方法。2. jQuery.fn.extend拓展的方法，你得用在jQuery对象上面才行啊！3. jQuery.extend()，是扩展的jQuery这个类。本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/6305984.html，如需转载请自行联系原作者