编写第一个jQuery插件
示例插件：打算选用一个动态生成的无序列表，让列表的前10项可见，剩下的项处于隐藏状态，使用一个简单的显示/隐藏导航控制隐藏项是否可见。
1，插件的结构
插件的基本结构，所有的Jquery插件都声明为jQuery.fn对象的方法：
jQuery.fn.showhidePlugin = function(){
//插件相关代码
}
我们使用如下代码使用这个插件：
$('.selector').showhidePlugin();
为了和已有插件保持一致，我建议在保存插件时采用jQuery.pluginname.js这种命名格式。
注意：我没有使用$别名，而是实用jQuery以避免任何可能的命名冲突。如果更喜欢实用$而不是Jquery ,可以像下面这样把插件代码封装在一个自执行的匿名函数中，就能够安全地在插件内使用$别名，不会引起任何问题。
（function($){
jQuery.fn.showhidePlugin = function(){
//插件相关代码
}
}）（jQuery）;
2,设定插件选项
通过传递给插件方法一个options参数，我们就可以让插件支持设置选项。我们使用一个JSon对象作为插件的默认选项。
我们使用一个JSON对象作为插件的默认选项，这个插件有3个默认选项----numShown、showText和hideText。默认设置在插件内部初始化，运行时传递进来的用户选项会覆盖掉默认设置。
（function($){
jQuery.fn.showhidePlugin = function(options){
//设定默认值，用逗号分隔选项
var defaults = {
numShown:10,
showText:'Show More Links',
hideText:'Hide Links'
}
};
})(jQuery);
接下来，使用$.extend方法合并默认选项和用户选项。如果调用时提供了用户选项，它们将覆盖掉插件内部声明的默认选项。
.extend()允许你使用一个或多个对象扩展基准对象，扩展的方式是依序将右边的对象合并到基准对象
（function($){
jQuery.fn.showhidePlugin = function(options){
//设定默认值，用逗号分隔选项
var defaults = {
numShown:10,
showText:'Show More Links',
hideText:'Hide Links'
}
var options = $.extend(defaults,options);
};
}）(jQuery);
3,创建插件
接下来将混合使用jQuery脚本和Javascript原生脚本实现插件的主体功能。这个插件将适用于任何无序列表。我们使用numShown变量的值截断这个列表，然后添加隐藏和显示链接来切换隐藏项的显示状态。
（1）添加一个.each（）方法迭代选择器匹配的元素，并返回this对象。这一步非常重要，所有的插件都要有这一步才能正常工作，在一个无序列表上应用该插件时，.each方法就会遍历那个无序列表的所有项
(2)创建两个变量--o和obj. o引用options,obj引用$(this),有了这两个变量，后面引用起它们来就省很多事，变量obj中保存的是包裹着当前无序列表的jQuery对象
插件jquery.showhidePlugin.js完整代码：
1 /** 2 * Created by Administrator on 2017/7/14 0014. 3 */ 4 /*调用方式 5 $('.big-list').showhidePlugin({ 6 numShown:10, 7 showText:'显示更多的链接', 8 hideText:'隐藏部分链接' 9 }); 10 11 * */ 12 (function($){ 13 jQuery.fn.showhidePlugin = function(options){ 14 15 //设置默认值，用逗号分隔选项 16 var defaults = { 17 numShown:10, 18 showText:'show more links', 19 hideText:'Hide Links' 20 }; 21 22 var options = $.extend(defaults,options); 23 return this.each(function(){ 24 var o = options; 25 var obj = $(this); 26 //确定项数并计算被隐藏项的数目 27 var pLength = obj.children().length; //所有的链接个数 28 var numHidden = pLength-o.numShown; //需要隐藏的链接个数 29 var pList = obj.children(); 30 31 //设置显示/隐藏链接 32 var shLink = "<a href='#' class='view'>"+o.showText+"</a>"; 33 if(pLength>o.numShown){ //如果链接总数大于用户要设置显示的个数，---就把showText文字显示在列表上面 34 jQuery(shLink).insertBefore(obj); 35 } 36 37 //循环ul下的所有li 38 pList.each(function(index){ 39 if(index < o.numShown){ 40 jQuery(pList[index]).show(); 41 }else{ 42 //给所有隐藏的元素加上class--hidden 43 jQuery(pList[index]).hide(); 44 jQuery(pList[index]).addClass('hidden'); 45 } 46 }); 47 48 //切换文本 49 jQuery("a.view").live('click',function(e){ 50 if (jQuery(this).text()==o.showText){ 51 jQuery(this).text(o.hideText); 52 }else{ 53 jQuery(this).text(o.showText); 54 } 55 jQuery('.hidden').toggle(); //切换（隐藏/显示状态） 56 return false; //使用return false 避免触发click事件的默认行为（重定向） 57 }); 58 }); 59 } 60 })(jQuery);
插件调用示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery插件的编写</title> </head> <body> <ul class="big-list"> <li>Test1.</li> <li>Test2.</li> <li>Test3.</li> <li>Test4.</li> <li>Test5.</li> <li>Test6.</li> <li>Test7.</li> <li>Test8.</li> <li>Test9.</li> <li>Test10.</li> <li>Test11.</li> <li>Test12.</li> <li>Test13.</li> <li>Test14.</li> <li>Test15.</li> <li>Test16.</li> <li>Test17.</li> <li>Test18.</li> <li>Test19.</li> <li>Test20.</li> <li>Test21.</li> <li>Test22.</li> <li>Test23.</li> <li>Test24.</li> <li>Test25.</li> </ul> </body> <script src="jQuery/1.7.2/jquery.min.js"></script> <script src="js/jquery.showhidePlugin.js"></script> <script> $(function(){ $('.big-list').showhidePlugin({ numShown:10, showText:'显示更多的链接', hideText:'隐藏链接' }); }); </script> </html>
