版权声明:黄河爱浪,[email protected], https://blog.csdn.net/u013350495/article/details/82533210
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”,关注后会在第一时间将最新文章推送给您哦