Jquery 插件入门
网上一搜各种插件，什么文件上传，图片浏览 ，Autocomplete等
这些插件，源代码，新手看起来是很吃力的，当然我也是新手，我开始改AutoComplete这个插件一点点，却真不知道如何开始，后面就用Firefox的fireDebug慢慢看。
我也不是专门做前端的，但是总得了解，基本的使用还是得会。
今天，来总结下，最近看的插件的基础知识，这里算个入门，希望能帮到新手党们。
下面是2个非常重要的扩展函数。
$.extend and $.fn.extend
$.extend(object) 可以理解为JQuery 添加一个静态方法。
$.fn.extend(object) 可以理解为JQuery实例添加一个方法。
基本的定义与调用：
/* $.extend 定义与调用 */ $.extend({ fun1: function () { alert("执行方法一"); } }); $.fun1(); /* $.fn.extend 定义与调用 */ $.fn.extend({ fun2: function () { alert("执行方法2"); } }); $(this).fun2(); //等同于 $.fn.fun3 = function () { alert("执行方法三"); } $(this).fun3();
$.extend(target, [object1], [objectN]) 还有个用法,就是合并到第一个object.
该方法主要用于合并两个或更多对象的内容(属性)到第一个对象，并返回合并后的第一对象。如果该方法只有一个参数target，则该参数将扩展jQuery的命名空间，即作为静态方法挂在jQuery全局对象下，如jQuery里的$.ajax、$.getJSON全局函数等，如前面看到的：
值得注意的是：多个对象参数合并时，会破坏第一个对象的结构，所以可传递一个空对象作为第一个参数，如：$.extend({}, object1, object2);
var options = $.extend({},defaults, options);
上面代码就是合并到{}中，然后赋值到options。这个在写插件的时候经常使用，用户可以自己定义某些属性，
插件一般也会定义默认属性，调用上面方法后，如果自定义属性，这使用新属性，否则，则使用默认属性，这个是非常有用的。
$.fn.extend(target)
在jQuery中，$.fn本质上是等于jQuery的原型，即$.fn = $.prototype， 所以该方法实际上是为jQuery原型添加方法，即把target对象的方法添加到jQuery原型中去，这样jQuery对象实例就可以访问添加的方法了，这也是jQuery插件开发常用的方法，特别是添加多个接口时。如：
// 将hello、hello2方法添加到jquery原型中 $.fn.extend({ hello: function() {alert("hello!");}, hello2: function() {alert("hello again!);} });
看看Autocomplete插件使用的该方法。
$.fn.extend({ autocomplete: function(urlOrData, options) { var isUrl = typeof urlOrData == "string"; options = $.extend({}, $.Autocompleter.defaults, { url: isUrl ? urlOrData : null, data: isUrl ? null : urlOrData, delay: isUrl ? $.Autocompleter.defaults.delay : 10 max: options && !options.scroll ? 1000 : 15000 }, options); // if highlight is set to false, replace it with a do-nothing function options.highlight = options.highlight || function(value) { return value; }; // if the formatMatch option is not specified, then use formatItem for backwards compatibility options.formatMatch = options.formatMatch || options.formatItem; return this.each(function() { new $.Autocompleter(this, options); }); }, result: function(handler) { return this.bind("result", handler); }, search: function(handler) { return this.trigger("search", [handler]); }, flushCache: function() { return this.trigger("flushCache"); }, setOptions: function(options){ return this.trigger("setOptions", [options]); }, unautocomplete: function() { return this.trigger("unautocomplete"); } });
看不懂？没关系，下面马来接上。
如果添加单个方法到jQuery原型中，可使用$.fn.pluginName方法添加，如：
// 将hello方法添加到jquery原型中 $.fn.hello = function() { // ... };
插件通用模板（单个方法）：
插件有自己的基本格式：
;(function($){ $.fn.yourName = function(options){ //各种属性、参数 } var options = $.extend(defaults, options); return this.each(function(){ //插件实现代码 }); }; })(jQuery);
上面代码的最前面有一个分号，这是为了防止多个脚本文件合并时，其他脚本的结尾语句没有添加分号，造成运行时错误。
1、把全部代码放在闭包(一个即时执行函数)里
此时闭包相当于一个私有作用域，外部无法访问到内部的信息，并且不会存在全局变量的污染情况。官方创建开发规范的解释是：
a) 避免全局依赖；
b) 避免第三方破坏；
c) 兼容jQuery操作符‘$‘和‘jQuery ‘。
如下所示：
(function($) { // 局部作用域中使用$来引用jQuery // ... })(jQuery);
这段代码在被解析时可理解成以下代码：
var jQ = function($) { // code goes here }; jQ(jQuery);
新手如果无法理解，你知道，这是官方标准就ok。
下面是这个美化表格的例子，实现原理倒是简单，无非就是找到表格的奇偶行，然后添加不同的class，活动行高亮显示也很简单，只要判断mouseover事件，然后添加一个class，mouseout的时候，再去掉这个class即可。
查看这个链接能看到详细，你可以查看具体看看，写的不错，特别是步骤很清晰。
http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html
好，基本框架晓得了，下面就是填充具体内容了。
(function($){ $.fn.tableUI = function(options){ var defaults = { evenRowClass:"evenRow", oddRowClass:"oddRow", activeRowClass:"activeRow" } var options = $.extend({},defaults, options); this.each(function(){ //实现代码 }); }; })(jQuery);
重复一句：
var options = $.extend({}，defaults, options);
其实就是合并多个对象为一个。这里就是，如果你在调用的时候写了新的参数，就用你新的参数，如果没有写，就用默认的参数。想进一步了解的朋友，可以参考jquery的官方文档： http://api.jquery.com/jQuery.extend/
其实，这里定义默认 var defaults是不规则的写法，
规则该是这样
|
1
2
3
4
5
6
7 |
$.fn.TableUI.defaults={ evenRowCass: "evenRow", oddRowClass: "oddRow", activeRowClass: "activeRow"};options = $.extend({},$.fn.TableUI.defaults,options); |
好了，直接看全部代码：
//这里最好写上相关描述，如时间，作者，主要用于干什么
/* * tableUI 0.1 * Copyright (c) 2009 JustinYoung http://justinyoung.cnblogs.com/ * Date: 2010-03-30 * 使用tableUI可以方便地将表格提示使用体验。先提供的功能有奇偶行颜色交替，鼠标移上高亮显示 */
;(function($){ $.fn.tableUI = function(options){
$.fn.TableUI.defaults={
evenRowCass: "evenRow",
oddRowClass: "oddRow",
activeRowClass: "activeRow"
};
var options = $.extend({}, $.fn.TableUI.defaults, options); //合并 return this.each(function(){ var thisTable=$(this); //添加奇偶行颜色 $(thisTable).find("tr:even").addClass(options.evenRowClass); $(thisTable).find("tr:odd").addClass(options.oddRowClass); //添加活动行颜色 $(thisTable).find("tr").bind("mouseover",function(){ $(this).addClass(options.activeRowClass); }); $(thisTable).find("tr").bind("mouseout",function(){ $(this).removeClass(options.activeRowClass); }); }); }; })(jQuery);
效果就是下面这个效果，当然会有点不一样，因为我自己重新定义了css样式.：
http://downloads.cnblogs.com/justinyoung/articleIMG/2010/tableUI/index.html
下面是调用代码。
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/TableUI.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $(".table_solid").TableUI({ evenRowCass: "eventRow", oddRowClass: "oddRowClass", activeRowClass: "activeRow" }); //这里是输入新的参数，不使用默认参数。插件代码会自动覆盖。 }) </script> <style type="text/css"> body { font-family: ‘Verdana‘ , ‘宋体‘; font-size: 12px; } .eventRow { background-color: #f0f0ff; } .activeRow { background-color: #FFFF55; } .oddRowClass { background-color: red; } </style>
简单实现在这里了，欢迎交流学习
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
