您的位置:首页 » 前端开发 » jQuery » 正文

jQuery插件开发入门案例

jQuery插件开发不一定要高大上,能解决实际问题,增强代码可重用性,使代码易于维护管理即可。

下面这个案例是《锋利的jQuery》第二版插件部分的,适合入门学习,以便了解插件学习开发的正确打开方式。这个插件的作用就是让table表格实现奇偶行变色,并且在点击后切换高亮样式、checkbox选中状态。

因为注释已经够详细了,所以在看懂这个案例后,可根据思路自己写一遍,然后放到chrome浏览器进行测试,可以通过设置断点来跟踪查看变量以及JS对象的实际值及调用方法。

1、HTML代码部分

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <title>jQuery插件开发入门案例</title>
  6. <style type=“text/css”>
  7.     /*表格效果样式*/
  8.     table{ border-collapse:collapse; }
  9.     table td{ border: 1px solid #ddd; padding: 10px; }
  10.     .odd{ background: #f2f2f2; }
  11.     .even{ background: #fff; }
  12.     .selected{ background: red; color:#fff; }
  13. </style>
  14. <script src=“jquery.min.js”></script>
  15. <script type=“text/javascript” src=“jQuery.afterColor.js”></script>
  16. <script>
  17. $(function(){
  18.     //配置了自定义参数
  19.     //$(“.tableTest”).afterColor({odd:”odd1″,even:”even1″,selected:”selected1″});
  20.     $(“.tableTest”).afterColor();
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. <table class=“tableTest”>
  26.     <tbody>
  27.         <tr>
  28.             <td><input type=“checkbox” name=“ckbox1” checked=“checked”></td>
  29.             <td>我已经默认被选中了,高亮了有没有!</td>
  30.         </tr>
  31.         <tr>
  32.             <td><input type=“checkbox” name=“ckbox1”></td>
  33.             <td>我还没有被选中,但你可以试试点击我看看</td>
  34.         </tr>
  35.         <tr>
  36.             <td><input type=“checkbox” name=“ckbox1”></td>
  37.             <td>我还没有被选中,但你可以试试点击我看看</td>
  38.         </tr>
  39.     </tbody>
  40. </table>
  41. <p>&nbsp;</p>
  42. <table class=“tableTest”>
  43.     <tbody>
  44.         <tr>
  45.             <td><input type=“checkbox” name=“ckbox2”></td>
  46.             <td>我还没有被选中,但你可以试试点击我看看</td>
  47.         </tr>
  48.         <tr>
  49.             <td><input type=“checkbox” name=“ckbox2”></td>
  50.             <td>我还没有被选中,但你可以试试点击我看看</td>
  51.         </tr>
  52.         <tr>
  53.             <td><input type=“checkbox” name=“ckbox2”></td>
  54.             <td>我还没有被选中,但你可以试试点击我看看</td>
  55.         </tr>
  56.     </tbody>
  57. </table>
  58. <p>&nbsp;</p>
  59. <table class=“tableTest2”>
  60.     <tbody>
  61.         <tr>
  62.             <td><input type=“checkbox” name=“ckbox3”></td>
  63.             <td>选我试试,选择不了就在插件里去掉this哦</td>
  64.         </tr>
  65.         <tr>
  66.             <td><input type=“checkbox” name=“ckbox3”></td>
  67.             <td>我什么都不知道,我是来围观的</td>
  68.         </tr>
  69.         <tr>
  70.             <td><input type=“checkbox” name=“ckbox3”></td>
  71.             <td>我什么都不知道,我是来围观的</td>
  72.         </tr>
  73.     </tbody>
  74. </table>
  75. </body>
  76. </html>

2、插件部分,将插件保存为jQuery.afterColor.js

  1. ;(function($){
  2.     //封装对象方法使用$.fn.extend,目前大部分插件是基于该方法扩展
  3.     jQuery.fn.extend({
  4.         afterColor:function(option){
  5.             //合并拓展已有的和传进来的object对象(option),即如果用户调用插件时设置了option就用用户的,否则就是默认值
  6.             option=jQuery.extend({
  7.                 odd:“odd”,
  8.                 even:“even”,
  9.                 selected:“selected”
  10.             },option);
  11.             //this指的是当前通过选择器获取的Jquery对象(比如本例的tableTest表格对象),插件内部通过this获取的都是对象,而不像一般方法是DOM元素,改成$(this)亦可
  12.             //如果下面不使用$(“tbody>tr:odd”,this)这种带this的方式,那么页面上所有的table都会生效
  13.             $(“tbody>tr:odd”,this).addClass(option.odd);
  14.             $(“tbody>tr:even”,this).addClass(option.even);
  15.             //点击当前tr对象时
  16.             $(“tbody>tr”,this).click(function(){
  17.                 //这个$(this)就是当前点击的tr对象了
  18.                 var hasSelected=$(this).hasClass(option.selected);
  19.                 //以下这行是JS通过[]这个装载表达式实现访问对象属性和方法,”[]”,”.”是两种访问方法,只是”.”不能接表达式
  20.                 $(this)[hasSelected?“removeClass”:“addClass”](option.selected)
  21.                 .find(“:checkbox”).prop(“checked”,!hasSelected);
  22.                 //上面这句代码等价于下面的注释语句
  23.                 /*if(hasSelected){  
  24.                     $(this).removeClass(option.selected).find(“:checkbox”).prop(“checked”,false);
  25.                   }else{
  26.                     $(this).addClass(option.selected).find(“:checkbox”).prop(“checked”,true);
  27.                 }*/
  28.             });
  29.             //如果默认被选中,则增加选中样式
  30.             $(“tbody>tr:has(:checked)”,this).addClass(option.selected);
  31.             //返回传进来的Jquery对象,以便可链式操作
  32.             return this;
  33.         }
  34.     });
  35. })(jQuery);
  • 有412次围观
除特别声明外, 本站所有内容皆为原创,转载时请务必以超链接形式标明文章出处和作者信息

分享给我的好友看看:

 

关于作者:

贡献:kouok已经在第三评发表72篇文章了,你也来试试

简介:读大学前还不懂如何用电脑下载音乐,误选计算机专业成为一枚非典型性程序员、web前端、略懂UI设计。第三评、可好网、本站创始人。欢迎关注我的微薄

Ta的专栏 | 新浪微薄 | 腾讯微薄 | 其他SNS






快捷键:Ctrl+Enter