首页 > 代码库 > jquery插件学习相关（1）
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;}
jquery插件学习相关（1）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。