写了个最简单的jQuery插件

最新推荐文章于 2022-07-27 22:02:45 发布

caiknife

最新推荐文章于 2022-07-27 22:02:45 发布

阅读量711

点赞数

分类专栏： JS/jQuery 文章标签： jQuery插件 jQuery HTML

本文链接：https://blog.csdn.net/caiknife/article/details/8790073

版权

JS/jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

每天都要学习到新的东西，才算是有意义的，以前的我真是在浪费青春。

今天把jQuery插件开发看了一下，写了一个最简单的，给一个元素内部用strong标签包上。

HTML源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.highlight.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
</head>
<body>
    <h1>jQuery plugins</h1>
    <p>Hello, world!</p>
    <p>Hello, jQuery!</p>
    <p>Hello, jQuery plugins!</p>
</body>
</html>

插件代码：

(function($){
    $.fn.highlight = function(options) {
        var opts = $.extend($.fn.highlight.defaults, options || {});
        debug(opts);
        return this.each(function(){
            var markup = $(this).html();
            markup = "<strong>" + markup + "</strong>";
            $(this).html(markup);
        });
    };

    $.fn.highlight.defaults = {
        background: "yellow",
        foreground: "green"
    };

    var debug = function(x) {
        if (console && console.log) {
            console.log(x);
        }
    }
})(jQuery); // (function(x){...})(x)的用法表示定义完函数之后立即执行，称为即时函数

测试代码：