[聚合文章] 创建一个基本的jQuery插件【原创】

$('body').hide();

这是一个很简单的jquery代码，但是每当我们用$函数来选择元素，它就会返回给我们一个jquery对象，这个对象包括我们所有使用过的方法。jquery对象从$.fn对象中获取这些方法，所以我们如果想写自己的方法也需要包含这些方法。

比如我们写一个让宽度变为200px的方法：

$.fn.width200 = function(){
    this.css('width','200px');
};
$('body').width200();

这就算一个jquery最简单的插件了；但是典型jquery对象将包含对任何数量的DOM元素的引用，插件的制作有时还需要自定义一些参数，下面是自定义宽度的小插件，：

$.fn.widthDiy = function(option){
    var d = {
        width:'200'
    };
    var o = $.extend(d,option);
    return this.each(function(){
        this.css('width',o.width + 'px');
    })
};
$('body').widthDiy({
    width:'300'
});

这样一个基本的插件就成了，插件的封装有很多种，我在这里只说一些基础的理解，封装插件有利于提高我们写js的效率，避免代码的冗余。

转载时请注明出处及相应链接，本文永久地址：http://blog.it985.com/23047.html

微信打赏

支付宝打赏

感谢您对作者Jonny的打赏，我们会更加努力！    如果您想成为作者，请点我