JQuery插件写法练习Demo

83 阅读 0 评论 55 点赞

我是靠谱客的博主怡然苗条，最近开发中收集的这篇文章主要介绍JQuery插件写法练习Demo，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

做项目都是用的别人写的插件，然后还瞎几把改，看过这篇文章后，终于自己动手理解了一把。
GO -> JQuery插件写法

<html>
    <head>
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
        <script>
            (function($){
                    $.fn.changeHW = function (options) {//经常用options表示有多个参数。
                        var defaults={
                            //自定义方法或者参数
                            renderId:'',
                            width:'20px',
                            height:'30px',
                            bgcolor:'#555',
                            contendText:'',
                            clickFun:function() {}
                        }
                        var settings = $.extend(defaults, options);

                        $(this).css({
                                'width':settings.width,
                                'height':settings.height,
                                'background-color':settings.bgcolor
                            }); //页面加载的时候就执行
                        $(this).click(function(){

                            settings.clickFun();

                            $('#'+settings.renderId).text(settings.contendText)
                        }) //点击this的时候才会
                    };
                })(jQuery);
        </script>
    </head>
    <body>
        <header id="header"></header>

        <article id="article"></article>

        <footer></footer>
        <script type="text/javascript">
            $('#header').changeHW({
                    renderId:"article",
                    width:'100px',
                    height:'40px',
                    contendText:'Hello world',
                    clickFun:function (params) {
                        alert('你点了我 fuck');
                    }
                })
        </script>
    </body>
</html>