基于jquery插件开发入门教程

  鉴于最近要使用大量的jquery,所以总有一种捣鼓文字来抒发一下情绪的冲动。思前想后就来篇jquery插件开发入门教程吧，毕竟如果不想开发插件，那自己无论用别人的插件多牛逼，最多只是js的使用者，作为程序员也不能算是js的开发者~我也是看别人的东西，实现自己的例子来展示。尚不考虑这会成为自己的东西，因为jquery都是老外开发的，我也是看他们的例子，然后反三用而已，并且能巩固我的之前的学习。编写插件就是对一系列方法或者函数进行封装，无非就是提高复用性和方便维护。jquery最大优势就是跨多种浏览器，它的主要目的就是提供一种方式来方便、有效的管理文档对象模型dom和浏览器对象模型bom的元素和其中的脚本，此外jquery还提供了一种机制，就是给核心模块增加增加的方法和额外功能。比如jQuery.fn.extend和jQuery.extend就是其中两个方法，通过这种机制我们就可以来开发自己的插件老~提高我们开发的效率~真的很想把我写的完整代码发上来，但是前车告诉我这个编辑器的js会识别某些关键字，所有只能另辟蹊径咯~首先是这个写在我jquery.tanchongshi.js文件下的内容，请忽略我狗血的文件名~但格式标准就是jquery.你的插件名.js/**基于jquery插件开发入门教程**/
