和我一起学习JQuery插件开发

在访问codeproject网站时，突然看到一篇文章：如何在Jquery中编写插件。如果你擅长e，可以阅读上面的链接。现在我将结合上述网站和我自己的想法来写这篇文章。希望得到大牛们的支持和理解。大鸟飞过。欢迎拍照。来源：[1]如何在JQuery中编写插件。[2]夏普jquery书[3]jquery . extend()详解之三【RascallySnake一、引言编写插件的目的是将一系列已有的方法或函数进行打包，使其可以在其他地方重用，以便后期维护。除了提供简单有效的方法来管理元素和脚本之外，JQuery还提供了一种异常机制：向核心模块添加自己的方法和额外的函数。通过这种机制，Jquery允许我们创建自己的插件，并提高我们在开发过程中的效率。1.1JQuery插件分为三种类型：(1)封装对象方法的插件(即对象级开发)。这种类型的插件就是我们今天要讲的插件。(2)封装全局函数的插件(类级开发)意味着可以在JQuery命名空间下添加独立的函数。要添加一个全局函数，我们只需要定义如下：jquery.foo=function () {alert('这是一个测试。这只是一个测试。);};还可以添加多个全局函数：复制代码如下： jquery . foo=function(){ alert('这是一个测试。这只是一个测试。);};jQuery.bar=函数(param) { alert('此函数接受一个参数，即' ' param ' '。');};调用与函数相同的： jquery . foo()；jquery . bar()；或者美元。foo()；$.bar(' bar ')；(3)选择器插件1.2编写jquery插件的注意事项：(1)插件推荐的命名方式是JQuery。[插件名称]。js (2)所有对象方法都应该附加到JQuery.fn对象，而所有全局函数都应该附加到JQuery对象本身。(3)在插件内部，这指的是当前通过选择器获取的JQuery对象，与一般方法不同，内部这指的是DOM元素。(4)所有的元素都可以通过这个遍历，每个(5)所有的方法或者函数插件都应该以分号结束，否则压缩的时候可能会出现问题。为了更安全的书写，可以添加分号(；)，以免它们不规则的代码影响插件。(6)插件应该返回一个JQuery对象，以保证插件的链式操作。(7)避免在插件内部使用$作为JQuery对象的别名，而是使用完整的JQuery来表示它。这样可以避免冲突。1.3JQuery插件机制JQuery提供了两种扩展JQuery函数的方法。即：jquery . fn . extend()jquery . extend()第一种是前面提到的插件类型的第一种情况，第二种是指后两种情况。插件中jQuery.extend()的一个非常重要的功能就是扩展现有的对象。例如：var new src=$。扩展(dest，src1，src2，src3.)表示合并src1、src2、src3.进入dest，返回值是合并后的dest，这说明这个方法是合并的。示例：var结果=$。extend ({}，{name:' Tom '，age:21}，{name:' Jerry '，sex:' boy'})结果是：result={name:' Jerry '，age:21。官网：JQuery.extend()和JQuery.fn.extend()使用命名空间。虽然在jQuery命名空间中，我们禁止使用大量的javaScript函数名和变量名。然而，仍然不可避免的是，一些函数或变量名会与其他jQuery插件发生冲突，所以我们习惯于将一些方法封装到另一个自定义命名空间中。

复制代码如下：jQuery。my plugin={ foo : function(){ alert('这是一个测试。这只是一个测试。);}，bar:function(param) { alert('此函数接受一个参数，即' ' param ' '。');} };使用命名空间的函数仍然是全局函数，调用方法如下：复制代码如下： $ . myplugin . foo()；$ . myplugin . bar(' baz ')；2.第一个JQuery插件如果您需要编写一个Jquery插件，您需要在$后面添加一个属性名。fn对象，这实际上是您的插件名称。其总体框架如下：复制代码如下： (function ($) {$。fn . my plugin=function(){//从这里开始写功能需求}；})(jQuery)；我们现在需要编写的插件的功能非常简单，就是慢慢隐藏一个对象。就是使用fadeOut()方法。好了，让我们开启VS 2012。新建一个jscript文件，命名为MyPlugin.js，并在其中添加如下代码：复制代码如下：(function($){ $ . fn . myplugin=function(){ this . fade out(' normal ')；};})(jQuery)；怎么用？很简单。创建一个新的html页面，并将jquery文件和我们的MyPlugin.js文件导入这个页面。以下是复制代码： script src=' http 3360 script/jquery-1 . 4 . 1 . js ' type=' text/JAVAScript '/script script src=' http 3360 yplugin . js ' type=' text/JAVAScript '/script js代码：scripttype=' text/JavaScript' $(文档)。ready (function () {$ ('# btn1 '))。click (function () {$ ('# div1 '))。my plugin()；});});/script HTML代码：复制代码如下： div id=' div 1 ' style=' width : 400 px；height: 30px背景色-:灰色My god/div输入id=' BTN 1 ' type=' button ' value=' button ' onclick=' my click()'/Ok，当你现在点击网页上的按钮时，div会慢慢隐藏。因为我们设置的是正常的，我们也可以设置一些值等等。很兴奋，因为这个有智能提示，如下图：。

没错。3.插件用于多元素控件。3.1使用了在多元素控件中编写JQuery插件需要注意的第四点，就是说如果要遍历，可以使用this.each方法。$(“标识”)。每个都可以遍历jquery对象、数组和集合。好的.知道了这些，我们的新代码如下：复制代码如下： (function ($) {$)。fn.hover元素=function () {this。每个(函数(){$ (this))。悬停(function () {$ (this))。添加类(' add ')；}，function () { $(this)。Remove class(' Remove ')；} );})}))(jQuery)；上面主要使用了。要遍历的每个()方法。代码很简单，就是直接将当前对象背景色的css样式在“添加”和“移除”之间切换。HTML代码是：复制代码如下： div class='悬停文本' firstbutton./div div class='悬停文本' secondbutton./div div class='悬停文本' thirdbutton./Div代码：复制的代码如下： script type=' text/JavaScript ' $(文档)。ready (function () {$(')。悬停文本')。悬停元素()；});/script简单，不解释。3.2连锁经营连锁经营？我都听说过。例如，下面的句子：$ ('# div 1 ')。CSS('颜色'，'红色')。添加类(“添加”)。动画({'width' :' 100px'}，1000)；也就是说，可以通过“”实现更多的操作在当前元素之后。这个动作特别潇洒。那么如何才能达到这个效果呢？很简单。我只需要归还物品。请注意上面的第六点：插件应该返回一个JQuery对象，以确保插件的可链接操作。我们还是来看看刚才的例子：复制代码如下： (function ($) {$)。fn。hover元素=function(){返回这个。每个(函数(){$ (this))。悬停(function () {$ (this))。添加类(' add ')；}，function () { $(this)。Remove class(' Remove ')；} );})}))(jQuery)；所有代码都是一样的，唯一的区别是：this . each(function(){这前面有一个返回。这样，我们的连锁经营就实现了。然后你这样做：复制代码如下： $(文档)。ready (function () {$(')。悬停文本')。悬停元素()。CSS('颜色'，'黄色')；});你可以看到文字已经变黄了。自定义您自己的插件。对于商业插件来说，定制插件的风格是非常重要的。我们可以通过自己输入不同的样式来改变开发者的默认样式。比如最常见的宽度、高度、网址、颜色等等。没有这些定制的东西，开发人员开发的插件的使用价值就会大大降低。好的，下面的例子是指当我们悬停一个对象时，它可以改变它的文本、背景和前景属性，也就是文本、背景颜色和前景颜色。用户可以设置他想要设置的值，而不是固定它。当然，如果用户没有设置，我们会给他一个默认值。定义这种插件的开发框架是：$ . fn . youplugin=function(options){ 0.}为了防止一些懒惰的人，我们需要设置一些默认值，当它没有设置时，我们将使用这些默认值。var defaultVal={ Text: '你的鼠标结束了'，ForeColor: '红色'，BackColor: '灰色' }；默认值与用户传入的值如何组合？这需要美元。扩展我们在开头提到的知识。var obj=$。extend(defaultVal，选项)；这样，用户定义的值将被默认的用户值覆盖。如果用户没有定义该值，请使用系统定义的值。代码如下：复制代码如下：(函数($) {$)。fn . text hover=function(options){//options经常用这个来表示参数很多。

var defaultVal={ Text: '你的鼠标结束了，ForeColor: '红色，背景色： '灰色' };//默认值var obj=$ .扩展(defaultVal，选项);返回这个。每个(function(){ var selObject=$(this)；//获取当前对象var旧文本=selobject。text()；//获取当前对象的文本值var oldBgColor=selobject。CSS('背景色')；//获取当前对象的背景色var old color=selobject。CSS('颜色')；//获取当前对象的字体的颜色selObject.hover(function () {//定义一个盘旋方法selObject.text(obj .文本);//进行赋值' selObject.css('背景色，obj .BackColor)；//进行赋值selObject.css('color '，obj .ForeColor)；//进行赋值}，function(){ selobject。文本(旧文本)；塞尔物体。CSS('背景色'，oldBgColor)；selObject.css('color '，旧颜色)；} );});} })(jQuery)；代码也很简单，上面都有些了解释，此刻不在罗嗦。怎么用呢？很简单超文本标记语言代码：复制代码代码如下： div id=' div 1 ' class=' textBar '鼠标在这里./div div id='div2' class='textBar '鼠标放在这里./div JS代码：复制代码代码如下：美元（文件)。ready(function () { $('#div1 ')).文本悬停({文本： '我要结束了.'，ForeColor: '黄色，背景色： '红色' });$('#div2 ').文本悬停({文本： '我是第二个div .});});就能看到效果了。希望对你们有帮助好吧，到现在为止，应该一个插件开发的基本要素就这些了。本来后面还有一个比较复杂的代码，一起发的，等下一节吧！源码下载