jQuery对象插件封装步骤

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名。

转载于:https://www.cnblogs.com/sintoyu/p/6148492.html

jQuery对象插件封装步骤相关推荐

jQuary总结11:jQuery插件封装---jQuery封装手风琴动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
jQuery form插件的使用--ajaxForm()和ajaxSubmit()的可选参数项对象
jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 – ajaxForm ...
【转】4.2使用jQuery.form插件，实现完美的表单异步提交
传送门:异步编程系列目录-- 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是今天我想介绍的是一款jQuery的插件:Jquery.form. ...
jQuery form插件的使用
jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 – ajaxFor ...
jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器
jQuery简介: jQuery是一个高效.精简并且功能丰富的javascript库,它提供的API简单易学,且兼容众多浏览器,极大地简化了javascript代码开发,包含内容:HTML 元素选取. ...
jquery插件封装指南
入门编写一个jQuery插件开始于给jQuery.fn加入新的功能属性,此处添加的对象属性的名称就是你插件的名称: jQuery.fn.myPlugin = function(){//你自己的插 ...
jquery 封装幻灯插件_21个jQuery幻灯片插件
jquery 封装幻灯插件 21 jQuery Slideshow plugins 21个jQuery幻灯片插件 In today`s article I collected most attract ...
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
原文:http://www.jb51.net/article/78536.htm Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署 ...
多库共存包装集的问题点击按钮创建一个p 几个属性介绍 jQuery的插件
多库共存 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...

jQuery对象插件封装步骤

jQuery对象插件封装步骤相关推荐

最新文章

热门文章