jQuery 插件入门

先看http://www.cnblogs.com/lideng/p/3605551.html

http://www.cnblogs.com/xcj26/p/3345556.html (非常细致  很多你会想到的问题在这里都有答案)

第一篇博文讲到给jquery增加方法的两种方式

静态方法和 jquery对象的方法

像$.each  这种就属于静态方法   $('xxx').on(...) jquery对象的方法

$.extend(object) 可以理解为JQuery 添加一个静态方法。

$.fn.extend(object) 可以理解为JQuery实例添加一个方法。

这是雨夜带刀以前写的一个jQuery 插件

http://stylechen.com/jquery-tabs.html

/* =================================================
// jQuery Tabs Plugins 1.0
// author:chenyg@5173.com
// URL:http://stylechen.com/jquery-tabs.html
// 4th Dec 2010
// =================================================*/
// 第一个; 是为了防止和之前没有写;作为结束语句的js发生冲突
;(function($){
    $.fn.extend({
        Tabs:function(options){
            // 处理参数
            options = $.extend({
                event : 'mouseover',
                timeout : 0,
                auto : 0,
                callback : null
            }, options);

            var self = this,   //原来这里写的是 $(this)  但是这里的this 已经是一个Jquery对象了 这个this就是调用Tab那个元素的Jquery对象  也就是$('.demo1')
                tabBox = self.children( 'div.tab_box' ).children( 'div' ),
                menu = self.children( 'ul.tab_menu' ),
                items = menu.find( 'li' ),
                timer;
            // elem是一个Tab head
            var tabHandle = function( elem ){
                    elem.siblings( 'li' )
                        .removeClass( 'current' )
                        .end()
                        .addClass( 'current' );
                    //关于end()
                    //end() 相当于返回初始选择器的结果  这里经过一次 end()操作后 再次得到elem对象
                    // 其实相当于
                    // elem.siblings('li').remove('current');
                    // elem.addClass('current');
                    tabBox.siblings( 'div' )
                        .addClass( 'hide' )
                        .end()
                        .eq( elem.index() )
                        .removeClass( 'hide' );
                    // $().index()   返回选择的元素在同级别元素索引的位置
                },

                delay = function( elem, time ){
                    time ? setTimeout(function(){ tabHandle( elem ); }, time) : tabHandle( elem );
                },

                start = function(){
                    if( !options.auto ) return;
                    timer = setInterval( autoRun, options.auto );
                },

                autoRun = function(){
                    var current = menu.find( 'li.current' ),
                        firstItem = items.eq(0),
                        len = items.length,
                        index = current.index() + 1,
                        item = index === len ? firstItem : current.next( 'li' ),
                        i = index === len ? 0 : index;

                    current.removeClass( 'current' );
                    item.addClass( 'current' );

                    tabBox.siblings( 'div' )
                        .addClass( 'hide' )
                        .end()
                        .eq(i)
                        .removeClass( 'hide' );
                };
            /* items 是Tab head */
            items.bind( options.event, function(){
                /*事件绑定里面的this 就是触发该事件的元素(不是jQuery对象) 在addEventListener中的也是如此  不过如果是时间代理就需要用到target了*/
                delay( $(this), options.timeout );
                if( options.callback ){
                    options.callback( self );
                }
            });

            if( options.auto ){
                start();
                self.hover(function(){
                    clearInterval( timer );
                    timer = undefined;
                },function(){
                    start();
                });
            }

            return this;
        }
    });
})(jQuery);