jQuery插件写法

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>