jQuery是js的一个非常优秀的库,它大大简化了js的很多操作,并且解决了js的大部分兼容性问题。甚至很多css兼容性问题,用jQuery写都能解决。

这里是对象插件的封装。当然,封装插件很多,这里是最简单的一种:

1、打两个括号 ()()
2、在第二个括号里面加入"jQuery"

()(jQuery)
 

3、在第一个括号里面写一个匿名函数,传参是一个$

(function($){})(jQuery)

4、在function($){}写:$.fn.插件名,如$.fn.tabs,这里的fn表示本插件是需要一个dom对象的插件
5、在刚才的$.fn.tabs后面“=”一个传参的(有参)匿名函数

$.fn.tabs = function(options){
}

6、在刚才的匿名函数里面定义一个对象,对象的属性就是插件需要传递的参数,默认值就是插件参数的默认值:

$.fn.tabs = function(options){
var defaults = {
currentStyle : "current",
contentList : "content_list"
}
}

7、将传递的参数,继承刚才定义的对象defaults

$.fn.tabs = function(options){
var defaults = {
currentStyle : "current",
contentList : "content_list"
}
options = $.extend(defaults,options);
}
 

8、将你写的代码,封装起来,得到下面的代码:

(function($){
$.fn.tabs = function(options){
var defaults = {
currentStyle : "current",
contentList : "content_list"
}
options = $.extend(defaults,options);
$(this).mouseover(function(){
$(this).addClass(options.currentStyle).siblings().removeClass(options.currentStyle);
var _index = $(this).index();
$("."+options.contentList).eq(_index).show().siblings().hide();
})
}
})(jQuery)
 

9.调用插件

$("#nav_des li").tabs({
currentStyle : "current456",
contentList : "con"
});
 

这里是一个tab选项卡插件,传递两个参数,一个是tab的当前class样式,一个是tab选项卡的类容容器class名。

最新文章

  1. [参考]wget下载整站
  2. 时间日期----java
  3. iOS 横竖屏切换(应对特殊需求)
  4. 【Spring开发】—— Spring Core
  5. 深入研究Clang(三) libclang
  6. codevs 1282 约瑟夫问题(线段树)
  7. 购买DigtalOcean VPS 以及 连接Linux
  8. Windows Azure使用体验
  9. C# 通讯网关开发
  10. 【Python】 xml解析与生成 xml
  11. 第9章 Linux进程和信号超详细分析
  12. 20175314 《Java程序设计》第二周学习总结
  13. Python-字典(dict)
  14. JavaScript之数值计算
  15. Here We Go(relians) Again HDU2722
  16. why inline functions must be put in header files?
  17. Hive支持行级update、delete时遇到的问题
  18. (13)oracle导出、导入
  19. vscode 和 atom 全局安装和配置 eslint 像 webstorm 等 ide 一样使用 standard标准 来检查项目
  20. .NETFramework:WebClient

热门文章

  1. 一种快速查询多点DS18B20温度的方法(转)
  2. jQuery笔记(1)
  3. android屏幕适配方法
  4. (转)在Java中如何遍历Map对象
  5. 关于Google Chrome 浏览器的一些命令及用法
  6. Employment Planning DP
  7. webfont 字体
  8. vs2008安装opencv2.4.6
  9. [iOS]C语言技术视频-03-程序分支结构(switch)
  10. wex5 实战 苹果左滑删除与长按编辑