为jQuery写插件

最新推荐文章于 2024-02-18 09:20:47 发布

白色的海

最新推荐文章于 2024-02-18 09:20:47 发布

阅读量443

点赞数 1

分类专栏： web前端文章标签： jquery 插件

本文链接：https://blog.csdn.net/kongxh_1981/article/details/50396369

版权

web前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

很多场合，我们都会调用jQuery的插件去完成某个功能，比如slider。

如下图，做一个div，通过“$( "#slider" ).slider();”的方式直接将div变成slider，比起slider($('#slider'))更贴近jQuery的链式调用写法，可读性和通用性更好些。

那么，我们也来为jQuery写插件。便于项目中的组件化。

方法是非常简单的，那就写一个测试的demo来作为基础的验证吧。

定义html，假设我们要把test div修改成宽高都是200px，背景色为红色的这么一个插件功能。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id='test'></div>

        <script type='text/javascript' src="jquery-1.11.3.min.js"></script>
        <script type='text/javascript'>
        </script>
    </body>
</html>

写一个名为test的插件函数，完成插件的功能。这里可以直接使用this，表示选择器选择的那个元素封装对象。

            function test(){
                this.css('background-color','red');
                this.css('width', '200');
                this.css('height', '200');
            }

完成一个自执行函数，将jQuery传进去，关键就是把插件函数挂到jQuery.fn中去。

            (function(jquery){
                jquery.fn.test = test;
            })(jQuery);

调用的时候，就用jQuery选择器选择test div后直接链式调用test插件函数即可。

$('#test').test();

如此，最简单的插件就完成了。

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id='test'></div>

        <script type='text/javascript' src="jquery-1.11.3.min.js"></script>
        <script type='text/javascript'>
            function test(){
                this.css('background-color','red');
                this.css('width', '200');
                this.css('height', '200');
            }

            (function(jquery){
                jquery.fn.test = test;
            })(jQuery);

            $('#test').test();

        </script>
    </body>
</html>

写一个名为test的插件函数，完成插件的功能。这里可以直接使用this，表示选择器选择的那个元素封装对象。

白色的海

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为jQuery写插件

很多场合，我们都会调用jQuery的插件去完成某个功能，比如slider。如下图，做一个div，通过“$( "#slider" ).slider();”的方式直接将div变成slider，比起slider($('#slider'))更贴近jQuery的链式调用写法，可读性和通用性更好些。那么，我们也来为jQuery写插件。便于项目中的组件化。方法是非常简单
复制链接

扫一扫