知识大全跟我一起学JQuery插件开发

Posted 2022-07-20 知

篇首语：有了知识不运用，等于耕耘播种。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全跟我一起学JQuery插件开发相关的知识，希望对你有一定的参考价值。

跟我一起学JQuery插件开发 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　在逛codeproject网站的时候突然看到一篇文章 How to write plugin in Jquery 如果对E文好的同学可以看上面的连接现在我把上面网站的及结合自己的想法写这篇文章希望能得到大牛们的支持和谅解大鸟飞过欢迎拍装来源

　　【】How to write plugin in Jquery

　　【】锋利的JQuery 书

　　【】RascallySnake的JQuery extend()详解 一介绍 插件编写的目的是给已经有的一系列方法或函数做一个封装以便在其他地方重复使用方便后期维护 JQuery除了提供一个简单有效的方式进行管理元素以及脚本它还还提供了例外一种机制即给核心模块增加自己的方法和额外的功能通过这种机制 Jquery允许我们自己创建属于我们自己的插件提高我们在开发过程中的效率 JQuery的插件分为中类型（）封装对象方法的插件（也就是对象级别的开发）这种类型的插件是我们今天需要讲的插件（）封装全局函数的插件（类级别开发）指可以把独立的函数添加到JQuery命名空间之下添加一个全局函数我们只需如下定义 jQuery foo = function() alert( This is a test This is only a test ); ; 当然你也可以添加多个全局函数

