jquery 自定义插件

王翼鹏

于 2021-04-26 19:34:42 发布

阅读量152

点赞数

分类专栏： JavaScript html 文章标签： jquery js javascript html web

本文链接：https://blog.csdn.net/zghnpdswyp/article/details/116169160

版权

JavaScript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

这篇博客展示了如何创建一个名为myO的jQuery插件，并详细解释了其内部结构，包括私有变量和方法以及对外暴露的功能。在插件中，作者定义了一个内部变量tt和一个内部方法haa，同时提供了test和change两个对外接口。在实际应用中，通过$(document).ready()调用插件并演示了如何使用test和change方法。

摘要由CSDN通过智能技术生成

定义插件：

//插件编写
;(function ($) {
    $.fn.myO = function () {
        
        var tt = "aaa";  //内部变量，外部不可以调用
        var haa = function () {
            alert("haa");
        } //内部方法，外部不可以调用
        this.test = function () {
            alert(tt);
            change();
            alert(tt);
        } //对外暴露的方法，外部可以调用
        function change() {
            tt = "444";
        }//对外暴露的方法，外部可以调用
        alert(tt);
        tt = "sss";
        this.append("<input type='button'/>");
        return this;


    }
})(jQuery);

调用：


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="~/scripts/jquery.myplugin.js"></script>

    
    <script type="text/javascript">

        $(document).ready(function () {
            var it = $("#preview").myO();
            it.test(); //对外暴露的方法，外部可以调用
            it.haa(); //内部方法，外部不可以调用
            it.tt; //内部变量，外部不可以调用
            it.change(); //对外暴露的方法，外部可以调用
        });
    </script>
</head>
<body>

    <div id="preview">

    </div>
   
</body>
</html>