jQuery编写插件的小实例

最新推荐文章于 2020-06-07 18:42:51 发布

Rickkk

最新推荐文章于 2020-06-07 18:42:51 发布

阅读量397

点赞数

分类专栏： Javascript 文章标签： jquery 实例插件

本文链接：https://blog.csdn.net/xuxu_1989/article/details/41083015

版权

Javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天学习了Javascript的闭包和jQuery编写插件的实例，乘着热乎劲，写了个小的功能。

Html

<p>Hello Javascript<p>

Javacript

/*
    This is just a test!!!
     Hilight text,user-defined css style by function format
    @author Rick.Xu
*/

(function($) {
    var defaluts =  {
        css:{"color":"black","background-color":"yellow"}
       };

    $.fn.extend({hilight:function(settings) {
        var opts = $.extend(true,{},defaluts,settings);  
        return this.each(function() {
            var $this = $(this);
            if(opts.format) {
                var txt = opts.format($this.html());
                $this.html(txt);
            }
            $this.css(opts.css);
            
        });
    }});
})(jQuery);

$(function() {
    $("p").hilight({
        css:{
            color:"red"
        },
        format:function(txt) {
            return "<I>"+txt+"</I>";
        }
    });
});

Result:

Hello Javascript

上传一个pdf学习资料 jQuery插件开发.pdf

local="http://download.csdn.net/" id="8154501" m_data="a6ccbdb7299c940343ab0e9127444304" class="preview-iframe" scrolling="no" frameborder="0" src="http://od.download.csdn.net/preview/preview.html" width="730" height="513">