jQuery 插件面向对象的封装

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.1.0.js">
        </script>
        <script type="text/javascript">
            // 封装jq插件
            // 面向对象思想
            // 设置一个构造函数
            var Beautifuler = function(ele, opt) {
                this.element = ele,
                    // 设置默认样式
                    this.defaultStyle = {
                        color: 'red',
                        fontSize: '16px'
                    },

                    // 使用extend方法，根据外部是否传入新样式来决定使用哪一套样式表
                    this.setting = $.extend({}, this.defaultStyle, opt);

            };

            // 向原型中挂载方法，在方法中把样式添加进选中的节点
            Beautifuler.prototype = {
                    beautiful: function() {
                        // 这里边的this指向的是创建出来的对象
                        return this.element.css({
                            'color': this.setting.color,
                            'fontSize': this.setting.fontSize
                        });
                    }
                }
                // 把定义出来的对象挂载进jq插件
            $.fn.setFont = function(option) {
                // 创建对象实例
                var beautifuler = new Beautifuler(this, option);
                // 调用对象方法，让字体样式发生改变
                return beautifuler.beautiful();
            }
            $(function() {
                // 调用插件修改字体样式
                $('p').setFont({
                    color: 'green',
                    fontSize: '26px'
                })
            })
        </script>
    </head>

    <body>
        <p>好桑心，这不是我要的那种结果，结果~</p>

    </body>

</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容