自行开发jQuery插件教程

因为工作需要，这几天一直在思考jQuery插件的开发。经过一天的努力，终于完成了自己制作的第一个jQuery插件。对于我这个一看到css就头疼的人来说，每天的时间是8个小时，保守估计有5个小时在css上工作(我是css文盲，用不上来形容。如果我不会写，只能说，那我连话都不会说。好了，废话少说，开门见山。首先我们要明白jQuery插件开发分为两种类型：1。类级插件开发。2.对象级插件开发。什么事？你问什么是类级，什么是对象级？类，可以理解为扩展jquery类，最简单的$。帖子(.);级别可以理解为基于对象的扩展，例如$('#Me ')。操(.);这他妈的是基于对象的扩展。如果你想深入童鞋领域，请花人民币买书或上网查资料。这些书比我介绍得更清楚。因此.然后.你想写什么？轮到上面提到的类级和对象级建模出现了，因为这种写法全世界都有，各种东西都不一样，各有千秋，书写的标准也不统一，所以就按照我认为最简单的方法写了，Hava a Look！复制的代码如下：脚本类型=' text/JavaScript ' jquery . msg=function(){ alert(' 123 ')；};/script script type=' text/JavaScript ' $(function(){ $)。msg()；});/script类级编写：jQuery。插件名称=函数(){ 0.};调用方法：$。插件名称()；暴露这些参数，暂时不提。逐步地.以上的事情，弹出对话框插件，可以说是先了解什么是要紧的，什么是插件，什么是类级插件？我们来看看页面启动的效果，上图中的道理，你懂的.。

对比对象级插件的编写：继续！复制代码如下：(函数($) {$)。fn . plugin name=function(){//代码区。};})(jQuery)；对象级写入：$ .fn .插件名=function(){ }；还有一个额外的fn，对，就是fn！fn！fn！调用方法：$('#Me ')。插件名称()；说一点，美元。插件名称()；jquery中的全局函数是通过$ access调用的，可以直接通过jquery或者$调用，从而达到一些效果。$('#Me ')。插件名称()；是jquery对象调用的函数，什么？真不敢相信你发现这个文字外层多了一个东西？啊？你问发生了什么事？第一，首先要了解闭合的形状(框架)，看！这是用来开发jQuery插件的复制东东的代码。代码如下：(函数($){ //这是你写东东的地方。地方税、工商税、个人所得税等。没有被收集.})(jQuery)；(函数($){ //这是你写东西的地方。地方税、工商税、个人所得税等。没有被收集.请随意大胆使用。})(jQuery)；这里，函数背后的$参数和形式参数在函数体内部使用。$是您当前正在调用函数的对象，因此您可以做很多事情.你知道的。使用选项卡面板切换插件，演示jQuery对象级插件的具体开发，并直接编码。一、HTML:复制代码如下：DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title/title script src=' http : jquery-1 . 6 . 2 . min . js ' type=' text/JavaScript '/script src='制表符()；});/剧本/头身！-制表符示例-div id=' my tab '！-制表符区域-ullia href=' # tabs1 '选项1/a/li lia href='#tabs2 '选项2/a/li lia href='#tabs3 '选项3/a/li /ul！-面板区域-div id=' tab S1 ' 11111/div div id=' tab S2 ' 22222/div div id=' tab S3 ' 33333/div/div/body/html然后插件源代码：/* tab面板插件，版本1.0(2011年8月。参数说明：switchingMode是面板切换的模式，如switchingMode:'mouseover '，鼠标移动到选项卡切换面板，默认值为click。整个制表符骨架不变，仍然是常用结构如下：复制代码如下： div id=' tabs '制表符区域ul lia href='#div1 '选项1/a/li lia href='#div2 '选项2/a/li /ul面板区域div id='div1 '面板1/div div id='div2 '面板2/div。

复制代码代码如下： */;(函数($){ $。fn。tab=函数(选项){ var def ALTs={ switching mode : ' click ' }；var opts=$ .extend({}，defualts，options)；var obj=$(this)；var点击指数=0；物体。add CLaSS(' TabsDiv ')；$('ul li:first '，obj).添加类(' tabseletedli ')；$(“ul Li”，obj).不是(' :first ').添加类(' tabsseneletedli ')；$(“div”，obj).不是(' :first ').hide()；$(“ul Li”，obj).bind(opts.switchingMode，function () { if (clickIndex！=$('ul li '，obj).index($(this)){ click index=$(' ul Li '，obj).索引($(this))；$('.tabsSeletedLi '，obj).removeClass('tabsSeletedLi ').添加类(' tabsseneletedli ')；$(这个)。移除类(' tabsenseletedli ').添加类(' tabseletedli ')；var除以=$(' a '，$(this)).attr('href ').substr(1)；$(“div”，obj).hide()；$(“#”除，obj).show()；};});};})(jQuery)；接下来上插件样式：复制代码代码如下：车身{背景-颜色：黑色；} .tabsDiv { width: 500px高度： 350像素；边距-top : 0px；左边距left: 0px}。tabsDiv ul { width : 500 pxhire : 20pxlist-style :无；背景-颜色：黑色；边距-底部： 0pxmargin: 0pxpadding: 0px}。tabsDiv div { width : 500 pxh three : 330 px背景-颜色：白色；} .tab sseletedli { width : 100 pxh three : 20 px背景-颜色：白色；向左浮动：文本对齐：中心；} .tabseletedli a { width : 100 pxh three : 20pxcolor :黑色；} .tabsenselectedli { width : 100 px；高度： 20像素背景-颜色：黑色；向左浮动：文本对齐：中心；} .tabsunselectedli a {宽度： 100 px高度： 20pxcolor:白色；} 最终效果图，你懂的

吴奇珍：http://www .cnblogs。com/johnst art/archive/2011/08/24/jqueryplugin。超文本标记语言