从零开始的jQuery插件封装
2018-10-02 本文已影响0人
洛桃桃
jQuery插件简易封装方法。
jQuery插件机制
-
jQuery.extend( [deep ], target, object1 [, objectN ] )Description: Merge the contents of two or more objects together into the first object.
描述：将两个或更多对象的合并到第一个对象中。
详情：jQuery-API-$.extend -
jQuery.fn.extend()Description: Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.
描述：将对象内容合并到jQuery原型中以提供新的方法。
详情：jQuery-API-$.fn.extend
插件结构
利用上述两个API我们可以方便地扩展jquery的方法。
(function ($) {
$.fn.extend({
"pluginName": function (options) {
var opts = $.extend({}, defaluts, options); //合并默认参数与自定义参数
return this.each(function () {
var $this = $(this); //当前被jQuery包装的dom对象
//操作dom ...
//...
});
}
});
//默认参数
var defaluts = {
//...
};
})(jQuery);
//调用
$('div').pluginName({});
完整示例
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 引入jQuery --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <title>从零开始的jQuery插件封装</title> <style> p { line-height: 1.5; text-align: center; } </style> </head> <body> <p class="defalut">DEFALUT</p> <p class="custom">CUSTOM</p> </body> <!-- 扩展jQuery插件：colored --> <script> (function ($) { $.fn.extend({ "colored": function (options) { var opts = $.extend({}, defaluts, options); return this.each(function () { var $this = $(this); $this.css({ backgroundColor: opts.background, color: opts.foreground }); }); } }); var defaluts = { foreground: 'red', background: 'yellow' }; })(jQuery); </script> <!-- 调用colored插件 --> <script> $('.defalut').colored(); $('.custom').colored({ foreground: 'white', background: 'black' }); </script> </html> -
效果
插件调用效果
