您的位置: 首页  >  IT文章  >  jquery插件开发

jquery插件开发

分类: IT文章 • 2023-11-08 20:58:27

一.插件的种类： 

  • 封装对象方法的插件
  • 封装全局函数的方法
  • 选择器插件



二.jQuery插件的机制 
  jQuery提供了两个用于扩展jQuery功能方法，即jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展前面提到的3种类型插件中的第一种，后者用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object对象的“名/值对”分别代表“函数或方法名/函数主题”。 

其中jQuery.extend()方法除了可以用于扩展jQuery对象之外，还有一个强大的功能，就是扩展已有的Object对象. 

Js代码   jquery插件开发
  1. jQuery.extend(target,obj1,...[objN])  


用一个或多个对象来扩展一个对象，然后返回被扩展的对象。 

例如： 

Js代码   jquery插件开发
  1. var settings={validate:false,limit:5,name:"foo"};  
  2. var options={validate:true,name:"bar"};  
  3. var newOptions=$.extend(settings,options);  


结果为 

引用

newOptions = {validate:true,limit:5,name:"bar"} 



jQuery.extend()方法经常被用来设置插件方法的一系列默认参数，例如下面的代码 

Js代码   jquery插件开发
  1. function foo(options){  
  2.     var options = $.extend({  
  3.         name:"bar",  
  4.         length:5,  
  5.         dataType:"xml"  
  6.     },otpions);  
  7. }  
  8.   
  9. foo({name:"zzg"});  



三.编写jQuery插件 

1.封装jQuery对象方法的插件 

编写设置和获取颜色的插件。功能和要求： 
（1）设置匹配元素的颜色 
（2）获取匹配元素（元素集合中的第一个）的颜色 

Js代码   jquery插件开发
  1. ;(function($){  
  2.     $.fn.extend({  
  3.         color:function(value){  
  4.             return this.css("color",value);  
  5.         }  
  6.     });  
  7. })(jQuery)  



使用： 

Js代码   jquery插件开发
  1. $(function(){  
  2.     alert($("div").color());  
  3.     alert($("div").color("red"));  
  4. });  


其实就这么简单。 

下面来一个完整一点的例子： 
表格隔行变色的插件 

Js代码   jquery插件开发
  1. ;(function($){  
  2.     $.fn.extend({  
  3.         "alterBgColor":function(options){  
  4.             options = $.extend({  
  5.                 odd:"odd",  
  6.                 even:"even",  
  7.                 selected:"selected"  
  8.             },options);  
  9.             $("tbody>tr:odd",this).addClass(options.odd);  
  10.             $("tbody>tr:even",this).addClass(options.even);  
  11.             $('tbody>tr',this).click(function(){  
  12.                 var hasSelect = $(this).hasClass(options.selected);  
  13.                 $(this)[hasSelect?"removeClass":"addClass"](options.selected).find(':checkbox').attr('checked',!hasSelect);  
  14.             });  
  15.             $('tbody>tr:has(:checked)',this).addClass(options.selected);  
  16.             return this;  
  17.         },  
  18.         color:function(value){  
  19.             return this.css("color",value);  
  20.         }  
  21.     });  
  22. })(jQuery)  



完整代码： 

