jQuery的插件操作及开发

jquery的插件是实现某一个功能，jquery并不是一个十全十美的框架，必然有其自身没有涉及到的内容，如果想通过jquery操作没有涉及到的内容，没法直接操作，这时候必须先加载插件，才能使用jq没有涉及到的功能，这个本来没有的功能被插件带来了。
比如：jq没有提供cookie的操作，我们需要搜索或者官网(jquery-cookie)找到它的插件。
插件的用法：基于jquery，所以必须先引入jquery，再引入插件，才能使用。

<script src="../jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script>
	console.log($.cookie);
	// 看说明书，readme文件
	// cookie的使用...
	$.cookie("user","admin",{
	    expires:3,
	    path:"/"
	});
	// 如何查看文档：
	   // 1.拿到文档：jq文档
	       // 官网，第三方翻译
	   // 2.1找目录
	   // 2.2直接查找对应的API
	   // 3.点开方法详细，根据案例，或方法说明，实际测试
</script>

jquery的插件开发

<script src="../jquery.js"></script>
<script>
    // var $ = "hello";
    // var jQuery = "world";
</script>
<script src="jquery.myAnimate.1.0.js"></script>
<script>
    // jQuery的插件开发：
        // 1.确定功能，确定插件的名字(文件名)：
            // jquery.myAnimate.1.0.js
        // 2.创建文件后，开启匿名函数，严格模式
        // 3.处理jq的入口变量
            // 放置被使用者无意间修改$入口
        // 4.准备向jq绑定方法
        // 5.在封装的插件函数的内部，实现功能
            // 内部的this，指向jq对象
                // 如果是绑定给DOM对象，那么this指向方法能被执行时选择器选中的DOM元素

    $("#box").myAnimate({
        left:500
    },1000).then((code)=>{
        alert(code)
    })

</script>

jquery.myAnimate.1.0.js

;(function($){
    "use strict";

    $.fn.myAnimate = function(tar, time){
        // console.log(this);
        time = time || 400;
        return new Promise((resolve)=>{
            this.animate(tar,time,function(){
                resolve("当前元素当前动画执行结束");
            })
        })
    }

})(jQuery);

jquery的扩展

<script src="../jquery.js"></script>
<script>
    // Array.prototype.norepeat = function(){}
    // var arr = [];
    // arr.norepeat();
    
    // jq的自定义扩展

    // $.abc();

    // 直接扩展给jquery对象，执行时必须通过jq对象执行，也叫jq的全局方法
    // $.extend({
    //     qwe:"hello",
    //     abc:function(){
    //         console.log("hello，world");
    //     }
    // })
    // console.log($.qwe);
    // $.abc();


    // 先执行jq，传参，选择器，选择器返回的是DOM元素，这种执行为jq的DOM方法
    // 添加给jq对象的方法，否则jq的DOM元素拿不到
    // 需要直接添加给jq的DOM对象，才能够通过DOM元素拿到这个方法

    // jq的DOM对象是，固定写法：$.fn

    // $.fn.extend({
    //     asd:function(){
    //         console.log("extend")
    //     }
    // })
    // $("#box").asd();
    // $.abc();

    // 利用jq的extend这个方法，可以自己开发jq插件

</script>

多库共存问题

<script src="../jquery.js"></script>
<script>

    // 多库共存：
        // jQ是一个库
        // 如果项目中不仅引入了一个jq还引入了其他内容，两个第三方都要使用
        // jq提供了一个$的入口，如果还有另外一个第三方也提供了$入口，咋办？
        // jq提供了另一个jQuery的入口，如果还有另外一个第三方也提供了jQuery入口，咋办？

        // 为了防止这种情况的发生，jq让出了自己的入口，可以让开发者自行修改jq的入口

        // jq自身做了一个自我删除的操作

        // 命名要符合变量的命名规则
        var aa = $.noConflict(true);// ；两个都删除
        
        console.log($);         // undefined
        console.log(jQuery);    // undefined

        console.log(aa);        // jquery函数

        aa("#box").css({
            width:100,height:100,background:"red"
        }).animate({
            width:200,
            height:300
        })

</script>