有时候你想复用同一个代码块，比如：你想写一个方法，你可以用这个方法来选择一系列的选择操作，所以你想创建一个插入。jquery是如何工作的：jquery对象方法（jqueryObjectMethods）在编写我们自己的插件之前，我们必须了解下面代码的工作原理：$("a").css("color","re??d");这是一个整洁有用的jquery片段，但是您知道jquery在幕后是如何工作的吗？当您仅使用“$”函数选择元素时，它会返回一个jquery对象。这个对象包含了jQuery可以调用的所有方法，比如你肯定用过这些（.css(),.click()...等）。这些方法适用于您使用jQuery选择器选择的所有元素。jQuery对象的这些方法是从$.fn对象继承而来的。$.fn对象包含所有jquery对象方法。如果要将自己的方法添加到jquery中，则需要在$.fn上编写自定义方法。基本插件制作方法：比如我们要做一个greenify插件，用这个插件把一个dom元素的文本设置为绿色。所以我们在$.fn中添加一个名为greenify的方法，这与任何其他jQuery对象方法相同。$.fn.greenify=function(){this.css("color","green");};$("a").greenify();//使所有链接变为绿色。注意：我们在这里使用的.css()称为this而不是$(this)对象。这是因为我们的grenify方法是在与.css()方法相同的对象上调用的，而这代表一个jQuery对象。启用链接：这一步做了两件事来帮助我们的插件被实际使用。***:链式操作是jquery的一个特性，你可以在选中的元素后添加5或6个操作。这是通过再次从jquery对象方法返回原始jquery对象来完成的，使我们的方法能够链式操作只需要添加一行：$.fn.greenify=function(){this.css("color","green");returnthis;//启用链接}$("a").greenify().addClass("greenified");这里我们可以在a标签的文字变绿后给a标签添加class。$别名的保护增加了范围。第二：$符号在javascript库或框架中非常流行。如果项目中同时使用了其他库和jquery，则不能让jquery使用$符号。使用jquery.noConflict()方法释放$符号，但是我们的插件应该使用$符号来构建jquery方法。但是我们仍然需要继续使用$符号来与其他插件一起工作。我们必须将我们的代码放在匿名函数表达式中（以防止$被污染）。然后我们传入jquery作为参数，对应的形参使用$符号。(function($){$.fn.greenify=function(){this.css("color","green");returnthis;};}(jQuery));还有，我们用一个匿名函数表达式把变量私有化，加上我们要使用不同的颜色，我们可以使用变量缓存。(function($){varshade="#556b2f";$.fn.greenify=function(){this.css("color",shade);returnthis;};}(jQuery));useonlyone$.fnTobuildplugins:usingonlyone$.fnw??illreducethechanceofyourpluginmethodbeingoverride,下面的例子不推荐:(function($){//badexample$.fn.openPopup=function(){//Openpopupcode.};$.fn.closePopup=function(){//Closepopupcode.};}(jQuery));最好的做法是只使用一个$.fn，然后在内部判断不同的行为，进行不同的操作：(function($){$.fn.popup=function(action){if(action==="open"){//Openpopupcode.}if(action==="close"){//Closepopupcode.}};}(jQuery));使用each()方法遍历(each()方法)典型的jQuery方法包含任意数量的DOM元素，这就是jQuery对象被称为对象集合的原因。如果你想对一定数量的元素执行任何操作，你必须使用每个元素来遍历dom树。（操作包括获取元素的属性get属性，以及元素的位置）。$.fn.myNewPlugin=function(){returnthis.each(function(){//遍历元素然后dosomething});};注意：我们返回的是.each()的结果替换returnthis。因为each()已经是可链接的，所以each在内部已经返回了我们需要返回的this。到目前为止，这就是我们应用链接***的方式。参数的配置和使用：当你的插件越来越复杂的时候，最好的办法就是让你的插件接收参数，这样的插件是可以自定义的。最简单的方法是用对象字面量打包许多参数。现在让我们的greenify插件接收一些参数：(function($){$.fn.greenify=function(options){//这里是配置的默认参数varsettings=$.extend({color:"#556b2f",backgroundColor:"white"},options);//Greenify方法根据默认参数设置returnthis.css({color:settings.color,backgroundColor:settings.backgroundColor});};}(jQuery));实际调用时传入参数：$("div").greenify({color:"orange"});默认颜色颜色设置“#556b2f”将被颜色“橙色”覆盖。把它们放在一起：下面的插件使用了我们上面讨论的技术：(function($){$.fn.showLinkLocation=function(){this.filter("a").each(function(){varlink=$(this);link.append("("+link.attr("href")+")");});returnthis;};}(jQuery));//实际调用$("a").showLinkLocation();本插件的工作方式是：将a标签的href属性中的值添加到a标签的内部
