zoukankan      html  css  js  c++  java
  • jquery插件写法

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <ul>
                <li>
                    <a href="http://www.webo.com/liuwayong">我的微博</a>
                </li>
                <li>
                    <a href="http://http://www.cnblogs.com/Wayou/">我的博客</a>
                </li>
                <li>
                    <a href="http://wayouliu.duapp.com/">我的小站</a>
                </li>
            </ul>
            <p>这是p标签不是a标签,我不会受影响</p>
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <script type="text/javascript">
                ;
                (function($, window, document, undefined) {
                    //定义Beautifier的构造函数
                    var Beautifier = function(ele, opt) {
                        this.$element = ele,
                            this.defaults = {
                                'color': 'red',
                                'fontSize': '12px',
                                'textDecoration': 'none'
                            },
                            this.options = $.extend({}, this.defaults, opt)
                    }
                    //定义Beautifier的方法
                    Beautifier.prototype = {
                        beautify: function() {
                            return this.$element.css({
                                'color': this.options.color,
                                'fontSize': this.options.fontSize,
                                'textDecoration': this.options.textDecoration
                            });
                        }
                    }
                    //在插件中使用Beautifier对象
                    $.fn.myPlugin = function(options) {
                        //创建Beautifier的实体
                        var beautifier = new Beautifier(this, options);
                        //调用其方法
                        return beautifier.beautify();
                    }
                })(jQuery, window, document);
                $(function() {
                    $('a').myPlugin({
                        'color': '#2C9929',
                        'fontSize': '20px',
                        'textDecoration': 'underline',
                    });
                })
            </script>
        </body>
    
    </html>
  • 相关阅读:
    SpringBoot第十七篇:定时任务
    20年研发管理经验谈(十)
    SpringBoot第十六篇:自定义starter
    20年研发管理经验谈(九)
    20年研发管理经验谈(八)
    20年研发管理经验谈(七)
    SpringBoot第十五篇:swagger构建优雅文档
    CSS聊天气泡
    Java单例模式
    Java观察者模式
  • 原文地址:https://www.cnblogs.com/jaume/p/8093758.html
Copyright © 2011-2022 走看看