Html代码   jquery插件开发
  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4.     table       { border:0;border-collapse:collapse;}  
  5.     td  { font:normal 12px/17px Arial;padding:2px;100px;}  
  6.     th          { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px   solid #333;}  
  7.     .even       { background:#FFF38F;}  /* 偶数行样式*/  
  8.     .odd        { background:#FFFFEE;}  /* 奇数行样式*/  
  9.     .selected   { background:#FF6500;color:#fff;}  
  10. </style>  
  11. <script src="jquery.js"  type="text/javascript"></script>  
  12. <script>  
  13. ;(function($){  
  14.     $.fn.extend({  
  15.         "alterBgColor":function(options){  
  16.             options = $.extend({  
  17.                 odd:"odd",  
  18.                 even:"even",  
  19.                 selected:"selected"  
  20.             },options);  
  21.             $("tbody>tr:odd",this).addClass(options.odd);  
  22.             $("tbody>tr:even",this).addClass(options.even);  
  23.             $('tbody>tr',this).click(function(){  
  24.                 var hasSelect = $(this).hasClass(options.selected);  
  25.                 $(this)[hasSelect?"removeClass":"addClass"](options.selected).find(':checkbox').attr('checked',!hasSelect);  
  26.             });  
  27.             $('tbody>tr:has(:checked)',this).addClass(options.selected);  
  28.             return this;  
  29.         },  
  30.         color:function(value){  
  31.             return this.css("color",value);  
  32.         }  
  33.     });  
  34. })(jQuery)  
  35.   
  36. $(function(){  
  37.     $("#table2").alterBgColor().find("th").color("color");  
  38. })  
  39.   
  40. </script>  
  41. <head>  
  42. <body>  
  43.     <table id="table1">  
  44.     <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>  
  45.     <tbody>  
  46.         <tr>  
  47.             <td><input type="checkbox" name="choice" value=""/></td>  
  48.             <td>张山</td>  
  49.             <td>男</td>  
  50.             <td>浙江宁波</td>  
  51.         </tr>  
  52.         <tr>  
  53.             <td><input type="checkbox" name="choice" value="" /></td>  
  54.                 <td>李四</td>  
  55.             <td>女</td>  
  56.             <td>浙江杭州</td>  
  57.         </tr>  
  58.         <tr>  
  59.             <td><input type="checkbox" name="choice" value="" checked="checked" /></td>  
  60.                     <td>王五</td>  
  61.             <td>男</td>  
  62.             <td>湖南长沙</td>  
  63.         </tr>  
  64.         <tr>  
  65.             <td><input type="checkbox" name="choice" value="" /></td>  
  66.             <td>找六</td>  
  67.             <td>男</td>  
  68.             <td>浙江温州</td>     
  69.         </tr>  
  70.         <tr>  
  71.         <td><input type="checkbox" name="choice" value="" /></td>  
  72.                 <td>Rain</td>  
  73.             <td>男</td>  
  74.             <td>浙江杭州</td>  
  75.         </tr>  
  76.         <tr>  
  77.             <td><input type="checkbox" name="choice" value="" checked="checked" /></td>  
  78.             <td>MAXMAN</td>  
  79.             <td>女</td>  
  80.             <td>浙江杭州</td>  
  81.         </tr>  
  82.     </tbody>  
  83. </table>  
  84.   
  85.   
  86. <br /><br />  
  87.   
  88.   
  89. <table id="table2">  
  90.     <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>  
  91.     <tbody>  
  92.         <tr>  
  93.             <td><input type="checkbox" name="choice" value=""/></td>  
  94.             <td>张山</td>  
  95.             <td>男</td>  
  96.             <td>浙江宁波</td>  
  97.         </tr>  
  98.         <tr>  
  99.             <td><input type="checkbox" name="choice" value="" /></td>  
  100.                 <td>李四</td>  
  101.             <td>女</td>  
  102.             <td>浙江杭州</td>  
  103.         </tr>  
  104.         <tr>  
  105.             <td><input type="checkbox" name="choice" value="" checked="checked" /></td>  
  106.                     <td>王五</td>  
  107.             <td>男</td>  
  108.             <td>湖南长沙</td>  
  109.         </tr>  
  110.         <tr>  
  111.             <td><input type="checkbox" name="choice" value="" /></td>  
  112.             <td>找六</td>  
  113.             <td>男</td>  
  114.             <td>浙江温州</td>     
  115.         </tr>  
  116.         <tr>  
  117.         <td><input type="checkbox" name="choice" value="" /></td>  
  118.                 <td>Rain</td>  
  119.             <td>男</td>  
  120.             <td>浙江杭州</td>  
  121.         </tr>  
  122.         <tr>  
  123.             <td><input type="checkbox" name="choice" value="" checked="checked" /></td>  
  124.             <td>MAXMAN</td>  
  125.             <td>女</td>  
  126.             <td>浙江杭州</td>  
  127.         </tr>  
  128.     </tbody>  
  129. </table>  
  130. </body>  
  131. </html>  



2.封装全局函数的插件 
这类插件是在jQuery命名空间内部添加一个函数，例如编写一个除去左侧和右侧空格的插件 

Js代码   jquery插件开发
  1. ;(function($){  
  2.         $.extend({  
  3.             ltrim:function(text){  
  4.                 return (text||"").replace(/^s+/g,"");  
  5.             },  
  6.             rtrim:function(text){  
  7.                 return (text||"").replace(/s+$/g,"");  
  8.             }  
  9.         })  
  10.     })(jQuery);  


注意：（text||""）部分是用于防止传递进来的text这个字符串变量处于未定义之类的特殊状态，如果text是undefined,则返回字符串"",否则返回字符串text。这个处理是为了保证接下来的字符串替换方法replace()方法不会出错。 
使用： 

Js代码   jquery插件开发
  1. $.ltrim("    test    ");  
  2. $.rtrim("    test    ");  



3.自定义选择器 
jQuery提供了一套方法让用户可以通过制作选择器插件来使用自定义选择器，从而使jQuery选择器功能更加完善。
jQuery的选择符解释器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，成为选择器函数，最后根据这个选择器函数的返回值为true还是false来决定是否保留这个元素。 

例如： 

Js代码   jquery插件开发
  1. $("div:gt(1)")  


该选择器首先会获取所有的div元素，然后隐式遍历这些div元素，并逐个将这些div元素作为参数，连同括号里“1”等一些参数一起传递给gt对应的选择器函数进行判断 
：gt()选择器在jQuery源文件中的代码如下： 

Java代码   jquery插件开发
  1. gt:function(a,i,m){  
  2.    return i>m[3]-0;  
  3. }  


其中，选择器函数一共接受3个参数： 

引用

function(a,i,m){ 
  //... 
} 


第一个参数a:指向的是当前遍历到的DOM元素 
第二个参数i:指的是当前遍历到的DOM元素的索引值，从0开始 
第三个阐述m最为特别，它是由jQuery正则解析引擎解析后的产物，是一个数组。 

  • m[0],以上面的$("div:gt(1)")这个例子来讲，是:gt(1)这部分。它是jQuery选择器进一步将要匹配的内容。
  • m[1],这里是选择器的引导符，匹配例子中":",即冒号。并非只能使用“：”后面跟上选择器，用户还可以自定义其他的选择引导符。
  • m[2],即例子中gt,确定究竟是调用哪个选择器函数。
  • m[3],即例子中的“1”，它非常有用，是编写选择器函数最重要的一个参数。
  • m[4],上面的例子没有体现出来。例如"div:l(ss(dd))"这样的一个选择器中，m[4]就指向了(dd）这部分，注意是带括号的(dd)，而不只是dd。同事要注意，m[3]的值是ss(dd)而非ss。



下面是一个自定义选择器的一个简单的例子 

Js代码   jquery插件开发
  1. ;(function($){  
  2.     $.extend($.expr[":"],{  
  3.         between:function(a,i,m){  
  4.             var tem = m[3].split(",");  
  5.             return tem[0]-0<i && i<tem[1]-0;  
  6.         }  
  7.     });  
  8. })(jQuery);  


注意：这里再次利用jQuery.extend()方法来对jQuery对象的一部分进行扩展。咱们自定义的选择器仅仅是jQuery.expr[":"]对象的一部分，同时也是一个Object对象。 

插件使用： 

Js代码   jquery插件开发
  1. $(function(){  
  2.         $("div:between(1,4)").css("background","white");  
  3.     });  



最后说一下编写插件的基本要点： 

  • jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他js库插件混淆。例如命名为jquery.color.js。
  • 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。
  • 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是dom元素。
  • 可以通过this.each来遍历所有的元素
  • 所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人不规范代码给插件带来影响。
  • 插件应当返回一个jQuery对象，以保证插件的可链式操作。除非插件返回的是一些需要获取的值，例如字符串或者数组等。
  • 避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示。这样可以避免冲突。当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。

转自：http://skyuck.iteye.com/blog/1075498

相关推荐