jQuery插件 jQuery extend()、jQuery.fn.extend()

清疚 2023-02-21 11:42 15阅读 0赞

#### 一、jQuery extend()、jQuery.fn.extend() 简介 ####

插件绑定（为jQuery对象增加函数），extend() 方法挂载在 jQuery 和 jQuery.fn 两个不同对象上，代码实现相同，功能却太一样：

*  jQuery.extend()：把两个或者更多的对象合并到第一个文档中（$ .直接调用）；
 *  jQuery.fn.extend()：把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法（$ (selector).调用）。

做个类比，把jQuery当成类，jQuery.extend()扩展类的方法； jQuery.fn.extend()：拓展类的实例化的方法。

#### 二、jQuery.extend() ####

注意：

*  如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
 *  如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

1、jQuery.extend(object)添加的是全局函数（静态的，属于整个类族，用$直接调用），有三个方式：

// 方法一：使用jQuery.extend(object)添加全局函数
            // $是jQuery的别名，用$或者用jQuery都行 
            jQuery.extend({ 
                oneFunction:function(){ 
                    console.log("第一种方法：全局函数")
                }
            })
            jQuery.oneFunction();//就能直接调用
    
            // 方法二：直接扩展jQuery
            jQuery.twoFounction=function(){ 
                console.log("第二种方法：也是全局的")
            }
            $.twoFounction();
    
            // 方法三：命名空间(防止与jQuery自带的函数命名冲突，避免命名相同)
            jQuery.thisNameSpace={ 
                add:function(){ 
                    console.log("命名空间中的第一个函数")
                }
            }
            $.thisNameSpace.add();

2、案例：写一个插件，能够实现加减乘除简单功能

$.extend({ 
        operator:function(data1,opt,data2){ 
            switch(opt){ 
                case "+":return data1+data2;
                case "-":return data1-data2;
                case "*":return data1*data2;
                case "/":return data1/data2;
            }
        }
    })
    console.log($.operator(2,"*",9));
    console.log($.operator(2,"-",9));

![在这里插入图片描述][20200701150729640.png]  
3、提个问题：如果在一个页面里面写了插件，在另外的页面里面也仍然能调用吗？  
答案： 并不行，不能跨页面，必须有根据的提前定义。  
解释：比如，exercise.html里面扩展了一个函数，在另一个页面try.html里面不经定义直接使用该函数，报错说该函数不存在。说明，exercise.html里面的函数扩展并没有被加入到jQuery底层代码中。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][202007011502058.png]

#### 三、jQuery.fn.extend() ####

$.fn.extend() 函数为jQuery扩展一个或多个实例属性和方法(主要用于扩展方法)。

提示：jQuery.fn是jQuery的原型对象，其extend()方法用于为jQuery的原型添加新的属性和方法。这些方法可以在jQuery实例对象上调用。

对象是类的实例化，例如$ ("\#abc") ，$(div)；而jQuery.fn.extend拓展的方法，一般用在jQuery对象上面。

jQuery.fn = jQuery.prototype = {
          init:funtion(selector,context){
                //.....
         }
    }

**案例1：** 点击button，调用自定义的jQuery对象插件，显示小方块

<button>点击变方块</button>
    <div id="box"></div>
    <script> $.fn.extend({ changeColor:function() { $(this).css({ backgroundColor: "tomato", width: 50, height: 50 }) } }) $("button").click(function(){ $("#box").changeColor();//用在jQuery对象上的 }) </script>

![在这里插入图片描述][20200701153839556.gif]

**案例2：** 弹出框插件。

点击按钮，弹出对话框，每次都在最中间。考虑到是插件，所以，对话框的打开及关闭功能都写在一起，当被调用弹出框插件时，就能完整的引入，不需要再进行其他设置。

![在这里插入图片描述][20200701164024965.gif]

#### 四、 jQuery extend()、jQuery.fn.extend() 的区别 ####

1.  两者调用方式不同：  
    jQuery.extend()，一般由传入的全局函数来调用，主要是用来拓展个全局函数，如 $ .init()，$ .ajax()；  
    jQuery.fn.extend(),一般由具体的实例对象来调用，可以用来拓展个选择器，如 $ .fn.each();
2.  两者的主要功能作用不同：  
    jQuery.extend(object)      为扩展jQuery类本身，为自身添加新的方法；  
    jQuery.fn.extend(object)  给jQuery对象添加方法。
3.  大部分插件都是用jQuery.fn.extend() 完成的。

#### 五、第三方插件的引入 ####

以jQuery的cookie插件为例，简单介绍下插件的引入及使用。

**（一） jQuery cookie插件下载**

下载与引入：先引入jquery，再引入jquery.cookie.js（jquery.cookie.js基于jquery）；  
下载地址：http://plugins.jquery.com/cookie/

**（二） 步骤**

**1、添加一个"会话cookie"：**

`$.cookie('the_cookie', 'the_value');`

注意：这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。

**2、创建一个cookie并设置有效时间为 7天：**

`$.cookie('the_cookie', 'the_value', { expires: 7 });`

这里指明了cookie有效时间，所创建的cookie被称为“持久 cookie（注意单位是：天）。

**3、创建一个cookie并设置 cookie的有效路径：**

`$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });`

在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

**4、读取cookie：**

`cookie('the_cookie');`

**5、删除cookie：**

`$.cookie('the_cookie', null, -1); //通过传递null作为cookie的值即可`

**6、可选参数：**

$.cookie('the_cookie','the_value',{ 
        expires:7,  
        path:'/',
        domain:'jquery.com',
        secure:true
    })

*  expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
 *  path：（String）创建该Cookie的页面路径；
 *  domain：（String）创建该Cookie的页面域名；
 *  secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS。

[20200701150729640.png]: https://img-blog.csdnimg.cn/20200701150729640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200701145909431.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200701145933577.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[202007011502058.png]: https://img-blog.csdnimg.cn/202007011502058.png
[20200701153839556.gif]: https://img-blog.csdnimg.cn/20200701153839556.gif
[20200701164024965.gif]: https://img-blog.csdnimg.cn/20200701164024965.gif