复制代码代码如下: jQuery foo = function() alert( This is a test This is only a test ); ; jQuery bar = function(param) alert( This function takes a parameter which is " + param + " ); ; 调用时和一个函数的一样的:jQuery foo();jQuery bar();或者$ foo();$ bar( bar ); （）选择器插件编写JQuery插件需要注意的地方（）插件的推荐命名方法为 jquery [插件名] js （）所有的对象方法都应当附加到JQuery fn对象上面而所有的全局函数都应当附加到JQuery对象本身上（）在插件内部 this指向的是当前通过选择器获取的JQuery对象而不像一般方法那样内部的this指向的是DOM元素（）可以通过this each 来遍历所有的元素（）所有方法或函数插件都应当以分号结尾否则压缩的时候可能会出现问题为了更加保险写可以在插件头部添加一个分号（）以免他们的不规范代码给插件带来影响（）插件应该返回一个JQuery对象以便保证插件的可链式操作（）避免在插件内部使用$作为JQuery对象的别名而应当使用完整的JQuery来表示这样可以避免冲突 JQuery插件的机制 JQuery提供了个用于扩展JQuery功能的方法即 ①jQuery fn extend() ②jQuery extend() 第一个就是我们前面说插件类型的第一个中情况第二个就是指后面的种情况 jQuery extend()在插件中友一个很重要的功能是扩展已经有的object的对象比如 var newSrc=$ extend(dest src src src ) 它的含义是将src src src 合并到dest中返回值为合并后的dest 由此可以看出该方法合并示例 var result=$ extend( name:"Tom" age: name:"Jerry" sex:"Boy") 得到的结果是 result=name:"Jerry" age: sex:"Boy" 详细的可以查看 jQuery extend 函数详解里面对这个方法有很好的讲解官网 JQuery extend()与JQuery fn extend() 使用命名空间 虽然在jQuery命名空间中我们禁止使用了大量的javaScript函数名和变量名但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突因此我们习惯将一些方法封装到另一个自定义的命名空间复制代码代码如下: jQuery myPlugin = foo:function() alert( This is a test This is only a test ); bar:function(param) alert( This function takes a parameter which is " + param + " ); ; 采用命名空间的函数仍然是全局函数调用时采用的方法复制代码代码如下: $ myPlugin foo(); $ myPlugin bar( baz ); 二第一个Jquery插件 如果需要写一个JQuery插件你需要在$ fn对象后面增加一个属性名这个属性名其实就是你的插件名它的一般框架如下复制代码代码如下: (function( $ ) $ fn myPlugin = function() // 这里开始写功能需求 ; )( jQuery ); 现在我们需要写的插件的功能很简单就是把一个对象给慢慢的隐藏起来就是使用fadeOut()这个方法 OK 我们打开 VS 新建一个jscript文件并且命名为 MyPlugin js 并在里面添加如下代码复制代码代码如下: (function ($) $ fn myPlugin = function () this fadeOut( normal ); ; )(jQuery); 怎么用呢？很简单 新建一个页面把jquery文件以及刚刚我们MyPlugin js文件导入到本次页面中如下复制代码代码如下: <script src=Scripts/jquery js type=text/javascript></script> <script src=MyPlugin js type=text/javascript></script> js代码 <script type=text/javascript> $(document) ready(function () $("#btn ") click(function () $("#div ") myPlugin(); ); ); </script> HTML代码复制代码代码如下: <div id="div " > My God</div> <input id="btn " type=button value="button" onclick="MyClick()" /> 好的你现在点击网页上面的按钮的时候 div就会缓缓的隐藏因为我们设定的是normal嘛里面也可以设定一些值之类的很兴奋的是既然这个有智能提示如下图

　　吧！ 三插件运用在多个元素控件中 运用在多个元素控件中在上面编写JQuery插件需要注意的地方的第四点写道如果要遍历则可以用this each方法 $("ID") each 可以遍历jquery对象数组以及集合 OK 知道了这样子那么我们的新的代码如下

复制代码代码如下: (function ($) $ fn hoverElement = function () this each(function () $(this) hover( function () $(this) addClass("Add"); function () $(this) removeClass("Remove"); ); ) )(jQuery); 上面主要用到 each()方法进行遍历代码很简单就是把当前的对象的背景色css样式在“Add”和“Remove”直接切换 HTML的代码是复制代码代码如下: <div > First Button </div> <div > Second Button </div> <div > Third Button </div> JS 代码复制代码代码如下: <script type=text/javascript> $(document) ready(function () $(" hoverText") hoverElement(); ); </script> 很简单不解释链式操作链式操作？都听过吧比如下面这一句话 $("#div ") css("color" "red") addClass("Add") animate("width":" px" ); 就是能在当前的元素后面通过“ ” 来实施更多的操作这个动作特别的潇洒那我们要怎么才能实现这种效果呢？很简单我能只需要把对象回去就可以了请注意上面的第六点插件应该返回一个JQuery对象以便保证插件的可链式操作我们依旧看刚刚的例子复制代码代码如下: (function ($) $ fn hoverElement = function () return this each(function () $(this) hover( function () $(this) addClass("Add"); function () $(this) removeClass("Remove"); ); ) )(jQuery); 代码都一样唯一区别的是 this each(function () 这个前面加了一个 return 这样就实现了我们的链式操作然后你这样复制代码代码如下: $(document) ready(function () $(" hoverText") hoverElement() css("color" "yellow"); ); 能看到文字已经变成了yellow色的了 四自定义自己的插件 对于一个商业插件来说自定义插件的样式是必不可少的我们可以通过我们自己输入不同的样式来改变开发者的默认样式比如说最常见的 width height url color等等要是没有这些自定义的东西那开发者开发的插件的利用价值就大大的减小了 OK 下面的这个实例的意思是当我们hover一个对象的时候它能改变它的text background foreground三个属性也就是文本背景色前景色用户可以设定他自己想设定的值而不是固定死的当然如果用户没有设置我们会给他一个默认值定义这类插件的开发框架是 $ fn YouPlugin = function (options) 为了防止一些偷懒的人我们需要设置一些默认值当它没有设置的时候我们就用这些默认值 var defaultVal = Text: Your mouse is over ForeColor: red BackColor: gray ; 那默认值和用户传进来的值是怎么联合在一起的呢？这个就需要我们在开篇的时候讲到的$ extend()知识了 var obj = $ extend(defaultVal options); 这样子的话就把用户自定义的值覆蓋了默认用户的值如果用户没定义值就用系统自定义的代码如下复制代码代码如下: (function ($) $ fn textHover = function (options) //options 经常用这个表示有许多个参数 var defaultVal = Text: Your mouse is over ForeColor: red BackColor: gray ; //默认值 var obj = $ extend(defaultVal options); return this each(function () var selObject = $(this);//获取当前对象 var oldText = selObject text();//获取当前对象的text值 var oldBgColor = selObject css("background color");//获取当前对象的背景色 var oldColor = selObject css("color");//获取当前对象的字体的颜色 selObject hover(function () //定义一个hover方法 selObject text(obj Text);//进行赋值 selObject css("background color" obj BackColor);//进行赋值 selObject css("color" obj ForeColor);//进行赋值 function () selObject text(oldText); selObject css("background color" oldBgColor); selObject css("color" oldColor); ); ); )(jQuery); 代码也很简单上面都有些了解释此刻不在罗嗦怎么用呢？很简单 HTML code 复制代码代码如下: <div id="div " > Mouse over here </div> <div id="div " > Mouse over here </div> JS Code 复制代码代码如下: $(document) ready(function () $( #div ) textHover( Text: I am going to over ForeColor: yellow BackColor: Red ); $( #div ) textHover( Text: I am second div ); ); 就能看到效果了希望对你们有帮助 OK 到现在为止应该一个插件开发的基本要素就这些了本来后面还有一个比较复杂的代码一起发的等下一节吧！源码下载 cha138/Article/program/Java/JSP/201311/20585

知识大全 跟我一起学JQuery插件开发

知识大全跟我一起学JQuery插件开发