/**为了不和其他库冲突,我使用jquery匿名函数的开发方式
(function($){要封装的函数
}
)(jQuery);
这个匿名函数我在我之前的文章 《jquery（自制版）》里面有介绍过
这个函数的意思就是自动执行传jQuery这个参数的函数，这是快速使用函数，
而又不让变量溢出作用域的手法我在下面写了三种插件方法其中两种的多种格式；
就是基于对象开发jquery.fn.extend();基于全局函数（类）开发jaquery.extend();还有一种基于选择器的也是基于类先不写了
**/
;(function($){/**1类级开发只有extend无fn的方式**//**1.1：类级开发 extend不带命名空间1
调用方式:$.start();
**/$.extend({start:function(){alert("extend不带命名空间类级开发");}
});/**1.2：类级开发 extend之net1带命名空间1
调用方式 $.net.hello();
**/
$.extend({net:{hello:function(){alert("extend之net1带命名空间");}
}});/**1.3：类级开发 extend之net2带命名空间2
调用方式 $.net.world();
**/
$.extend($.net,{world:function(){alert("extend之net2带命名空间");}
});/**1.4：类级开发 extend变形无extend带命名空间
调用方式：$.tan.chong();
**/
$.tan={chong:function(){alert("extend变形无extend带命名空间");}
};/**2对象开发有extend有fn的方式**//**2.1对象级别有fn有extend方式
调用方式:$.("通过各种css选择器获取的jquery对象").tanChongShiClick();
**/
$.fn.extend({  /**插件一**/tanChongShiClick:function(){    $(this).click(function(){    //监听点击事件alert($(this).val());  //弹出获取到被点击事件的value});    },  /*插件二*/mouseOutOrIn:function(){$(this).focus(function(){alert("这是鼠标移进文本框");});$(this).blur(function(){alert("这是鼠标移出文本框");});}
});/**2.2对象级别有fn无extend方式
调用方式:$.("通过各种css选择器获取的jquery对象").ozil();
**/
$.fn.ozil = function(){$(this).click(function(){alert("这是对象级别有fn无extend方式");
})
}/**3基于fn的对象级别插件的深度开发**//**3.1深度开发fn插件：（1）插件推荐取名方法：jquery.插件名字.js（2）所有的对象方法都应该附加到jQuery.fn对象上面（对象级别编程）而所有的全局函数都应该附加到jQuery对象本身上（类级别编程）由于我使用的是匿名对象方法，所以我的插件都是直接用$代替jQuery了（3）在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像js标准的方法类似document.getElementById()那样获取，内部的this指向的是DOM元素（4）可以通过this.each来遍历所有的元素，这是一个好方法，可以遍历jQuery对象、数组以及集合（5）所有的方法或者函数插件，都应该以分号结尾，否则格式化压缩的时候可能会出现问题。为了更加保险些，可以在插件头部添加一个分号【;】,一避免他们的不规范代码给插件带来的影响。（6）插件应该返回一个jQuery对象，以便保证插件的可链式操作。（7）避免在插件内部使用$作为jQuery对象的别名，而应当使用完整的jQuery来表示，这样可以避免冲突，不过对于匿名函数编程可以忽略**//**3.2 this.each实现插件运用在多个元素控件中
调用方式：$("通过各种css选择器获取的jquery对象").fucusOzil();
**/$.fn.focusOzil1 = function(){this.each(function(){$(this).focus(function(){$(this).val("这是this.each实现的鼠标focus事件");});$(this).blur(function(){            $(this).val("这是this.each实现的鼠标blur事件");})})
}/**3.3hover+each**/$.fn.focusOzil2 = function(){this.each(function(){$(this).hover(function(){$(this).val("这是this.each实现的鼠标hover事件");},function(){$(this).val("");});/*$(this).blur(function(){            $(this).val("这是this.each实现的鼠标blur事件");})*/})
}/**3.4 链式操作通过类似的$(".tan").addClass.css("color","blue").animate({"width":"50px"},2222);类似通过调用方法返回对象的“.”来实施更多操作，碉堡吧！！！**/$.fn.focusOzil3 = function(){return this.each(function(){$(this).hover(function(){$(this).val("这是this.each实现的鼠标hover事件");},function(){$(this).val("");});/*$(this).blur(function(){            $(this).val("这是this.each实现的鼠标blur事件");})*/})
}
/**很明显我只是在3.2前面加上return 这样神马链式都搞掂了
然后调用方式就是$("通过各种css选择器获取的jquery对象").fucusOzil().你想调用的jQuery方法；
**//**4开发商业插件（1）自定义样式不可少，就是说我们可以让用户自己输入参数来改变样式比如最常见的width，height color等。这是为了丰富我们插件的利用价值（2）商业开发的框架式基于对象开发的：$.fn.YourPlugin = function(options){do what you want to do……}(3) 如果用户没有输入参数？那么我们就给一个默认参数吧！比如默认对象参数：var deafultVal = {Value:"your mouse is in",HoverColor:'blue'}对于默认值和用户传进来的值整合，可以用$.extend()；之前我们用这个方法扩展类级别插件这是它的其中功能之一，它的功能还有好几个，我们就利用$.extend(dest,src1,src2……);，如果存在scr参数，就可以把src合并到dest,并且如果后面参数有重复的就会覆盖前面参数存在相同名字的，这样就可以实现用户自定义的值覆盖默认的值，如果没有src参数，就是系统默认的值，并成为$的全局变量**/$.fn.tanChongShiLoveOizl = function(options){//options多个参数，用对象传进来var defaultVal = {Value:'你使用默认的文字老',HoverColor:'blue'};//定义默认值var obj = $.extend(defaultVal,options);//定义默认值和用户传进来的值整合对象return this.each(function(){var selObj = $(this);//获取当前对象var oldValue = selObj.val();//用jQuery方法获取当前对象的Val值var oldColor = selObj.css("color");//获取当前对象的字体颜色selObj.hover(function(){//定义一个hover方法selObj.val(obj.Value);//用jQuery的Text方法对当前对象进行赋值selObj.css("color",obj.HoverColor)//用jQuery的css方法改变value的颜色},function(){//定义overHover的状态selObj.val(oldValue);selObj.css("color",oldColor);});});}
})(jQuery);使用页面<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.tanchongshi.js"></script>
<script type="text/javascript">
$(function(){/**类级别调用**/
/*$.start();
$.net.hello();
$.net.world();
$.tan.chong();*//**成员级别调用**/
/*$("#input1").tanChongShiClick();
$("#input1").mouseOutOrIn();
$("#input1").ozil();
$("#input1").focusOzil1()
$("#input1").focusOzil2()
$("#input1").focusOzil3().css("color","green");*///字体绿色没跌缩
$("#input1").tanChongShiLoveOizl({Value:"我进入了",HoverColor:"red"
});
});
</script>
</head>
<body>
<input type="text" id="input1" style="width:500px;" value="233" />
</body>
</html>

基于jquery插件开发入门教程相关推荐

【直播回顾】蚂蚁金服高级开发工程师萧恺：IDEA 插件开发入门教程
主讲人:萧恺(蚂蚁金服-支付宝事业群-高级开发工程师) 本名:肖汉松讲师介绍: 热爱阅读,喜欢挑战,热衷尝试新的技术,关注技术背后的原理. 关注领域:Java 服务端开发,分布式系统关注语言:Ja ...
【转载】jQuery插件开发精品教程，让你的jQuery提升一个台阶
jQuery插件开发精品教程,让你的jQuery提升一个台阶要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
舵机任意角度程序_【舵机初动】基于Mind+ Ardunio入门教程10
点击上方"蘑菇云创造"可以关注我们哦本项目要接触到舵机.舵机是一种电机,它使用一个反馈系统来控制电机的位置.可以很好掌握电机角度.大多数舵机是可以最大旋转180°的.也有一些能转 ...
arduino舵机达180不到_【舵机初动】基于Mind+ Ardunio入门教程10
点击上方"蘑菇云创造"可以关注我们哦本项目要接触到舵机.舵机是一种电机,它使用一个反馈系统来控制电机的位置.可以很好掌握电机角度.大多数舵机是可以最大旋转180°的.也有一些能转 ...
jQuery 快速入门教程
内容目录 jQuery 入门什么是jQuery 如何使用jQuery jQuery的运行原理如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素使用jQue ...
virtualxposed使用教程_Xposed 插件开发入门教程（一）
其实网上已经有很多 Xposed 插件开发的入门教程了,我写的这篇与其说是教程,不如说是参考,为了防止以后忘了开发步骤,这里就写篇博客记录一下. 要使用 Xposed 插件,首先要 root 手机并安 ...
jQuery 初学者入门教程
jQuery 是什么,它能为我们做什么?如果你是一名 Web 开发人员,写过 JavaScript 程序,那么你很可能正在使用 jQuery,即使没有试用过,至少也听说过,事实上 jQuery 可以说 ...
开发者必读jQuery Mobile入门教程
你每天都会对着它讲话,和它玩游戏,用它看新闻--没错,它就是你裤兜里的智能手机.android,黑莓还是iphone?为了让你清楚意识到究竟哪些才算是智能手机,我在下面总结了一个智能手机系统/设备的列 ...
jQuery Mobile 入门教程
jquerymobile:http://jquerymobile.com/themeroller/ jquerymobile.com/demos/1.2.0:http://jquerymobile.c ...

基于jquery插件开发入门教程

基于jquery插件开发入门教程相关推荐

最新文章

热门文章