使用jquery封装自己的插件使用jquery封装自己的插件。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

第一步：不用说，首先要引入jquery。

第二步开始编写自己的插件。

示例:

(function($){
    //通过$.fn.方法名称，定义自己的插件调用名称
    $.fn.changeColor = function(settings){
        if(this.length < 1) return;
        //通过$.extend()方法扩展参数
        settings = $.extend({
            contId:null,//一般为页面中元素的id（用于放置元素内容，不能为空）
            color: null,//这里是自定义参数
        },settings)
        
        if(settings.contId == null) return;
        
        $('#' + settings.contId).css({
            color: settings.color
        })
    };
})(jQuery)

这样一个简单的基于jquery的插件就编写完成了。

页面调用:

<!--首先引入jquery,可直接引入网络的，也可以直接引入本地的-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
<!--再引入刚刚编写的插件，这里命名为aa.js-->
<script src="./aa.js"></script>

<body>
    <div id="textId"></div>
    <script>
        $(function(){
            //调用
            $("#textId").changeColor({
                color: '#f40'
            });
        })
    </script>
</body>

到这里就全部完成了。