jQuery插件写法

浏览数：41 / 时间：2015年06月09日

jQuery核心的方法有两个：

1、$.extend(object)可以理解为jQuery添加一个静态方法。
2、$.fn.extend(object)可以理解为jQuery实例添加一个方法。

基本的使用

$.extend({
        fun1: function() {
            alert(11);
        }
    })
    $.fun1();

    $.fn.extend({
        fun2: function() {
            alert(22);
        }
    })
    $(this).fun2();
    //等同于
    $.fn.fun3 = function() {
        alert(33);
    }
    $(this).fun3();

jQuery(function() {})与(function($) {})(jQuery)的区别

1、jQuery(function() {})相当于$(document).ready(function() {})当dom元素加载完成执行的方法

2、(function($) {})(jQuery)相当于

var fun = function($) {};
fun(jQuery);

定义了一个匿名函数，其中jQuery代表了这个函数实参。通常用在jQuery插件开发中，起到了定义插件的私有域作用。

<div id="link"><a href="#" >jQuery</a></div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
//step01 定义JQuery的作用域
(function($) {
    var defaults = {   //step01 定义JQuery的作用域
        animatePadding: 20,
        hoverColor: "#f90"
    };
//在插件里定义方法
    var showLink = function(obj) {
        $(obj).append("2222");
    }

    //step02 插件的扩展方法名称
    $.fn.paddingSlide = function(options) {
        var options = $.extend(defaults, options);//step03-b 合并用户自定义属性，默认属性
        //step4 支持JQuery选择器$(this) this
        //step5 支持链式调用return 这样的定义才能支持链接调用。比如支持这样的调用：$("#fixed-floor").paddingSlide().css(‘‘, ‘‘);
        return this.each(function() {//this-->jquery对象 $(this)用于dom对象，
            var obj = $(this);
            var item = $("a", obj);
            item.hover(function() {
                $(this).css("color", options.hoverColor);
                $(this).stop().animate({paddingLeft: options.animatePadding}, 500);
                showLink(this);
            },function() {
                $(this).css("color", "");
                $(this).stop().animate({paddingLeft: 0}, 500);
            });

        })
    };
})(jQuery);

$(function() {
    $("#link").paddingSlide();
})
</script>