day 32 jQuery插件 重复了

1. jQuery.extend() 和jQuery.fn.extend()

官方给出的解释：

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个文档中)；
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性，来扩展一个新的jQuery实例方法)

(1) jQuery.extend()

方法1：extend()

为$添加方法

这个扩展也就是所谓的静态方法, 只跟这个类本身有关。跟你具体的实例化对象是没关系的。

(回顾：类方法是通过类名来直接调用，如Array.from Math.floor())


$.extend({
    //需要添加的插件(函数)
});

举例：

    $.extend({
        // 需要添加的插件(函数)
        fun: function(){
            console.log("haha");
        }
    });
    //这里$符号模拟的就是类名，等价于类方法
    $.fun();//haha

案例：给$添加一个计算器插件

<script type="text/javascript">
    // 计算器插件添加给$
    $.extend({
        calc: function(a, b, opt) {
            switch (opt) {
                case "+":
                    return a + b;
                case "-":
                    return a - b;
                case "*":
                    return a * b;
                case "/":
                    return a / b;
            }
        }
    });
    console.log($.calc(1, 2, "+"));//3
    console.log($.calc(1, 2, "-"));//-1
    console.log($.calc(1, 2, "*"));//2
    console.log($.calc(1, 2, "/"));//0.5
</script>

方法2：添加一个新的全局函数

    $.fun1 = function(){
        console.log('xixi');
    }
    $.fun1();//xixi

方法3：使用命名空间

    $.myNameSpace = {
        fun:function(){
            console.log("heihei");
        }
    }
    $.myNameSpace.fun();//heihei

(2) jQuery.fn.extend()

为jQueryDom对象添加方法
大部分插件都是用jQuery.fn.extend()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="">

        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
    // 为jQueryDom对象添加方法
    $.fn.extend({
        change: function(w, h, color) {
            $(this).css({
                width: w,
                height: h,
                backgroundColor: color
            });
        }
    });

    $("div").change(100, 100, "pink");
    $("li").eq(1).change(50, 50, "pink");
</script>

案例： jQuery版弹出框

（注意：jQuery不支持ES6的语法）

(3) 两者区别总结

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

2. 引入第三方插件

使用第三方插件的精髓：求Demo

jquery之cookie操作：

首先: jQuery cookie插件下载
- 下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js。
- 下载：http://plugins.jquery.com/coo...

1) 添加一个会话cookie

$.cookie('the_cookie', 'the_value');
//例如：
$.cookie("name","xiaoming");

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

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

$.cookie('the_cookie', 'the_value', { expires: 7 });
//例如：
$.cookie("age",18,{expires: 7});

3）读取cookie

$.cookie('the_cookie');
//例如：
$.cookie("name");

4）删除cookie

$.cookie('the_cookie', null, -1);   //通过传递null作为cookie的值即可
//例如：
$.cookie("age",null,-1);

day 32 jQuery插件重复了

1. jQuery.extend() 和jQuery.fn.extend()

(1) jQuery.extend()

方法1：extend()

方法2：添加一个新的全局函数

方法3：使用命名空间

(2) jQuery.fn.extend()

案例： jQuery版弹出框

(3) 两者区别总结

2. 引入第三方插件

shasha

引用和评论

day34 gulp

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版

day 32 jQuery插件 重复了

1. jQuery.extend() 和jQuery.fn.extend()

(1) jQuery.extend()

方法1：extend()

方法2：添加一个新的全局函数

方法3：使用命名空间

(2) jQuery.fn.extend()

案例： jQuery版弹出框

(3) 两者区别总结

2. 引入第三方插件

shasha

引用和评论

day34 gulp

采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版

day 32 jQuery插件重复了