jQuery 对象方法
$(“a”).css(“color”, “red”);
当使用 $ 选择元素的时候，它会返回一个 jQuery 对象，这个对象中包含了你一直使用的方法（比如：.css()，.click()等）。这个 jQuery 对象是从 $.fn 对象中得到的这些方法。$.fn 对象包含了 jQuery 对象的所有方法，如果想编写我们自己的方法，也要将方法定义在 $.fn 对象里面。使用这种方式编写插件，即 jQuery 类的实例将会拥有此功能。为什么会有这种效果？简单看下源码
jQuery.fn = jQuery.prototype ={
init: function(selector, context){
//do something…
};
从源码可知，当使用 $.fn 的方式编写插件时，就是在 jQuery 的原型中绑定新的方法，斯所以根据原型的特性，新创建的 jQuery 对象自然会拥有新绑定的方法。
简单插件
目的：改变 a 标签的字体颜色做法：创建名为 greenify 的方法，将其加在 $.fn 里面。如此一来，greenify 方法适用于所有的 jQuery 对象了
<html>
<head>
<title>Title</title>
<script type=”text/javascript” src=”../../js/jQuery-1.8.0.min.js”></script>
<script type=”text/javascript”>
// 这里使用 $ 与 jQuery 都可以
$.fn.greenify = function () {
/* 这里使用 this 和 $(this)都可以 */
this.css(“color”, “red”);
};
$(function () {
//$(“a”)即 jQuery 实例化对象
$(“a”).greenify();
});
</script>
</head>
<body>
<a href=”#”>Click Me!!!</a>
<a href=”#”>Cover Me!!!</a>
</body>
</html>
$.fn 还有另外一种写法 $.fn.extend({})
jQuery.fn.extend({
greenify: function () {
$(this).css(“color”, “red”);
}
});
$(function () {
$(“a”).greenify();
});
链式写法
jQuery.fn.extend({
greenify: function () {
$(this).css(“color”, “red”);
// 在结尾处返回 this
return this;
}
});
$(function () {
$(“a”).greenify().addClass(“greenified”);
});
链式编程的好处就是当调用完一个方法后，可以在后面继续调用该对象的其他方法。
$ 的别名保护
$ 在 JavaScript 库中使用是非常广泛的，如果你正在使用的其他 JavaScript 类库中也使用到了 $，并且你也使用了 jQuery，那么你不得不使用 jQuery.noConflict()来解除冲突。显然这会破坏我们的插件，因为它是在假设 $ 是 jQuery 函数的别名（实际上 $ 本来就是 jQuery 的别名）如果既想使用其他插件，也要使用 jQuery 的 $ 别名，我们需要将代码放进立即执行函数（文章结尾会对其简单解释）中，然后将 jQuery 作为实参传递进去，$ 作为形参接收。
(function ( $) {
$.fn.greenify = function() {
this.css(“color”, “green”);
return this;
};
}(jQuery));
由于 window，document 都是全局作用域的，而将其传入函数内部后，其在内部是作为局部变量存在的，这样做可以提高性能，减少作用域的查找时间，如果在函数内部多次调用 window、document，这是很高效的做法。
(function ( _window, _document) {
$.fn.greenify = function() {
this.css(“color”, “green”);
return this;
};
}(window, document));
另外，存储私有变量也是使用立即执行函数的主要目的，假如想要存储一个默认的颜色，就可以使用一个私有变量进行存储。
(function ($) {
var defaultColor = “pink”;
$.fn.extend({
setColor:function () {
$(this).css(“color”, defaultColor);
return $(this);
}
})
})(jQuery);
$(function () {
// 所有 div 的 text 都会变成粉色
$(“div”).setColor();
});
；分号的使用
通常在编写插件时，会在在立即执行函数前加入一个分号
;(function($){
//do something…
})(jQuery);
作用：防止多个文件压缩合并后，前一个文件最后一行语句没加分号，而引起合并后的语法错误。如果前面已经加了分号，此时就会多出来一个分号，但这样是不会报错的。即不怕多，就怕少。
undefined 解决兼容性问题
;(function($, undefined){
//do something…
})(jQuery)
上面代码的 undefined 参数略显多余，此参数是为了解决 undefined 在老一辈的浏览器（IE5）可以被赋值的问题，全局的 undefined 有可能会被其他函数覆盖。
var undefined = 99;
alert(undefined);
以上代码如果在 IE5 运行，可以弹出 99，而不是 undefined，如果是这样的话，全局的 undefined 就有被其他函数覆盖的危险；但以上代码在 chrome 运行，会弹出 undefined。既然是插件就要考虑兼容性，所以通过在匿名函数中多定义一个 undefined 的形参，由于只传入了一个实参 jQuery，从而可以保证 undefined 形参未被赋值，从而最终是我们想要的 undefined 的值，什么是我们想要的 undefined？即，undefined 没有被赋值，undefined 就是 undefined。
最大限度的减少插件的空间
当使用 $.fn 创建插件时，尽量减少空间的占用，能使用参数进行区分的，就不要多定义一个方法，这样可以降低插件被覆盖的可能性。
反例
(function( $) {
$.fn.TurnOnLight= function() {
// Turn on
};
$.fn.TurnOffLight = function() {
// Turn off
};
}(jQuery));
正例
(function( $) {
$.fn.light = function(action) {
if (action === “turnOn”) {
// Turn on light code.
}
if (action === “turnOff”) {
// Turn off light code.
}
};
}(jQuery));
使用参数选项
当插件越来越复杂时，通过接收参数选项的方式来自定义插件是一种很好的做法。
<html>
<head>
<title>Title</title>
<script type=”text/javascript” src=”../../js/jquery-1.8.0.min.js”></script>
<script type=”text/javascript”>
(function ($) {
$.fn.extend({
changeColor:function (options) {
var defaultColor = $.extend({
color: “red”,
backgroundColor:”skyblue”
}, options);
return $(this).css({
color:defaultColor.color,
backgroundColor:defaultColor.backgroundColor
});
}
});
})(jQuery);
$(function () {
$(“div”).changeColor();
/*$(“div”).changeColor({
color:”pink”,
backgroundColor:”yellow”
});*/
});
</script>
</head>
<body>
<div>JavaScript</div>
<div>Jquery</div>
</body>
</html>
调用 changeColor 不传递任何参数，文本颜色默认红色，背景默认天蓝色；反之按照传入参数渲染颜色。默认的颜色被 $.extned()覆盖为其他颜色。
$.extend({
color: “red”,
backgroundColor:”skyblue”
}, options)
以上代码执行结果：options 如果有值，那么它将覆盖第一个参数并返回 options；如果为 undefined 则直接返回第一个参数。
简单解释立即执行函数（IIFE）
立即执行函数 (（Immediately-Invoked Function Expression）也称为自调用函数，函数定义好后会自动执行。(function(){}) 表示一个匿名函数，后面紧跟一个()，表示立即执行函数。
(function(){
console.log(“ 我会立即执行 ”);
})()
(function(param){
console.log(param); // 我会立刻执行
})(“ 我会立刻执行 ”);
优点：不会产生产生全局变量，不会造成变量污染。缺点：只能执行一次，没法重复执行。在编写插件时，使用 IIFE 是最合适不过的了，插件只需要引用一次，即执行一次。