导航

$.extend与$.fn.extend()

Posted on 2018-04-08 20:19  小飞博客  阅读(418)  评论(0)  编辑  收藏  举报

很多情况下,用户需要对jQuery插件进行二次开发,那么我们来看看JQ原开发者为我们提供的两种扩展插件的方式如下:

1.类别类：
相当于为jquery扩展一个类,比如现在我要扩展一个简单的想加的功能函数sum,如下:
之后我们可以直接用:

 1 $.extend({
 2     sum:function(){
 3         var num=0;
 4         for(var i=0;i<arguments.length;i++){
 5             num+=arguments[i];
 6         }
 7         return num;
 8     }
 9 })
10 console.log($.sum(12,3))

2.对象级别：
相当于扩展一个对象,即为jQuery.fn.extend(object):增加两个插件方法：如下

 1 jQuery.fn.extend({
 2   check: function() {
 3     return this.each(function() { this.checked = true; });
 4   },
 5   uncheck: function() {
 6     return this.each(function() { this.checked = false; });
 7   }
 8 });
 9 
10 $("input[type=checkbox]").check();
11 $("input[type=radio]").uncheck();

 自己想要批量移除一个元素身上的属性，百度了一下没有找到，就自己用jq提供的拓展方法写了一个，具体代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>批量移除元素身上的属性</title>
 6 </head>
 7 <body>
 8     <div id="box" flag="true" status="ok" bac="11"></div>
 9 </body>
10 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
11 <script>
12 jQuery.fn.extend({
13     batchRemove:function(arr){
14         for(var i=0;i<arr.length; i++){
15             $(this).removeAttr(arr[i]);
16         }
17     }
18 })
19 $('#box').batchRemove(['flag','bac'])
20 </script>
21 </html>