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