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);
jQuery 插件入门的更多相关文章
- jQuery插件入门
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQ ...
- 关于jquery插件 入门
关于 JavaScript & jQuery 的插件开发 最近在温故 JavaScript 的面向对象,于是乎再次翻开了<JavaScript高级程序设计>第3版,了解到其中常 ...
- 从零开始学习jQuery (一) 入门篇
本系列文章导航 从零开始学习jQuery (一) 入门篇 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些 ...
- jQuery插件:跨浏览器复制jQuery-zclip
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...
- jQuery插件开发入门
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入 ...
- jQuery的入门与简介
jQuery的入门与简介<思维导图> <初学者请各位高手指点指点> jQuery是继Prototype之后又一个优秀的JavaScript库,在JavaScript基础上我 ...
- jQuery UI 入门之实用实例分享
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- jQuery UI 入门之实用实例
jQuery UI 入门 jQuery UI 简介 jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,您可以使用它创建高度交互的 Web 应用程序.无论您是创 ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
随机推荐
- 引用jquery框架后出错
问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript ...
- 《转载》深入理解 CSS 中的行高与基线
这篇文章总结的很好,故转载收藏. 1.基本概念 1. 基线.底线.顶线.中线 注意:基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿. 2. 内容区 内容区是指底线和顶线 ...
- BZOJ 1570: [JSOI2008]Blue Mary的旅行( 二分答案 + 最大流 )
二分答案, 然后对于答案m, 把地点分成m层, 对于边(u, v), 第x层的u -> 第x+1层的v 连边. 然后第x层的u -> 第x+1层的u连边(+oo), S->第一层的1 ...
- SQL文件导入到mysql乱码
在输入中文之前先SET NAMES GBK 彻底解决MYSQL中文乱码的办法((5.5以后版本:) 修改MYSQL配置文件my.ini [client] default-character-set=u ...
- codeforces 665D Simple Subset
题目链接 给一个数列, 让你选出其中的m个数, 使得选出的数中任意两个数之和都为质数, m尽可能的大. 首先, 除了1以外的任意两个相同的数相加结果都不是质数. 然后, 不考虑1的话, 选出的数的个数 ...
- English interview!
Q1:Why are you interested in working for our company?为什么有兴趣在我们公司工作?A1:Because your company has a goo ...
- Asp.net MVC学习--默认程序结构、工作流程
二.MVC 默认程序结构 MVC新建好之后,会对应的出现几个包,分别是:Controller.Model.View --即MVC 其中的默认的Default.aspx文件可以方便url重写,如果不设置 ...
- SQL Server 一些重要视图3
1. sys.dm_tran_locks; 为每一把锁返回一行.request_session_id 可以与sys.dm_tran_session_transactions \sys.dm_exec_ ...
- ViewPager实现页卡的最新方法--简洁的TabLayout(谷歌支持包)
效果图: 添加依赖包: compile ‘com.android.support:design:‘ 布局文件: <?xml version="1.0" encoding=&q ...
- C语言入门(11)——switch分支语句
C语言提供了一种用于多分支选择的switch语句, 其一般形式为: switch(表达式) { case 常量表达式1:语句1; break; case 常量表达式2:语句2; break; .... ...