标签：style class blog code java http
jQuery插件分类3中：
1.封装对象方法的插件。
2.封装全局函数的插件。
3.选择器插件。
jQuery插件机制
jQuery提供了两个用于扩展jQuery功能的方法：
1.jQuery.fn.extend()方法——封装对象方法。
代码如下：
;(function($){
////这里写插件代码
})(jQuery);
2.jQuery.extend()方法——封装全局函数、选择器插件，还有一个很强大的功能，用于扩展已有的Object对象。
代码如下：
jQuery.extend(target.obj1,......[objN]);////用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。
表格隔行变色示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .odd { background-color: Red; } .even { background-color: Green; } .selected { background-color: Blue; } </style> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> ; (function ($) { $.fn.extend({ "alterBgClass": function (options) { ////设置默认值 options = jQuery.extend({ odd:"odd", even:"even", selected:"selected" },options); $("tbody>tr:odd",this).addClass(options.odd); $("tbody>tr:even", this).addClass(options.even); $("tbody>tr",this).click(function () { ////判断当前checkbox是否选中 var hasSelected=$(this).hasClass(options.selected); ////选中，则移除Class且checkbox不选中，否则,添加Class且checkbox选中 $(this)[hasSelected ? "removeClass" : "addClass"](options.selected).find(":checkbox").attr("checked", !hasSelected); }); ////如果默认情况下选中，则添加Class $("tbody>tr:has(td:has(:checkbox:checked))", this).addClass(options.selected); return this; } }); })(jQuery); $(function () { $("#table1").alterBgClass(); }); </script> </head> <body> <table id="table1" border="1"> <tr> <td> <input id="Checkbox1" type="checkbox" checked="checked" /> </td> <td> 123 </td> <td> 456 </td> </tr> <tr> <td> <input id="Checkbox2" type="checkbox" /> </td> <td> 789 </td> <td> 135 </td> </tr> <tr> <td> <input id="Checkbox3" type="checkbox" /> </td> <td> 789 </td> <td> 135 </td> </tr> <tr> <td> <input id="Checkbox4" type="checkbox" checked="checked" /> </td> <td> 789 </td> <td> 135 </td> </tr> </table> </body> </html>
注：以上内容摘自——《锋利的jQuery》第二版
标签：style class blog code java http
原文地址：http://www.cnblogs.com/zhang-lei/p/3787239.html
