jquery插件学习相关（1）

jQuery插件机制

    jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()和jQuery.extend()方法

    jQuery.fn.extend()用于封装对象方法插件

    jQuery.extend()用于封装全局函数的插件和选择器插件，同时也可扩展已有的Object对象。

 

   jQuery.extend()

 jQuery.extend(target,obj1...objN)

  常用于设置插件方法的一系列默认参数

  

 function foo(option){
          option = jQuery.extend({
              name : "bar",
              length : 5
          },option);/*option是传递的参数*/

 

插件种类：

   1.封装对象方法插件

   2.封装全局函数的插件

   3.选择器插件

 

（注：在插件中，this指向的是当前通过选择器获取到的jQuery对象，一般的方法那样，内部的this指向的是DOM元素）

 

例 以表格变化为例：

 1 <div class="color">
 2         this is a test about font color!
 3     </div>
 4     <table>
 5         <thead>
 6             <tr>
 7                 <td></td>
 8                 <td>姓名</td>
 9                 <td>性别</td>
10                 <td>站驻地</td>
11             </tr>
12         </thead>
13         <tbody>
14             <tr>
15                 <td><input type="checkbox" name="" id="" class="name"></td>
16                 <td>xx1</td>
17                 <td>女</td>
18                 <td>四川</td>
19             </tr>
20             <tr>
21                 <td><input type="checkbox" name="" id="" class="name"></td>
22                 <td>xx1</td>
23                 <td>女</td>
24                 <td>四川</td>
25             </tr>
26             <tr>
27                 <td><input type="checkbox" name="" id="" class="name"></td>
28                 <td>xx1</td>
29                 <td>女</td>
30                 <td>四川</td>
31             </tr>
32             <tr>
33                 <td><input type="checkbox" name="" id="" class="name"></td>
34                 <td>xx1</td>
35                 <td>女</td>
36                 <td>四川</td>
37             </tr>
38             <tr>
39                 <td><input type="checkbox" name="" id="" class="name"></td>
40                 <td>xx1</td>
41                 <td>女</td>
42                 <td>四川</td>
43             </tr>
44         </tbody>
45     </table>
46 </body>
View Code

 js：

 1 //表格插件的使用
 2  ;(function($){
 3    $.fn.extend({
 4         "Bctest":function(option){
 5             option = $.extend({
 6                 odd : "odd",
 7             even : "even",
 8             choose : "choose"
 9         },option);
10 
11         $("tbody>tr:odd",this).addClass(option.odd);
12      $("tbody>tr:even",this).addClass(option.even);
13 
14      $("tbody>tr",this).click(function(){
15               //1.实现复选框的选择
16               var ss = $(this).find("input").attr("checked");
17               if(!ss){
18                 $(this).find("input").attr("checked","checked");
19                 $(this).addClass(option.choose);
20               }else{
21                   $(this).find("input").removeAttr("checked");
22                   $(this).removeClass(option.choose);
23 
24               }
25           });
26      return this;
27 
28         }
29    })
30  })(jQuery);

引用方式：

$(function(){
         $("table").Bctest();
     })

css样式：

 1  .color{
 2             color:blue;
 3         }
 4         td{
 5             width:50px;
 6             font-size:12px;
 7             text-align:center;
 8         }
 9 
10         .odd{
11             background: #f1f1f1;
12         }
13        .even{
14            background: #5f5f5f;
15        }
16 
17        .choose{ background:#FF6500;color:#fff;}
View Code

 

posted @ 2014-12-19 23:04  大萝卜..  阅读(133)  评论(0)  编辑  收藏  举报