今天心血来潮,想搞搞 jQuery 插件,以前都是直接用别人的,这回想试试自己动手丰衣足食。
我得弄明白这玩意儿到底是个简单来说,就是用 jQuery 框架写的一些小工具,能实现特定功能,像什么图片轮播、表单验证之类的,方便咱们直接拿来用。
准备工作
第一步,环境搭建。
也没啥特别的,就是得有个能写代码的地方,我平时用的是 VS Code,挺顺手的。然后,你得把 jQuery 库给弄进来,不然咋叫 jQuery 插件,对?
小编温馨提醒:本站只提供游戏介绍,下载游戏推荐89游戏,89游戏提供真人恋爱/绅士游戏/3A单机游戏大全,点我立即前往》》》绅士游戏下载专区
第二步,新建文件。
我就建俩文件,一个 HTML 文件,用来写页面结构,一个 JS 文件,用来写插件代码。文件名随便取的,我习惯叫 * 和 *。
开始动手
我琢磨着,先写个简单的,就弄个能改变元素背景颜色的小插件。
在 * 文件里,我开始敲代码:
- 先把 jQuery 的那个经典开头写上:
(function($){ ... })(jQuery);
, 这样能避免和其他库的冲突。 - 然后,写上插件的主体:
$.* = function() { ... };
这个myPlugin
就是插件的名字,以后就用它。
$.fn
,就是 $.prototype
, $.fn
是的简写,它是为方便开发人员使用而创建的。我平时就用$.fn
多些。
在里面,我写具体的功能:
javascript
(function($){
$.* = function(options) {
// 默认设置
var defaults = {
'color' : 'red'
// 合并参数
var settings = $.extend({}, defaults, options);
return *(function() {
// 改变背景颜色
$(this).css('background-color', *);
})(jQuery);
我这里用个 .each()
方法,这是 jQuery 里的遍历方法,意思是给每个选中的元素都执行一遍操作。然后用 .css()
方法改变背景颜色。
测试一下
在 * 文件里,我写几个 div,然后引入 jQuery 库和 * 文件。
在body中随便写几个div
在 HTML 文件里调用一下插件:
javascript
保存,打开浏览器,几个 div 的背景颜色都变蓝色!
我这小插件就算初步成功,虽然简单,但好歹是自己写出来的,还是有点小成就感的。以后再慢慢研究复杂的。
今天的分享就到这里。主要是想跟大家伙儿分享一下自己的实践过程,写的比较粗糙,大家凑合着看哈。