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是最合适不过的了,插件只需要引用一次,即执行一次。