jquery 插件编写例子5个

来源：互联网发布：淘宝联盟的pid是什么编辑：程序博客网时间：2024/05/17 06:13

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div>    <a href="http://www.cnblog.com">cnblog</a>    <a href="http://www.zhihu.com">zhihu</a>    <a href="http://www.csdn.com">csdn</a></div><a id='o_a1' href="http://defaultsegment.com">defaultsegment</a><section>    <a href="http://www.cnblog.com">cnblog</a>    <a href="http://www.zhihu.com">zhihu</a>    <a href="http://www.csdn.com">csdn</a></section></body><script src="../../jquery_1.11.3.min.js"></script><script src="jquery.myplugin.js"></script><script>    $.extend({        log:function(message){            var now = new Date(),            y = now.getFullYear(),                    m=now.getMonth()+ 1,                    d=now.getDate(),                    h=now.getHours(),                    min = now.getMinutes(),                    s=now.getSeconds(),                    time=y+'/'+m+'/'+d+' '+h+':'+min+":"+s;            console.log(time+' my app:'+message);        },        get_my_date:function(message){            var now= new Date(),                    y=now.getFullYear(),                    m=now.getMonth()+ 1,                    d=now.getDate(),                    h=now.getHours(),                    min = now.getMinutes(),                    s=now.getSeconds(),                    time=y+'/'+m+'d'+'/'+h+':'+min+':'+s;            console.log(time+' app works:'+message);        }    })</script><script> //1. $.log("hello world"); //2 $.get_my_date('server start'); //3. $('div>a').css({        'display':'block'    }).cssPlugin2({        'color':'green',        'fontSize':'40px'    }); //4.    $('#o_a1').cssPlugin2(); //5. $('section>a').myPlugin({        'color':'green',        'fontSize':'40px'    })</script></html>

/** * Created by Administrator on 2016/7/23 0023. * jquery.myplugin.js */$.extend({    log:function(message){        var now = new Date(),            y = now.getFullYear(),            m=now.getMonth()+ 1,            d=now.getDate(),            h=now.getHours(),            min = now.getMinutes(),            s=now.getSeconds(),            time=y+'/'+m+'/'+d+' '+h+':'+min+":"+s;        console.log(time+' my app:'+message);    },    get_my_date:function(message){        var now= new Date(),            y=now.getFullYear(),            m=now.getMonth()+ 1,            d=now.getDate(),            h=now.getHours(),            min = now.getMinutes(),            s=now.getSeconds(),            time=y+'/'+m+'d'+'/'+h+':'+min+':'+s;        console.log(time+' app works:'+message);    }});$.fn.cssPlugin1=function(){    this.css('color','red');    return this.each(function(){        $(this).append(' '+$(this).attr('href'));    })}$.fn.cssPlugin2=function(options){    var defaults = {        'color':'red',        'fontSize':'12px'    };    var settings = $.extend({},defaults,options);    return this.css({        'color':settings.color,        'fontSize':settings.fontSize,        'display':'block'    }).each(function(){        $(this).append(' '+$(this).attr('href'));    });};(function($, window, document,undefined) {    //定义Beautifier的构造函数    var Beautifier = function(ele, opt) {        this.$element = ele,            this.defaults = {                'color': 'red',                'fontSize': '12px',                'textDecoration': 'none',                'display':'block'            },            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,                'display':this.options.display            });        }    }    //在插件中使用Beautifier对象    $.fn.myPlugin = function(options) {        //创建Beautifier的实体        var beautifier = new Beautifier(this, options);        //调用其方法        return beautifier.beautify();    }})(jQuery, window, document);

参考：
1.http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
2.http://learn.jquery.com/plugins/

0 0