jquery 插件编写例子5个

最新推荐文章于 2021-10-21 16:47:57 发布

ForMyWebFrontSide

最新推荐文章于 2021-10-21 16:47:57 发布

阅读量587

点赞数

分类专栏： JQuery jq插件 js原理文章标签： jquery 插件

本文链接：https://blog.csdn.net/ForMyQianDuan/article/details/52006027

版权

js原理同时被 3 个专栏收录

38 篇文章 0 订阅

订阅专栏

JQuery

36 篇文章 0 订阅

订阅专栏

jq插件

4 篇文章 0 订阅

订阅专栏

<!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/

ForMyWebFrontSide

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 插件编写例子5个

<!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>
复制链接

扫一扫