day 32 jQuery插件重复了

Posted 2021-09-28 shasha

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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插件重复了的主要内容，如果未能解决你的问题，请参考以下文章

python学习_day61_登录验证及表格增删改作业

Java技术jQuery自定义插件开发实践

25个可遇不可求的jQuery插件

围绕 jQuery 插件的奇怪 Javascript 代码 [重复]

几个非常实用的JQuery代码片段

Bootstrap 4 和 jQuery 验证插件 [重复]

day 32 jQuery插件 重复了