JQuery插件写法练习Demo

最新推荐文章于 2021-08-04 12:48:34 发布

chanzig

最新推荐文章于 2021-08-04 12:48:34 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： jquery插件

本文链接：https://blog.csdn.net/chanzig/article/details/46399995

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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