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>

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;}