标签：
jQuery插件机制
jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()和jQuery.extend()方法
jQuery.fn.extend()用于封装对象方法插件
jQuery.extend()用于封装全局函数的插件和选择器插件，同时也可扩展已有的Object对象。
jQuery.extend()
jQuery.extend(target,obj1...objN)
常用于设置插件方法的一系列默认参数
function foo(option){ option = jQuery.extend({ name : "bar", length : 5 },option);/*option是传递的参数*/
插件种类：
1.封装对象方法插件
2.封装全局函数的插件
3.选择器插件
（注：在插件中，this指向的是当前通过选择器获取到的jQuery对象，一般的方法那样，内部的this指向的是DOM元素）
例 以表格变化为例：
1 <div class="color"> 2 this is a test about font color! 3 </div> 4 <table> 5 <thead> 6 <tr> 7 <td></td> 8 <td>姓名</td> 9 <td>性别</td> 10 <td>站驻地</td> 11 </tr> 12 </thead> 13 <tbody> 14 <tr> 15 <td><input type="checkbox" name="" id="" class="name"></td> 16 <td>xx1</td> 17 <td>女</td> 18 <td>四川</td> 19 </tr> 20 <tr> 21 <td><input type="checkbox" name="" id="" class="name"></td> 22 <td>xx1</td> 23 <td>女</td> 24 <td>四川</td> 25 </tr> 26 <tr> 27 <td><input type="checkbox" name="" id="" class="name"></td> 28 <td>xx1</td> 29 <td>女</td> 30 <td>四川</td> 31 </tr> 32 <tr> 33 <td><input type="checkbox" name="" id="" class="name"></td> 34 <td>xx1</td> 35 <td>女</td> 36 <td>四川</td> 37 </tr> 38 <tr> 39 <td><input type="checkbox" name="" id="" class="name"></td> 40 <td>xx1</td> 41 <td>女</td> 42 <td>四川</td> 43 </tr> 44 </tbody> 45 </table> 46 </body>
js：
1 //表格插件的使用 2 ;(function($){ 3 $.fn.extend({ 4 "Bctest":function(option){ 5 option = $.extend({ 6 odd : "odd", 7 even : "even", 8 choose : "choose" 9 },option); 10 11 $("tbody>tr:odd",this).addClass(option.odd); 12 $("tbody>tr:even",this).addClass(option.even); 13 14 $("tbody>tr",this).click(function(){ 15 //1.实现复选框的选择 16 var ss = $(this).find("input").attr("checked"); 17 if(!ss){ 18 $(this).find("input").attr("checked","checked"); 19 $(this).addClass(option.choose); 20 }else{ 21 $(this).find("input").removeAttr("checked"); 22 $(this).removeClass(option.choose); 23 24 } 25 }); 26 return this; 27 28 } 29 }) 30 })(jQuery);
引用方式：
$(function(){ $("table").Bctest(); })
css样式：
1 .color{ 2 color:blue; 3 } 4 td{ 5 width:50px; 6 font-size:12px; 7 text-align:center; 8 } 9 10 .odd{ 11 background: #f1f1f1; 12 } 13 .even{ 14 background: #5f5f5f; 15 } 16 17 .choose{ background:#FF6500;color:#fff;}
标签：
原文地址：http://www.cnblogs.com/by-ni/p/4166157.html
