先看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);

jQuery 插件入门的更多相关文章

  1. jQuery插件入门

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQ ...

  2. 关于jquery插件 入门

    关于 JavaScript & jQuery 的插件开发   最近在温故 JavaScript 的面向对象,于是乎再次翻开了<JavaScript高级程序设计>第3版,了解到其中常 ...

  3. 从零开始学习jQuery (一) 入门篇

    本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些 ...

  4. jQuery插件:跨浏览器复制jQuery-zclip

    jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...

  5. jQuery插件开发入门

    扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入 ...

  6. jQuery的入门与简介

    jQuery的入门与简介<思维导图>   <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...

  7. jQuery UI 入门之实用实例分享

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  8. jQuery UI 入门之实用实例

    jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...

  9. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 引用jquery框架后出错

    问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript ...

  2. 《转载》深入理解 CSS 中的行高与基线

    这篇文章总结的很好,故转载收藏. 1.基本概念 1.  基线.底线.顶线.中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区 内容区是指底线和顶线 ...

  3. BZOJ 1570: [JSOI2008]Blue Mary的旅行( 二分答案 + 最大流 )

    二分答案, 然后对于答案m, 把地点分成m层, 对于边(u, v), 第x层的u -> 第x+1层的v 连边. 然后第x层的u -> 第x+1层的u连边(+oo), S->第一层的1 ...

  4. SQL文件导入到mysql乱码

    在输入中文之前先SET NAMES GBK 彻底解决MYSQL中文乱码的办法((5.5以后版本:) 修改MYSQL配置文件my.ini [client] default-character-set=u ...

  5. codeforces 665D Simple Subset

    题目链接 给一个数列, 让你选出其中的m个数, 使得选出的数中任意两个数之和都为质数, m尽可能的大. 首先, 除了1以外的任意两个相同的数相加结果都不是质数. 然后, 不考虑1的话, 选出的数的个数 ...

  6. English interview!

    Q1:Why are you interested in working for our company?为什么有兴趣在我们公司工作?A1:Because your company has a goo ...

  7. Asp.net MVC学习--默认程序结构、工作流程

    二.MVC 默认程序结构 MVC新建好之后,会对应的出现几个包,分别是:Controller.Model.View --即MVC 其中的默认的Default.aspx文件可以方便url重写,如果不设置 ...

  8. SQL Server 一些重要视图3

    1. sys.dm_tran_locks; 为每一把锁返回一行.request_session_id 可以与sys.dm_tran_session_transactions \sys.dm_exec_ ...

  9. ViewPager实现页卡的最新方法--简洁的TabLayout(谷歌支持包)

    效果图: 添加依赖包: compile ‘com.android.support:design:‘ 布局文件: <?xml version="1.0" encoding=&q ...

  10. C语言入门(11)——switch分支语句

    C语言提供了一种用于多分支选择的switch语句, 其一般形式为: switch(表达式) { case 常量表达式1:语句1; break; case 常量表达式2:语句2; break; .... ...