自定义jquery插件

Posted 居无常

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义jquery插件相关的知识，希望对你有一定的参考价值。

参考：http://blog.csdn.net/bao19901210/article/details/21540137/

自己看代码理解：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        (function($) {
            $.fn.smartTraffic = function(options) {
                var defualt = {
                    background:‘red‘,
                    test : function() {
                        this.second();
                        //alert("action test function");
                    },
                    second : function() {
                        //alert("action second function");
                        tryMyself();
                    }
                };

                function tryMyself() {
                    alert("tryMyself");
                }
                var opt = $.extend(defualt, options||{});
                $(this).css({
                    backgroundColor: opt.background
                });
                opt.test();
            };

        })(jQuery);
        $(function() {
            $(‘#test‘).smartTraffic({background: ‘yellow‘});
        });
    </script>
</head>
<body>
<div id="test" style="width: 100px; height: 100px; border:1px blue solid;"></div>
</body>
</html>

默认效果：

技术分享

修改效果：

技术分享

以上是关于自定义jquery插件的主要内容，如果未能解决你的问题，请参考以下文章

jQuery自定义插件

VS Code中自定义Emmet代码片段

jQuery自定义插件--banner图滚动

Sublime Text3自定义代码片段

自定义jquery插件

自定义JQuery插件