jQuery之美——插件机制

版权声明：黄河爱浪，[email protected]， https://blog.csdn.net/u013350495/article/details/82533210

上篇回顾：jQuery之美——对象访问

jQuery有着非常丰富的插件库，插件使用起来，非常方便，通过简单的调用就能轻松的实现相对繁琐的功能。其实在这背后凝聚者插件开发者大量的心血，那么jQuery插件是如何编写的呢，下面让我们来一探究竟。

jQuery的插件分为类级别插件和对象级别插件，类级别插件扩展方法：jQuery.extend()，对你级别插件扩展方法：jQuery.fn.extend()。请看下面的代码分别演示这两种插件的写法及调用方式。

<!-- html -->
<div id="div1">WEB前端梦之蓝</div>

插件功能：元素点击后将当前元素字体颜色设置为红色

<!-- js -->
/* 类级别插件封装 */
$.extend({
    helang:function (el) {
        el.click(function () {
            $(this).css("color","#ff0000");
        });
    }
});
/* 类级别插件调用 */
$.helang($("#div1"));

插件功能：元素点击后将当前元素背景颜色设置为黄色

<!-- js -->
/* 对象级别插件封装 */
$.fn.extend({
   helang:function () {
       $(this).click(function () {
           $(this).css("background-color","#ffff00");
       });
   }
});
/*对象级别插件调用 */
$("#div1").helang();

一年前我刚学习jQuery插件时，觉得无从下手。现在想想感觉一是当时买错了书，二是当时的基本功还太弱。所以在写插件之前要有扎实的代码功底，掌握面向对象编程技巧。上面代码示例的只是演示如何去编写和调用插件，更多的还需要自己去实现。

下篇预告：jQuery之美——数据遍历

更多精彩文章，敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